@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Dialog/BarcodeLayout/BarcodeLayoutDialog.razor.rz.scp.css */
/* Telerik supplies the dialog, grid and inputs. This is only what it does not: showing at a
   glance that a turned-off layout is inert. */

/* Dimmed by color, not opacity: opacity also dims the text below the contrast minimum, and the
   messagebox above already says the layout is turned off in words. */
.layout-off[b-pbnagqudfw] {
    color: var(--kendo-color-subtle, #595959);
}
/* /Components/Dialog/Labels/BulkBatchDialog.razor.rz.scp.css */
.dlg-backdrop[b-h2eyeb1702] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 1000;
}

.dlg[b-h2eyeb1702] {
    position: fixed;
    top: 7vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(920px, 92vw);
    max-height: 86vh;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .25);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .dlg.bulk-dlg[b-h2eyeb1702] {
        top: 6vh;
        width: min(980px, 96vw);
        max-height: 88vh;
    }

.dlg-header[b-h2eyeb1702] {
    position: relative;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .10);
    flex: 0 0 auto;
}

.dlg-title[b-h2eyeb1702] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.dlg-body[b-h2eyeb1702] {
    padding: 14px 16px;
    overflow: auto;
    flex: 1 1 auto;
}

.dlg-footer[b-h2eyeb1702] {
    padding: 12px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(0, 0, 0, .10);
    background: #fff;
    flex: 0 0 auto;
}

.muted[b-h2eyeb1702] {
    color: rgba(0, 0, 0, .62);
}

.bulk-question[b-h2eyeb1702] {
    margin-bottom: 10px;
    font-size: 0.96rem;
}

.btn[b-h2eyeb1702] {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    cursor: pointer;
    background: #374151;
    color: #f9fafb;
    transition: transform 0.08s ease, background-color 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease;
}

    .btn.primary[b-h2eyeb1702] {
        background: #005A9C;
        border-color: #005A9C;
    }

    .btn:disabled[b-h2eyeb1702],
    .btn[disabled][b-h2eyeb1702] {
        opacity: 0.55;
        cursor: default;
        transform: none;
        box-shadow: none;
    }

    .btn:not(:disabled):hover[b-h2eyeb1702] {
        transform: scale(1.02);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 6px 14px rgba(0, 0, 0, 0.35);
    }

    .btn.primary:not(:disabled):hover[b-h2eyeb1702] {
        background: #004377;
        border-color: #004377;
    }

.dlg-header-toast[b-h2eyeb1702] {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 99999;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    animation: toastIn-b-h2eyeb1702 140ms ease-out, toastOut-b-h2eyeb1702 260ms ease-in 2400ms forwards;
    max-width: min(420px, calc(100vw - 36px));
}

@keyframes toastIn-b-h2eyeb1702 {
    from {
        transform: translateY(8px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes toastOut-b-h2eyeb1702 {
    to {
        transform: translateY(8px);
        opacity: 0;
    }
}

.bulk-treeview-wrap[b-h2eyeb1702] {
    max-height: 660px;
    overflow: auto;
    border: 1px solid #d9dee7;
    border-radius: 10px;
    background: #fff;
    padding: 10px 12px;
}

.bulk-treeview[b-h2eyeb1702] {
    background: transparent;
}

.tv-group-template[b-h2eyeb1702],
.tv-child-template[b-h2eyeb1702] {
    display: flex;
    align-items: center;
    min-height: 30px;
}

.tv-group-template[b-h2eyeb1702] {
    width: 100%;
    font-weight: 600;
    color: #1f2a37;
}

.tv-group-name[b-h2eyeb1702] {
    flex: 1;
    min-width: 0;
}

.tv-group-count[b-h2eyeb1702] {
    color: #005A9C;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    margin-left: 8px;
}

.tv-child-number[b-h2eyeb1702] {
    color: #1f2a37;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .dlg.bulk-dlg[b-h2eyeb1702] {
        top: 4vh;
        width: 96vw;
        max-height: 90vh;
    }

    .bulk-treeview-wrap[b-h2eyeb1702] {
        max-height: 460px;
    }
}

.bulk-toolbar[b-h2eyeb1702] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* /Components/Dialog/Labels/ClearBatchDialog.razor.rz.scp.css */
.dlg-overlay[b-ns4lhp3fm2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dlg-modal[b-ns4lhp3fm2] {
    position: relative;
    background: var(--kendo-color-surface, #1f2933);
    border-radius: 8px;
    width: min(780px, 92vw);
    max-width: 780px;
    max-height: min(520px, 85vh);
    min-height: 360px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dlg-header[b-ns4lhp3fm2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kendo-color-border, #3a3a3a);
    overflow: hidden;
}

.dlg-header-left[b-ns4lhp3fm2] {
    min-width: 0;
}

.dlg-header-text[b-ns4lhp3fm2] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dlg-title[b-ns4lhp3fm2] {
    margin: 0;
    font-size: 1.1rem;
}

.dlg-sub[b-ns4lhp3fm2] {
    font-size: 0.85rem;
    color: #003C71;
}

    .dlg-sub .label[b-ns4lhp3fm2] {
        font-weight: 600;
        margin-right: 4px;
    }

.dlg-body[b-ns4lhp3fm2] {
    flex: 1;
    overflow: hidden;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Buttons */

.btn[b-ns4lhp3fm2] {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    cursor: pointer;
    background: #374151;
    color: #f9fafb;
    transition: transform 0.08s ease, background-color 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease;
}

    .btn.primary[b-ns4lhp3fm2] {
        background: #005A9C;
        border-color: #005A9C;
    }

    .btn:disabled[b-ns4lhp3fm2],
    .btn[disabled][b-ns4lhp3fm2] {
        opacity: 0.55;
        cursor: default;
        transform: none;
        box-shadow: none;
    }

    .btn:not(:disabled):hover[b-ns4lhp3fm2] {
        transform: scale(1.02);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 6px 14px rgba(0,0,0,0.35);
    }

    .btn.primary:not(:disabled):hover[b-ns4lhp3fm2] {
        background: #004377;
        border-color: #004377;
    }

.clearbatch-modal[b-ns4lhp3fm2] {
    width: min(520px, 92vw);
    max-width: 520px;
    max-height: min(240px, 70vh);
    min-height: unset;
    padding: 16px;
}

.clearbatch-text[b-ns4lhp3fm2] {
    font-size: 0.9rem;
    color: black;
    opacity: 0.9;
    padding: 12px 0 14px;
}

/* button row */
.clearbatch-actions[b-ns4lhp3fm2] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-bottom: 4px;
    flex-wrap: wrap;
}

.btn.danger[b-ns4lhp3fm2] {
    background: #8b1e1e;
    border-color: #8b1e1e;
    color: white;
}

    .btn.danger:not(:disabled):hover[b-ns4lhp3fm2] {
        background: #6f1717;
        border-color: #6f1717;
    }
/* /Components/Dialog/Labels/ContainerLabelsDialog.razor.rz.scp.css */
/* Dialog Main */

.dlg-overlay[b-u0fe36lqea] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dlg-modal[b-u0fe36lqea] {
    position: relative;
    background: var(--kendo-color-surface, #1f2933);
    border-radius: 8px;
    width: min(780px, 92vw);
    max-width: 780px;
    max-height: min(520px, 85vh);
    min-height: 420px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */

.dlg-header[b-u0fe36lqea] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kendo-color-border, #3a3a3a);
    overflow: hidden;
}

.dlg-header-left[b-u0fe36lqea] {
    min-width: 0;
}

.dlg-header-text[b-u0fe36lqea] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dlg-title[b-u0fe36lqea] {
    margin: 0;
    font-size: 1.1rem;
}

.dlg-sub[b-u0fe36lqea] {
    font-size: 0.85rem;
    color: #003C71;
}

    .dlg-sub .label[b-u0fe36lqea] {
        font-weight: 600;
        margin-right: 4px;
    }

/* Body */

.dlg-body[b-u0fe36lqea] {
    flex: 1;
    overflow: hidden;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Buttons */

.btn[b-u0fe36lqea] {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    cursor: pointer;
    background: #374151;
    color: #f9fafb;
    transition: transform 0.08s ease, background-color 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease;
}

    .btn.primary[b-u0fe36lqea] {
        background: #005A9C;
        border-color: #005A9C;
    }

    .btn:disabled[b-u0fe36lqea],
    .btn[disabled][b-u0fe36lqea] {
        opacity: 0.55;
        cursor: default;
        transform: none;
        box-shadow: none;
    }

    .btn:not(:disabled):hover[b-u0fe36lqea] {
        transform: scale(1.02);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 6px 14px rgba(0,0,0,0.35);
    }

    .btn.primary:not(:disabled):hover[b-u0fe36lqea] {
        background: #004377;
        border-color: #004377;
    }

/* Layout */

.label-layout[b-u0fe36lqea] {
    display: grid;
    grid-template-columns: minmax(340px, 420px) 1fr;
    gap: 16px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.label-left[b-u0fe36lqea],
.label-right[b-u0fe36lqea] {
    min-width: 0;
}

/* LEFT: info */

.label-form[b-u0fe36lqea] {
    display: grid;
    grid-template-columns: 70px 1fr;
    column-gap: 10px;
    row-gap: 10px;
    align-content: start;
    min-width: 0;
}

/* “input-like” containers */

.label-line[b-u0fe36lqea] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 36px;
    padding: .35rem .6rem;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 6px;
    background: rgba(0,0,0,.02);
    min-width: 0;
    box-sizing: border-box;
}

.label-value[b-u0fe36lqea] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.include-toggle[b-u0fe36lqea] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    user-select: none;
    font-size: .9rem;
    opacity: .95;
    white-space: nowrap;
}

    .include-toggle input[b-u0fe36lqea] {
        margin: 0;
    }

.input-warn[b-u0fe36lqea] {
    font-size: .85rem;
    opacity: .85;
    white-space: nowrap;
}

/* INLINE PDF PREVIEW under left side */
.label-preview-inline[b-u0fe36lqea] {
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,.02);
    width: 100%;
    max-width: 240px;
}

.label-preview-object[b-u0fe36lqea] {
    display: block;
    width: 100%;
    height: 130px;
    border: 0;
}

/* RIGHT: QR always */

.qr-preview[b-u0fe36lqea] {
    width: 260px; 
    height: 260px;
    display: grid;
    place-items: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    margin-left: auto;
}

/* Buttons under QR */
.label-actions-right[b-u0fe36lqea] {
    margin-top: 24px;
    margin-bottom: 2px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}


.dlg-header-toast[b-u0fe36lqea] {
    position: absolute;
    right: 14px;
    top: 18px;
    z-index: 99999;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.22);
    animation: toastIn-b-u0fe36lqea 140ms ease-out, toastOut-b-u0fe36lqea 260ms ease-in 2400ms forwards;
    max-width: min(420px, calc(100vw - 36px));
}

@keyframes toastIn-b-u0fe36lqea {
    from {
        transform: translateY(8px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes toastOut-b-u0fe36lqea {
    to {
        transform: translateY(8px);
        opacity: 0;
    }
}

/* label selection */
.label-line.label-line-select[b-u0fe36lqea] {
    border: 0;
    background: transparent;
    padding: 0;
    min-height: 0;
}

.label-select[b-u0fe36lqea] {
    width: 100%;
    max-width: 260px;
    min-height: 36px;
    padding: .35rem .6rem;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 6px;
    background: rgba(0,0,0,.02);
    box-sizing: border-box;
    font-size: .95rem;
    cursor: pointer;
}

    .label-select:focus[b-u0fe36lqea] {
        border-color: rgba(0,90,156,.55);
        box-shadow: 0 0 0 3px rgba(0,90,156,.12);
    }

    .label-select:disabled[b-u0fe36lqea] {
        opacity: 0.55;
        cursor: default;
    }
/* /Components/Dialog/Labels/ItemLabelDialog.razor.rz.scp.css */
/* Dialog Main */

.dlg-overlay[b-1ndws6y0mw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dlg-modal[b-1ndws6y0mw] {
    position: relative;
    background: var(--kendo-color-surface, #1f2933);
    border-radius: 8px;
    width: min(780px, 92vw);
    max-width: 780px;
    max-height: min(520px, 85vh);
    min-height: 420px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */

.dlg-header[b-1ndws6y0mw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kendo-color-border, #3a3a3a);
    overflow: hidden;
}

.dlg-header-left[b-1ndws6y0mw] {
    min-width: 0;
}

.dlg-header-text[b-1ndws6y0mw] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dlg-title[b-1ndws6y0mw] {
    margin: 0;
    font-size: 1.1rem;
}

.dlg-sub[b-1ndws6y0mw] {
    font-size: 0.85rem;
    color: #003C71;
}

    .dlg-sub .label[b-1ndws6y0mw] {
        font-weight: 600;
        margin-right: 4px;
    }

/* Body */

.dlg-body[b-1ndws6y0mw] {
    flex: 1;
    overflow: hidden;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Buttons */

.btn[b-1ndws6y0mw] {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    cursor: pointer;
    background: #374151;
    color: #f9fafb;
    transition: transform 0.08s ease, background-color 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease;
}

    .btn.primary[b-1ndws6y0mw] {
        background: #005A9C;
        border-color: #005A9C;
    }

    .btn:disabled[b-1ndws6y0mw],
    .btn[disabled][b-1ndws6y0mw] {
        opacity: 0.55;
        cursor: default;
        transform: none;
        box-shadow: none;
    }

    .btn:not(:disabled):hover[b-1ndws6y0mw] {
        transform: scale(1.02);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 6px 14px rgba(0,0,0,0.35);
    }

    .btn.primary:not(:disabled):hover[b-1ndws6y0mw] {
        background: #004377;
        border-color: #004377;
    }

/* Layout */

.label-layout[b-1ndws6y0mw] {
    display: grid;
    grid-template-columns: minmax(340px, 420px) 1fr;
    gap: 16px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.label-left[b-1ndws6y0mw],
.label-right[b-1ndws6y0mw] {
    min-width: 0;
}

/* LEFT: info */

.label-form[b-1ndws6y0mw] {
    display: grid;
    grid-template-columns: 70px 1fr;
    column-gap: 10px;
    row-gap: 10px;
    align-content: start;
    min-width: 0;
}

/* “input-like” containers */

.label-line[b-1ndws6y0mw] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 36px;
    padding: .35rem .6rem;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 6px;
    background: rgba(0,0,0,.02);
    min-width: 0;
    box-sizing: border-box;
}

.label-value[b-1ndws6y0mw] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.include-toggle[b-1ndws6y0mw] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    user-select: none;
    font-size: .9rem;
    opacity: .95;
    white-space: nowrap;
}

    .include-toggle input[b-1ndws6y0mw] {
        margin: 0;
    }

.input-warn[b-1ndws6y0mw] {
    font-size: .85rem;
    opacity: .85;
    white-space: nowrap;
}

/* The shared .label-input is width:100%, which in a flex row eats the whole box and pushes
   the toggle out of it. Size the field to its content instead and let it yield the rest of the
   row to the toggle - it may shrink under a narrow dialog but never grows.
   Width is set by the PLACEHOLDER ("Device Identifier", 17 chars), not the 14-char DI value:
   the placeholder is the longer of the two, and at 15ch it clipped to "Device Identifi".
   The .mono font makes ch units line up with real characters. */
.di-input[b-1ndws6y0mw] {
    flex: 0 1 18ch;
    width: 18ch;
    min-width: 6ch;
}

    .di-input:read-only[b-1ndws6y0mw] {
        opacity: .75;
        cursor: default;
    }

/* "No known DI" - pushed to the end of the row by the auto margin, but sized to its own content
   only. It must NOT flex-grow: this is a <label> wrapping the checkbox, so any width it takes is
   clickable, and a grown label puts an invisible hit area back over the DI field's placeholder. */
.di-nodi-toggle[b-1ndws6y0mw] {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    opacity: .9;
}

    .di-nodi-toggle input[b-1ndws6y0mw] {
        margin: 0;
        cursor: pointer;
    }

    .di-nodi-toggle:has(input:disabled)[b-1ndws6y0mw] {
        opacity: .6;
        cursor: default;
    }

/* Warning sits on its own grid row under the DI field (column 2 of .label-form) so it is
   free to wrap instead of running over the input. */
.di-warn-row[b-1ndws6y0mw] {
    grid-column: 2;
    margin-top: -4px;
}

    .di-warn-row .input-warn[b-1ndws6y0mw] {
        white-space: normal;
        overflow-wrap: anywhere;
    }

/* INLINE PDF PREVIEW under left side */
.label-preview-inline[b-1ndws6y0mw] {
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,.02);
    width: 100%;
    max-width: 240px;
}

.label-preview-object[b-1ndws6y0mw] {
    display: block;
    width: 100%;
    height: 130px;
    border: 0;
}

/* RIGHT: QR always */

.qr-preview[b-1ndws6y0mw] {
    width: 260px;
    height: 260px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.02);
    margin-left: auto;
    overflow: hidden;
}


/* Buttons under QR */
.label-actions-right[b-1ndws6y0mw] {
    margin-top: 24px;
    margin-bottom: 2px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}


.dlg-header-toast[b-1ndws6y0mw] {
    position: absolute;
    right: 14px;
    top: 18px;
    z-index: 99999;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.22);
    animation: toastIn-b-1ndws6y0mw 140ms ease-out, toastOut-b-1ndws6y0mw 260ms ease-in 2400ms forwards;
    max-width: min(420px, calc(100vw - 36px));
}

@keyframes toastIn-b-1ndws6y0mw {
    from {
        transform: translateY(8px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes toastOut-b-1ndws6y0mw {
    to {
        transform: translateY(8px);
        opacity: 0;
    }
}

/* label selection */
.label-line.label-line-select[b-1ndws6y0mw] {
    border: 0;
    background: transparent;
    padding: 0;
    min-height: 0;
}

.label-select[b-1ndws6y0mw] {
    width: 100%;
    max-width: 260px;
    min-height: 36px;
    padding: .35rem .6rem;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 6px;
    background: rgba(0,0,0,.02);
    box-sizing: border-box;
    font-size: .95rem;
    cursor: pointer;
}

    .label-select:focus[b-1ndws6y0mw] {
        border-color: rgba(0,90,156,.55);
        box-shadow: 0 0 0 3px rgba(0,90,156,.12);
    }

    .label-select:disabled[b-1ndws6y0mw] {
        opacity: 0.55;
        cursor: default;
    }


.mono[b-1ndws6y0mw] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.label-input[b-1ndws6y0mw] {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: .95rem;
}

.payload-box[b-1ndws6y0mw] {
    width: 100%;
    max-width: 240px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.98);
}

.payload-title[b-1ndws6y0mw] {
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1f2933;
}

.payload-text[b-1ndws6y0mw] {
    font-size: .85rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: #1f2933;
    line-height: 1.25;
}

.label-preview-object-big[b-1ndws6y0mw] {
    width: 100%;
    height: 260px;
    border: 0;
}
/* /Components/Dialog/Labels/LabelCatalogDialog.razor.rz.scp.css */
/* ============================
   Label Catalog Dialog (LCD)
   Regex-style layout for perfect column alignment
   ============================ */

/* ===== Modal overlay + shell (dlg-* markup) ===== */
.dlg-overlay[b-tg30bcqzut] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 9999;
}

.dlg-modal[b-tg30bcqzut] {
    width: min(920px, 100%);
    max-height: 85vh;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
}

.dlg-header[b-tg30bcqzut] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

.dlg-title[b-tg30bcqzut] {
    margin: 0;
    font-size: 1.05rem;
}

.dlg-body[b-tg30bcqzut] {
    padding: 14px 16px;
    overflow: auto;
}

.dlg-footer[b-tg30bcqzut] {
    padding: 12px 16px;
    border-top: 1px solid rgba(0,0,0,0.12);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ===== Shared controls (same as Regex) ===== */
.input[b-tg30bcqzut] {
    width: 100%;
    border: 1px solid rgba(0,0,0,0.22);
    border-radius: 8px;
    padding: 8px 10px;
    background: #fff;
    box-sizing: border-box;
}

    .input:focus[b-tg30bcqzut] {
        border-color: rgba(31,111,235,0.6);
        box-shadow: 0 0 0 3px rgba(31,111,235,0.15);
    }

.btn[b-tg30bcqzut] {
    border: 1px solid rgba(0,0,0,0.2);
    background: #f6f6f6;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}

    .btn:hover[b-tg30bcqzut] {
        background: #efefef;
    }

    .btn.primary[b-tg30bcqzut] {
        background: #1f6feb;
        color: #fff;
        border-color: rgba(0,0,0,0.12);
    }

        .btn.primary:hover[b-tg30bcqzut] {
            filter: brightness(0.96);
        }

    .btn[disabled][b-tg30bcqzut] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ===== THE IMPORTANT PART: Regex-style paired rows ===== */
.lc-form[b-tg30bcqzut] {
    display: flex;
    flex-direction: column;
    gap: 12px; /* same as Regex margin-bottom rhythm */
}

.form-row[b-tg30bcqzut] {
    display: flex;
    gap: 12px;
}

.form-col[b-tg30bcqzut] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Stack on small screens */
@media (max-width: 760px) {
    .form-row[b-tg30bcqzut] {
        flex-direction: column;
    }
}

/* label + inline warning/error (from Regex) */
.label-row[b-tg30bcqzut] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.inline-error[b-tg30bcqzut] {
    color: #c62828;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

/* invalid input state (from Regex) */
.input.input-invalid[b-tg30bcqzut] {
    border-color: rgba(198, 40, 40, 0.75);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15);
}

/* ===== Checkbox styling to match row height ===== */

/* This wrapper gives the "Active" control the same visual + height as an .input */
.chk-box[b-tg30bcqzut] {
    width: 100%;
    border: 1px solid rgba(0,0,0,0.22);
    border-radius: 8px;
    padding: 8px 10px;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px; /* matches typical input height */
}

    .chk-box:focus-within[b-tg30bcqzut] {
        border-color: rgba(31,111,235,0.6);
        box-shadow: 0 0 0 3px rgba(31,111,235,0.15);
    }

    .chk-box input[type="checkbox"][b-tg30bcqzut] {
        margin: 0;
    }

/* ===== Radios ===== */
.lc-radio[b-tg30bcqzut] {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.lc-radio-item[b-tg30bcqzut] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ===== Points readout ===== */
.lc-hint[b-tg30bcqzut] {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.14);
    background: rgba(31, 111, 235, 0.06);
    font-size: 0.9rem;
}

/* ===== Grid rows/cols box ===== */
.lc-gridbox[b-tg30bcqzut] {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.14);
    background: rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chk[b-tg30bcqzut] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-cluster[b-tg30bcqzut] {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: flex-end;
}

.lc-points-mini[b-tg30bcqzut] {
    font-size: 0.85rem;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.14);
    background: rgba(31, 111, 235, 0.06);
    white-space: nowrap;
}

.lc-gridbox.full[b-tg30bcqzut] {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    padding: 12px;
}

    .lc-gridbox.full .lc-grid-field[b-tg30bcqzut] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

@media (max-width: 900px) {
    .lc-gridbox.full[b-tg30bcqzut] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Dialog/Labels/PrintHistoryDialog.razor.rz.scp.css */
.dlg-backdrop[b-rgni8za8f8] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1000;
}

.dlg[b-rgni8za8f8] {
    position: fixed;
    top: 7vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(920px, 92vw);
    max-height: 86vh;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 55px rgba(0,0,0,.25);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dlg-header[b-rgni8za8f8] {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,.10);
    flex: 0 0 auto;
}

.dlg-title[b-rgni8za8f8] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.dlg-subheader[b-rgni8za8f8] {
    padding: 12px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0,0,0,.08);
    flex: 0 0 auto;
}

.dlg-body[b-rgni8za8f8] {
    padding: 14px 16px;
    overflow: auto;
    flex: 1 1 auto;
}

/* Footer layout (selector left, actions right) */
.dlg-footer[b-rgni8za8f8] {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(0,0,0,.10);
    background: #fff;
    flex: 0 0 auto;
}

.dlg-footer-left[b-rgni8za8f8] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
}

.dlg-footer-right[b-rgni8za8f8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Rows grid */
.rows[b-rgni8za8f8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 720px) {
    .rows[b-rgni8za8f8] {
        grid-template-columns: 1fr;
    }
}

/* Row card */
.row-card[b-rgni8za8f8] {
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.row-main[b-rgni8za8f8] {
    display: flex;
    flex-direction: column;
}

.row-template[b-rgni8za8f8] {
    font-weight: 700;
}

.row-number[b-rgni8za8f8] {
    opacity: .85;
    margin-top: 2px;
}

/* Inputs + buttons sizing/consistency */
.dlg-footer .input[b-rgni8za8f8] {
    width: 260px;
    max-width: 100%;
    height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.18);
    background: #fff;
    font-size: 14px;
}

    .dlg-footer .input:focus[b-rgni8za8f8] {
        border-color: rgba(0,0,0,0.35);
        box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
    }

.dlg-footer .btn[b-rgni8za8f8] {
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.18);
    background: #f6f6f6;
    color: #111;
    font-size: 14px;
    cursor: pointer;
}

    .dlg-footer .btn.primary[b-rgni8za8f8] {
        background: #1f6feb;
        color: #fff;
    }
.btn[b-rgni8za8f8] {
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

    .btn:hover[b-rgni8za8f8] {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0,0,0,0.12);
    }

    .dlg-footer .btn:disabled[b-rgni8za8f8],
    .dlg-footer .input:disabled[b-rgni8za8f8] {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .dlg-footer .btn:not(:disabled):hover[b-rgni8za8f8] {
        filter: brightness(0.98);
    }

    .dlg-footer .btn.primary:not(:disabled):hover[b-rgni8za8f8] {
        filter: brightness(0.95);
    }

/* /Components/Dialog/Labels/UnitLabelDialog.razor.rz.scp.css */
/* Compact dialog sized specifically for the simplified unit-label flow
   (catalog dropdown + QR preview + PDF preview + actions). */

/* Dialog Main */

.dlg-overlay[b-jnyqb6p6s4] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dlg-modal[b-jnyqb6p6s4] {
    position: relative;
    background: var(--kendo-color-surface, #1f2933);
    border-radius: 8px;
    width: min(560px, 92vw);
    max-width: 560px;
    max-height: 90vh;
    padding: 12px 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
}

/* Header */

.dlg-header[b-jnyqb6p6s4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--kendo-color-border, #3a3a3a);
}

.dlg-header-left[b-jnyqb6p6s4] {
    min-width: 0;
}

.dlg-header-text[b-jnyqb6p6s4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dlg-title[b-jnyqb6p6s4] {
    margin: 0;
    font-size: 1rem;
}

.dlg-sub[b-jnyqb6p6s4] {
    font-size: 0.8rem;
    color: #003C71;
    line-height: 1.25;
}

    .dlg-sub .label[b-jnyqb6p6s4] {
        font-weight: 600;
        margin-right: 4px;
    }

/* Body */

.dlg-body[b-jnyqb6p6s4] {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Buttons */

.btn[b-jnyqb6p6s4] {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    cursor: pointer;
    background: #374151;
    color: #f9fafb;
    transition: transform 0.08s ease, background-color 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease;
}

    .btn.primary[b-jnyqb6p6s4] {
        background: #005A9C;
        border-color: #005A9C;
    }

    .btn:disabled[b-jnyqb6p6s4],
    .btn[disabled][b-jnyqb6p6s4] {
        opacity: 0.55;
        cursor: default;
        transform: none;
        box-shadow: none;
    }

    .btn:not(:disabled):hover[b-jnyqb6p6s4] {
        transform: scale(1.02);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 6px 14px rgba(0,0,0,0.35);
    }

    .btn.primary:not(:disabled):hover[b-jnyqb6p6s4] {
        background: #004377;
        border-color: #004377;
    }

/* Layout — 2 columns, QR on the right, catalog + preview on the left.
   Stretch the left column to match the right column's height so the
   PDF preview can grow into the available vertical space. */

.label-layout[b-jnyqb6p6s4] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

.label-left[b-jnyqb6p6s4] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.label-right[b-jnyqb6p6s4] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* LEFT: catalog dropdown at top */

.label-form[b-jnyqb6p6s4] {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 8px;
    row-gap: 6px;
    align-content: start;
    min-width: 0;
}

    .label-form label[b-jnyqb6p6s4] {
        align-self: center;
        font-size: 0.85rem;
    }

.label-line[b-jnyqb6p6s4] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 30px;
    min-width: 0;
    box-sizing: border-box;
}

/* PDF preview — grows to fill leftover vertical space in the left column,
   with a healthy top margin so it isn't crammed against the dropdown. */
.label-preview-inline[b-jnyqb6p6s4] {
    margin-top: 22px;
    flex: 1 1 auto;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255,255,255,.02);
    width: 100%;
    min-height: 140px;
    display: flex;
}

.label-preview-object[b-jnyqb6p6s4] {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 140px;
    border: 0;
}

/* RIGHT: QR */

.qr-preview[b-jnyqb6p6s4] {
    width: 180px;
    height: 180px;
    display: grid;
    place-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

.label-actions-right[b-jnyqb6p6s4] {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* label selection */
.label-line.label-line-select[b-jnyqb6p6s4] {
    padding: 0;
    min-height: 0;
}

.label-select[b-jnyqb6p6s4] {
    width: 100%;
    max-width: 260px;
    min-height: 30px;
    padding: .25rem .5rem;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 6px;
    background: rgba(0,0,0,.02);
    box-sizing: border-box;
    font-size: .9rem;
    cursor: pointer;
}

    .label-select:focus[b-jnyqb6p6s4] {
        border-color: rgba(0,90,156,.55);
        box-shadow: 0 0 0 3px rgba(0,90,156,.12);
    }

    .label-select:disabled[b-jnyqb6p6s4] {
        opacity: 0.55;
        cursor: default;
    }
/* /Components/Dialog/Products/AccountProductInUseDialog.razor.rz.scp.css */
.dlg-overlay[b-1rrqz8eo1h] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dlg-modal[b-1rrqz8eo1h] {
    background: var(--kendo-color-surface-alt, #ffffff);
    color: var(--kendo-color-on-app-surface, #1c1c1c);
    border-radius: 8px;
    width: min(820px, 92vw);
    max-height: 86vh;
    padding: 16px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dlg-header[b-1rrqz8eo1h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kendo-color-border, #d1d1d1);
}

.dlg-title[b-1rrqz8eo1h] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.dlg-close[b-1rrqz8eo1h] {
    background: transparent;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    padding: 0 6px;
}

.dlg-close:hover[b-1rrqz8eo1h] {
    color: #c8102e;
}

.dlg-warning[b-1rrqz8eo1h] {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #c8102e;
    background-color: #fdecee;
    color: #c8102e;
    border-radius: 4px;
    font-size: 0.9rem;
}

.dlg-warning--shared[b-1rrqz8eo1h] {
    margin: 12px 0;
    border-color: #b54708;
    background-color: #fef3c7;
    color: #92400e;
}

.shared-parent-list[b-1rrqz8eo1h] {
    display: block;
    margin-top: 4px;
    font-weight: 500;
}

.dlg-body[b-1rrqz8eo1h] {
    margin-top: 12px;
    overflow-y: auto;
    flex: 1;
}

.dlg-body p[b-1rrqz8eo1h] {
    margin: 0 0 10px 0;
}

.dlg-body .muted[b-1rrqz8eo1h] {
    color: #6b7280;
}

.busy-line[b-1rrqz8eo1h] {
    margin-top: 12px;
    font-style: italic;
    color: #6b7280;
}

.dlg-grid[b-1rrqz8eo1h] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.dlg-grid th[b-1rrqz8eo1h],
.dlg-grid td[b-1rrqz8eo1h] {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--kendo-color-border, #e5e7eb);
    vertical-align: middle;
}

.dlg-grid thead th[b-1rrqz8eo1h] {
    font-weight: 600;
    background: var(--kendo-color-surface, #f5f5f5);
    color: var(--kendo-color-on-app-surface, #1c1c1c);
}

.dlg-grid tbody tr:hover[b-1rrqz8eo1h] {
    background: rgba(0, 0, 0, 0.03);
}

.col-template[b-1rrqz8eo1h] { width: auto; }
.col-type[b-1rrqz8eo1h]     { width: 110px; white-space: nowrap; }
.col-role[b-1rrqz8eo1h]     { width: 110px; white-space: nowrap; }
.col-actions[b-1rrqz8eo1h]  { width: 180px; white-space: nowrap; }

.col-actions .btn + .btn[b-1rrqz8eo1h] {
    margin-left: 6px;
}

.dlg-footer[b-1rrqz8eo1h] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--kendo-color-border, #d1d1d1);
}

/* Buttons */
.btn[b-1rrqz8eo1h] {
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--kendo-color-base, #f5f5f5);
    color: var(--kendo-color-on-base, #1c1c1c);
    border-color: var(--kendo-color-border, #d1d1d1);
    transition: background-color 0.08s ease, border-color 0.08s ease, transform 0.08s ease;
}

.btn:hover:not(:disabled)[b-1rrqz8eo1h] {
    background: var(--kendo-color-base-hover, #e8e8e8);
}

.btn:disabled[b-1rrqz8eo1h] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-outline[b-1rrqz8eo1h] {
    background: transparent;
    border-color: var(--kendo-color-border, #c4c4c4);
}

.btn-outline:hover:not(:disabled)[b-1rrqz8eo1h] {
    background: rgba(0, 0, 0, 0.04);
}

.btn-danger[b-1rrqz8eo1h] {
    background: #c8102e;
    border-color: #c8102e;
    color: #fff;
}

.btn-danger:hover:not(:disabled)[b-1rrqz8eo1h] {
    background: #a00d25;
    border-color: #a00d25;
}

.btn-danger:disabled[b-1rrqz8eo1h] {
    background: #c8102e;
    border-color: #c8102e;
    color: #fff;
}

.btn-deactivate[b-1rrqz8eo1h] {
    background: #000;
    border-color: #000;
    color: #fff;
}

.btn-deactivate:hover:not(:disabled)[b-1rrqz8eo1h] {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

.btn-deactivate:disabled[b-1rrqz8eo1h] {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* Role pills */
.ap-role-pill[b-1rrqz8eo1h] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

.ap-role-pill--primary[b-1rrqz8eo1h] {
    background-color: #D73D37; /* still coral; #FF6358 was 2.93:1 under white text (SC 1.4.3) */
    color: #fff;
}

.ap-role-pill--substitute[b-1rrqz8eo1h] {
    background-color: #fff;
    color: #656565;
    border: 1px solid #c4c4c4;
}

/* Promotion radio list */
.ap-promote-options[b-1rrqz8eo1h] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 4px;
}

.ap-promote-option[b-1rrqz8eo1h] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
}

.ap-promote-option:hover[b-1rrqz8eo1h] {
    background: rgba(0, 0, 0, 0.04);
}

.ap-promote-option input[type="radio"][b-1rrqz8eo1h] {
    margin: 0;
}
/* /Components/Dialog/Products/AccountProductTemplateUsageDialog.razor.rz.scp.css */
.dlg-overlay[b-iu9pkpvq6p] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dlg-modal[b-iu9pkpvq6p] {
    background: var(--kendo-color-surface-alt, #ffffff);
    color: var(--kendo-color-on-app-surface, #1c1c1c);
    border-radius: 8px;
    width: min(900px, 94vw);
    max-height: 86vh;
    padding: 16px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dlg-header[b-iu9pkpvq6p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kendo-color-border, #d1d1d1);
}

.dlg-title[b-iu9pkpvq6p] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.dlg-close[b-iu9pkpvq6p] {
    background: transparent;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    padding: 0 6px;
}

.dlg-close:hover[b-iu9pkpvq6p] {
    color: #c8102e;
}

.dlg-body[b-iu9pkpvq6p] {
    margin-top: 12px;
    overflow-y: auto;
    flex: 1;
}

.dlg-body p[b-iu9pkpvq6p] {
    margin: 0 0 10px 0;
}

.dlg-body .muted[b-iu9pkpvq6p] {
    color: #6b7280;
}

.dlg-grid[b-iu9pkpvq6p] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.dlg-grid th[b-iu9pkpvq6p],
.dlg-grid td[b-iu9pkpvq6p] {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--kendo-color-border, #e5e7eb);
    vertical-align: middle;
}

.dlg-grid thead th[b-iu9pkpvq6p] {
    font-weight: 600;
    background: var(--kendo-color-surface, #f5f5f5);
    color: var(--kendo-color-on-app-surface, #1c1c1c);
}

.dlg-grid tbody tr:hover[b-iu9pkpvq6p] {
    background: rgba(0, 0, 0, 0.03);
}

.col-parent[b-iu9pkpvq6p]   { width: 180px; }
.col-template[b-iu9pkpvq6p] { width: auto; }
.col-type[b-iu9pkpvq6p]     { width: 100px; white-space: nowrap; }
.col-role[b-iu9pkpvq6p]     { width: 100px; white-space: nowrap; }
.col-qty[b-iu9pkpvq6p]      { width: 60px; white-space: nowrap; text-align: right; }
.col-actions[b-iu9pkpvq6p]  { width: 90px; white-space: nowrap; }

.dlg-footer[b-iu9pkpvq6p] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--kendo-color-border, #d1d1d1);
}

.btn[b-iu9pkpvq6p] {
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--kendo-color-base, #f5f5f5);
    color: var(--kendo-color-on-base, #1c1c1c);
    border-color: var(--kendo-color-border, #d1d1d1);
    transition: background-color 0.08s ease, border-color 0.08s ease;
}

.btn:hover:not(:disabled)[b-iu9pkpvq6p] {
    background: var(--kendo-color-base-hover, #e8e8e8);
}

.btn-outline[b-iu9pkpvq6p] {
    background: transparent;
    border-color: var(--kendo-color-border, #c4c4c4);
}

.btn-outline:hover:not(:disabled)[b-iu9pkpvq6p] {
    background: rgba(0, 0, 0, 0.04);
}

.ap-role-pill[b-iu9pkpvq6p] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

.ap-role-pill--primary[b-iu9pkpvq6p] {
    background-color: #D73D37; /* still coral; #FF6358 was 2.93:1 under white text (SC 1.4.3) */
    color: #fff;
}

.ap-role-pill--substitute[b-iu9pkpvq6p] {
    background-color: #fff;
    color: #656565;
    border: 1px solid #c4c4c4;
}
/* /Components/Dialog/Regex/RegexDialog.razor.rz.scp.css */
.dlg-overlay[b-rv0h89c1qf] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dlg-modal[b-rv0h89c1qf] {
    background: var(--kendo-color-surface, #1f2933);
    border-radius: 8px;
    width: min(900px, 92vw);
    min-width: min(640px, 92vw);
    max-width: 900px;
    max-height: 80vh;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dlg-header[b-rv0h89c1qf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    overflow: hidden;
}

.dlg-header-text[b-rv0h89c1qf] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dlg-title[b-rv0h89c1qf] {
    margin: 0;
    font-size: 1.1rem;
}

.dlg-toolbar[b-rv0h89c1qf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.dlg-add[b-rv0h89c1qf] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dlg-sub[b-rv0h89c1qf] {
    font-size: 0.85rem;
    color: #003C71;
}

    .dlg-sub .label[b-rv0h89c1qf] {
        font-weight: 600;
        margin-right: 4px;
    }



    .dlg-grid th[b-rv0h89c1qf],
    .dlg-grid td[b-rv0h89c1qf] {
        padding: 6px 8px;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

/* #595959, not #6C757D: the lighter gray is 4.49:1 on the toolbar's #FAFAFA (SC 1.4.3). */
.k-text-muted[b-rv0h89c1qf] {
    color: #595959;
}


.dlg-header[b-rv0h89c1qf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kendo-color-border, #3a3a3a);
}

.dlg-header-left[b-rv0h89c1qf] {
    min-width: 0;
}

.dlg-header-right[b-rv0h89c1qf] {
    display: flex;
    align-items: flex-start;
}

.dlg-header-tabs[b-rv0h89c1qf] {
    display: flex;
    gap: 6px;
}

.header-tab[b-rv0h89c1qf] {
    padding: 6px 10px;
    font-size: 0.8rem;
    border-radius: 6px;
}

    /* Clear active state */
    .header-tab.active[b-rv0h89c1qf] {
        background: #003C71;
        border-color: #003C71;
        color: white;
    }




.btn[b-rv0h89c1qf] {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    cursor: pointer;
    background: #374151;
    color: #f9fafb;
    transition: transform 0.08s ease, background-color 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease;
}

    .btn.primary[b-rv0h89c1qf] {
        background: #005A9C;
        border-color: #005A9C;
    }


    .btn:disabled[b-rv0h89c1qf],
    .btn[disabled][b-rv0h89c1qf] {
        opacity: 0.55;
        cursor: default;
        transform: none;
        box-shadow: none;
    }

    .btn:not(:disabled):hover[b-rv0h89c1qf] {
        transform: scale(1.02);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 6px 14px rgba(0,0,0,0.35);
    }

    .btn.primary:not(:disabled):hover[b-rv0h89c1qf] {
        background: #004377;
        border-color: #004377;
    }

/* Toolbar hover warning */
.toolbar-warning[b-rv0h89c1qf] {
    color: #C9302C !important;
    opacity: 1 !important;
    font-weight: 600;
}

/* Optional: smooth transition between normal and warning */
.dlg-toolbar .k-text-muted.small[b-rv0h89c1qf] {
    transition: color 120ms ease, opacity 120ms ease;
}
/* /Components/Dialog/Regex/RegexLibraryDialog.razor.rz.scp.css */
/* ===== Shared Modal Styles ===== */
.modal-backdrop[b-z8e74tkg66] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 9999;
}

.modal-shell[b-z8e74tkg66] {
    width: min(920px, 100%);
    max-height: 85vh;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
}

.modal-header[b-z8e74tkg66] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

    .modal-header h2[b-z8e74tkg66] {
        margin: 0;
        font-size: 1.05rem;
    }

.modal-x[b-z8e74tkg66] {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 8px;
}

    .modal-x:hover[b-z8e74tkg66] {
        background: rgba(0,0,0,0.06);
    }

.modal-body[b-z8e74tkg66] {
    padding: 14px 16px;
    overflow: auto;
}

.modal-footer[b-z8e74tkg66] {
    padding: 12px 16px;
    border-top: 1px solid rgba(0,0,0,0.12);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ===== Shared Form Styles ===== */
.form-row[b-z8e74tkg66] {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.form-col[b-z8e74tkg66] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input[b-z8e74tkg66] {
    width: 100%;
    border: 1px solid rgba(0,0,0,0.22);
    border-radius: 8px;
    padding: 8px 10px;
    background: #fff;
}

    .input:focus[b-z8e74tkg66] {
        border-color: rgba(31,111,235,0.6);
        box-shadow: 0 0 0 3px rgba(31,111,235,0.15);
    }

    .input.mono[b-z8e74tkg66] {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.9rem;
    }

/* Checkbox row */
.chk[b-z8e74tkg66] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== Shared Buttons ===== */
.btn[b-z8e74tkg66] {
    border: 1px solid rgba(0,0,0,0.2);
    background: #f6f6f6;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}

    .btn:hover[b-z8e74tkg66] {
        background: #efefef;
    }

    .btn.primary[b-z8e74tkg66] {
        background: #1f6feb;
        color: white;
        border-color: rgba(0,0,0,0.12);
    }

        .btn.primary:hover[b-z8e74tkg66] {
            filter: brightness(0.96);
        }

    .btn[disabled][b-z8e74tkg66] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ===== Regex Library Dialog tweaks ===== */


/* Put multiline + active checkbox on the same row with spacing */
.checkbox-row[b-z8e74tkg66] {
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* Warning shown only when rule is being deactivated (edit mode) */
.warn-box[b-z8e74tkg66] {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.18);
    background: rgba(255, 193, 7, 0.20);
    font-size: 0.9rem;
}

/* Checkbox cluster sits in the "Options" column */
.checkbox-cluster[b-z8e74tkg66] {
    display: flex;
    gap: 80px;
    align-items: center;
    /* push checkboxes to the far right of their column */
    justify-content: flex-end;
}


/* Keep warn box from feeling huge in the tighter layout */
.warn-box[b-z8e74tkg66] {
    margin-top: 10px;
}

/* label + inline error */
.label-row[b-z8e74tkg66] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.inline-error[b-z8e74tkg66] {
    color: #c62828;
    font-size: 0.82rem;
    font-weight: 600;
}

/* invalid input state */
.input.input-invalid[b-z8e74tkg66] {
    border-color: rgba(198, 40, 40, 0.75);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15);
}
/* /Components/Dialog/Regex/RegexManualEntryView.razor.rz.scp.css */
/* Scoped copy of the dialog's button styling so Save/Disable render correctly inside this view. */
.btn[b-67ojw1i1zl] {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    cursor: pointer;
    background: #374151;
    color: #f9fafb;
    transition: transform 0.08s ease, background-color 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease;
}

    .btn.primary[b-67ojw1i1zl] {
        background: #005A9C;
        border-color: #005A9C;
    }

    .btn:disabled[b-67ojw1i1zl],
    .btn[disabled][b-67ojw1i1zl] {
        opacity: 0.55;
        cursor: default;
        transform: none;
        box-shadow: none;
    }

    .btn:not(:disabled):hover[b-67ojw1i1zl] {
        transform: scale(1.02);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 6px 14px rgba(0,0,0,0.35);
    }

    .btn.primary:not(:disabled):hover[b-67ojw1i1zl] {
        background: #004377;
        border-color: #004377;
    }

.regex-actions[b-67ojw1i1zl] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.regex-alt-row .regex-alt-label[b-67ojw1i1zl] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--kendo-color-subtle, #595959);
    padding-left: 14px;
}

/* Alt rows read as a continuation of the LOT row above them. */
.regex-alt-row td[b-67ojw1i1zl] {
    border-top: none;
    padding-top: 2px;
}

/* Slim outline squares, pushed to the far end so + and - line up across rows. */
.btn-square[b-67ojw1i1zl] {
    width: 24px;
    height: 24px;
    padding: 0;
    line-height: 1;
    font-size: 16px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    margin-left: auto;
}

.btn-square.add[b-67ojw1i1zl] {
    border: 1px solid #15803d;
    color: #15803d;
}

.btn-square.add:hover[b-67ojw1i1zl] {
    background: rgba(22, 163, 74, 0.12);
}

.btn-square.remove[b-67ojw1i1zl] {
    border: 1px solid #991b1b;
    color: #dc2626;
}

.btn-square.remove:hover[b-67ojw1i1zl] {
    background: rgba(220, 38, 38, 0.12);
}
/* /Components/Dialog/Regex/RegexRuleSelectionView.razor.rz.scp.css */
.regex-select-summary[b-vbpad7g8n8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.regex-select-header[b-vbpad7g8n8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.regex-select-title[b-vbpad7g8n8] {
    margin: 0;
}

.regex-select-grid[b-vbpad7g8n8] {
    width: 100%;
    border-collapse: collapse;
}

.regex-friendly[b-vbpad7g8n8] {
    font-size: 0.9rem;
}


.dlg-body[b-vbpad7g8n8] {
    margin: 12px 0;
    overflow-y: hidden;
    overflow-x: hidden;
}

.dlg-footer[b-vbpad7g8n8] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}



.dlg-grid[b-vbpad7g8n8] {
    width: 100%;
    border-collapse: collapse;
}


.btn[b-vbpad7g8n8] {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    cursor: pointer;
    background: #374151;
    color: #f9fafb;
    transition: transform 0.08s ease, background-color 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease;
}

    .btn.primary[b-vbpad7g8n8] {
        background: #005A9C;
        border-color: #005A9C;
    }


    .btn:disabled[b-vbpad7g8n8],
    .btn[disabled][b-vbpad7g8n8] {
        opacity: 0.55;
        cursor: default;
        transform: none;
        box-shadow: none;
    }

    .btn:not(:disabled):hover[b-vbpad7g8n8] {
        transform: scale(1.02);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 6px 14px rgba(0,0,0,0.35);
    }

    .btn.primary:not(:disabled):hover[b-vbpad7g8n8] {
        background: #004377;
        border-color: #004377;
    }

    /* highlight for selected field type */
.regex-fieldtype.is-selected[b-vbpad7g8n8] {
    font-weight: 700;
    color: #005A9C;
    text-shadow: 0 0 0.5px rgba(0, 90, 156, 0.35);
}

/* action buttons */
.regex-inline-actions .btn + .btn[b-vbpad7g8n8] {
    margin-left: 6px;
}


/* error/success message for save */

.inline-edit-row[b-vbpad7g8n8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Multiline uses two boxes + toggle; let the row wrap and drop a long validation
   message onto its own full-width line instead of overflowing the dialog. */
.inline-edit-row.multiline[b-vbpad7g8n8] {
    flex-wrap: wrap;
    row-gap: 4px;
}

    .inline-edit-row.multiline .k-textbox[b-vbpad7g8n8] {
        max-width: 160px;
    }

    .inline-edit-row.multiline .inline-msg-inline[b-vbpad7g8n8] {
        flex-basis: 100%;
        white-space: normal;
        line-height: 1.3;
    }

.inline-msg-inline[b-vbpad7g8n8] {
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

    .inline-msg-inline.is-visible[b-vbpad7g8n8] {
        opacity: 1;
    }

    .inline-msg-inline.is-fading[b-vbpad7g8n8] {
        opacity: 0;
    }

    .inline-msg-inline.is-ok[b-vbpad7g8n8] {
        color: #0A58CA;
    }

    .inline-msg-inline.is-error[b-vbpad7g8n8] {
        color: #b42318;
    }

/* alternate-format rows read as a continuation of the LOT row above them */
.regex-alt-row .regex-alt-label[b-vbpad7g8n8] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--kendo-color-subtle, #595959);
    padding-left: 14px;
}

.regex-alt-row td[b-vbpad7g8n8] {
    border-top: none;
}

/* multiline toggle inside the inline editor */
.btn.tiny[b-vbpad7g8n8] {
    font-size: 11px;
    padding: 2px 8px;
    line-height: 1.4;
}

.btn.tiny.active[b-vbpad7g8n8] {
    background: #005A9C;
    border-color: #005A9C;
    color: #fff;
}

/* Slim outline squares, pushed to the far end so + and - line up across rows. */
.regex-inline-actions[b-vbpad7g8n8] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-square[b-vbpad7g8n8] {
    width: 24px;
    height: 24px;
    padding: 0;
    line-height: 1;
    font-size: 16px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    margin-left: auto;
}

.btn-square.add[b-vbpad7g8n8] {
    border: 1px solid #15803d;
    color: #15803d;
}

.btn-square.add:hover[b-vbpad7g8n8] {
    background: rgba(22, 163, 74, 0.12);
}

.btn-square.remove[b-vbpad7g8n8] {
    border: 1px solid #991b1b;
    color: #dc2626;
}

.btn-square.remove:hover[b-vbpad7g8n8] {
    background: rgba(220, 38, 38, 0.12);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The shell is exactly the viewport and only .content scrolls, so the DOCUMENT must never be scrollable. An absolutely
   positioned element with no positioned ancestor (Bootstrap's .visually-hidden, as in "(opens in a new tab)") takes
   <body> as its containing block, escapes every overflow:hidden below, and lengthens the document; a jump to a #fragment
   then scrolls the document too, pushing the app bar and drawer up over blank space. position:relative makes the shell
   that containing block (the same box <body>'s was, so overlays such as TelerikLoaderContainer land where they always
   have), and overflow:CLIP trims the excess without making .page a scroll container: overflow:hidden would still be
   scrolled by a fragment jump, which is the bug. Fixed dialogs and Telerik popups (rendered outside .page) are untouched. */
.page[b-pui3qmsk44] {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: clip;
}

/* The <header> landmark around the app bar takes over the bar's place in the column. */
.page-header-bar[b-pui3qmsk44] {
    flex-shrink: 0;
}

main:focus[b-pui3qmsk44] {
    outline: none;
}

main[b-pui3qmsk44] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.content[b-pui3qmsk44] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

[b-pui3qmsk44] .page-navbar {
    flex-shrink: 0;
    position: relative;
    box-shadow: none;

    /*
        Couldn't use border-bottom directly on .page-navbar because it was
        disappearing when the main content of the page was scrolled.
     */
    &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-bottom: 1px solid #e5e7eb;
    }
}

[b-pui3qmsk44] .page-drawer {
    flex: 1;
    overflow: hidden;
}

[b-pui3qmsk44] .k-drawer-wrapper {
    height: 100%;
}

/* min() rather than a flat 350px: a flat minimum forced sideways scrolling at 320 CSS px (400% zoom),
   which fails WCAG 1.4.10 Reflow. Wide screens keep the 350px floor. */
[b-pui3qmsk44] .k-drawer-content {
    height: 100%;
    min-width: min(350px, 100%);
}

.page-navbar-logo-link[b-pui3qmsk44] {
    text-decoration: none;
    color: inherit;
}

.page-navbar-logo[b-pui3qmsk44] {
    width: 140px;
}

.app-bar-separator[b-pui3qmsk44] {
    height: 25px;
    background-color: #d1d5db;
    margin: 0;
    width: 2px;
    border-radius: 4px;
}

[b-pui3qmsk44] .impersonate-dropdown-button > .k-button-text,
[b-pui3qmsk44] .change-location-button > .k-button-text {
    display: none;
}

.popup-profile-trigger[b-pui3qmsk44],
[b-pui3qmsk44] .popup-profile-trigger {
    padding: 3px;
    border-radius: 9999px;
}

.profile-dropdown-username[b-pui3qmsk44] {
    font-size: 0.875rem;
    line-height: 1.1rem;
    color: #111827;
    margin: 0;
    padding: 0;
}

.profile-dropdown-account-name[b-pui3qmsk44] {
    font-size: 0.875rem;
    line-height: 1.1rem;
    color: #4b5563;
    margin: 0;
    padding: 0;
}

.profile-dropdown-action[b-pui3qmsk44],
[b-pui3qmsk44] .profile-dropdown-action {
    width: 100%;
    justify-content: left;
}

.drawer-items-header[b-pui3qmsk44] {
    padding: 1rem 1rem 0.25rem;
    margin: 0;
    font-weight: 500;
    color: #6b7280;
    text-wrap: nowrap;
}

.drawer-items-mini-separator-container[b-pui3qmsk44] {
    display: none;
}

.k-drawer-mini .drawer-items-header[b-pui3qmsk44] {
    display: none;
}

.k-drawer-mini .drawer-items-mini-separator-container[b-pui3qmsk44] {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.k-drawer-mini .drawer-items-mini-separator[b-pui3qmsk44] {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #e5e7eb;
}

.page-drawer-scroll-content[b-pui3qmsk44] {
    padding-top: 1rem;
    padding-bottom: 1rem;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;

    /* Use thin scrollbar in all browsers */
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f3f4f6;
}

#blazor-error-ui[b-pui3qmsk44] {
    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-pui3qmsk44] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
}

/*
    The drawer defaults to expanded because that's the correct first paint for desktop, but the
    server can't tell a phone from a desktop while prerendering. CSS can, so it covers the gap:
    .drawer-breakpoint-pending sits on the drawer for the whole prerendered paint and until the
    circuit connects, and only at phone widths does it hide the drawer. Desktop is left untouched
    and keeps its natural content-driven width, so there is no magic number here to drift.

    Width 0 rather than display:none keeps Telerik's layout intact, and it matches the width the
    drawer settles on once MobileMediaQueryChange collapses it — so the class dropping off causes
    no visible movement. If interop never lands at all, both sides still paint correctly.
*/
@media (max-width: 767.98px) {
    [b-pui3qmsk44] .page-drawer.drawer-breakpoint-pending .k-drawer-wrapper {
        width: 0;
    }

    [b-pui3qmsk44] .page-drawer.drawer-breakpoint-pending .k-drawer {
        border-inline-end-width: 0;
    }
}

@media (min-width: 768px) {
    .content[b-pui3qmsk44] {
        padding: 2rem 2rem 3rem;
    }

    .page-navbar-logo[b-pui3qmsk44] {
        width: 160px;
    }

    [b-pui3qmsk44] .impersonate-dropdown-button > .k-button-text,
    [b-pui3qmsk44] .change-location-button > .k-button-text {
        display: block;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-cfr3pjxbop] {
    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-cfr3pjxbop] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

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

.bi[b-cfr3pjxbop] {
    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-cfr3pjxbop] {
    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-cfr3pjxbop] {
    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-cfr3pjxbop] {
    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");
}

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

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

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

    .nav-item[b-cfr3pjxbop]  .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-cfr3pjxbop]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

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

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

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

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

    .nav-scrollable[b-cfr3pjxbop] {
        /* 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/Pages/Admin/AdminGridColumnsPage.razor.rz.scp.css */
/* Role chips sit on .bg-light, where Bootstrap's text-primary (4.3:1) and a faded text-secondary fall
   below 4.5:1. The border keeps the hue; the text uses the app's contrast-checked tokens. */
.role-chip--primary[b-eqr0f4ekeg] {
    color: var(--cc-link);
}

.role-chip--muted[b-eqr0f4ekeg] {
    color: var(--kendo-color-subtle);
}

/* The role name loads that role's loadout: a real button, styled as the chip's text. */
.role-chip__load[b-eqr0f4ekeg] {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
/* /Components/Pages/Admin/AdminLabelCatalogPage.razor.rz.scp.css */
.lc-toolbar[b-k8uvo5es9n] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 12px 0 18px 0;
}

.lc-left[b-k8uvo5es9n] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lc-label[b-k8uvo5es9n] {
    font-size: 0.9rem;
    opacity: 0.85;
}

.lc-search[b-k8uvo5es9n] {
    width: 320px;
    max-width: min(420px, 70vw);
}

.lc-card-grid[b-k8uvo5es9n] {
    display: grid;
    grid-template-columns: repeat(2, minmax(420px, 1fr));
    max-width: 1200px;
    width: 100%;
    justify-content: center;
    gap: 14px 18px;
    margin: 0 auto;
    padding: 0 10px;
}

/* Card */
.lc-card[b-k8uvo5es9n] {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.14);
    background: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,0.08);
    cursor: pointer;
    user-select: none;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

    .lc-card:hover[b-k8uvo5es9n],
    .lc-card:focus[b-k8uvo5es9n] {
        z-index: 50;
        border-color: rgba(31,111,235,0.35);
        box-shadow: 0 18px 40px rgba(0,0,0,0.16);
        transform: translateY(-4px) scale(1.01);
    }

/* Left side */
.lc-card-left[b-k8uvo5es9n] {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
}

.lc-name[b-k8uvo5es9n] {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-size[b-k8uvo5es9n] {
    font-size: 0.86rem;
    opacity: 0.78;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right side */
.lc-card-right[b-k8uvo5es9n] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.lc-meta[b-k8uvo5es9n] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.lc-sub[b-k8uvo5es9n] {
    font-size: 0.84rem;
    opacity: 0.78;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

/* Inactive */
.lc-card.inactive[b-k8uvo5es9n] {
    opacity: 0.70;
    filter: saturate(0.75);
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
    .lc-card-grid[b-k8uvo5es9n] {
        grid-template-columns: minmax(320px, 720px);
        max-width: 100%;
        justify-content: stretch;
    }

    .lc-card-left[b-k8uvo5es9n] {
        flex: 0 0 auto;
    }

    .lc-meta[b-k8uvo5es9n],
    .lc-sub[b-k8uvo5es9n] {
        justify-content: flex-start;
    }

    .lc-search[b-k8uvo5es9n] {
        width: min(520px, 92vw);
    }
}

@media (min-width: 1400px) {
    .lc-card-grid[b-k8uvo5es9n] {
        grid-template-columns: repeat(3, minmax(360px, 1fr));
        max-width: 1600px;
    }
}

.lcd-overlay[b-k8uvo5es9n] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.lcd-modal[b-k8uvo5es9n] {
    width: min(720px, calc(100vw - 36px));
    max-height: min(78vh, 760px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0,0,0,.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lcd-header[b-k8uvo5es9n] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    background: rgba(30,112,255,.06);
}

.lcd-title[b-k8uvo5es9n] {
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.2;
}

.lcd-subtitle[b-k8uvo5es9n] {
    font-weight: 600;
    font-size: .85rem;
    opacity: .75;
    margin-top: 4px;
}

.lcd-body[b-k8uvo5es9n] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 16px 16px;
    overflow: auto;
}

.lcd-footer[b-k8uvo5es9n] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid rgba(0,0,0,.08);
    background: rgba(0,0,0,.02);
}

/* Form layout inside dialog */
.lc-form[b-k8uvo5es9n] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px 12px;
    align-items: center;
}

    .lc-form > label[b-k8uvo5es9n] {
        font-size: 0.9rem;
        opacity: 0.85;
    }

.lc-check[b-k8uvo5es9n] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    margin: 0;
}

.lc-hint[b-k8uvo5es9n] {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0,0,0,.04);
    font-weight: 650;
    opacity: .9;
}

.lc-search[b-k8uvo5es9n] {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    min-width: 180px;
    background: #fff;
}
    .lc-search:focus[b-k8uvo5es9n] {
        border-color: #4DA3FF;
        box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.25);
    }

/*.btn {
    border: 1px solid rgba(0,0,0,0.2);
    background: #f6f6f6;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.btn:hover {
    background: #efefef;
}*/

.btn.primary[b-k8uvo5es9n] {
    background: #1f6feb;
    color: #fff;
    border-color: rgba(0,0,0,0.12);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.btn.primary:hover[b-k8uvo5es9n] {
    filter: brightness(0.96);
}

.btn[disabled][b-k8uvo5es9n] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/Admin/AdminregexPage.razor.rz.scp.css */


/* ===== Toolbar ===== */
.regex-lib-toolbar[b-qlczv298vt] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 12px 0 18px 0;
}

.regex-lib-left[b-qlczv298vt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.regex-lib-label[b-qlczv298vt] {
    font-size: 0.9rem;
    opacity: 0.85;
}

.regex-lib-category[b-qlczv298vt] {
    width: 260px;
}

/* ===== Inputs ===== */
.input[b-qlczv298vt] {
    width: 100%;
    border: 1px solid rgba(0,0,0,0.22);
    border-radius: 8px;
    padding: 8px 10px;
    background: #fff;
}

    .input:focus[b-qlczv298vt] {
        border-color: rgba(31,111,235,0.6);
        box-shadow: 0 0 0 3px rgba(31,111,235,0.15);
    }

.muted[b-qlczv298vt] {
    opacity: 0.75;
}

select.input[b-qlczv298vt] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.55) 50%), linear-gradient(135deg, rgba(0,0,0,0.55) 50%, transparent 50%), linear-gradient(to right, transparent, transparent);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px), 0 0;
    background-size: 6px 6px, 6px 6px, 100% 100%;
    background-repeat: no-repeat;
    padding-right: 34px;
    cursor: pointer;
}

    select.input:disabled[b-qlczv298vt] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* ===== Buttons (global) ===== */
.btn[b-qlczv298vt] {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.20);
    background: #f6f6f6;
    color: rgba(0,0,0,0.92);
    cursor: pointer;
}

    .btn:hover[b-qlczv298vt] {
        filter: brightness(0.97);
    }

    .btn.primary[b-qlczv298vt] {
        background: #1f6feb;
        color: #fff;
        border-color: rgba(31,111,235,0.70);
    }

        .btn.primary:hover[b-qlczv298vt] {
            filter: brightness(0.96);
        }

    .btn:disabled[b-qlczv298vt],
    .btn[disabled][b-qlczv298vt] {
        opacity: 0.55;
        cursor: not-allowed;
        filter: none;
    }


/* ===== Pager ===== */
.pager[b-qlczv298vt] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 12px 0 16px 0;
}

/* ===== Cards Grid (2-column, responsive, fills big screens better) ===== */
.regex-card-grid[b-qlczv298vt] {
    display: grid;
    grid-template-columns: repeat(2, minmax(420px, 1fr));
    max-width: 1200px;
    width: 100%;
    justify-content: center;
    gap: 14px 18px;
    margin: 0 auto;
    padding: 0 10px;
}

/* Card */
.regex-card[b-qlczv298vt] {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.14);
    background: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,0.08);
    cursor: pointer;
    user-select: none;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

    .regex-card:hover[b-qlczv298vt],
    .regex-card:focus[b-qlczv298vt] {
        z-index: 50;
        border-color: rgba(31,111,235,0.35);
        box-shadow: 0 18px 40px rgba(0,0,0,0.16);
        transform: translateY(-4px) scale(1.01);
    }

/* Left: Label then FormatKey */
.regex-card-left[b-qlczv298vt] {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.regex-label[b-qlczv298vt] {
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: 0.15px;
    opacity: 1;
}

.regex-format[b-qlczv298vt] {
    font-size: 0.88rem;
    opacity: 0.72;
    letter-spacing: 0.1px;
}

/* Right */
.regex-card-right[b-qlczv298vt] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.regex-pattern[b-qlczv298vt] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9rem;
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.regex-meta[b-qlczv298vt] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Badges */
.badge[b-qlczv298vt] {
    font-size: 0.78rem;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.14);
    background: rgba(0,0,0,0.04);
}

    .badge.subtle[b-qlczv298vt] {
        opacity: 0.75;
    }

    .badge.badge-multiline[b-qlczv298vt] {
        background: rgba(34, 197, 94, 0.14); /* green tint */
        border-color: rgba(34, 197, 94, 0.45);
        color: rgba(21, 128, 61, 1);
        font-weight: 650;
    }

    .badge.badge-active[b-qlczv298vt] {
        background: rgba(31,111,235,0.12);
        border-color: rgba(31,111,235,0.35);
        color: rgba(31,111,235,0.95);
    }

/* Uses count (optional) */
.regex-uses[b-qlczv298vt] {
    font-size: 0.78rem;
    opacity: 0.80;
    margin-right: 6px;
}

/* Inactive card */
.regex-card.inactive[b-qlczv298vt] {
    opacity: 0.70;
    filter: saturate(0.75);
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
    .regex-card-grid[b-qlczv298vt] {
        grid-template-columns: minmax(320px, 720px);
        max-width: 100%;
        justify-content: stretch;
    }

    .regex-card-left[b-qlczv298vt] {
        flex: 0 0 auto;
    }

    .regex-meta[b-qlczv298vt] {
        justify-content: flex-start;
    }
}

@media (min-width: 1400px) {
    .regex-card-grid[b-qlczv298vt] {
        grid-template-columns: repeat(3, minmax(360px, 1fr));
        max-width: 1600px;
    }
}



/* explainer tab in library */


/* ===== Regex Guide (rxg-*) ===== */
.rxg-root[b-qlczv298vt] {
    position: fixed;
    inset: 0;
    pointer-events: none; 
    z-index: 1200;
}

/* The peeking Guide tab */
.rxg-tab[b-qlczv298vt] {
    pointer-events: auto;
    position: fixed;
    top: 46%;
    right: -86px; /* hidden: most off-screen */
    width: 132px;
    height: 48px;
    border: 0;
    border-radius: 12px 0 0 12px;
    background: #0A58CA;
    color: #fff;
    font-weight: 700;
    letter-spacing: .2px;
    box-shadow: 0 10px 25px rgba(0,0,0,.20);
    cursor: pointer;
    transition: right 220ms cubic-bezier(.2,.9,.2,1.25), transform 220ms cubic-bezier(.2,.9,.2,1.25), box-shadow 220ms ease;
}



/* Hover: slide out enough to read "Guide" */
.rxg-root:not(.is-open) .rxg-tab:hover[b-qlczv298vt] {
    right: -14px;
    animation: none;
    box-shadow: 0 14px 35px rgba(0,0,0,.24);
    transform: translateX(-2px);
}

/* --- Backdrop (only active when open) --- */
.rxg-backdrop[b-qlczv298vt] {
    pointer-events: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    transition: opacity 180ms ease;
}

/* --- Panel (dialog) --- */
.rxg-panel[b-qlczv298vt] {
    pointer-events: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(720px, calc(100vw - 36px));
    max-height: min(78vh, 760px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0,0,0,.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    /* Hidden, not just transparent, while closed: otherwise its close button stays in the Tab order and the
       dialog stays in the accessibility tree. The visibility flip waits for the slide-out to finish. */
    visibility: hidden;
    transform: translate(calc(-50% + 42vw), -50%) scale(.98); /* from the right */
    transition: opacity 180ms ease, transform 240ms cubic-bezier(.2,.9,.2,1.15), visibility 0s linear 240ms;
}

/* Header / body styling */
.rxg-header[b-qlczv298vt] {
    display: flex;
    flex: 0 0 auto;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    background: rgba(30,112,255,.06);
}

.rxg-title[b-qlczv298vt] {
    margin: 0;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.2;
}

.rxg-subtitle[b-qlczv298vt] {
    font-weight: 600;
    font-size: .85rem;
    opacity: .75;
    margin-top: 4px;
}

.rxg-close[b-qlczv298vt] {
    border: 0;
    background: rgba(0,0,0,.06);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    cursor: pointer;
}

.rxg-body[b-qlczv298vt] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 16px 16px;
    overflow: auto;
}

    .rxg-body h3[b-qlczv298vt],
    .rxg-body .rxg-note[b-qlczv298vt] {
        margin: 12px 0 6px;
        font-size: .95rem;
    }

    .rxg-body ul[b-qlczv298vt] {
        margin: 8px 0 0 18px;
    }

    .rxg-body code[b-qlczv298vt] {
        color: #A3195B;
        padding: 2px 6px;
        border-radius: 8px;
        background: rgba(0,0,0,.06);
    }

.rxg-footer-note[b-qlczv298vt] {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0,0,0,.04);
    font-weight: 600;
    opacity: .9;
}

/* Open state: enable clicks + animate in */
.rxg-root.is-open[b-qlczv298vt] {
    pointer-events: none;
}

    .rxg-root.is-open .rxg-backdrop[b-qlczv298vt] {
        pointer-events: auto;
        opacity: 1;
    }

    .rxg-root.is-open .rxg-panel[b-qlczv298vt] {
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
        transform: translate(-50%, -50%) scale(1);
    }



/* /Components/Pages/Admin/AdminTemplateCreateGrid.razor.rz.scp.css */
/* /Components/Pages/Admin/AdminTemplatePage.razor.rz.scp.css */
/* /Components/Pages/Admin/AdminTemplatesPage.razor.rz.scp.css */
/* /Components/Pages/Admin/CartOrganizerPage.razor.rz.scp.css */
/* ============================================================
   CART ORGANIZER — read-only board (v1)
   Palette ported from the visual prototype: cool lavender ground,
   frosted glass, purple areas / orange units / teal home-pool
   traced borders. Status shown as a glowing color bulb.
   ============================================================ */
.cart-organizer[b-e3jco40qtv] {
    --ink: #2A2740;
    /* Text tokens darkened for WCAG 1.4.3 (design-spec A4/A5): --faint was 2.36:1 on the ground. */
    --muted: #67637E;
    --faint: #6B687D;
    /* Labels drawn straight on an area/unit fill (the tinted bubbles), where --faint is only ~3:1. */
    --on-fill: #4A475E;
    --ink-soft: #6C6A77;
    --glass: rgba(255,255,255,0.56);
    --glass-strong: rgba(255,255,255,0.78);
    --hairline: rgba(255,255,255,0.8);
    --line: rgba(43,39,64,0.10);
    --shadow: 0 10px 34px rgba(43,39,64,0.10);
    --shadow-sm: 0 4px 14px rgba(43,39,64,0.08);
    --area: #7C5CDB;
    --area-text: #6A48C8;   /* --area as TEXT (4.93:1); --area itself stays the border/fill accent */
    --unit: #E2853A;
    --home: #1FAEA7;
    --r: 20px;

    color: var(--ink);
    background:
        radial-gradient(1100px 700px at 12% -8%, rgba(124,92,219,0.08), transparent 60%),
        radial-gradient(900px 600px at 110% 8%, rgba(31,174,167,0.08), transparent 55%),
        linear-gradient(160deg, #F4F2FB, #E8F0F7);
    border-radius: var(--r);
    padding: 18px 18px 60px;
    position: relative;               /* anchors the corner-clamped board switch button */
}

/* ---------- header ---------- */
.co-head[b-e3jco40qtv] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-right: 150px;             /* clears the corner-clamped board-switch button */
}

.co-blurb[b-e3jco40qtv] {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    max-width: 58ch;
}

.co-acct[b-e3jco40qtv] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.co-acct-label[b-e3jco40qtv] {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 600;
}

/* shifter tab to the isolation-cart board (warm/fall accent, hinting at the darker board it opens) */
/* board-switch button → isolation board: clamped to the field's top-right, warm (its destination) */
/* corner-cut tab CLAMPED flush into the board's top-right corner (like the cart/location menu
   tabs); orange = the isolation board it opens. */
.co-isoshift[b-e3jco40qtv] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 6;
    font: inherit;
    font-size: 11.5px;
    font-weight: 640;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px 9px 14px;
    border: none;
    border-left: 1px solid #C4552A;
    border-bottom: 1px solid #C4552A;
    border-top-right-radius: var(--r);   /* matches the board's rounded corner */
    border-bottom-left-radius: 12px;     /* the cut into the field */
    background: #C3531F;
    color: #fff;
    cursor: pointer;
}

    .co-isoshift:hover[b-e3jco40qtv] {
        background: #BC5324;
    }

.co-isoshift-arrow[b-e3jco40qtv] {
    font-size: 15px;
    line-height: 1;
}

.co-info[b-e3jco40qtv] {
    color: var(--muted);
    font-size: 13px;
}

/* ---------- legend ---------- */
.co-legend[b-e3jco40qtv] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin: 2px 0 16px;
    padding: 9px 14px;
    background: var(--glass);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.co-lg-title[b-e3jco40qtv] {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 650;
}

.co-lg[b-e3jco40qtv] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--muted);
}

.co-lg.off[b-e3jco40qtv] {
    opacity: .8;
    text-decoration: line-through;   /* "hidden" is said by the strike, not by fading the text away */
}

.co-lgtoggle[b-e3jco40qtv] {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--hairline);
    background: var(--glass-strong);
    color: var(--muted);
    padding: 5px 11px;
    border-radius: 999px;
}

/* Search, centered in the space between the status bulbs and the right-hand buttons. */
.co-lg-search[b-e3jco40qtv] {
    flex: 1 1 220px;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.co-search-input[b-e3jco40qtv] {
    width: 100%;
    max-width: 320px;
    padding: 5px 12px;
    font-size: 12.5px;
    color: var(--ink);
    background: var(--glass-strong);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    outline: none;
}

.co-search-input:focus[b-e3jco40qtv] {
    border-color: rgba(48, 112, 212, .55);
    box-shadow: 0 0 0 3px rgba(48, 112, 212, .15);
}

.co-lgtoggle.on[b-e3jco40qtv] {
    background: var(--ink);
    color: #fff;
    border-color: transparent;
}

.co-lgtoggle:hover[b-e3jco40qtv] {
    filter: brightness(1.03);
}

/* ---------- glowing status bulb ---------- */
.co-bulb[b-e3jco40qtv] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--c);
    box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 0 8px 1px var(--c);
    display: inline-block;
}

.co-bulb.lg[b-e3jco40qtv] {
    width: 12px;
    height: 12px;
}

/* ---------- canvas ---------- */
.co-canvas[b-e3jco40qtv] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.co-board[b-e3jco40qtv] {
    column-count: 2;
    column-gap: 20px;
}

    .co-board > .co-area[b-e3jco40qtv] {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        margin: 0 0 20px;
    }

@media (max-width: 860px) {
    .co-board[b-e3jco40qtv] {
        column-count: 1;
    }
}

/* Bubbles are <fieldset>s; the title <legend> sits at the top of a soft filled panel
   (areas blue, units purple) — no traced outline, just a light fill + subtle shadow. */
.co-area[b-e3jco40qtv] {
    border-radius: var(--r);
    padding: 12px 18px 18px;
    margin: 0;
    min-inline-size: 0;
    background: rgba(48,112,212,.16);
    border: none;
    box-shadow: var(--shadow-sm);
}

    .co-area.home[b-e3jco40qtv] {
        background: rgba(31,174,167,.09);
    }

    /* The Free Area: standalone units + locations with no area — neutral, so it doesn't
       read as a real (clinical/audit) area, with a dashed edge to signal "open structure". */
    .co-area.freearea[b-e3jco40qtv] {
        background: var(--glass);
        border: 1px dashed rgba(43, 39, 64, .22);
    }

    .co-freearea-empty[b-e3jco40qtv] {
        padding: 10px 12px;
        font-size: 12px;
        color: var(--ink-soft);
        font-style: italic;
    }

/* title = legend notched into the top border */
.co-title[b-e3jco40qtv] {
    padding: 0 10px;
    margin-left: 6px;
    font-weight: 640;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
}

    .co-title:hover[b-e3jco40qtv] {
        color: var(--area-text);
    }

    .co-title .count[b-e3jco40qtv] {
        font-size: 11.5px;
        color: var(--on-fill);
        font-weight: 600;
        margin-left: 6px;
    }

    .co-title .caret[b-e3jco40qtv] {
        color: var(--on-fill);
        font-size: 11px;
        margin-left: 6px;
    }

.co-units[b-e3jco40qtv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.co-unit[b-e3jco40qtv] {
    border-radius: 16px;
    /* extra bottom padding reserves a clean strip for the corner grab tab so locations never overlap it */
    padding: 8px 14px 28px;
    margin: 0;
    min-inline-size: 0;
    background: rgba(142,68,212,.20);
    border: none;
    box-shadow: var(--shadow-sm);
}

/* collapsed → slim bubble with the label centered (no border notch) */
.co-collapsed[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    cursor: pointer;
    user-select: none;
    text-align: center;
}

    .co-collapsed:hover[b-e3jco40qtv] {
        background-color: rgba(124,92,219,.09);
    }

    .co-collapsed.home:hover[b-e3jco40qtv] {
        background-color: rgba(31,174,167,.09);
    }

.co-collapsed-label[b-e3jco40qtv] {
    font-weight: 640;
    font-size: 13.5px;
    color: var(--ink);
}

    .co-collapsed-label .count[b-e3jco40qtv] {
        font-size: 11.5px;
        color: var(--on-fill);
        font-weight: 600;
        margin-left: 8px;
    }

/* expanded: the label rises up into the border */
@keyframes co-rise-b-e3jco40qtv {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

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

.co-title[b-e3jco40qtv] {
    animation: co-rise-b-e3jco40qtv .18s ease;
}

@media (prefers-reduced-motion: reduce) {
    .co-title[b-e3jco40qtv] {
        animation: none;
    }
}

.co-locs[b-e3jco40qtv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.co-unitless[b-e3jco40qtv] {
    margin-top: 2px;
}

/* ---------- location = compact 2-part "license" card ---------- */
.co-loc[b-e3jco40qtv] {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    background: var(--glass-strong);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-sm);
    min-height: 54px;
}

.loc-cart[b-e3jco40qtv] {
    position: relative;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* top 16 clears the cart-menu sliver; bottom 16 clears the tray-menu sliver */
    padding: 16px 4px 16px;
    background: linear-gradient(160deg, rgba(124,92,219,.10), rgba(31,174,167,.08));
    border-right: 1px solid var(--line);
}

.cartbox[b-e3jco40qtv] {
    position: relative;
    width: 40px;
    height: 36px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cartbox .glyph[b-e3jco40qtv] {
        font-size: 16px;
        line-height: 1;
        filter: grayscale(.15);
    }

    .cartbox .co-bulb[b-e3jco40qtv] {
        position: absolute;
        top: -4px;
        right: -4px;
    }

.loc-empty[b-e3jco40qtv] {
    width: 40px;
    height: 36px;
    border-radius: 9px;
    border: 1.5px dashed var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--faint);
    font-size: 11px;
    text-align: center;
    padding: 3px;
    line-height: 1.15;
}

.loc-info[b-e3jco40qtv] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    /* small right pad keeps the name/cart text clear of the floating ⋮ in the top-right */
    padding: 7px 22px 7px 9px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

    .loc-info .lname[b-e3jco40qtv] {
        font-size: 11px;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--faint);
        font-weight: 650;
    }

    .loc-info .cname[b-e3jco40qtv] {
        font-size: 12.5px;
        font-weight: 640;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .loc-info .meta[b-e3jco40qtv] {
        font-size: 11px;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .loc-info .status-row[b-e3jco40qtv] {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 600;
    }

    .loc-info .empty-txt[b-e3jco40qtv] {
        font-size: 11.5px;
        color: var(--faint);
        font-style: italic;
    }

/* ---------- home pool ---------- */
.co-pool-toolbar[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 2px 2px 14px;
}

    .co-pool-toolbar .pt-label[b-e3jco40qtv] {
        font-size: 12px;
        color: var(--muted);
    }

    .co-pool-toolbar select[b-e3jco40qtv] {
        font-size: 12.5px;
        padding: 6px 10px;
        border-radius: 10px;
        border: 1px solid var(--hairline);
        background: var(--glass-strong);
        color: var(--ink);
        cursor: pointer;
    }

.co-pgroup[b-e3jco40qtv] {
    margin-bottom: 14px;
}

.co-pgroup-head[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 650;
    color: var(--muted);
    margin: 0 0 9px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--line);
}

    .co-pgroup-head .n[b-e3jco40qtv] {
        color: var(--faint);
        font-weight: 600;
    }

.co-chips[b-e3jco40qtv] {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.co-pchip[b-e3jco40qtv] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 28px 8px 22px;
    border-radius: 12px;
    background: var(--glass-strong);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-sm);
}

    .co-pchip .pc-name[b-e3jco40qtv] {
        font-size: 13px;
        font-weight: 600;
    }

    .co-pchip .pc-sub[b-e3jco40qtv] {
        font-size: 11px;
        color: var(--muted);
    }

/* ---------- per-cart action menu (⋮) ---------- */
.co-loc-wrap[b-e3jco40qtv],
.co-pchip-wrap[b-e3jco40qtv] {
    position: relative;
}

.co-dots[b-e3jco40qtv] {
    position: absolute;
    top: 4px;
    right: 4px;
    border: none;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
    padding: 0;
}

    .co-dots:hover[b-e3jco40qtv] {
        background: rgba(43,39,64,.07);
        color: var(--ink);
    }

/* in the pool chip the ⋮ is locked as a vertical sliver down the RIGHT edge (mirror of the
   left cart-menu strip), matching the location card's clamped action tab */
.co-pchip .co-dots[b-e3jco40qtv] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 22px;
    height: auto;
    margin: 0;
    border-radius: 0;
    border-left: 1px solid var(--line);
    background: rgba(124,92,219,.10);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .co-pchip .co-dots:hover[b-e3jco40qtv] {
        background: rgba(124,92,219,.22);
        color: var(--ink);
    }

/* Fixed (viewport-anchored) so it escapes the multi-column board, which would
   otherwise clip a menu that opens past the bottom of a column. Positioned at the
   click point via inline left/top, then clamped on-screen by clampMenu(). */
.co-menu[b-e3jco40qtv] {
    position: fixed;
    z-index: 80;
    min-width: 210px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 5px;
}

.co-menu-item[b-e3jco40qtv] {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

    .co-menu-item:hover[b-e3jco40qtv] {
        background: rgba(124,92,219,.09);
    }

    .co-menu-item.danger[b-e3jco40qtv] {
        color: #c0485c;
    }

        .co-menu-item.danger:hover[b-e3jco40qtv] {
            background: rgba(222,107,124,.12);
        }

.co-menu-backdrop[b-e3jco40qtv] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

/* ---------- deploy placement mode ---------- */
/* Floating pill (fixed) so entering placement mode doesn't shift the board. */
.co-deploybar[b-e3jco40qtv] {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    font-size: 13px;
}

.co-deploybar-msg[b-e3jco40qtv] {
    font-size: 13px;
    color: var(--ink);
}

.co-deploybar-note[b-e3jco40qtv] {
    color: var(--muted);
    font-size: 12px;
}

.co-deploybar-cancel[b-e3jco40qtv] {
    margin-left: auto;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--hairline);
    background: var(--glass-strong);
    color: var(--muted);
    padding: 6px 13px;
    border-radius: 999px;
}

    .co-deploybar-cancel:hover[b-e3jco40qtv] {
        background: #fff;
        color: var(--ink);
    }

/* de-emphasize everything that isn't a valid target while placing */
.co-dimmed[b-e3jco40qtv] {
    opacity: .8;
    filter: grayscale(.7);
    transition: opacity .12s;
}

/* pharmacy-tray model badge (verification at a glance) */
.co-tray[b-e3jco40qtv] {
    display: inline-block;
    width: fit-content;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em;
    padding: 1px 6px;
    border-radius: 999px;
    margin-top: 1px;
}

    .co-tray.ok[b-e3jco40qtv] {
        background: rgba(53,179,106,.16);
        color: #107842;
    }

    .co-tray.warn[b-e3jco40qtv] {
        background: rgba(240,162,56,.20);
        color: #9A5B00;
    }

    .co-tray.drawer[b-e3jco40qtv] {
        background: rgba(124,92,219,.16);
        color: #6b53c0;
    }

    /* Pool-chip tray badge doubles as the tray-menu button. */
    .co-tray.co-tray-btn[b-e3jco40qtv] {
        border: none;
        cursor: pointer;
        font-family: inherit;
    }

        .co-tray.co-tray-btn:hover[b-e3jco40qtv] {
            filter: brightness(.95);
        }

/* draggable carts */
.co-grab[b-e3jco40qtv] {
    cursor: grab;
}

    .co-grab:active[b-e3jco40qtv] {
        cursor: grabbing;
    }

/* ---------- cart detail: menu button + balloon dialog ---------- */
/* The top sliver of a location card's cart panel (and the left sliver of a pool chip)
   IS the button that opens the cart-detail dialog. */
.co-cartmenu-strip[b-e3jco40qtv] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 16px;
    z-index: 3;
    border: none;
    border-bottom: 1px solid var(--line);
    background: rgba(124,92,219,.12);
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .co-cartmenu-strip:hover[b-e3jco40qtv] {
        background: rgba(124,92,219,.26);
        color: var(--ink);
    }

    .co-cartmenu-strip:active[b-e3jco40qtv] {
        background: rgba(124,92,219,.4);
    }

    /* pool chip: a vertical sliver down the left edge instead of a top bar */
    .co-cartmenu-strip.chip[b-e3jco40qtv] {
        top: 0;
        left: 0;
        right: auto;
        bottom: 0;
        width: 15px;
        height: auto;
        border-bottom: none;
        border-right: 1px solid var(--line);
    }

/* The bottom sliver of a location card's cart panel — the tray-menu button, a bottom twin of
   .co-cartmenu-strip tinted by pharmacy-tray state (paired / missing / built-in drawer). */
.co-traymenu-strip[b-e3jco40qtv] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 16px;
    z-index: 3;
    border: none;
    border-top: 1px solid var(--line);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    background: rgba(124,92,219,.12);
    color: var(--muted);
}

    .co-traymenu-strip:hover[b-e3jco40qtv] {
        filter: brightness(.94);
    }

    .co-traymenu-strip:active[b-e3jco40qtv] {
        filter: brightness(.88);
    }

    .co-traymenu-strip.ok[b-e3jco40qtv] {
        background: rgba(53,179,106,.20);
        color: #107842;
    }

    .co-traymenu-strip.warn[b-e3jco40qtv] {
        background: rgba(240,162,56,.24);
        color: #9A5B00;
    }

    .co-traymenu-strip.drawer[b-e3jco40qtv] {
        background: rgba(124,92,219,.18);
        color: #6b53c0;
    }

.co-detail-scrim[b-e3jco40qtv] {
    position: fixed;
    inset: 0;
    z-index: 75;
    background: rgba(43,39,64,.34);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.co-detail[b-e3jco40qtv] {
    width: min(460px, 100%);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(43,39,64,.30);
    overflow: hidden;
}

    .co-detail.co-detail-history[b-e3jco40qtv] {
        width: min(520px, 100%);
    }

.co-detail-head[b-e3jco40qtv] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--line);
}

.co-detail-titles[b-e3jco40qtv] {
    flex: 1 1 auto;
    min-width: 0;
}

.co-detail-title[b-e3jco40qtv] {
    font-size: 17px;
    font-weight: 660;
    color: var(--ink);
}

.co-detail-sub[b-e3jco40qtv] {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
}

.co-detail-status[b-e3jco40qtv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

/* Status pill made clickable (Deployed -> Open, Opened -> Close) */
.co-detail-status-btn[b-e3jco40qtv] {
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    padding: 3px 9px;
    border-radius: 999px;
    transition: background .12s, border-color .12s;
}

    .co-detail-status-btn:hover[b-e3jco40qtv] {
        background: rgba(124,92,219,.10);
        border-color: rgba(124,92,219,.45);
    }

/* Hover-swap: normal shows the status + dot; hover drops the dot and flips to the action word. */
.co-status-hover[b-e3jco40qtv] {
    display: none;
    font-weight: 800;
    color: var(--area-text);
    letter-spacing: .02em;
}

.co-detail-status-btn:hover .co-status-normal[b-e3jco40qtv] {
    display: none;
}

.co-detail-status-btn:hover .co-status-hover[b-e3jco40qtv] {
    display: inline;
}

.co-detail-status-btn:hover .co-bulb[b-e3jco40qtv] {
    display: none;
}

/* Open / Close confirm panel inside the detail dialog */
.co-statuschange[b-e3jco40qtv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.co-statuschange-title[b-e3jco40qtv] {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.co-statuschange-body[b-e3jco40qtv] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.co-checklist[b-e3jco40qtv] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 11px 13px;
    background: rgba(124,92,219,.05);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.co-check[b-e3jco40qtv] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink);
    cursor: pointer;
}

    .co-check input[b-e3jco40qtv] {
        margin-top: 2px;
        flex: 0 0 auto;
        cursor: pointer;
        accent-color: var(--area);
    }

.co-detail-btn:disabled[b-e3jco40qtv] {
    opacity: .5;
    cursor: not-allowed;
    filter: none;
}

.co-detail-x[b-e3jco40qtv] {
    border: none;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 6px;
}

    .co-detail-x:hover[b-e3jco40qtv] {
        background: rgba(43,39,64,.06);
        color: var(--ink);
    }

/* pencil edit button + inline edit form */
.co-detail-edit[b-e3jco40qtv] {
    border: none;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 6px;
}

    .co-detail-edit:hover[b-e3jco40qtv] {
        background: rgba(124,92,219,.12);
        color: var(--area-text);
    }

.co-edit[b-e3jco40qtv] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.co-edit-field[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

    .co-edit-field .k[b-e3jco40qtv] {
        flex: 0 0 60px;
        color: var(--faint);
        font-weight: 600;
    }

.co-edit-input[b-e3jco40qtv] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: inherit;
    font-size: 13px;
    padding: 7px 10px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
}

    .co-edit-input:focus[b-e3jco40qtv] {
        outline: 2px solid rgba(124,92,219,.4);
        outline-offset: 0;
        border-color: var(--area);
    }

.cart-organizer[b-e3jco40qtv]  .co-edit-error {
    font-size: 12.5px;
    color: #b23b52;
    background: #F6E9EC;
    border: 1px solid rgba(222,107,124,.35);
    border-radius: 8px;
    padding: 7px 10px;
}

.co-edit-actions[b-e3jco40qtv] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
}

.co-detail-btn.primary[b-e3jco40qtv] {
    background: var(--area);
    color: #fff;
    border-color: transparent;
}

    .co-detail-btn.primary:hover[b-e3jco40qtv] {
        background: var(--area);
        filter: brightness(1.05);
    }

/* green "Activate" — the recover action for an inactive/broken cart */
.co-detail-btn.go[b-e3jco40qtv] {
    background: #00883E;
    color: #fff;
    border-color: transparent;
}

    .co-detail-btn.go:hover[b-e3jco40qtv] {
        background: #00883E;
        filter: brightness(1.05);
    }

.co-detail-body[b-e3jco40qtv] {
    overflow-y: auto;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.co-detail-rows[b-e3jco40qtv] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.co-detail-row[b-e3jco40qtv] {
    display: flex;
    gap: 12px;
    font-size: 13px;
}

    .co-detail-row .k[b-e3jco40qtv] {
        flex: 0 0 130px;
        color: var(--faint);
        font-weight: 600;
    }

    .co-detail-row .v[b-e3jco40qtv] {
        color: var(--ink);
        min-width: 0;
    }

.co-detail-section-head[b-e3jco40qtv] {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 700;
    margin-bottom: 6px;
}

/* collapsible "Contents" header (closed by default) */
.co-contents-toggle[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0 0 6px;
    font-family: inherit;
}

.co-contents-label[b-e3jco40qtv] {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 700;
}

    .co-contents-toggle .co-inv-caret[b-e3jco40qtv] {
        color: var(--faint);
        font-size: 11px;
    }

    .co-contents-toggle .co-inv-count[b-e3jco40qtv] {
        margin-left: auto;
    }

.co-detail-link.disabled[b-e3jco40qtv] {
    color: var(--faint);
    cursor: not-allowed;
    text-decoration: none;
}

.co-detail-todo[b-e3jco40qtv] {
    font-size: 12.5px;
    color: var(--faint);
    font-style: italic;
    padding: 10px 12px;
    background: var(--glass);
    border: 1px dashed var(--line);
    border-radius: 10px;
}

/* ---------- rewind dialog ---------- */
.co-rwd-stepper[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 12px;
}

.co-rwd-arrow[b-e3jco40qtv] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--glass-strong);
    color: var(--ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .co-rwd-arrow:hover:not(:disabled)[b-e3jco40qtv] {
        border-color: var(--area);
        color: var(--area-text);
    }

    .co-rwd-arrow:disabled[b-e3jco40qtv] {
        opacity: 0.35;
        cursor: default;
    }

.co-rwd-step[b-e3jco40qtv] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    min-width: 96px;
    text-align: center;
}

.co-rwd-dot[b-e3jco40qtv] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
}

    .co-rwd-dot.green[b-e3jco40qtv] {
        background: #00883E;
        box-shadow: 0 0 0 3px rgba(47,191,113,0.18);
    }

    .co-rwd-dot.amber[b-e3jco40qtv] {
        background: #E0A21C;
        box-shadow: 0 0 0 3px rgba(224,162,28,0.18);
    }

    .co-rwd-dot.red[b-e3jco40qtv] {
        background: #D9534F;
        box-shadow: 0 0 0 3px rgba(217,83,79,0.18);
    }

.co-rwd-notes[b-e3jco40qtv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.co-rwd-note[b-e3jco40qtv],
.cart-organizer[b-e3jco40qtv]  .co-rwd-note {
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid transparent;
}

    .co-rwd-note.warn[b-e3jco40qtv] {
        color: #8a6300;
        background: rgba(224,162,28,0.10);
        border-color: rgba(224,162,28,0.30);
    }

    .co-rwd-note.block[b-e3jco40qtv] {
        color: #a5322e;
        background: rgba(217,83,79,0.10);
        border-color: rgba(217,83,79,0.32);
    }

/* expandable inventory (grouped by drawer/sub-container) */
.co-inv-group[b-e3jco40qtv] {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 6px;
    overflow: hidden;
}

.co-inv-head[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: var(--glass);
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    padding: 8px 10px;
    text-align: left;
}

    .co-inv-head:hover[b-e3jco40qtv] {
        background: rgba(124,92,219,.08);
    }

.co-inv-caret[b-e3jco40qtv] {
    flex: 0 0 auto;
    width: 10px;
    color: var(--faint);
    font-size: 11px;
}

.co-inv-name[b-e3jco40qtv] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-inv-count[b-e3jco40qtv] {
    flex: 0 0 auto;
    color: var(--faint);
    font-weight: 600;
    font-size: 11px;
}

.co-inv-items[b-e3jco40qtv] {
    border-top: 1px solid var(--line);
}

.co-inv-item[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 12px;
    font-size: 12px;
    border-bottom: 1px solid var(--line);
}

    .co-inv-item:last-child[b-e3jco40qtv] {
        border-bottom: none;
    }

.co-inv-item-name[b-e3jco40qtv] {
    color: var(--ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Name + photo icon: may shrink so the name still ellipsizes beside the expiration. */
.co-inv-item-main[b-e3jco40qtv] {
    min-width: 0;
}

.co-inv-item-exp[b-e3jco40qtv] {
    flex: 0 0 auto;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.co-detail-foot[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--line);
}

    /* rewind footer: right-align Cancel + Rewind, matching the isolation board */
    .co-detail-foot.co-foot-end[b-e3jco40qtv] {
        justify-content: flex-end;
    }

.co-detail-link[b-e3jco40qtv] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--area-text);
    text-decoration: none;
    margin-right: auto;
}

    .co-detail-link:hover[b-e3jco40qtv] {
        text-decoration: underline;
    }

.co-detail-btn[b-e3jco40qtv] {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 10px;
    padding: 8px 13px;
    border: 1px solid rgba(43,39,64,.2);   /* visible border (was near-white --hairline), matching the iso buttons */
    background: var(--glass-strong);
    color: var(--ink);
}

    .co-detail-btn:hover[b-e3jco40qtv] {
        background: #fff;
    }

    .co-detail-btn.danger[b-e3jco40qtv] {
        background: #F6E9EC;
        color: #b23b52;
        border-color: rgba(222,107,124,.4);
    }

        .co-detail-btn.danger:hover[b-e3jco40qtv] {
            background: #f3dbe0;
        }

/* the selected source cart glows purple (distinct from the green/amber/blue targets) */
.co-pchip.co-selected[b-e3jco40qtv],
.co-source .co-loc[b-e3jco40qtv] {
    border-color: var(--area);
    box-shadow: 0 0 0 2px rgba(124,92,219,.5), 0 0 14px 2px rgba(124,92,219,.32);
}

/* swap-in candidate: a home-location cart eligible to replace the cart being swapped out (amber, matching the swap target color) */
.co-pchip.co-swap-target[b-e3jco40qtv] {
    cursor: pointer;
    border-color: rgba(240,162,56,.75);
    box-shadow: 0 0 0 2px rgba(240,162,56,.4), 0 0 14px 2px rgba(240,162,56,.28);
    background: rgba(240,162,56,.10);
}

    .co-pchip.co-swap-target:hover[b-e3jco40qtv] {
        background: rgba(240,162,56,.20);
    }

.co-swap-hint[b-e3jco40qtv] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    color: #9A5B00;
    white-space: nowrap;
}

.co-traylist-head[b-e3jco40qtv] {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 6px;
}

.co-tray-actions[b-e3jco40qtv] {
    display: flex;
    gap: 8px;
    margin: 6px 0 2px;
}

.co-drawer-edit[b-e3jco40qtv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* inline "change expiration" pencil + compact buttons on a paired tray's exp row */
.co-exp-edit[b-e3jco40qtv] {
    border: none;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 1px 4px;
    margin-left: 4px;
    border-radius: 6px;
}

    .co-exp-edit:hover[b-e3jco40qtv] {
        background: rgba(124,92,219,.12);
        color: var(--area-text);
    }

.co-detail-btn.co-inline-btn[b-e3jco40qtv] {
    padding: 3px 8px;
    font-size: 11px;
    margin-left: 6px;
}

/* a swap-and-held cart, rendered inline with the unit's cards but tinted yellow.
   Fills are OPAQUE so the purple area behind never shows through (that made it muddy/unreadable). */
.co-holding-card .co-loc[b-e3jco40qtv] {
    border: 2px solid #E29A1E;
    background: #FFF4D2;
    color: var(--ink);
}

    .co-holding-card .loc-cart[b-e3jco40qtv] {
        background: #FCE6A6;
        color: var(--ink);
    }

    /* On the yellow held card the pharmacy slivers (cart-menu top, drawer tray-menu bottom) must not
       read purple — warm amber + black text, and hover/active darken the amber, never toward purple. */
    .co-holding-card .co-cartmenu-strip[b-e3jco40qtv],
    .co-holding-card .co-traymenu-strip.drawer[b-e3jco40qtv] {
        background: rgba(226,154,30,.24);
        color: #000;
    }

        .co-holding-card .co-cartmenu-strip:hover[b-e3jco40qtv],
        .co-holding-card .co-traymenu-strip.drawer:hover[b-e3jco40qtv] {
            background: rgba(226,154,30,.46);
            color: #000;
            filter: none;
        }

        .co-holding-card .co-cartmenu-strip:active[b-e3jco40qtv],
        .co-holding-card .co-traymenu-strip.drawer:active[b-e3jco40qtv] {
            background: rgba(226,154,30,.60);
            filter: none;
        }

    /* the corner grab tab, warm to match the held card */
    .co-holding-card .co-grabhandle-loc[b-e3jco40qtv] {
        background: rgba(226,154,30,.28);
        border-top-color: #E29A1E;
        border-left-color: #E29A1E;
        color: #000;
    }

        .co-holding-card .co-grabhandle-loc:hover[b-e3jco40qtv] {
            background: rgba(226,154,30,.52);
            color: #000;
        }

    /* the top-right ⋮ cart-actions tab, warm to match the held card (mirrors the grab tab) */
    .co-holding-card .co-locmenu[b-e3jco40qtv] {
        background: rgba(226,154,30,.28);
        border-bottom-color: #E29A1E;
        border-left-color: #E29A1E;
        color: #000;
    }

        .co-holding-card .co-locmenu:hover[b-e3jco40qtv] {
            background: rgba(226,154,30,.52);
            color: #000;
        }

/* swap vs swap-and-hold choice (2-tile dialog, mimics the template Excel-export choice) */
.co-swapchoice[b-e3jco40qtv] {
    width: min(430px, 100%);
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 24px 70px rgba(43,39,64,.30);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.co-swapchoice-title[b-e3jco40qtv] {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

.co-swapchoice-sub[b-e3jco40qtv] {
    font-size: 13px;
    color: var(--muted);
}

.co-swapchoice-tiles[b-e3jco40qtv] {
    display: flex;
    gap: 12px;
}

.co-swapchoice-tile[b-e3jco40qtv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: background .12s, border-color .12s;
}

    .co-swapchoice-tile:hover[b-e3jco40qtv] {
        background: rgba(124,92,219,.08);
        border-color: rgba(124,92,219,.45);
    }

    .co-swapchoice-tile:disabled[b-e3jco40qtv] {
        opacity: .5;
        cursor: not-allowed;
    }

.co-swapchoice-tile-title[b-e3jco40qtv] {
    font-size: 14px;
    font-weight: 700;
    color: var(--area-text);
}

.co-swapchoice-tile-hint[b-e3jco40qtv] {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.35;
}

/* home-location "Pharmacy trays" panel */
.co-traypool[b-e3jco40qtv] {
    margin-top: 10px;
    border-top: 1px dashed var(--line);
    padding-top: 6px;
}

/* pharmacy-tray bubbles (home location for unpaired trays) */
.co-traychips[b-e3jco40qtv] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 2px 2px;
}

.co-traychip[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--glass-strong);
    cursor: grab;
    max-width: 230px;
}

    .co-traychip.needs[b-e3jco40qtv] {
        border-style: dashed;
    }

    .co-traychip:active[b-e3jco40qtv] {
        cursor: grabbing;
    }

.co-traychip-body[b-e3jco40qtv] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.co-traychip-name[b-e3jco40qtv] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.co-traychip-exp[b-e3jco40qtv] {
    font-size: 11px;
    color: var(--muted);
}

.co-traychip-menu[b-e3jco40qtv] {
    border: none;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 6px;
}

    .co-traychip-menu:hover[b-e3jco40qtv] {
        background: rgba(124,92,219,.12);
        color: var(--area-text);
    }

/* a cart tray-slot placard lit up as a drop target for a dragged tray */
.co-traymenu-strip.co-tray-drop[b-e3jco40qtv],
.co-tray.co-tray-drop[b-e3jco40qtv] {
    outline: 2px dashed var(--area);
    outline-offset: -2px;
    filter: brightness(1.05);
}

/* compact lock field in the tray pair bar (replaces the old full-width input) */
.co-pairbar[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.co-lock-mini[b-e3jco40qtv] {
    flex: 0 0 90px;
    font-family: inherit;
    font-size: 12.5px;
    padding: 6px 9px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
}

    .co-lock-mini:focus[b-e3jco40qtv] {
        outline: 2px solid rgba(124,92,219,.4);
        outline-offset: 0;
        border-color: var(--area);
    }

    .co-lock-mini.flash[b-e3jco40qtv] {
        border-color: #de6b7c;
        background: #F6E9EC;
        animation: co-lock-flash-b-e3jco40qtv .5s ease;
    }

@keyframes co-lock-flash-b-e3jco40qtv {
    0%, 100% { box-shadow: 0 0 0 0 rgba(222,107,124,0); }
    30% { box-shadow: 0 0 0 3px rgba(222,107,124,.4); }
}

.co-traypool-row[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(43,39,64,.05);
}

.co-traypool-name[b-e3jco40qtv] {
    font-weight: 600;
    color: var(--ink);
}

.co-traypool-meta[b-e3jco40qtv] {
    color: var(--muted);
    font-size: 11px;
}

.co-traypool-exp[b-e3jco40qtv] {
    margin-left: auto;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

.co-traypool-btn[b-e3jco40qtv] {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    cursor: pointer;
}

    .co-traypool-btn:hover[b-e3jco40qtv] {
        background: rgba(124,92,219,.1);
        border-color: rgba(124,92,219,.4);
    }

.co-traypool-edit[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 10px;
}

    .co-traypool-edit input[b-e3jco40qtv] {
        font-family: inherit;
        font-size: 12px;
        padding: 5px 8px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        color: var(--ink);
    }

/* send-home movement dialog: blocked message + tray picker */
.co-move-block[b-e3jco40qtv] {
    font-size: 13px;
    line-height: 1.5;
    color: #b23b52;
    background: #F6E9EC;
    border: 1px solid rgba(222,107,124,.35);
    border-radius: 10px;
    padding: 12px 14px;
}

.co-traypick[b-e3jco40qtv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
}

.co-traypick-opt[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    cursor: pointer;
}

    .co-traypick-opt.sel[b-e3jco40qtv] {
        border-color: var(--area);
        background: rgba(124,92,219,.08);
    }

    .co-traypick-opt input[b-e3jco40qtv] {
        accent-color: var(--area);
    }

.co-traypick-name[b-e3jco40qtv] {
    font-weight: 600;
}

.co-traypick-exp[b-e3jco40qtv] {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
}

.co-deploybar-key[b-e3jco40qtv] {
    font-weight: 600;
    white-space: nowrap;
}

    .co-deploybar-key.green[b-e3jco40qtv] {
        color: #107842;
    }

    .co-deploybar-key.amber[b-e3jco40qtv] {
        color: #9A5B00;
    }

    .co-deploybar-key.blue[b-e3jco40qtv] {
        color: #3567c0;
    }

/* target children don't intercept drag events, so dragenter/leave fire on the target itself */
.co-target .glyph[b-e3jco40qtv],
.co-target .co-target-label[b-e3jco40qtv] {
    pointer-events: none;
}

/* an empty location square becomes a lit-up, pulsing drop target */
.loc-empty.co-target[b-e3jco40qtv] {
    position: relative;
    cursor: pointer;
    color: #107842;
    border: 1.5px solid rgba(53,179,106,.6);
    background: rgba(53,179,106,.14);
    box-shadow: 0 0 10px 1px rgba(53,179,106,.25);
    animation: co-pulse-b-e3jco40qtv 1.6s ease-in-out infinite;
    font-size: 11px;
    padding: 0;
}

    .loc-empty.co-target .co-target-label[b-e3jco40qtv] {
        opacity: 0;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .03em;
    }

    .loc-empty.co-target:hover[b-e3jco40qtv],
    .loc-empty.co-target:focus-visible[b-e3jco40qtv],
    .loc-empty.co-target.co-dragover[b-e3jco40qtv] {
        background: #008848;
        box-shadow: 0 0 14px 3px rgba(53,179,106,.5);
        animation: none;
    }

        .loc-empty.co-target:hover .co-target-label[b-e3jco40qtv],
        .loc-empty.co-target:focus-visible .co-target-label[b-e3jco40qtv],
        .loc-empty.co-target.co-dragover .co-target-label[b-e3jco40qtv] {
            opacity: 1;
            color: #fff;
        }

@keyframes co-pulse-b-e3jco40qtv {
    0%, 100% {
        box-shadow: 0 0 8px 1px rgba(53,179,106,.2);
    }

    50% {
        box-shadow: 0 0 15px 3px rgba(53,179,106,.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loc-empty.co-target[b-e3jco40qtv] {
        animation: none;
    }
}

/* occupied-location targets: swap (amber) / trade (blue) */
.cartbox.co-target[b-e3jco40qtv] {
    cursor: pointer;
    padding: 0;
    border-width: 1.5px;
    animation: co-pulse-b-e3jco40qtv 1.6s ease-in-out infinite;
}

.cartbox.co-target .co-target-label[b-e3jco40qtv] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    opacity: 0;
}

.cartbox.co-target-swap[b-e3jco40qtv] {
    border-color: rgba(240,162,56,.75);
    box-shadow: 0 0 10px 1px rgba(240,162,56,.3);
}

.cartbox.co-target-trade[b-e3jco40qtv] {
    border-color: rgba(74,141,240,.75);
    box-shadow: 0 0 10px 1px rgba(74,141,240,.3);
}

.cartbox.co-target:hover[b-e3jco40qtv],
.cartbox.co-target.co-dragover[b-e3jco40qtv] {
    animation: none;
}

    .cartbox.co-target:hover .glyph[b-e3jco40qtv],
    .cartbox.co-target.co-dragover .glyph[b-e3jco40qtv] {
        opacity: 0;
    }

    .cartbox.co-target:hover .co-target-label[b-e3jco40qtv],
    .cartbox.co-target.co-dragover .co-target-label[b-e3jco40qtv] {
        opacity: 1;
    }

.cartbox.co-target-swap:hover[b-e3jco40qtv],
.cartbox.co-target-swap.co-dragover[b-e3jco40qtv] {
    background: rgba(240,162,56,.95);
    box-shadow: 0 0 14px 3px rgba(240,162,56,.5);
}

.cartbox.co-target-trade:hover[b-e3jco40qtv],
.cartbox.co-target-trade.co-dragover[b-e3jco40qtv] {
    background: rgba(74,141,240,.95);
    box-shadow: 0 0 14px 3px rgba(74,141,240,.5);
}

@media (prefers-reduced-motion: reduce) {
    .cartbox.co-target[b-e3jco40qtv] {
        animation: none;
    }
}

/* ============================================================
   LOCATION CONTROL — add (+) buttons + drag-to-move handles/zones
   ============================================================ */

/* Only the UNIT becomes a containing block for its + button / grab handle. NEVER position .co-area:
   it's a direct child of the column-count board, and a positioned multi-column item overlaps/collapses
   the whole masonry (Chromium multicol quirk). The area's + buttons live inline in its legend instead. */
.co-unit[b-e3jco40qtv] {
    position: relative;
}

/* small, non-intrusive "＋ Area / ＋ Unit / ＋ Loc" pills, sitting inline in the legend/legend-bar */
.co-add[b-e3jco40qtv] {
    border: 1px solid var(--line);
    background: var(--glass-strong);
    color: var(--muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 2px 8px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
}

    .co-add:hover[b-e3jco40qtv] {
        border-color: var(--area);
        color: var(--area-text);
        background: #fff;
    }

/* area/unit legend becomes a full-width header row so the + buttons pin to the FAR right (multicol-safe:
   it's normal flow inside the legend, no positioning on the column item). */
.co-title-hdr[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: calc(100% - 12px);
}

/* the +unit / +loc cluster, pushed to the far end of the header row */
.co-lmbtns[b-e3jco40qtv] {
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
    vertical-align: middle;
}

.co-legend .co-add-area[b-e3jco40qtv] {
    margin-left: 4px;
}

/* unit grab handle = corner-cut tab in the bottom-right, matching the location tab (its outer corner
   rounds to the unit's 16px radius; inner corner rounded + bordered off). The unit reserves bottom
   padding (below) so the location grid never overlaps it. */
.co-grabhandle[b-e3jco40qtv] {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 5;
    width: 26px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: none;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-top-left-radius: 10px;
    border-bottom-right-radius: 16px;
    background: var(--glass);
    color: var(--muted);
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
}

    .co-grabhandle:hover[b-e3jco40qtv] {
        background: rgba(124,92,219,.18);
        color: var(--area-text);
    }

    .co-grabhandle:active[b-e3jco40qtv] {
        cursor: grabbing;
    }

/* location grab handle = a corner square CUT into the card's bottom-right. It lives inside .co-loc,
   whose overflow:hidden + 12px radius clip the handle's outer corner to follow the card's shape; the
   inner corner is rounded and bordered off from the content. Its own symbol + hover highlight; drag zone. */
.co-loc[b-e3jco40qtv] {
    position: relative;   /* anchor for the corner grab handle */
}

.co-grabhandle-loc[b-e3jco40qtv] {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 6;
    width: 22px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: none;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-top-left-radius: 9px;
    background: var(--glass);
    color: var(--muted);
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

    .co-grabhandle-loc:hover[b-e3jco40qtv] {
        background: rgba(124,92,219,.18);
        color: var(--area-text);
    }

    .co-grabhandle-loc:active[b-e3jco40qtv] {
        cursor: grabbing;
    }

/* cart-actions ⋮ = corner-cut tab locked in the card's TOP-right, mirroring the
   bottom-right grab handle so it reads as part of the box, not a floating dot. */
.co-locmenu[b-e3jco40qtv] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 6;
    width: 22px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-bottom-left-radius: 9px;
    background: var(--glass);
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .co-locmenu:hover[b-e3jco40qtv] {
        background: rgba(124,92,219,.18);
        color: var(--area-text);
    }

/* active drop target during a move drag (the class is only present while dragging) */
.co-lmtarget[b-e3jco40qtv] {
    outline: 2px dashed var(--area);
    outline-offset: -3px;
}

    .co-lmtarget.co-dragover[b-e3jco40qtv] {
        outline-style: solid;
        outline-width: 3px;
        background: rgba(124,92,219,.14);
    }

/* fixed orphan drop bar, shown only while dragging a location. Sits ABOVE the ~90px bottom
   edge-autoscroll zone so hovering it to drop doesn't scroll the page away. */
.co-orphan-drop[b-e3jco40qtv] {
    position: fixed;
    left: 50%;
    bottom: 110px;
    transform: translateX(-50%);
    z-index: 80;
    background: var(--glass-strong);
    border: 2px dashed var(--muted);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

    .co-orphan-drop.co-dragover[b-e3jco40qtv] {
        border-style: solid;
        border-color: var(--area);
        background: rgba(124,92,219,.16);
    }

/* ============================================================
   AREA CREATE — Quick / Detailed tabbed dialog
   ============================================================ */
.co-detail.co-detail-create[b-e3jco40qtv] {
    width: min(580px, 96vw);
}

.co-create-tabs[b-e3jco40qtv] {
    margin-top: 6px;
}

    /* trim the stock Telerik tab-content padding to match the dialog body */
    .co-create-tabs .k-tabstrip-content[b-e3jco40qtv] {
        padding: 12px 4px 4px;
        border: none;
    }

.co-sched-sec[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 700;
    margin: 12px 0 6px;
}

    .co-sched-quick[b-e3jco40qtv] {
        margin-left: auto;
        display: inline-flex;
        gap: 5px;
    }

    .co-sched-sec:first-child[b-e3jco40qtv] {
        margin-top: 2px;
    }

/* schedule checkboxes laid out in a responsive grid (7 days / 17 holidays) */
.co-checklist.co-sched-days[b-e3jco40qtv],
.co-checklist.co-sched-holidays[b-e3jco40qtv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px 14px;
}

/* "Add existing…" multiselect picker (unit/location second tab) */
.co-picker[b-e3jco40qtv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.co-picker-list[b-e3jco40qtv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 6px;
    background: rgba(124,92,219,.04);
}

.co-picker-row[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 12.5px;
    cursor: pointer;
}

    .co-picker-row:hover[b-e3jco40qtv] {
        background: rgba(124,92,219,.08);
    }

    .co-picker-row.sel[b-e3jco40qtv] {
        background: rgba(124,92,219,.14);
    }

    .co-picker-row input[b-e3jco40qtv] {
        accent-color: var(--area);
        cursor: pointer;
        flex: 0 0 auto;
    }

.co-picker-name[b-e3jco40qtv] {
    font-weight: 600;
    color: var(--ink);
}

.co-picker-sub[b-e3jco40qtv] {
    margin-left: auto;
    font-size: 11px;
    color: var(--faint);
    white-space: nowrap;
}

/* ---------- sectioned location picker (the "Existing" tab) ---------- */
.co-picker-hint[b-e3jco40qtv] {
    margin: 0;
    font-size: 11.5px;
    color: var(--muted);
    font-style: italic;
}

.co-picker-scroll[b-e3jco40qtv] {
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 3px;
}

/* section header — sticky as you scroll through the groups */
.co-picker-sec[b-e3jco40qtv] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(124,92,219,.12);
    backdrop-filter: blur(3px);
}

    .co-picker-sec:first-child[b-e3jco40qtv] {
        margin-top: 0;
    }

    /* the "already in here" group gets a teal accent so it reads as current */
    .co-picker-sec.cur[b-e3jco40qtv] {
        background: rgba(31,174,167,.18);
    }

.co-picker-sec-title[b-e3jco40qtv] {
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
}

    .co-picker-sec.cur .co-picker-sec-title[b-e3jco40qtv] {
        color: #0E6F68;
    }

.co-picker-sec-count[b-e3jco40qtv] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--faint);
    background: #fff;
    border-radius: 999px;
    padding: 0 7px;
    min-width: 18px;
    text-align: center;
    line-height: 1.55;
}

/* inside the sectioned scroller the per-section list is plain (the outer scroller scrolls) */
.co-picker-scroll .co-picker-list[b-e3jco40qtv] {
    max-height: none;
    overflow: visible;
    border: none;
    background: transparent;
    padding: 2px 2px 0;
    gap: 1px;
}

/* a checked row in the current group reads teal (staying), elsewhere purple (bringing in) */
.co-picker-scroll .co-picker-row.sel[b-e3jco40qtv] {
    background: rgba(124,92,219,.16);
}

/* per-unit sub-divider inside a grouped picker section */
.co-picker-subsec[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 5px 4px 1px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--area-text);
    white-space: nowrap;
}

    .co-picker-subsec[b-e3jco40qtv]::before {
        content: "";
        width: 3px;
        height: 12px;
        border-radius: 2px;
        background: var(--area);
        opacity: .55;
    }

    .co-picker-subsec[b-e3jco40qtv]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, rgba(124,92,219,.28), transparent);
    }

.co-area-active[b-e3jco40qtv] {
    margin: 2px 0 4px;
    font-weight: 600;
}

.co-area-managers[b-e3jco40qtv] {
    margin: 2px 0 4px;
}

/* ---------- clickable legend name + collapse cluster ---------- */
/* No pencils: the entity NAME opens its editor (area → detail dialog, unit/location →
   rename), and collapse/expand lives ONLY on the count+caret cluster. */
.co-title-name[b-e3jco40qtv] {
    cursor: pointer;
    border-radius: 6px;
    padding: 0 2px;
    transition: color .12s;
}

    .co-title-name:hover[b-e3jco40qtv] {
        color: var(--area-text);
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-thickness: 1px;
    }

.co-title-collapse[b-e3jco40qtv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

    .co-title-collapse:hover .caret[b-e3jco40qtv],
    .co-title-collapse:hover .count[b-e3jco40qtv] {
        color: var(--area-text);
    }

/* header legends drive their clicks from the name / collapse children, so the legend
   itself is not a pointer and doesn't recolor on hover — unlike the simple pool
   legend, which still collapses on a whole-legend click. */
.co-title-hdr[b-e3jco40qtv] {
    cursor: default;
}

    .co-title-hdr:hover[b-e3jco40qtv] {
        color: var(--ink);
    }

/* the location NAME doubles as its rename control (non-holding cards) */
.lname.lname-edit[b-e3jco40qtv] {
    cursor: pointer;
    width: fit-content;
    max-width: 100%;
    border-radius: 4px;
}

    .lname.lname-edit:hover[b-e3jco40qtv] {
        color: var(--area-text);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

.co-area-editbody[b-e3jco40qtv] {
    margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   Drawer colors in the cart-menu contents list.

   Same palette as the cart/container/tray grids — the variables are declared
   globally in wwwroot/css/app.css, so only the structure lives here. The class
   comes from DrawerColorConstants via CartOrganizerInventoryGroup.ColorName, and
   is absent for anything uncolored, which leaves those groups untouched.

   Lighter treatment than the grids on purpose: this is a summary panel, not the
   working cart view. The drawer gets a colored border, a wash on its header, and
   a wash behind its items — but no border around the item list, so the color
   identifies the drawer without boxing in the contents.

   EVERY SELECTOR HERE IS A DIRECT-CHILD SELECTOR, deliberately. With descendant
   selectors these rules also reach the header and item list of any KIT nested
   inside a colored drawer, because --dc-w1 inherits down the DOM.
   That would wash the kit in its parent's color and destroy the one distinction
   the nesting exists to make: the color belongs to the drawer, and the kit
   inside it is uncolored.
   --------------------------------------------------------------------------- */

/*noinspection CssUnresolvedCustomProperty*/
/* Edge layers only — this group keeps its own panel background, so no fill layer is added underneath.
   Same perimeter-divided border a split drawer gets in the grid. */
/*noinspection CssUnresolvedCustomProperty*/
.co-inv-group[class*="dc-"][b-e3jco40qtv] {
    border: none;
    background: var(--dc-edges);
}

/*noinspection CssUnresolvedCustomProperty*/
.co-inv-group[class*="dc-"] > .co-inv-head[b-e3jco40qtv] {
    background: var(--dc-wash);
}

/* Keep the hover tint in the drawer's own color rather than letting the default
   purple hover replace it — a color that vanishes under the cursor reads as a
   glitch. color-mix darkens the wash slightly instead of swapping the hue. */
/*noinspection CssUnresolvedCustomProperty*/
.co-inv-group[class*="dc-"] > .co-inv-head:hover[b-e3jco40qtv] {
    /* --dc-tint, not --dc-fill: the fill became a GRADIENT when split colors arrived, and color-mix
       only accepts colors — mixing an image is invalid and silently killed this hover. --dc-tint is
       the set's one flat value, and it is the drawer's own hue, which is what this was always after. */
    background: color-mix(in srgb, var(--dc-tint) 18%, transparent);
}

/* Expanded contents: wash only. The existing border-top stays as the separator it
   already was; adding a drawer border here would box the item list in and fight
   the rounded group frame. */
/*noinspection CssUnresolvedCustomProperty*/
.co-inv-group[class*="dc-"] > .co-inv-items[b-e3jco40qtv] {
    background: var(--dc-wash);
}

/* ---------------------------------------------------------------------------
   Nested containers in the contents list (kits inside a drawer, and deeper).

   A nested group renders INSIDE its parent's expanded body, so it reads as part
   of that drawer and collapses with it. The indent is small on purpose — enough
   to show the relationship, not enough to march off the right edge of a narrow
   panel after two or three levels.

   --co-inv-depth is set inline per level, so depth 2 and beyond keep stepping in
   without any new rules.
   --------------------------------------------------------------------------- */

/*noinspection CssUnresolvedCustomProperty*/
.co-inv-group--nested[b-e3jco40qtv] {
    margin: 4px 6px 6px calc(10px * var(--co-inv-depth, 1));
    /* Lighter frame than a top-level drawer: this is a thing inside a thing, and two equally strong
       borders is what made kits read as drawers in the first place. */
    border-radius: 8px;
    border-color: var(--line);
    /* An OPAQUE surface, not transparent. A nested kit sits on top of its drawer's colored wash, and
       a transparent card would let that color through and read as a colored kit — the opposite of
       the point. This lifts it back off the wash as its own uncolored card. */
    background: var(--glass-strong);
}

/* A nested header sits a step down in the hierarchy, so it is quieter than a drawer's. */
.co-inv-group--nested > .co-inv-head[b-e3jco40qtv] {
    background: transparent;
    font-weight: 500;
    font-size: 12px;
    padding: 6px 8px;
}

.co-inv-group--nested > .co-inv-head:hover[b-e3jco40qtv] {
    background: rgba(124, 92, 219, .06);
}

/* "Kit" placard on a nested container's header. Borrows the inventory report's .stat-badge look —
   small neutral grey pill — so a kit reads the same way in both places.

   Neutral on purpose: it is a label, not a status. Color here would compete with the drawer colors
   right beside it and imply a condition that does not exist. */
.co-inv-kit-tag[b-e3jco40qtv] {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 4px;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.5;
}

/* ---- Template lock fields -------------------------------------------------
   The lock rows that replace the single Lock # field on a cart whose template
   declares locks. A row per LOCK, a field per numbered seal under it, because a
   lock has no number — its seals do, and one bar can carry two of them.
   Deliberately the page's own look rather than the shared Telerik component's:
   these sit beside four other co-edit panels. */
.co-lock-list[b-e3jco40qtv] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.co-lock-row[b-e3jco40qtv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(0,0,0,.015);
}

.co-lock-row-head[b-e3jco40qtv] {
    display: flex;
    align-items: baseline;
}

.co-lock-name[b-e3jco40qtv] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

/* An orphan seal: its definition is gone, so the last number is kept but cannot
   be changed here. A line rather than a disabled box — an action that cannot
   succeed is not rendered. */
.co-lock-frozen[b-e3jco40qtv] {
    flex: 1 1 auto;
    font-size: 12.5px;
    color: var(--faint);
}

/* ---------- inactive locations ---------- */
/* They stay in the DOM so "Show inactive" can reveal them (dimmed) without a reload. The rule only
   ever HIDES — revealing never sets display, so each element keeps its own. */
.co-board:not(.co-show-inactive) .co-loc-wrap.co-loc-inactive[b-e3jco40qtv] {
    display: none;
}

.co-board.co-show-inactive .co-loc-wrap.co-loc-inactive[b-e3jco40qtv] {
    opacity: .8;
    filter: grayscale(.5);
}

/* location status row in the edit dialog */
.co-edit-status[b-e3jco40qtv] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

    .co-edit-status .k[b-e3jco40qtv] {
        flex: 0 0 60px;
        color: var(--faint);
        font-weight: 600;
    }

.co-locstate[b-e3jco40qtv] {
    flex: 1 1 auto;
    font-weight: 650;
    font-size: 12.5px;
}

    .co-locstate.on[b-e3jco40qtv] {
        color: #2E7D53;
    }

    .co-locstate.off[b-e3jco40qtv] {
        color: #6B6B79;
    }

    .co-locstate.paused[b-e3jco40qtv] {
        color: #9C5700;
        margin-right: 4px;
    }

/* ---------- paused inspections (00171) ---------- */
/* The ‖ beside a location's start date opens the pause panel; while paused it is a ▶ that changes or
   ends the pause. The same ‖ tags a paused location on the board. */
.co-start-v[b-e3jco40qtv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.co-pause-btn[b-e3jco40qtv] {
    border: 1px solid var(--line, #d9d9e3);
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    width: 24px;
    height: 22px;
    border-radius: 6px;
    padding: 0;
}

    .co-pause-btn:hover:not(:disabled)[b-e3jco40qtv] {
        background: rgba(124,92,219,.12);
        color: var(--area);
    }

    .co-pause-btn.is-paused[b-e3jco40qtv] {
        color: #9C5700;
        border-color: #F2D49B;
        background: #FFF6E0;
    }

.co-pause-title[b-e3jco40qtv] {
    font-size: 13px;
    font-weight: 650;
    color: var(--ink);
}

.co-edit-field.is-disabled[b-e3jco40qtv] {
    opacity: .5;
}

/* Two bars, drawn rather than typed: the ‖ glyph at this size read as a single line. */
.co-paused-tag[b-e3jco40qtv] {
    display: inline-block;
    width: 8px;
    height: 10px;
    margin-left: 6px;
    vertical-align: -1px;
    border-left: 3px solid #9C5700;
    border-right: 3px solid #9C5700;
    box-sizing: border-box;
}

.co-edit-hint[b-e3jco40qtv] {
    font-size: 12px;
    color: var(--faint);
    line-height: 1.45;
}

/* ---------- inactive areas and units ---------- */
/* Same idea as inactive locations. Loading them also keeps an inactive area's locations from falling
   through into the Free Area. Only HIDE here: a collapsed area/unit is a flex pill, so forcing a
   display on reveal would break it. */
.co-board:not(.co-show-inactive) .co-area.co-area-inactive[b-e3jco40qtv],
.co-board:not(.co-show-inactive) .co-unit.co-unit-inactive[b-e3jco40qtv] {
    display: none;
}

/* Areas are DIRECT children of the multicol board — opacity only there, never filter/transform. */
.co-board.co-show-inactive .co-area.co-area-inactive[b-e3jco40qtv] {
    opacity: .8;
}

.co-board.co-show-inactive .co-unit.co-unit-inactive[b-e3jco40qtv] {
    opacity: .8;
    filter: grayscale(.5);
}

/* unit excluded from daily inspections (LocationUnit.IsAuditable = false, 00160) */
.co-noaudit[b-e3jco40qtv] {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em;
    color: #6B5B2A;
    background: rgba(224, 178, 80, .22);
    border: 1px solid rgba(200, 154, 52, .45);
    white-space: nowrap;
}

/* The same two bars inside the dialog's pause button, centered and in the button's own color. */
.co-paused-tag.co-pause-glyph[b-e3jco40qtv] {
    margin-left: 0;
    vertical-align: middle;
    border-color: currentColor;
}

/* ============================================================
   ACCESSIBILITY (WCAG 2.1 AA)
   The board's clickable names, collapse clusters and drop targets are real <button>s now, so
   they work from the keyboard; these rules make each button look like the text it replaced.
   ============================================================ */

/* a button that should read as plain inline text */
.co-title-name[b-e3jco40qtv],
.co-title-collapse[b-e3jco40qtv],
.co-title-pool[b-e3jco40qtv],
.co-collapsed-btn[b-e3jco40qtv] {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    margin: 0;
    text-align: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

/* the location name keeps its .loc-info .lname type (size, case, color) */
.lname.lname-edit[b-e3jco40qtv] {
    display: block;
    font-family: inherit;
    line-height: inherit;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.co-title-pool[b-e3jco40qtv] {
    padding: 0;
    cursor: pointer;
    font-weight: inherit;
}

    .co-title-pool:hover[b-e3jco40qtv] {
        color: var(--area-text);
    }

/* a collapsed area/unit/pool: the whole pill is still the expand button */
.co-collapsed[b-e3jco40qtv] {
    cursor: default;
}

.co-collapsed-btn[b-e3jco40qtv] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    border-radius: 10px;
}

/* the keyboard twin of a drop: shown on a highlighted area/unit while a location or unit is picked up */
.co-movehere[b-e3jco40qtv] {
    flex: 0 0 auto;
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    background: #6A48C8;
    border: none;
    border-radius: 999px;
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
}

    .co-movehere:hover[b-e3jco40qtv] {
        background: #553AA3;
    }

/* the orphan drop bar doubles as a button */
button.co-orphan-drop[b-e3jco40qtv] {
    font-family: inherit;
    cursor: pointer;
}

/* dialog titles are headings now (h2/h3); keep the old look */
h2.co-detail-title[b-e3jco40qtv],
h2.co-swapchoice-title[b-e3jco40qtv],
h3.co-statuschange-title[b-e3jco40qtv] {
    margin: 0;
    line-height: 1.3;
}

p.co-swapchoice-sub[b-e3jco40qtv] {
    margin: 0;
}

.co-swapchoice-tile-title[b-e3jco40qtv],
.co-swapchoice-tile-hint[b-e3jco40qtv] {
    display: block;
}

/* programmatic focus targets (tabindex -1): the dialog shell and the placement bars. Nothing in them
   is operable on its own, so no ring (UIStyleGuide §15, Focus). */
.co-detail[tabindex="-1"]:focus[b-e3jco40qtv],
.co-swapchoice[tabindex="-1"]:focus[b-e3jco40qtv],
.co-deploybar[tabindex="-1"]:focus[b-e3jco40qtv] {
    outline: none;
}

/* the sort label is a real <label> now */
label.pt-label[b-e3jco40qtv] {
    margin: 0;
}

/* errors render through StatusMessage: an empty one takes no room, but stays in the accessibility
   tree (never display:none), or the message that later fills it is not announced */
.cart-organizer[b-e3jco40qtv]  .co-edit-error:empty,
.cart-organizer[b-e3jco40qtv]  .co-rwd-note:empty {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.cart-organizer[b-e3jco40qtv]  .co-rwd-note.block {
    color: #a5322e;
    background: rgba(217,83,79,0.10);
    border-color: rgba(217,83,79,0.32);
}

/* the cart panel is a little wider so the 11px tray badge fits its strip */
.loc-cart[b-e3jco40qtv] {
    flex-basis: 60px;
}
/* /Components/Pages/Admin/IsolationCartOrganizerPage.razor.rz.scp.css */
/* ================= Isolation Cart Organizer — light page, dark panels ==================
   The PAGE holder stays soft & airy (it lives on a white site); the CONTAINERS lean back
   into the original dark "fall" look — deep warm browns rather than bright orange, with
   gold location cards, soft-teal home. Status bulbs reuse the standard cart-board colors.
   Component-scoped CSS. */
.iso[b-xyk9fu7vjj] {
    /* page-level tokens (dark text on the light cream ground) */
    --pg-ink: #382A22;
    /* darkened for WCAG 1.4.3 (design-spec A7/A8): --pg-faint was 2.27:1 on the cream ground */
    --pg-muted: #716050;
    --pg-faint: #726358;
    --pg-line: rgba(90,58,36,.13);
    --pg-glass: rgba(255,255,255,.62);
    --pg-glass-strong: rgba(255,255,255,.82);

    /* panel-level tokens (light text on the deep warm panels) */
    --pnl-ink: #F1E7DB;
    --pnl-muted: #C4B2A0;
    --pnl-faint: #9C8B7A;
    --pnl-line: rgba(241,231,219,.18);
    /* cart tiles/chips: solid neutral slate with a couple drops of red/brown for warmth —
       solid, not translucent (translucency picked up the purple/gold and read washed-out) + sheen */
    --pnl-tile: linear-gradient(180deg, #413A33, #342E29);

    /* two big panels are see-through TINTS over the cream page (like the base page):
       deployment = orange-red; home = soft teal to match the cart board's home color */
    --iso-area: rgba(212,86,48,.22);
    --iso-area-bd: rgba(210,86,48,.46);
    --iso-home: rgba(31,174,167,.16);
    --iso-home-bd: rgba(31,174,167,.44);
    /* location card fill — soft GOLD (purple was the cart board's UNIT color, misleading here).
       Card mirrors the cart-board card anatomy: cart glyph on the left, info on the right. */
    --iso-unit: linear-gradient(180deg, #F1D496, #E7C67E);
    --iso-unit-bd: rgba(170,126,42,.42);

    --iso-r: 20px;
    --iso-shadow: 0 12px 30px rgba(40,26,16,.28);
    --iso-shadow-sm: 0 4px 14px rgba(60,40,24,.10);

    color: var(--pg-ink);
    background:
        radial-gradient(1000px 680px at 14% -8%, rgba(31,174,167,.05), transparent 58%),
        radial-gradient(900px 600px at 112% 6%, rgba(210,120,60,.05), transparent 55%),
        linear-gradient(160deg, #F6F3EF, #ECE7E0);
    border-radius: var(--iso-r);
    padding: 18px 18px 60px;          /* generous bottom padding, matching the cart board */
    position: relative;               /* anchors the corner-clamped board-switch button */
    font-family: inherit;
}

.iso-info[b-xyk9fu7vjj] {
    color: var(--pg-muted);
    font-size: 14px;
    padding: 14px 4px;
}

/* board-switch button → standard cart board: a corner-cut tab CLAMPED flush into the field's
   top-right corner (like the cart/location menu tabs), blue = its destination board. */
.iso-shift[b-xyk9fu7vjj] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 6;
    font: inherit;
    font-size: 12px;
    font-weight: 640;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px 9px 14px;
    border: none;
    border-left: 1px solid #3F73C4;
    border-bottom: 1px solid #3F73C4;
    border-top-right-radius: var(--iso-r);   /* matches the board's rounded corner */
    border-bottom-left-radius: 12px;         /* the cut into the field */
    background: #3174D5;
    color: #fff;
    cursor: pointer;
}

    .iso-shift:hover[b-xyk9fu7vjj] {
        background: #3D7CDE;
    }

.iso-shift-arrow[b-xyk9fu7vjj] {
    font-size: 16px;
    line-height: 1;
}

/* ---------- header (page-level) — matches the cart board's .co-head heights ---------- */
.iso-head[b-xyk9fu7vjj] {
    display: flex;
    align-items: flex-end;                /* account picker bottom-aligns with the blurb, like the cart board */
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-right: 150px;                 /* clears the corner-clamped board-switch button */
}

.iso-title[b-xyk9fu7vjj] {
    font-size: 22px;
    font-weight: 720;
    letter-spacing: .01em;
    margin: 0 0 4px;
    color: #4A3626;
}

.iso-blurb[b-xyk9fu7vjj] {
    margin: 0;
    max-width: 58ch;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pg-muted);
}

.iso-acct[b-xyk9fu7vjj] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.iso-acct-label[b-xyk9fu7vjj] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pg-faint);
    font-weight: 650;
}

/* ---------- legend (page-level) ---------- */
.iso-legend[b-xyk9fu7vjj] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 18px;
    background: var(--pg-glass);
    border: 1px solid var(--pg-line);
    border-radius: 12px;
    box-shadow: var(--iso-shadow-sm);
}

.iso-lg-title[b-xyk9fu7vjj] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pg-faint);
    font-weight: 700;
}

.iso-lg[b-xyk9fu7vjj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--pg-muted);
}

    .iso-lg.off[b-xyk9fu7vjj] {
        opacity: .8;
        text-decoration: line-through;   /* "hidden" is said by the strike, not by fading the text away */
    }

.iso-lgtoggle[b-xyk9fu7vjj] {
    margin-left: auto;
    font: inherit;
    font-size: 11.5px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--pg-line);
    background: transparent;
    color: var(--pg-muted);
    cursor: pointer;
}

    .iso-lgtoggle.on[b-xyk9fu7vjj],
    .iso-lgtoggle:hover[b-xyk9fu7vjj] {
        background: rgba(210,150,50,.14);
        border-color: var(--iso-unit-bd);
        color: var(--pg-ink);
    }

/* ---------- status bulb ---------- */
.iso-bulb[b-xyk9fu7vjj] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c, #B9B9C6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #B9B9C6) 24%, transparent),
                0 0 9px color-mix(in srgb, var(--c, #B9B9C6) 58%, transparent);
    flex: 0 0 auto;
}

    .iso-bulb.lg[b-xyk9fu7vjj] {
        width: 13px;
        height: 13px;
    }

/* ---------- deployment locations (dark "area", on top) ---------- */
.iso-area[b-xyk9fu7vjj] {
    background: var(--iso-area);
    border: 1px solid var(--iso-area-bd);
    border-radius: var(--iso-r);
    padding: 14px 18px 20px;
    margin-bottom: 26px;
    box-shadow: var(--iso-shadow-sm);
}

.iso-area-hd[b-xyk9fu7vjj] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}

.iso-area-name[b-xyk9fu7vjj] {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #A0421C;
}

.iso-area-count[b-xyk9fu7vjj] {
    font-size: 11.5px;
    color: var(--pg-faint);
    font-weight: 600;
}

/* locations flow into 2 masonry columns (a wrapping "2-sided" board) */
.iso-locs[b-xyk9fu7vjj] {
    column-count: 2;
    column-gap: 14px;
}

@media (max-width: 720px) {
    .iso-locs[b-xyk9fu7vjj] {
        column-count: 1;
    }
}

/* the "inactive" pill shown next to a location's name */
.iso-loc-tag[b-xyk9fu7vjj] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #7A5E1E;
    border: 1px solid rgba(90,66,16,.35);
    border-radius: 6px;
    padding: 1px 5px;
    flex: 0 0 auto;
}

/* ---------- home pool (dark bronze panel, on the bottom) ---------- */
.iso-pool[b-xyk9fu7vjj] {
    background: var(--iso-home);
    border: 1px solid var(--iso-home-bd);
    border-radius: var(--iso-r);
    padding: 12px 16px 16px;
    box-shadow: var(--iso-shadow-sm);
}

.iso-pool-hd[b-xyk9fu7vjj] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.iso-pool-name[b-xyk9fu7vjj] {
    font-size: 14px;
    font-weight: 680;
    color: #157C76;
}

.iso-pool-count[b-xyk9fu7vjj] {
    font-size: 11.5px;
    color: var(--pg-faint);
    font-weight: 600;
}

.iso-chips[b-xyk9fu7vjj] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.iso-chip[b-xyk9fu7vjj] {
    position: relative;                 /* anchors the left ≡ + right ⋮ edge slivers */
    overflow: hidden;                   /* clips the slivers to the rounded corners */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 21px 5px 19px;         /* clear the left ≡ + right ⋮ slivers */
    border-radius: 10px;
    background: #E6E2DA;                 /* warm-grey off-white — nudged off yellow toward grey */
    border: 1px solid rgba(78,66,44,.2);
    box-shadow: var(--iso-shadow-sm);
    min-width: 122px;
}

/* left mini-column of a chip: mask on top, status dot beneath — makes the chip read squarer */
.iso-chip-icons[b-xyk9fu7vjj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

    .iso-chip.inactive[b-xyk9fu7vjj] {
        opacity: .8;
        filter: grayscale(.5);
    }

.iso-chip-glyph[b-xyk9fu7vjj] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

    .iso-chip-glyph .iso-mask[b-xyk9fu7vjj] {
        width: 18px;
        height: 18px;
        display: block;
    }

.iso-chip-body[b-xyk9fu7vjj] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.iso-chip-name[b-xyk9fu7vjj] {
    font-size: 12px;
    font-weight: 640;
    color: #3A2A16;
}

.iso-chip-state[b-xyk9fu7vjj] {
    font-size: 11px;
    color: #6E5426;
}

.iso-empty[b-xyk9fu7vjj] {
    color: var(--pg-faint);
    font-size: 12.5px;
    font-style: italic;
    padding: 8px 2px;
}

/* ================= interaction layer: add button, menus, dialogs, drag ================= */
.iso-add[b-xyk9fu7vjj] {
    margin-left: auto;
    font: inherit;
    font-size: 11.5px;
    font-weight: 640;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--iso-area-bd);
    background: rgba(255,255,255,.5);
    color: #9A3E1A;
    cursor: pointer;
}

    .iso-add:hover[b-xyk9fu7vjj] {
        background: rgba(255,255,255,.82);
    }

/* cart-details ≡ — base for the chip's left detail sliver (.iso-cartview.chip below) */
.iso-cartview[b-xyk9fu7vjj] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    z-index: 4;
    border: none;
    border-bottom: 1px solid rgba(90,66,20,.28);
    background: rgba(90,66,20,.14);
    color: #6E6559;
    font-size: 11px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .iso-cartview:hover[b-xyk9fu7vjj] {
        background: rgba(90,66,20,.26);
        color: #3A2A16;
    }

/* pool chip: ≡ becomes a vertical sliver down the LEFT edge (like .co-cartmenu-strip.chip) */
.iso-cartview.chip[b-xyk9fu7vjj] {
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: 17px;
    height: auto;
    border-bottom: none;
    border-right: 1px solid rgba(90,66,20,.28);
}

/* pool chip: ⋮ becomes a vertical sliver down the RIGHT edge — locked, the mirror of the left ≡ */
.iso-chipmenu[b-xyk9fu7vjj] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    width: 20px;
    border: none;
    border-left: 1px solid rgba(90,66,20,.28);
    background: rgba(90,66,20,.14);
    color: #6E6559;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .iso-chipmenu:hover[b-xyk9fu7vjj] {
        background: rgba(90,66,20,.26);
        color: #3A2A16;
    }

/* fixed popover menu */
.iso-menu-backdrop[b-xyk9fu7vjj] {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.iso-menu[b-xyk9fu7vjj] {
    position: fixed;
    z-index: 61;
    min-width: 184px;
    background: #FFFDF9;
    border: 1px solid rgba(90,66,20,.2);
    border-radius: 11px;
    box-shadow: 0 14px 40px rgba(50,30,12,.24);
    padding: 5px;
    display: flex;
    flex-direction: column;
}

.iso-menu-item[b-xyk9fu7vjj] {
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    padding: 7px 11px;
    border: none;
    background: transparent;
    color: #3A2A16;
    border-radius: 7px;
    cursor: pointer;
}

    .iso-menu-item:hover[b-xyk9fu7vjj] {
        background: rgba(210,150,50,.16);
    }

    .iso-menu-item.danger[b-xyk9fu7vjj] {
        color: #B23A2E;
    }

        .iso-menu-item.danger:hover[b-xyk9fu7vjj] {
            background: rgba(178,58,46,.12);
        }

/* modal dialogs */
.iso-scrim[b-xyk9fu7vjj] {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(30,20,10,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.iso-dialog[b-xyk9fu7vjj] {
    width: min(440px, 100%);
    max-height: 84vh;
    overflow: auto;
    background: #FFFDF9;
    border-radius: 16px;
    border: 1px solid rgba(90,66,20,.18);
    box-shadow: 0 24px 60px rgba(40,24,8,.35);
    display: flex;
    flex-direction: column;
}

    .iso-dialog.sm[b-xyk9fu7vjj] {
        width: min(360px, 100%);
    }

.iso-dialog-hd[b-xyk9fu7vjj] {
    padding: 15px 18px 10px;
    font-size: 15px;
    font-weight: 700;
    color: #5A3A22;
}

.iso-dialog-body[b-xyk9fu7vjj] {
    padding: 4px 18px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.iso-dialog-ft[b-xyk9fu7vjj] {
    padding: 12px 18px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.iso-dialog-q[b-xyk9fu7vjj] {
    margin: 4px 0 6px;
    font-size: 13.5px;
    color: #3A2A16;
}

.iso-dialog-empty[b-xyk9fu7vjj] {
    font-size: 12.5px;
    color: #886A27;
    font-style: italic;
    padding: 8px 0;
}

.iso-dialog-err[b-xyk9fu7vjj] {
    font-size: 12px;
    color: #B23A2E;
    background: rgba(178,58,46,.08);
    border: 1px solid rgba(178,58,46,.25);
    border-radius: 8px;
    padding: 6px 10px;
}

/* deploy/move/trade picker list */
.iso-pick-list[b-xyk9fu7vjj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 46vh;
    overflow: auto;
}

.iso-pick-row[b-xyk9fu7vjj] {
    font: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(90,66,20,.18);
    background: #FBF6EE;
    cursor: pointer;
    text-align: left;
}

    .iso-pick-row:hover:not(.off)[b-xyk9fu7vjj] {
        background: rgba(210,150,50,.16);
        border-color: var(--iso-area-bd);
    }

    .iso-pick-row.off[b-xyk9fu7vjj] {
        opacity: .65;   /* a disabled button: exempt from 1.4.3, but kept legible */
        cursor: default;
    }

.iso-pick-name[b-xyk9fu7vjj] {
    font-size: 13px;
    font-weight: 640;
    color: #3A2A16;
}

.iso-pick-occ[b-xyk9fu7vjj] {
    font-size: 11px;
    color: #7A5E30;
    white-space: nowrap;
}

/* inputs + buttons */
.iso-field-label[b-xyk9fu7vjj] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pg-faint);
    font-weight: 650;
    margin-top: 4px;
}

.iso-input[b-xyk9fu7vjj] {
    font: inherit;
    font-size: 13px;
    padding: 8px 11px;
    border-radius: 9px;
    border: 1px solid rgba(90,66,20,.28);
    background: #fff;
    color: #3A2A16;
    width: 100%;
}

    .iso-input:focus[b-xyk9fu7vjj] {
        border-color: var(--iso-area-bd);
        box-shadow: 0 0 0 3px rgba(210,86,48,.14);
    }

.iso-btn[b-xyk9fu7vjj] {
    font: inherit;
    font-size: 12.5px;
    font-weight: 620;
    padding: 7px 14px;
    border-radius: 9px;
    border: 1px solid rgba(90,66,20,.24);
    background: #fff;
    color: #4A3626;
    cursor: pointer;
}

    .iso-btn:hover:not(:disabled)[b-xyk9fu7vjj] {
        background: #F3ECE1;
    }

    .iso-btn:disabled[b-xyk9fu7vjj] {
        opacity: .5;
        cursor: default;
    }

    .iso-btn.go[b-xyk9fu7vjj] {
        background: #008750;
        border-color: #008750;
        color: #fff;
    }

        .iso-btn.go:hover:not(:disabled)[b-xyk9fu7vjj] {
            background: #006E41;
        }

    .iso-btn.warn[b-xyk9fu7vjj] {
        background: #E8A33D;
        border-color: #E8A33D;
        color: #3A2A10;
    }

        .iso-btn.warn:hover:not(:disabled)[b-xyk9fu7vjj] {
            background: #D8942F;
        }

/* banners */
.iso-banner[b-xyk9fu7vjj] {
    font-size: 12.5px;
    padding: 9px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .iso-banner.err[b-xyk9fu7vjj] {
        background: rgba(178,58,46,.1);
        border: 1px solid rgba(178,58,46,.3);
        color: #9E2E22;
    }

    .iso-banner.place[b-xyk9fu7vjj] {
        background: rgba(31,174,167,.12);
        border: 1px solid rgba(31,174,167,.4);
        color: #15746E;
    }

.iso-banner-x[b-xyk9fu7vjj] {
    margin-left: auto;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 12px;
}

/* drag / drop highlights */
.iso-chip[draggable="true"][b-xyk9fu7vjj] {
    cursor: grab;
}

    .iso-chip[draggable="true"]:active[b-xyk9fu7vjj] {
        cursor: grabbing;
    }

.iso-pool.drop-ok[b-xyk9fu7vjj] {
    outline: 2px dashed var(--iso-home-bd);
    outline-offset: -4px;
}

.iso-chip.src[b-xyk9fu7vjj] {
    box-shadow: 0 0 0 2px var(--iso-area-bd);
}

/* cart-detail rows, checkbox, danger button */
.iso-dialog-hd[b-xyk9fu7vjj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.iso-drow[b-xyk9fu7vjj] {
    display: flex;
    gap: 12px;
    font-size: 12.5px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(90,66,20,.08);
}

    .iso-drow .k[b-xyk9fu7vjj] {
        flex: 0 0 88px;
        color: var(--pg-faint);
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: .05em;
        font-weight: 650;
        padding-top: 2px;
    }

    .iso-drow .v[b-xyk9fu7vjj] {
        color: #3A2A16;
        font-weight: 550;
    }

.iso-dnote[b-xyk9fu7vjj] {
    margin-top: 8px;
    font-size: 11.5px;
    font-style: italic;
    color: var(--pg-faint);
}

.iso-check[b-xyk9fu7vjj] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #3A2A16;
    margin-top: 8px;
    cursor: pointer;
}

.iso-btn.danger[b-xyk9fu7vjj] {
    background: #C6483C;
    border-color: #C6483C;
    color: #fff;
}

    .iso-btn.danger:hover:not(:disabled)[b-xyk9fu7vjj] {
        background: #B03A30;
    }

/* ---------- conflicts strip (surfaced hidden/duplicate deployed carts) ---------- */
.iso-conflicts[b-xyk9fu7vjj] {
    background: rgba(198,72,60,.1);
    border: 1px solid rgba(198,72,60,.4);
    border-radius: var(--iso-r);
    padding: 12px 16px 14px;
    margin-bottom: 20px;
    box-shadow: var(--iso-shadow-sm);
}

.iso-conflicts-hd[b-xyk9fu7vjj] {
    font-size: 12px;
    font-weight: 600;
    color: #9E2E22;
    margin-bottom: 10px;
    line-height: 1.4;
}

.iso-chip.conflict[b-xyk9fu7vjj] {
    background: #FBEAE6;
    border-color: rgba(198,72,60,.45);
}

/* ================= location-as-unit: expanding box holding all its carts ================= */
.iso-locunit[b-xyk9fu7vjj] {
    background: rgba(255,251,243,.62);
    border: 1px solid var(--iso-unit-bd);
    border-radius: 14px;
    padding: 9px 14px 13px;
    box-shadow: var(--iso-shadow-sm);
    break-inside: avoid;      /* don't split a location box across the 2 columns */
    margin-bottom: 14px;      /* multicol uses margin, not gap, between stacked boxes */
}

    .iso-locunit.loc-off[b-xyk9fu7vjj] {
        opacity: .8;
        filter: saturate(.6);
    }

    .iso-locunit.drop-ok[b-xyk9fu7vjj] {
        outline: 2px dashed var(--iso-area-bd);
        outline-offset: -3px;
    }

.iso-locunit-hd[b-xyk9fu7vjj] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* the location "tag" — click for its details/edit */
.iso-loctag[b-xyk9fu7vjj] {
    font: inherit;
    font-size: 12.5px;
    font-weight: 680;
    color: #8A5A16;
    background: rgba(224,178,80,.22);
    border: 1px solid var(--iso-unit-bd);
    border-radius: 999px;
    padding: 4px 12px 4px 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .iso-loctag:hover[b-xyk9fu7vjj] {
        background: rgba(224,178,80,.4);
        color: #6E4610;
    }

.iso-loctag-pin[b-xyk9fu7vjj] {
    font-size: 11px;
}

.iso-locunit-count[b-xyk9fu7vjj] {
    font-size: 11px;
    color: var(--pg-faint);
    font-weight: 600;
}

.iso-locunit-carts[b-xyk9fu7vjj] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;   /* chips keep their own height; add-slot stays square */
    gap: 10px;
}

.iso-locunit-empty[b-xyk9fu7vjj] {
    font-size: 11.5px;
    font-style: italic;
    color: var(--pg-faint);
    padding: 6px 2px;
}

/* add-cart picker section header + bulb-in-name */
.iso-pick-group[b-xyk9fu7vjj] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pg-faint);
    font-weight: 700;
    margin: 8px 0 2px;
}

    .iso-pick-group:first-child[b-xyk9fu7vjj] {
        margin-top: 0;
    }

.iso-pick-name[b-xyk9fu7vjj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* the "coming soon" note inside the cart-detail dialog (History) */
.iso-dialog-note[b-xyk9fu7vjj] {
    font-size: 12px;
    color: #15746E;
    background: rgba(31,174,167,.1);
    border: 1px solid rgba(31,174,167,.3);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 6px;
}

/* ---------- add-slot (small square deploy/move-into drop zone) + trade/drop highlights ---------- */
.iso-addslot[b-xyk9fu7vjj] {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border: 1.5px dashed var(--iso-unit-bd);
    border-radius: 10px;
    background: transparent;
    color: #9A6E1E;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .iso-addslot:hover[b-xyk9fu7vjj] {
        background: rgba(224,178,80,.16);
        border-color: #C89A34;
    }

    .iso-addslot.drop-ok[b-xyk9fu7vjj] {
        outline: 2px dashed var(--iso-area-bd);
        outline-offset: 2px;
        background: rgba(224,178,80,.22);
        color: #6E4610;
    }

/* a cart chip lit as a swap target while dragging another cart onto it */
.iso-chip.drop-ok[b-xyk9fu7vjj] {
    outline: 2px solid var(--iso-area-bd);
    outline-offset: -1px;
}

/* blue "Save"/primary button */
.iso-btn.blue[b-xyk9fu7vjj] {
    background: #3174D5;
    border-color: #3174D5;
    color: #fff;
}

    .iso-btn.blue:hover:not(:disabled)[b-xyk9fu7vjj] {
        background: #3D7AD8;
    }

/* purple Rewind button, matching the cart board's rewind primary */
.iso-btn.rewind[b-xyk9fu7vjj] {
    background: #7C5CDB;
    border-color: #7C5CDB;
    color: #fff;
}

    .iso-btn.rewind:hover:not(:disabled)[b-xyk9fu7vjj] {
        background: #6B4CC9;
    }

/* the active/inactive toggle row in the location edit dialog */
.iso-locactive-row[b-xyk9fu7vjj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(90,66,20,.14);
}

.iso-locactive-lbl[b-xyk9fu7vjj] {
    font-size: 12.5px;
    color: #3A2A16;
}

/* ---------- detail-dialog header tools (corner ✎ edit + ✕ close) ---------- */
.iso-dialog-hd[b-xyk9fu7vjj] {
    justify-content: space-between;
}

.iso-dialog-hd-title[b-xyk9fu7vjj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.iso-dialog-hd-tools[b-xyk9fu7vjj] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.iso-hd-btn[b-xyk9fu7vjj] {
    border: none;
    background: transparent;
    color: #6E6559;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .iso-hd-btn:hover[b-xyk9fu7vjj] {
        background: rgba(58,42,22,.1);
        color: #3A2A16;
    }

.iso-textarea[b-xyk9fu7vjj] {
    resize: vertical;
    min-height: 54px;
    font-family: inherit;
}

.iso-edit-actions[b-xyk9fu7vjj] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

/* ---------- rewind (cart history) ---------- */
.iso-rwd-stepper[b-xyk9fu7vjj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.iso-rwd-arrow[b-xyk9fu7vjj] {
    border: 1px solid rgba(90,66,20,.28);
    background: #fff;
    color: #4A3626;
    cursor: pointer;
    width: 28px;
    height: 26px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1;
}

    .iso-rwd-arrow:hover:not(:disabled)[b-xyk9fu7vjj] {
        background: #F3ECE1;
    }

    .iso-rwd-arrow:disabled[b-xyk9fu7vjj] {
        opacity: .4;
        cursor: default;
    }

.iso-rwd-step[b-xyk9fu7vjj] {
    font-size: 12px;
    font-weight: 640;
    color: var(--pg-muted);
}

.iso-rwd-dot[b-xyk9fu7vjj] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
}

    .iso-rwd-dot.green[b-xyk9fu7vjj] {
        background: #35B36A;
        box-shadow: 0 0 0 3px rgba(53,179,106,.18);
    }

    .iso-rwd-dot.amber[b-xyk9fu7vjj] {
        background: #F0A238;
        box-shadow: 0 0 0 3px rgba(240,162,56,.2);
    }

    .iso-rwd-dot.red[b-xyk9fu7vjj] {
        background: #DE5B5B;
        box-shadow: 0 0 0 3px rgba(222,91,91,.2);
    }

.iso-rwd-notes[b-xyk9fu7vjj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.iso-rwd-note[b-xyk9fu7vjj] {
    font-size: 12px;
    border-radius: 8px;
    padding: 6px 10px;
}

    .iso-rwd-note.block[b-xyk9fu7vjj] {
        color: #9E2E22;
        background: rgba(178,58,46,.1);
        border: 1px solid rgba(178,58,46,.28);
    }

    .iso-rwd-note.warn[b-xyk9fu7vjj] {
        color: #8A5A10;
        background: rgba(224,150,50,.12);
        border: 1px solid rgba(224,150,50,.34);
    }

/* ============================================================
   ACCESSIBILITY (WCAG 2.1 AA)
   ============================================================ */

/* dialog titles are h2 headings now; keep the old look */
h2.iso-dialog-hd[b-xyk9fu7vjj] {
    margin: 0;
    line-height: 1.3;
}

h2.iso-dialog-hd-title[b-xyk9fu7vjj] {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.3;
}

/* programmatic focus target (tabindex -1): nothing in the shell itself is operable */
.iso-dialog[tabindex="-1"]:focus[b-xyk9fu7vjj] {
    outline: none;
}

/* errors render through StatusMessage (a child component), so these need ::deep. An empty one takes
   no room but stays in the accessibility tree, or the message that later fills it is not announced. */
.iso[b-xyk9fu7vjj]  .iso-dialog-err {
    font-size: 12px;
    color: #B23A2E;
    background: rgba(178,58,46,.08);
    border: 1px solid rgba(178,58,46,.25);
    border-radius: 8px;
    padding: 6px 10px;
}

.iso[b-xyk9fu7vjj]  .iso-rwd-note.block {
    font-size: 12px;
    border-radius: 8px;
    padding: 6px 10px;
    color: #9E2E22;
    background: rgba(178,58,46,.1);
    border: 1px solid rgba(178,58,46,.28);
}

.iso[b-xyk9fu7vjj]  .iso-dialog-err:empty,
.iso[b-xyk9fu7vjj]  .iso-rwd-note:empty {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
/* /Components/Pages/ContainerInventoryPage.razor.rz.scp.css */
#container-field[b-ve0wnmcnxp] {
    width: 100%;
    max-width: 300px;
}

#expiration-date-range-field[b-ve0wnmcnxp] {
    width: 100%;
    max-width: 450px;
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-text[b-st4zonajmk] {
    color: #B02A37;
}
/* /Components/Pages/FaqPage.razor.rz.scp.css */
[b-8e3bvfyzuk] .faq-item-content {
    padding: 0.5rem 1rem;
}
/* /Components/Pages/FloorRestockPage.razor.rz.scp.css */
/* Device-less "future" items (template expects them, cart doesn't hold them yet).
   Informational blue mirrors the shared .card-status-info palette in app.css so the
   pick list reads consistently with the rest of the app. */
[b-ymvd3f68mb] .k-grid-table .k-table-row.floor-restock-future-row {
    background: #eff6ff;
}

[b-ymvd3f68mb] .k-grid-table .k-table-alt-row.floor-restock-future-row {
    background: #dbeafe;
}

/* Keep the highlight from being masked by the per-cell background on hover/selection. */
[b-ymvd3f68mb] .k-grid-table .k-table-row.floor-restock-future-row > .k-table-td,
[b-ymvd3f68mb] .k-grid-table .k-table-alt-row.floor-restock-future-row > .k-table-td {
    background: transparent;
}

.floor-restock-legend[b-ymvd3f68mb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: #1e40af;
}

.floor-restock-legend-swatch[b-ymvd3f68mb] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 3px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    flex: 0 0 auto;
}

.floor-restock-footnote[b-ymvd3f68mb] {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid #bfdbfe;
    background: #eff6ff;
    font-size: 0.85rem;
    line-height: 1.35;
    color: #334155;
}

/* Device-backed "removal" items (on the cart but dropped from the newest template).
   Red mirrors the shared .card-status-danger palette in app.css. */
[b-ymvd3f68mb] .k-grid-table .k-table-row.floor-restock-removal-row {
    background: #fef2f2;
}

[b-ymvd3f68mb] .k-grid-table .k-table-alt-row.floor-restock-removal-row {
    background: #fee2e2;
}

[b-ymvd3f68mb] .k-grid-table .k-table-row.floor-restock-removal-row > .k-table-td,
[b-ymvd3f68mb] .k-grid-table .k-table-alt-row.floor-restock-removal-row > .k-table-td {
    background: transparent;
}

.floor-restock-legend--remove[b-ymvd3f68mb] {
    color: #b91c1c;
}

.floor-restock-legend-swatch--remove[b-ymvd3f68mb] {
    background: #fef2f2;
    border-color: #fecaca;
}

.floor-restock-footnote--remove[b-ymvd3f68mb] {
    border-left-color: #fecaca;
    background: #fef2f2;
}

/* Row actions: the "Required" tag (when shown) and the Actions menu, right-aligned and never wrapping.
   The row's actions live in one dropdown — a removal row offers three of them, which no reasonable column
   width fits side by side, and they were being clipped mid-word. */
.floor-restock-actions[b-ymvd3f68mb] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* "of N expected" under the staged count, when the template asks for a different number. */
.floor-restock-expected-qty[b-ymvd3f68mb] {
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
}

/* The GENERIC name under the product name, when the two read differently. Subtle: the product is what the
   tech picks up, the generic is what tells them which template row it belongs to. */
.floor-restock-generic-name[b-ymvd3f68mb] {
    font-size: 0.75rem;
    line-height: 1.2;
}

/* A short muted note in the Actions column: "Required" in place of the Mark Missing action on a critical
   item, or why the Actions button is gone ("Pull confirmed"). One style for both, so the column reads the
   same way whichever it is saying. */
.floor-restock-action-note[b-ymvd3f68mb] {
    font-size: 0.75rem;
    font-style: italic;
}

/* The row's status chips (Remove, Pulled, Not in drawer, Missing), after the item name. Each chip is the
   shared .chip pill from app.css; this only spaces them evenly and keeps them off the name. */
.floor-restock-chips[b-ymvd3f68mb] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* /Components/Pages/Inspections/CreateInspectionFormPage.razor.rz.scp.css */
.inspection-form-container[b-c8rl1t4nr5] {
    background-color: #e7ebef;
    padding: 0.75rem;
    border-radius: 0.75rem;
    width: 100%;
}
/* /Components/Pages/Inspections/CreateInspectionTemplatePage.razor.rz.scp.css */
.inspection-template-container[b-jtde579gd4] {
    background-color: #e7ebef;
    padding: 0.75rem;
    border-radius: 0.75rem;
    width: 100%;
}
/* /Components/Pages/Inspections/EditInspectionFormPage.razor.rz.scp.css */
.inspection-form-container[b-eyjdna4x7x] {
    background-color: #e7ebef;
    padding: 0.75rem;
    border-radius: 0.75rem;
    width: 100%;
}
/* /Components/Pages/Inspections/EditInspectionTemplatePage.razor.rz.scp.css */
.inspection-template-container[b-ib6mzq96k6] {
    background-color: #e7ebef;
    padding: 0.75rem;
    border-radius: 0.75rem;
    width: 100%;
}
/* /Components/Pages/Inspections/InspectionFormsPage.razor.rz.scp.css */
/* /Components/Pages/Inspections/InspectionGroupsPage.razor.rz.scp.css */
/* /Components/Pages/Inspections/InspectionItemsPage.razor.rz.scp.css */
/* /Components/Pages/Inspections/InspectionItemTypesPage.razor.rz.scp.css */
/* /Components/Pages/Inspections/InspectionListPage.razor.rz.scp.css */
/* /Components/Pages/Inspections/InspectionScheduleFrequenciesPage.razor.rz.scp.css */
/* /Components/Pages/Inspections/InspectionSettingsPage.razor.rz.scp.css */
/* /Components/Pages/Inspections/InspectionTemplatesPage.razor.rz.scp.css */
/* /Components/Pages/LabelsContainerPage.razor.rz.scp.css */
.demo-button[b-dfyuxm0q94] {
    width: 240px;
    float: right;
}

.demo-section[b-dfyuxm0q94] {
    max-width: 1000px;
    padding-bottom: 80px;
}

    .demo-section label[b-dfyuxm0q94] {
        margin-left: 5px;
    }

.fileName-label[b-dfyuxm0q94] {
    width: 90px;
}

.image-wrapper[b-dfyuxm0q94] {
    text-align: center;
    min-height: 300px;
    position: relative;
}

    .image-wrapper img[b-dfyuxm0q94] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 0;
    }

.template-image[b-dfyuxm0q94] {
    height: 300px;
    border: 1px solid #c9c9c9;
}

.custom-image[b-dfyuxm0q94] {
    height: 180px;
}

.custom-radio-wrapper[b-dfyuxm0q94] {
    float: right;
}

.visible-wrapper[b-dfyuxm0q94] {
    display: block;
}

.hidden-wrapper[b-dfyuxm0q94] {
    display: none;
}

/* generate button */
.btn[b-dfyuxm0q94] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    background: #f3f4f6; /* light gray */
    color: #111827; /* near-black text */
    border: 1px solid #d1d5db; /* soft border */

    cursor: pointer;
    user-select: none;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease, filter 120ms ease;
}

    .btn:hover[b-dfyuxm0q94] {
        background: #e5e7eb;
        border-color: #cbd5e1;
    }

    .btn:active[b-dfyuxm0q94] {
        transform: translateY(1px);
    }

    .btn:focus-visible[b-dfyuxm0q94] {
        outline: 2px solid rgba(17, 24, 39, 0.25);
        outline-offset: 2px;
    }

    .btn:disabled[b-dfyuxm0q94],
    .btn[disabled][b-dfyuxm0q94] {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
    }



/* warning for overflow number input */

.input-wrap[b-dfyuxm0q94] {
    position: relative;
    display: inline-block; /* keeps it from taking full width */
}

.input-warn[b-dfyuxm0q94] {
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px); /* 4px above the input */
    font-size: 12px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    background: #fff3cd; /* warning-ish background */
    border: 1px solid #ffeeba;
    color: #856404;
    white-space: nowrap; /* prevents wrapping */
    z-index: 10;
    pointer-events: none; /* doesn't block clicks in the input */
}
/* /Components/Pages/LabelsItemSyncPage.razor.rz.scp.css */
.dots-loading[b-gdxar3p61f]::after {
    content: '';
    animation: dots-b-gdxar3p61f 1.2s steps(4, end) infinite;
}

@keyframes dots-b-gdxar3p61f {
    0%  { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}
/* /Components/Pages/PrintBatchHistoryPage.razor.rz.scp.css */
.history-toolbar[b-9irzgl009x] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.grid-wrap[b-9irzgl009x] {
    overflow: auto;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    overflow-x:hidden;
}

.grid[b-9irzgl009x] {
    width: 100%;
    border-collapse: collapse;
}

    .grid th[b-9irzgl009x], .grid td[b-9irzgl009x] {
        padding: 10px 12px;
        border-bottom: 1px solid rgba(0,0,0,.08);
    }

    .grid th[b-9irzgl009x] {
        text-align: left;
        font-weight: 600;
    }

    .grid .right[b-9irzgl009x] {
        text-align: right;
    }

.muted[b-9irzgl009x] {
    opacity: .75;
}

.mono[b-9irzgl009x] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}


.click-row[b-9irzgl009x] {
    cursor: pointer;
    transition: transform 160ms ease, background-color 160ms ease;
    transform-origin: center;
}

    .click-row:hover[b-9irzgl009x] {
        background-color: rgba(0,0,0,.03);
        transform: scale(1.01);
        animation: row-bounce-b-9irzgl009x 260ms ease-out;
    }

    .click-row:active[b-9irzgl009x] {
        transform: scale(0.995);
    }

    .click-row:focus[b-9irzgl009x] {
        outline: 2px solid rgba(0,0,0,.25);
        outline-offset: -2px;
    }

@keyframes row-bounce-b-9irzgl009x {
    0% {
        transform: scale(1.01);
    }

    55% {
        transform: scale(1.018);
    }

    100% {
        transform: scale(1.01);
    }
}

.history-toplink[b-9irzgl009x] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.current-batch-link[b-9irzgl009x] {
    font-size: 14px;
    text-decoration: none;
    opacity: .85;
    transition: transform 160ms ease, opacity 160ms ease;
}

    .current-batch-link:hover[b-9irzgl009x] {
        opacity: 1;
        transform: scale(1.03);
    }

    .current-batch-link:active[b-9irzgl009x] {
        transform: scale(0.99);
    }
/* /Components/Pages/PrintBatchPage.razor.rz.scp.css */


.batch-header[b-i4e4yt25rm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 12px;
}




.label-select .label[b-i4e4yt25rm] {
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
    opacity: 0.85;
}

.input[b-i4e4yt25rm] {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    min-width: 180px;
    background: white;
}

.batch-toolbar[b-i4e4yt25rm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px 12px;
    gap: 10px;
}

.toolbar-left[b-i4e4yt25rm], .toolbar-right[b-i4e4yt25rm] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.chk[b-i4e4yt25rm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    user-select: none;
}

.btn[b-i4e4yt25rm] {
    padding: 8px 12px;
    border: 1px solid #bbb;
    border-radius: 8px;
    background: #eaeaea;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

.modal-backdrop[b-i4e4yt25rm] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: grid;
    place-items: center;
    z-index: 2000;
}

.modal[b-i4e4yt25rm] {
    width: min(520px, calc(100vw - 32px));
    background: white;
    border-radius: 14px;
    border: 1px solid #ddd;
    padding: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

.modal-title[b-i4e4yt25rm] {
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 6px;
}

.modal-text[b-i4e4yt25rm] {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 12px;
}

.modal-actions[b-i4e4yt25rm] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.icon-only[b-i4e4yt25rm] {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    display: grid;
    place-items: center;
}

    .icon-only:hover[b-i4e4yt25rm] {
        transform: scale(1.1);
    }

    .icon-only:active[b-i4e4yt25rm] {
        transform: translateY(0);
    }

    .icon-only:focus-visible[b-i4e4yt25rm] {
        outline: 2px solid #4DA3FF;
        outline-offset: 2px;
        border-radius: 6px;
    }

.current-batch-link[b-i4e4yt25rm] {
    font-size: 14px;
    text-decoration: none;
    opacity: .85;
    transition: transform 160ms ease, opacity 160ms ease;
    display: inline-block;
}

    .current-batch-link:hover[b-i4e4yt25rm] {
        opacity: 1;
        transform: scale(1.03);
    }

    .current-batch-link:active[b-i4e4yt25rm] {
        transform: scale(0.99);
    }

    .current-batch-link:focus[b-i4e4yt25rm] {
        outline: 2px solid rgba(0,0,0,.25);
        outline-offset: 2px;
        border-radius: 6px;
    }


.batch-titlebar[b-i4e4yt25rm] {
    padding: 6px 2px 10px;
}

.batch-titletext[b-i4e4yt25rm] {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
}

.batch-sub[b-i4e4yt25rm] {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 2px;
}

.batch-gridbar[b-i4e4yt25rm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.batch-gridbar-left[b-i4e4yt25rm],
.batch-gridbar-right[b-i4e4yt25rm] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.batch-grid-toplink[b-i4e4yt25rm] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

.batch-mid[b-i4e4yt25rm] {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* /Components/Pages/ReleasesPage.razor.rz.scp.css */
.release-notes[b-kr5uhd10lh] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.release-note-title[b-kr5uhd10lh] {
 margin-bottom: 0.25rem;
}

.release-note-date[b-kr5uhd10lh] {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #64748b;
}

.release-note-content[b-kr5uhd10lh] {
    margin-top: 1rem;
    padding: 1.5rem;
    border-radius: 0.25rem;
    background-color: #F3F9FD;
}

[b-kr5uhd10lh] .release-note-content h1,
[b-kr5uhd10lh] .release-note-content h2,
[b-kr5uhd10lh] .release-note-content h3,
[b-kr5uhd10lh] .release-note-content h4,
[b-kr5uhd10lh] .release-note-content h5,
[b-kr5uhd10lh] .release-note-content h6 {
    color: #19468C;
}

[b-kr5uhd10lh] .release-note-content > :last-child {
    margin-bottom: 0;
}
/* /Components/Pages/RestockMetricsPage.razor.rz.scp.css */
/* Palette shared with the Restock Metrics dashboard tile, so the two look like one feature:
   #2A70B8 link blue, #374151 body, #6B7280 muted, #E5E7EB rule, #B45309 amber (running),
   #15803D green. Numeric cells use tabular figures so columns line up row to row. */

/* ── The height chain ────────────────────────────────────────────────────────────────────────────
   .page-grid-container is flex:1 with min-height:0, which only resolves if every ancestor up to
   .content > .container-fluid is a flex column that can also shrink. A tab strip inserts two divs
   that are neither, so a grid with Height="100%" inside one collapses to its toolbar. The wrappers
   below rebuild the chain.

   The tab strip's own elements are rendered by the Telerik component, so scoped CSS will not tag
   them — hence ::deep, reaching in from a wrapper this page does own. */

.metrics-filter-card[b-eylnshs2jo] {
    flex: 0 0 auto;
}

.metrics-results[b-eylnshs2jo] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

.metrics-tab-host[b-eylnshs2jo] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

[b-eylnshs2jo] .k-tabstrip {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

[b-eylnshs2jo] .k-tabstrip > .k-tabstrip-items-wrapper {
    flex: 0 0 auto;
}

[b-eylnshs2jo] .k-tabstrip > .k-tabstrip-content {
    flex: 1;
    min-height: 0;

    /* The !important is doing real work. Telerik writes style="display: block" straight onto the
       active tab panel, and an inline declaration beats a stylesheet rule at any specificity — so a
       plain `display: flex` here is silently ignored while every other property in this block
       applies normally. The panel then stays a block, .page-grid-container inside it has nothing to
       take a height from and grows to fit all its rows, the grid's height:100% resolves against that
       instead of the tab, and .k-grid-content never becomes scrollable because the grid was never
       bounded. What you see is a grid running off the bottom of the page with no scrollbar anywhere,
       and the overflow:hidden below quietly clipping the rest. */
    display: flex !important;
    flex-direction: column;

    /* The grid does its own scrolling; a second scrollbar out here would fight it. */
    overflow: hidden;
    /* Telerik's default padding all round costs real height on a laptop. */
    padding: 0;
}

/* ── Phones: stop filling the viewport and let the page scroll ───────────────────────────────────
   The chain above makes the results area the one flexible thing between a fixed-height page and a
   filter card that sizes to its content. That is what we want on a laptop. On a phone the card is
   several times taller — four fields stack instead of sitting in a row, and the restock-type
   multiselect's chips wrap onto three lines — while `main` is height:100% with overflow:hidden, so
   the page cannot grow to accommodate it. A flex child with min-height:0 shrinks rather than
   overflowing, so the results area absorbs the whole difference and the grid ends up at nothing.
   Measured on the real layout: as the filter card grows the grid goes 525px, 451px, 193px, 135px,
   and on a real phone it reaches zero.

   So below the breakpoint the results area sizes to its content instead, the grid gets a real
   height rather than 100% of a chain that no longer resolves, and `.content`'s existing
   overflow:auto scrolls the page. Nothing here touches the global rules — `.page-grid-container` is
   this page's own element, so this only overrides it here. */
@media (max-width: 768px) {
    .metrics-results[b-eylnshs2jo] {
        flex: 0 0 auto;
    }

    /* Beats the inline height:100% that Height="100%" puts on the grid. Only the outer grid on each
       tab: the drawer grid inside an expanded template row sizes to its content and should stay
       that way. */
    .page-grid-container[b-eylnshs2jo]  > .k-grid {
        height: 65vh !important;
        min-height: 300px;
    }
}

/* ── Filter card ─────────────────────────────────────────────────────────────────────────────── */

.metrics-filter-grid[b-eylnshs2jo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    align-items: start;
}

/* Sits under the range picker as a second row of the same field. Wraps rather than overflowing: the
   filter grid gives each field as little as 240px, which is about four of these buttons. */
[b-eylnshs2jo] .metrics-range-presets {
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.metrics-filter-actions[b-eylnshs2jo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.metrics-inline-label[b-eylnshs2jo] {
    font-size: 0.8125rem;
    color: #374151;
    cursor: pointer;
}

/* ── Coverage line and footnotes ─────────────────────────────────────────────────────────────── */

/* Everything that applies to every number on the page, in one line short enough to be read. The same
   sentence shape as the dashboard tile's coverage line, so it reads familiar. */
.metrics-coverage[b-eylnshs2jo] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    color: #6B7280;
    margin: 0 0 0.25rem;
}

.metrics-coverage-separator[b-eylnshs2jo] {
    color: #6B7280;
}

/* Standing background information under the coverage line — lighter than it, because it says nothing
   about this particular range and is read once. Was a flex row of chips for an earlier design that
   never shipped; it carries one sentence now, so it is a plain block. */
.metrics-footnote[b-eylnshs2jo] {
    font-size: 0.75rem;
    line-height: 1rem;
    color: #6B7280;
    margin: 0 0 0.5rem;
    text-wrap: pretty;
}

.metrics-empty[b-eylnshs2jo] {
    font-size: 0.9375rem;
    color: #6B7280;
    margin: 1rem 0;
}

/* ── Cells ───────────────────────────────────────────────────────────────────────────────────── */

/* Two lines per cell: the figure the eye should land on, and its context underneath. That is what
   lets seven figures per row fit into three columns without becoming a wall of numbers. */
.metrics-primary[b-eylnshs2jo] {
    display: block;
    color: #374151;
    font-variant-numeric: tabular-nums;
}

.metrics-secondary[b-eylnshs2jo] {
    display: block;
    font-size: 0.75rem;
    line-height: 0.9375rem;
    /* #4B5563, not #6B7280: the lighter gray is 4.47:1 on a grid's alternate-row #F6F6F6 (SC 1.4.3). */
    color: #4B5563;
    font-variant-numeric: tabular-nums;
}

/* A dash, never a zero: "we do not know" is not "it took no time". */
.metrics-none[b-eylnshs2jo] {
    color: #4B5563;
}

.metrics-warn[b-eylnshs2jo] {
    color: #B45309;
}

/* The three rows on the By drawer tab that are not drawers. Muted italic so they read as commentary
   rather than as another drawer to compare against. */
.metrics-pseudo[b-eylnshs2jo] {
    color: #4B5563;
    font-style: italic;
}

[b-eylnshs2jo] .metrics-pseudo-row {
    background-color: #FAFAFA;
}

/* A column's TextAlign moves its cells but leaves the heading where it was. On a grid this wide that
   puts "Restocks" hard against the left edge and the figure it labels hard against the right, with a
   couple of hundred pixels of nothing between them. Move the heading to the same edge as its numbers. */
[b-eylnshs2jo] .metrics-numeric-header .k-cell-inner > .k-link {
    justify-content: flex-end;
}

[b-eylnshs2jo] .metrics-numeric-header {
    text-align: right;
}

/* A template with nothing behind it — every kit, and any cart nobody opened a drawer in — keeps its
   row but loses the expand arrow. Telerik puts one on every row of a grid that has a DetailTemplate,
   whether that row has anything to show, and an arrow that opens on nothing is worse than no arrow.
   The cell stays, so the rows below it still line up. */
[b-eylnshs2jo] .metrics-no-detail-row > .k-hierarchy-cell > * {
    display: none;
}

/* Anything carrying an explanation on hover. One tooltip on the page targets all of them. */
.metrics-help[b-eylnshs2jo] {
    cursor: help;
    text-decoration: underline dotted #D1D5DB;
    text-underline-offset: 0.15em;
}

/* ── Restocks tab: work still in progress ────────────────────────────────────────────────────── */

/* Amber, not red. An open restock is ordinary work, not a fault. Three signals carry the same
   meaning — chip, row tint and the trailing plus — so it survives greyscale and color blindness. */
.metrics-running[b-eylnshs2jo] {
    color: #B45309;
}

.metrics-chip[b-eylnshs2jo] {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    line-height: 1.125rem;
    white-space: nowrap;
}

.metrics-chip-open[b-eylnshs2jo] {
    background-color: #FFFBEB;
    color: #B45309;
}

.metrics-chip-done[b-eylnshs2jo] {
    background-color: #F0FDF4;
    color: #15803D;
}

[b-eylnshs2jo] .metrics-running-row td:first-child {
    box-shadow: inset 3px 0 0 #B45309;
}

[b-eylnshs2jo] .metrics-running-row {
    background-color: #FFFBEB;
}

/* ── The "About these numbers" dialog ────────────────────────────────────────────────────────── */

/* Width only. Everything else this dialog needs is already global: app.css caps every Telerik dialog
   at min(820px, 94vw) and gives its body max-height 70vh with overflow-y auto, so it fits a phone and
   scrolls with the title bar and close button pinned. Repeating any of that here would be a second
   copy to keep in step, and the page-scoped one would win.

   A width is still worth setting, because Telerik otherwise sizes to content and this much prose would
   run out toward the 820px cap. Around 420px keeps the line length readable, and the global cap takes
   over on anything narrower. */
[b-eylnshs2jo] .metrics-about-dialog {
    width: 420px;
    max-width: 94vw;
}

.metrics-about[b-eylnshs2jo] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.metrics-about dt[b-eylnshs2jo] {
    font-weight: 600;
    color: #374151;
    margin-top: 0.75rem;
}

.metrics-about dt:first-child[b-eylnshs2jo] {
    margin-top: 0;
}

.metrics-about dd[b-eylnshs2jo] {
    margin: 0.125rem 0 0;
    color: #6B7280;
}

/* ── Drill-down grids ────────────────────────────────────────────────────────────────────────── */

[b-eylnshs2jo] .metrics-detail-grid {
    font-size: 0.8125rem;
}

/* ── Missing & Shortage (outcomes) tab ─────────────────────────────────────────────────────────── */
.metrics-outcomes[b-eylnshs2jo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.5rem;
}

.metrics-outcome-cards[b-eylnshs2jo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.metrics-outcome-card[b-eylnshs2jo] {
    flex: 1 1 180px;
    min-width: 160px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--kendo-color-border, #e0e0e0);
    border-radius: 6px;
    background: var(--kendo-color-surface, #fafafa);
}

.metrics-outcome-value[b-eylnshs2jo] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.metrics-outcome-label[b-eylnshs2jo] {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: #6B7280;
}

.metrics-subhead[b-eylnshs2jo] {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    font-weight: 600;
}

[b-eylnshs2jo] .metrics-outcome-grid {
    font-size: 0.8125rem;
    max-width: 640px;
}
/* /Components/Pages/SupportPage.razor.rz.scp.css */
.support-tiles[b-rf5m4iphlz] {
    display: grid;
    align-items: stretch;
    justify-content: center;
    grid-template-columns: 1fr;
    gap: 1rem;
}

[b-rf5m4iphlz] .support-tile-link, [b-rf5m4iphlz] .support-tile-link:visited {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.support-tile[b-rf5m4iphlz] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding: 2rem;
    border-radius: 0.25rem;
    background-color: #F3F9FD;
    text-align: center;
}

.support-tile:hover[b-rf5m4iphlz] {
    background-color: #E6F2F8;
}

.support-tile h3[b-rf5m4iphlz] {
    /*margin-top: 0.75rem;*/
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #19468C;
}

.support-tile p[b-rf5m4iphlz] {
    /*margin-bottom: 1rem;*/
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    color: inherit;
}

@media (min-width: 768px) {
    .support-tiles[b-rf5m4iphlz] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*@media (min-width: 1024px) {*/
/*    .support-tiles {*/
/*        grid-template-columns: repeat(3, 1fr);*/
/*    }*/
/*}*/
/* /Components/Pages/Templates/CreateTemplatePage.razor.rz.scp.css */
/* auto-fit rather than a flex row: four fields side by side left the name box too narrow once the
   character counters appeared, and the grid stacks them on its own on a narrow screen. */
/* Two columns, three rows: Name | Short name, then Description across both, then Container Type | Group.
   A single column on a narrow screen. */
.create-template-details-form[b-20e2btd8aj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    align-items: start;
}

.create-template-details-form__wide[b-20e2btd8aj] {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .create-template-details-form[b-20e2btd8aj] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Templates/NewTemplatePage.razor.rz.scp.css */
/* /Components/Pages/Templates/TemplatesPage.razor.rz.scp.css */
/* Native buttons (each toggles a section and says so with aria-expanded), reset to look like the headers
   they replaced. Hover tints the background or underlines rather than dimming the text, which fails contrast. */
.template-group-header[b-l117n0eif7] {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.375rem 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
}

.template-group-header:hover[b-l117n0eif7] {
    background-color: var(--kendo-color-base-hover, #ebebeb);
}

.version-history-toggle[b-l117n0eif7] {
    background: none;
    border: 0;
    padding: 0.25rem 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
}

.version-history-toggle:hover span[b-l117n0eif7] {
    text-decoration: underline;
}

.version-history-grid[b-l117n0eif7] {
    font-size: 0.825rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
}

.version-history-grid table[b-l117n0eif7] {
    width: 100%;
    border-collapse: collapse;
}

.version-history-grid thead[b-l117n0eif7] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.version-history-grid th[b-l117n0eif7] {
    background: #f5f5f5;
    font-weight: 600;
    text-align: left;
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid #d0d0d0;
    white-space: nowrap;
}

.version-history-grid td[b-l117n0eif7] {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.version-history-grid tbody tr:last-child td[b-l117n0eif7] {
    border-bottom: none;
}

.vh-col-ver[b-l117n0eif7] {
    width: 40px;
    text-align: center !important;
}

.vh-col-status[b-l117n0eif7] {
    width: 56px;
}

.vh-col-desc[b-l117n0eif7] {
    word-break: break-word;
}

.vh-col-changed[b-l117n0eif7] {
    width: 110px;
    white-space: nowrap;
}

.vh-changed-by[b-l117n0eif7] {
    display: block;
    font-weight: 500;
}

.vh-changed-date[b-l117n0eif7] {
    display: block;
    color: #707070;
    font-size: 0.775rem;
}

/* In-place edits: changes that landed on a version without minting a new one. Muted, because the version
   row itself is still the primary record — this says "and it was touched again since". */
.vh-inplace[b-l117n0eif7] {
    display: block;
    color: #6c757d;
    font-size: 0.75rem;
    font-style: italic;
}
/* /Components/Pages/Templates/ViewTemplatePage.razor.rz.scp.css */
/* /Components/Shared/A11y/HelpTip.razor.rz.scp.css */
.help-tip[b-67volceb5h] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* A 24px target (SC 2.5.8) around a 16px icon, drawn like a flat Kendo icon button. The global focus ring
   in app.css applies because this is a real <button>. */
.help-tip__button[b-67volceb5h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    margin: 0 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--kendo-color-subtle, #595959);
    cursor: help;
    line-height: 1;
}

.help-tip__button:hover[b-67volceb5h],
.help-tip__button[aria-expanded="true"][b-67volceb5h] {
    color: var(--kendo-color-primary-on-surface, #0E5781);
    background: color-mix(in srgb, var(--kendo-color-primary, #1274AC) 10%, transparent);
}

/* Kendo's tooltip look. White on #1F1F1F is 16.8:1. Fixed, placed by HelpTip.razor.js, so overflow:hidden
   ancestors (grid headers, cards) cannot clip it. */
.help-tip__bubble[b-67volceb5h] {
    position: fixed;
    z-index: 12000;
    max-width: min(320px, calc(100vw - 16px));
    width: max-content;
    padding: 6px 10px;
    border-radius: 4px;
    background: #1F1F1F;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Bridges the gap to the icon, so the pointer can travel onto the bubble without it closing (hoverable). */
.help-tip__bubble[b-67volceb5h]::before {
    content: "";
    position: absolute;
    inset: -8px 0;
}

.help-tip__bubble[hidden][b-67volceb5h] {
    display: none;
}

@media (forced-colors: active) {
    .help-tip__bubble[b-67volceb5h] {
        border: 1px solid CanvasText;
    }
}
/* /Components/Shared/AddPharmacyTrayToCartDialog.razor.rz.scp.css */
/* /Components/Shared/AdminSettings/AreaScheduleForm.razor.rz.scp.css */
.schedule-options-wrap[b-ul8zcikm18] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.schedule-options-header[b-ul8zcikm18] {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 0.75rem 0;
}

.schedule-options[b-ul8zcikm18] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    /*.schedule-options-wrap {*/
    /*    flex-direction: row;*/
    /*    gap: 1.5rem;*/
    /*    justify-content: space-between;*/
    /*}*/
}
/* /Components/Shared/AdminSettings/DrawerColorWheelForm.razor.rz.scp.css */
/* Drawer-color wheel editor. Reuses the same fill variables the pickers and grids use, so a split
   color previews here exactly as it will render on a cart.

   NOTHING here draws the segmented border. That treatment is reserved for the cart drawers themselves,
   where it has the room to be read; at icon size it was busy rather than informative. Every swatch here
   shows its split fill with a plain neutral edge, which exists so a white selection is still visible.

   Round swatches use --dc-fill-round rather than --dc-fill: a 135deg gradient divides the box diagonal,
   and a circle only covers the middle 70.7% of it, so square stops leave the outer bands clipped to
   slivers. */

.dcw[b-nrlw7tphwq] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
}

/* One bubble: swatch above, name below, remove control in the corner. */
.dcw-bubble[b-nrlw7tphwq] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 74px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: center;
}

.dcw-bubble__swatch[b-nrlw7tphwq] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* Split fill only, no colored ring — a segmented border round a small circle reads as busy, and the
       fill already says what the combination is. Matches the picker's bubbles. The thin neutral edge
       stays so #ffffff is not an invisible circle. */
    border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, .28));
    background: var(--dc-fill-round);
    /* Stop the fill at the INNER edge of the border. The default (border-box) paints it underneath,
       and these neutral borders are semi-transparent — including var(--kendo-color-border) itself — so
       whichever band happened to sit under a given stretch of edge showed through and read as a stray
       color bleeding around the rim. */
    background-clip: padding-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.dcw-bubble__label[b-nrlw7tphwq] {
    font-size: 11px;
    line-height: 1.25;
    color: var(--kendo-color-subtle, #6b7280);
    /* Combination names get long ("Red / White / Blue"); wrap rather than widen the bubble. */
    overflow-wrap: anywhere;
}

/* The blank bubble — the checkerboard used everywhere else for "nothing here", so it reads as empty
   rather than as the color white (which is a real palette entry). */
.dcw-bubble--none .dcw-bubble__label[b-nrlw7tphwq] {
    font-weight: 600;
}

.dcw-bubble--none[b-nrlw7tphwq]::before {
    content: "";
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px dashed var(--kendo-color-subtle, rgba(0, 0, 0, .45));
    background-color: #fff;
    background-image:
        linear-gradient(45deg, rgba(0, 0, 0, .16) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .16) 75%),
        linear-gradient(45deg, rgba(0, 0, 0, .16) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .16) 75%);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
}

/* Was a red × that removed the color outright. Removing now CLEARS DRAWERS on real templates, which
   is not a one-click action, and Edit needs somewhere to live — so the corner control opens a menu
   instead of doing anything by itself. */
.dcw-bubble__menu[b-nrlw7tphwq] {
    position: absolute;
    top: -4px;
    right: 6px;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--kendo-color-border, #d6d6d6);
    background: #fff;
    color: var(--kendo-color-on-app-surface, #3d3d3d);
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.dcw-bubble__menu:hover[b-nrlw7tphwq],
.dcw-bubble__menu--open[b-nrlw7tphwq] {
    background: var(--kendo-color-base-hover, #ededed);
}

/* Transparent, full-viewport, and BELOW the menu — mirrors the drawer color picker's dismissal. A
   click anywhere else lands here and closes the menu rather than falling through to the wheel. */
.dcw-menu__backdrop[b-nrlw7tphwq] {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: transparent;
}

.dcw-menu[b-nrlw7tphwq] {
    position: absolute;
    top: 16px;
    right: 0;
    z-index: 11;
    min-width: 108px;
    padding: 4px 0;
    border: 1px solid var(--kendo-color-border, #d6d6d6);
    border-radius: 4px;
    background: var(--kendo-color-surface-alt, #fff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    text-align: left;
}

.dcw-menu__item[b-nrlw7tphwq] {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    text-align: left;
    color: var(--kendo-color-on-app-surface, #3d3d3d);
    cursor: pointer;
}

.dcw-menu__item:hover[b-nrlw7tphwq] {
    background: var(--kendo-color-base-hover, #ededed);
}

.dcw-menu__item--danger[b-nrlw7tphwq] {
    color: #b91c1c;
}

.dcw-menu__item--danger:hover[b-nrlw7tphwq] {
    background: #fee2e2;
}

/* Add bubble — a dashed outline and a plus, matching the "empty slot" language used in the builder. */
.dcw-bubble--add[b-nrlw7tphwq] {
    cursor: pointer;
}

.dcw-bubble--add .dcw-bubble__plus[b-nrlw7tphwq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px dashed var(--kendo-color-primary, #3f51b5);
    color: var(--kendo-color-primary, #3f51b5);
    font-size: 22px;
    line-height: 1;
}

.dcw-bubble--add:hover .dcw-bubble__plus[b-nrlw7tphwq] {
    background: rgba(63, 81, 181, .08);
}

/* ---------------- impact notice ---------------- */

/* Appears the moment a color is edited or removed, naming what it will reach, and takes itself away.
   Transient ON PURPOSE: it is a nudge while the change is still cheap to undo, not the record. The
   record is the save dialog, which is re-queried and has to be acknowledged.

   The fade is one animation with its own hold, rather than a transition plus a second timer, so the
   element's appearance cannot get out of step with the code that removes it. The C# timer outlasts
   this, so it is invisible before it is dropped from the DOM. */
.dcw-notice[b-nrlw7tphwq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    padding: 9px 12px;
    border: 1px solid #d97706;
    border-left-width: 4px;
    border-radius: 4px;
    background: #fffbeb;
    color: #713f12;
    font-size: .85rem;
    line-height: 1.45;
    animation: dcw-notice-life-b-nrlw7tphwq 7s ease-out forwards;
}

.dcw-notice__list[b-nrlw7tphwq] {
    color: #92400e;
    font-size: .8rem;
    /* Template names get long and there can be several; wrap rather than stretch the card. */
    overflow-wrap: anywhere;
}

@keyframes dcw-notice-life-b-nrlw7tphwq {
    0%   { opacity: 0; transform: translateY(-3px); }
    6%   { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Motion is decoration here — the text is the message, so honor a reduced-motion preference by
   simply holding it still and visible for the same time. */
@media (prefers-reduced-motion: reduce) {
    .dcw-notice[b-nrlw7tphwq] {
        animation: none;
    }
}

/* ---------------- save confirmation ---------------- */

.dcw-confirm[b-nrlw7tphwq] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dcw-confirm li[b-nrlw7tphwq] {
    padding: 8px 10px;
    border: 1px solid var(--kendo-color-border, #e0e0e0);
    border-radius: 4px;
}

.dcw-confirm__what[b-nrlw7tphwq] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* The same split fill the wheel and the cart draw, so the row is recognizable as the color being
   changed rather than only as its name. */
/*noinspection CssUnresolvedCustomProperty*/
.dcw-confirm__swatch[b-nrlw7tphwq] {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 4px;
    border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, .28));
    background: var(--dc-fill);
    background-clip: padding-box;
}

.dcw-confirm__arrow[b-nrlw7tphwq] {
    color: var(--kendo-color-subtle, #6b7280);
}

.dcw-confirm__where[b-nrlw7tphwq] {
    display: block;
    margin-top: 4px;
    font-size: .8rem;
    color: var(--kendo-color-subtle, #6b7280);
    overflow-wrap: anywhere;
}

/* ---------------- builder ---------------- */

.dcw-builder[b-nrlw7tphwq] {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--kendo-color-border, #e0e0e0);
    border-radius: 6px;
    background: var(--kendo-color-surface, #fafafa);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dcw-builder__head[b-nrlw7tphwq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Shown while editing a color that templates are already using. Sits in the builder head rather than
   beside the Update button so it is read before the combination is changed, not after. */
.dcw-builder__warn[b-nrlw7tphwq] {
    margin-top: 4px;
    padding: 6px 9px;
    border-left: 3px solid #d97706;
    border-radius: 3px;
    background: #fffbeb;
    color: #713f12;
    font-size: .8rem;
    line-height: 1.45;
}

.dcw-builder__foot[b-nrlw7tphwq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dcw-slots[b-nrlw7tphwq] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* A build slot. Empty slots are dashed; filled ones show their color and reveal a "Clear" label on
   hover, which is how clicking-to-clear is discoverable rather than surprising. */
.dcw-slot[b-nrlw7tphwq] {
    position: relative;
    width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 6px;
    /* Split fill only, no segmented border — same reasoning as the round bubbles. The border now lives
       only on the cart drawers themselves, where it has room to be read. The thin neutral edge stays so
       a white selection is not an invisible square. */
    border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, .28));
    background: var(--dc-fill);
    /* Stop the fill at the INNER edge of the border. The default (border-box) paints it underneath,
       and these neutral borders are semi-transparent — including var(--kendo-color-border) itself — so
       whichever band happened to sit under a given stretch of edge showed through and read as a stray
       color bleeding around the rim. */
    background-clip: padding-box;
    cursor: pointer;
}

.dcw-slot--empty[b-nrlw7tphwq] {
    border: 2px dashed var(--kendo-color-border, #c7c7c7);
    background: #fff;
}

/* The slot the next palette click will fill. */
.dcw-slot--active[b-nrlw7tphwq] {
    outline: 2px solid var(--kendo-color-primary, #3f51b5);
    outline-offset: 2px;
}

.dcw-slot__clear[b-nrlw7tphwq] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 100ms ease-out;
}

.dcw-slot:hover .dcw-slot__clear[b-nrlw7tphwq],
.dcw-slot:focus-visible .dcw-slot__clear[b-nrlw7tphwq] {
    opacity: 1;
}

/* Live preview of the combination being built, at the size and shape a drawer swatch uses. */
.dcw-preview-wrap[b-nrlw7tphwq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-left: 10px;
}

.dcw-preview[b-nrlw7tphwq] {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    /* Split fill only, no segmented border — same reasoning as the round bubbles. The border now lives
       only on the cart drawers themselves, where it has room to be read. The thin neutral edge stays so
       a white selection is not an invisible square. */
    border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, .28));
    background: var(--dc-fill);
    /* Stop the fill at the INNER edge of the border. The default (border-box) paints it underneath,
       and these neutral borders are semi-transparent — including var(--kendo-color-border) itself — so
       whichever band happened to sit under a given stretch of edge showed through and read as a stray
       color bleeding around the rim. */
    background-clip: padding-box;
}

.dcw-preview--empty[b-nrlw7tphwq] {
    border: 2px dashed var(--kendo-color-border, #c7c7c7);
    background: #fff;
}

/* "On the cart" — a miniature of a real drawer, and the one place in this editor that DOES draw the
   segmented border. Everything else here is a fill chip, because at icon size the border reads as busy
   rather than informative. This is the exception that earns it: at a drawer's actual proportions the
   split has room to be read, and seeing the border against the wash is the whole point.

   --dc-edges-wide + --dc-wash-open are exactly what the grid paints on an expanded drawer, so this is
   a copy of the real thing rather than an impression of it. Both the border's color changes and the
   wash's band boundaries fall on the same fractions, which is visible at this size.

   Pinned to white, and deliberately not themed: the grid it is previewing is light in every theme, so
   showing the wash over a dark surface would misrepresent how faint it actually reads. */
.dcw-rowpreview-wrap[b-nrlw7tphwq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 12px;
}

/*noinspection CssUnresolvedCustomProperty*/
.dcw-rowpreview[b-nrlw7tphwq] {
    height: 34px;
    border-radius: 3px;
    background: var(--dc-edges-wide), var(--dc-wash-open), linear-gradient(#fff, #fff);
}

.dcw-rowpreview--empty[b-nrlw7tphwq] {
    border: 2px dashed var(--kendo-color-border, #c7c7c7);
    background: #fff;
}

/* The full code palette — every color that exists, not just the ones on the wheel, so a removed color
   can be brought back and a newly shipped one is reachable. */
.dcw-palette[b-nrlw7tphwq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dcw-palette__swatch[b-nrlw7tphwq] {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    /* Palette entries are always single colors, and no ring — see the bubble note above. */
    border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, .28));
    background: var(--dc-fill-round);
    /* Stop the fill at the INNER edge of the border. The default (border-box) paints it underneath,
       and these neutral borders are semi-transparent — including var(--kendo-color-border) itself — so
       whichever band happened to sit under a given stretch of edge showed through and read as a stray
       color bleeding around the rim. */
    background-clip: padding-box;
    cursor: pointer;
    transition: transform 90ms ease-out;
}

.dcw-palette__swatch:hover[b-nrlw7tphwq],
.dcw-palette__swatch:focus-visible[b-nrlw7tphwq] {
    transform: scale(1.12);
    outline: 2px solid var(--kendo-color-primary, #3f51b5);
    outline-offset: 2px;
}
/* /Components/Shared/AdminSettings/IsolationCartRestockAlertSettingsForm.razor.rz.scp.css */
.trigger-time-input-grid[b-qg2v1ib1b0] {
    width: 100%;
    max-width: 350px;
    grid-template-columns: 1fr auto;
}

.email-input-grid[b-qg2v1ib1b0] {
    width: 100%;
    max-width: 350px;
    grid-template-columns: 1fr auto;
}
/* /Components/Shared/BlazorSortable/SortableList.razor.rz.scp.css */
/* 
  you need the ::deep identifier if you are using scoped styles like this
  because scoped styles are only applied to markup in the component, not
  to the markup inside the render fragment.
*/

[b-ttrygkqxr9] .sortable-ghost {
  visibility: hidden;
}

[b-ttrygkqxr9] .sortable-fallback {
  opacity: 1 !important
}
/* /Components/Shared/CartAreaVerificationsCard.razor.rz.scp.css */
.area-verifications-card-container[b-sk40dizgus] {
    position: relative;
    width: 100%;
    max-width: 350px;
}

[b-sk40dizgus] .area-verifications-card {
    width: 100%;
}

[b-sk40dizgus] .area-verifications-card-subtitle {
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
}

[b-sk40dizgus] .area-verifications-card .k-card-body {
    padding: 0 !important;
}

.area-verifications-card-row[b-sk40dizgus] {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.area-verifications-card-row + .area-verifications-card-row[b-sk40dizgus] {
    border-top: 1px solid #e5e5e5;
}

[b-sk40dizgus] .area-verifications-card-row-icon {
    flex-shrink: 0;
}

.area-verifications-card-row-title[b-sk40dizgus] {
    font-weight: 500;
}

.area-verifications-card-row-subtitle[b-sk40dizgus] {
    /*    */
}
/* /Components/Shared/CartVerificationFormDialog.razor.rz.scp.css */
.k-form-layout > .k-form-field:first-of-type[b-96g9zq50zq] {
    margin-top: 0;
}

/* remove the horizontal space between the RadioGroup items */
[b-96g9zq50zq] .labels-only {
    display: flex;
    gap: .5rem;
}

/* reset styles and support absolute radio inputs */
[b-96g9zq50zq] .labels-only .k-radio-list-item {
    margin: 0;
    padding: 0;
    gap: 0;
    position: relative;
}

/* hide the radio buttons */
[b-96g9zq50zq] .labels-only .k-radio {
    opacity: 0;
    position: absolute;
}

/* The input is invisible, so its keyboard focus is drawn on the label it sits beside. */
[b-96g9zq50zq] .labels-only .k-radio-wrap:has(.k-radio:focus-visible) + .k-radio-label {
    outline: 2px solid var(--cc-focus-ring, #0E5781);
    outline-offset: 2px;
}
[b-96g9zq50zq] .labels-only .k-radio:checked::before {
    display: none;
}

/* make the radio labels look like buttons */
[b-96g9zq50zq] .labels-only .k-radio-label {
    display: inline-block;
    margin: 0;
    padding: .4em .6em .3em;
    border: 1px solid #4b5563;
    border-radius: 4px;
    position: relative;
    color: #1f2937;
}

/* first and last button borders */
/*::deep .labels-only .k-radio-list-item:first-child .k-radio-label {*/
/*    border-left-width: 1px;*/
/*    border-top-left-radius: 4px;*/
/*    border-bottom-left-radius: 4px;*/
/*}*/
/*::deep .labels-only .k-radio-list-item:last-child .k-radio-label {*/
/*    border-top-right-radius: 4px;*/
/*    border-bottom-right-radius: 4px;*/
/*}*/

/* button selected state */
[b-96g9zq50zq] .labels-only .k-radio-wrap:has(.k-radio:checked) + .k-radio-label:has(span.option-fail) {
    border-color: #bf2e29;
    background-color: #c9302c;
    color:  #fff;
}

[b-96g9zq50zq] .labels-only .k-radio-wrap:has(.k-radio:checked) + .k-radio-label:has(span.option-na) {
    border-color: #e5e7eb;
    background-color: #f3f4f6;
    color:  #1f2937;
}

[b-96g9zq50zq] .labels-only .k-radio-wrap:has(.k-radio:checked) + .k-radio-label:has(span.option-pass) {
    border-color: #25792A;
    background-color: #2C872E;
    color:  #fff;
}
/* /Components/Shared/ChangeCurrentLocationDialog.razor.rz.scp.css */
.location-separator[b-ldhlfw80zh] {
    margin: 0.5rem -1rem;
    border-color: #e5e7eb;
}

[b-ldhlfw80zh] .k-radio-list-item {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

[b-ldhlfw80zh] .k-radio-list-item:nth-child(even) {
    background: rgba(0, 0, 0, 0.05)
}

[b-ldhlfw80zh] .k-radio-label {
    flex: 1;
}

/*::deep .k-radio-list-item > .k-radio.label {*/
/*    flex: 1;*/
/*}*/
/* /Components/Shared/ContainerContentsReadOnly.razor.rz.scp.css */
/* Read-only Contents section (docs/CartContentsView.md). Scoped: these rules reach only this component's own markup.
   The chips are the shared .chip family in app.css. */

.ccv[b-ighyq2medc] {
    width: 100%;
    max-width: 720px;
    margin: 1.5rem auto 0;
    text-align: start;
}

.ccv__heading[b-ighyq2medc] {
    margin: 0;
    font-size: 1rem;
    display: flex;
    justify-content: center;
}

.ccv__toggle[b-ighyq2medc] {
    min-width: 250px;
    gap: .5rem;
}

.ccv__body[b-ighyq2medc] {
    margin-top: .75rem;
    padding: .75rem 1rem 1rem;
    border: 1px solid var(--kendo-color-border, #dee2e6);
    border-radius: .5rem;
    background: var(--kendo-color-surface-alt, #ffffff);
}

.ccv__status[b-ighyq2medc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
}

.ccv__status--error[b-ighyq2medc] {
    color: var(--kendo-color-error-on-subtle, #4d0a0e);
}

.ccv__summary[b-ighyq2medc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .5rem;
    margin: 0 0 .75rem;
}

.ccv__legend[b-ighyq2medc] {
    margin: .75rem 0 0;
    font-size: .8125rem;
}

.ccv-group[b-ighyq2medc] {
    /* One level of nesting reads as indentation; deeper levels stop indenting so a phone keeps its width. */
    padding-inline-start: calc(var(--ccv-depth, 0) * .75rem);
    margin-top: 1rem;
}

.ccv-group__title[b-ighyq2medc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .25rem;
    font-size: .9375rem;
    font-weight: 600;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--kendo-color-border, #dee2e6);
}

.ccv-group__title .chip[b-ighyq2medc] {
    flex: 0 0 auto;
}

.ccv-group__note[b-ighyq2medc] {
    margin: .25rem 0 0;
    font-size: .875rem;
}

.ccv-lines[b-ighyq2medc] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ccv-line[b-ighyq2medc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--kendo-color-border, #eceff1);
}

.ccv-line:last-child[b-ighyq2medc] {
    border-bottom: 0;
}

.ccv-line__products[b-ighyq2medc] {
    flex: 1 1 18rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.ccv-product[b-ighyq2medc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
}

.ccv-product__name[b-ighyq2medc] {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.ccv-product .chip[b-ighyq2medc],
.ccv-line__qty .chip[b-ighyq2medc] {
    flex: 0 0 auto;
}

.ccv-product__exp[b-ighyq2medc] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    font-variant-numeric: tabular-nums;
}

.ccv-product__count[b-ighyq2medc] {
    font-variant-numeric: tabular-nums;
}

.ccv-product__note[b-ighyq2medc] {
    flex-basis: 100%;
    font-size: .8125rem;
}

.ccv-line__qty[b-ighyq2medc] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ccv-line__qty--short[b-ighyq2medc] {
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .ccv__body[b-ighyq2medc] {
        padding: .5rem .75rem .75rem;
    }

    .ccv__toggle[b-ighyq2medc] {
        width: 100%;
        min-width: 0;
    }

    /* On a phone the count drops under the product rather than squeezing it. */
    .ccv-line__qty[b-ighyq2medc] {
        flex-basis: 100%;
    }
}
/* /Components/Shared/ContainerDisplayGrid.razor.rz.scp.css */
/* ===========================================================================
   ORDER MATTERS IN THIS FILE.

   Drawer colors come FIRST and the expiring/error tints come LAST, because the
   two collide on an expanded drawer row and several of the selectors land on
   identical specificity — where CSS falls back to source order. The safety
   color has to win that tie: a red expiring cell must never be softened or
   overwritten by a wayfinding tint. Do not move the expiring block up.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Drawer colors.

   The color marks the EXPAND cell: that cell is the "open this drawer" control,
   so it is the part most physically tied to the drawer's real color, and it is
   otherwise blank so a color reads clearly there. Several drawers in order form
   a scannable color column down the side of the grid.

   Drawn as BACKGROUND LAYERS — one per edge — rather than a border, an outline or
   a pseudo-element. Each of those was tried and each fails here:
     * a real border changes the cell's box and pushes the grid out of alignment;
     * a pseudo-element inset to -1px bleeds 1px into the neighboring row, whose
       cell background then paints straight over it — which is why bottom borders
       vanished on every row that had a row below it;
     * an outline fixed both of those but can only be one flat color, and cannot
       be drawn on selected sides — so it could neither split a side between two
       colors nor leave the seam between an open drawer and its contents open.
   Background layers take no layout space, are painted inside the element by
   construction so nothing can overpaint them, and each one is a gradient — which
   is what makes both the color splitting and the per-edge control possible.

   WHEN EXPANDED the wash spreads across the whole row and the detail area is
   outlined too, so "this is the drawer you are looking at" is unmistakable. When
   collapsed only the expand cell is marked — otherwise every screen is a
   rainbow and the color stops meaning anything.

   Expansion is detected structurally: a master row that is FOLLOWED by a
   .k-detail-row is open. Telerik puts no "expanded" class on the master row, so
   :has() does the work. Where :has() is unsupported the row simply does not get
   the spread — the collapsed styling still applies, so it degrades quietly.

   Row classes come from DrawerColorConstants via OnRowRender — a dc-<slug> name
   per color set. The rules below read CUSTOM PROPERTIES rather than naming any
   color, so a drawer with one, two or three colors needs no new rule here.
   --------------------------------------------------------------------------- */


/* The variables are DECLARED elsewhere and never here — either inline for markup
   we author, or in a per-page variables-only <style> block for Telerik grid rows,
   which accept a class and no style. Both paths use these names, and all of them
   are whole CSS values already resolved by DrawerColorConstants, so no rule below
   needs to know how many colors a drawer has:

     --dc-wash    the collapsed wash. A flat color for one, a diagonal gradient
                  for a split. Needs `background`, not `background-color`.
     --dc-edges   the collapsed border, as four per-edge background layers
                  divided by perimeter length.
                  Painted on the ROW when expanded, never on cells — see below.
     --dc-edges-row / --dc-edges-detail  the EXPANDED border, split across the
                  two rows so they share one perimeter with no internal edge.

   The line colors are separate from the fill for a reason beyond gradients: pure
   white draws no visible line against the grid, so White carries a light-grey
   line override while keeping its true fill and wash. */

/* --- COLLAPSED: only the expand cell is marked, as a closed box ------------ */

/* Border and wash in ONE background declaration: four edge layers on top (topmost first), the wash
   underneath.

   --dc-edges divides the border by PERIMETER LENGTH, starting at the bottom-left and running up the
   left edge — so a three-color drawer changes color exactly one third and two thirds of the way
   around. A conic gradient cannot do that on a rectangle, because equal angles from the center cut
   unequal lengths of edge.

   This also replaced a masked pseudo-element, which is a straight simplification: no extra element,
   no mask-composite support question, and nothing that can bleed into the row below (the bug that
   once ate every bottom border). The layers are inside the cell's own background by construction.

   `background` and not `background-color` — these are images, not colors. */
/*noinspection CssUnresolvedCustomProperty*/
[b-0npxxw017z] .k-grid-table [class*="dc-"] > .k-hierarchy-cell {
    background: var(--dc-edges), var(--dc-wash);
}

/* --- EXPANDED -------------------------------------------------------------- */
/* ONE PAINTED SURFACE ACROSS THE WHOLE OPEN DRAWER — the expand tab, the drawer row and the contents
   area below it all show the same bands, continuing through as if the three were a single element.

   THE BANDS ARE VERTICAL, AND THAT IS LOAD-BEARING. These are separate boxes of very different
   heights, and a leaning gradient positions its bands outward from the box center along the gradient
   line, so where a band lands horizontally depends on the box height. Any lean therefore puts the
   drawer row's bands at a different x than the contents' — by about 0.115 x the combined height, so
   ~15px for a two-item drawer and ~100px for a twenty-item one. That is a per-drawer offset, which is
   why no fixed correction could work: tuned for short drawers, tall ones were far out, and vice
   versa. Vertical bands are pure fractions of the WIDTH, so the height drops out and every surface
   agrees exactly at any size, with nothing measured. See OpenWashAngleDeg.

   GRADIENTS GO ON THE ROWS, NEVER ON THE CELLS. Each cell is its own box and would restart the
   gradient, so a wide row drew the same bands once per column — the "chaos" an early version had. A
   row is a single box spanning the full width, so the bands cross it exactly once; the cells go
   transparent to let it through, since a row paints behind its cells.

   THE BORDER, meanwhile, is also background layers, because a box-shadow cannot split a single side
   and there are four edges for three colors. The drawer row takes top/left/right and the contents row
   left/right/bottom, so between them they form one perimeter with no internal edge and no line beside
   the expand tab. Unlike the collapsed border it is NOT a perimeter walk: top and bottom each carry
   the full split in order, which both reads as balanced on a block this wide and puts the border's
   color changes exactly on the wash's band boundaries, since the two now divide at the same thirds.
   See BuildOpenEdges. */
/*noinspection CssUnresolvedCustomProperty*/
[b-0npxxw017z] .k-grid-table [class*="dc-"]:has(+ .k-detail-row) {
    background: var(--dc-edges-row), var(--dc-wash-open);
}

/* EVERY cell on the drawer row goes transparent, the expand tab included, so the row's bands and
   border layers show through — a row paints behind its cells, so any cell background at all would
   hide both.

   THE TAB DELIBERATELY LOSES ITS RING HERE. Closed, it is a distinct little box carrying the drawer's
   colors. Open, it is not a separate object any more: it is the top-left corner of the open block, so
   it takes the block's bands and the block's border and nothing of its own. Keeping the ring drew a
   box inside a box and nicked the row's top border where the ring's own split fell. The color column
   down the grid survives regardless, because the bands run through the tab either way. */
[b-0npxxw017z] .k-grid-table [class*="dc-"]:has(+ .k-detail-row) > .k-table-td,
[b-0npxxw017z] .k-grid-table [class*="dc-"]:has(+ .k-detail-row) > .k-hierarchy-cell {
    background: transparent;
}

/* The contents row: carries the sides down and closes the bottom, completing the perimeter the drawer
   row opened.

   The detail row is a SIBLING of its master row, not a descendant — hence the adjacent-sibling
   combinator, and hence the variables being declared on both rows rather than inherited by one from
   the other. */
/*noinspection CssUnresolvedCustomProperty*/
[b-0npxxw017z] .k-grid-table [class*="dc-"] + .k-detail-row {
    background: var(--dc-edges-detail), var(--dc-wash-open);
}

/* Transparent so the row's gradient shows through. A table row paints behind its cells, so any cell
   background at all would hide it. */
[b-0npxxw017z] .k-grid-table [class*="dc-"] + .k-detail-row > .k-hierarchy-cell,
[b-0npxxw017z] .k-grid-table [class*="dc-"] + .k-detail-row > .k-detail-cell {
    background: transparent;
}

/* The expand/collapse control on a colored drawer. Telerik gives it its own background, which sat as a
   grey patch in the middle of the tab's color; transparent lets the tab show through so the tab reads
   as one solid block. Only the color is dropped — the icon, sizing and focus ring are untouched. */
[b-0npxxw017z] .k-grid-table [class*="dc-"] > .k-hierarchy-cell .k-button,
[b-0npxxw017z] .k-grid-table [class*="dc-"] > .k-hierarchy-cell .k-icon-button {
    background: transparent;
    border-color: transparent;
}

/* --- Palette -------------------------------------------------------------- */
/* Not in any stylesheet any more. Every color's fill, line and wash lives in
   DrawerColorConstants.cs, and arrives as custom properties — see the note at the
   top. Adding a color is one entry in that file and nothing here. */

/* ---------------------------------------------------------------------------
   Expiring / error tints. MUST STAY BELOW the drawer colors — see the note at
   the top of this file. These are safety signals and always win.

   The cell-level tints also carry !important rather than relying on source order
   alone: the drawer wash and these rules can land on equal specificity, and a
   later edit that reorders or re-specifies either block would silently let a
   wayfinding color cover an expiring warning. The stakes are asymmetric, so
   this one is worth pinning explicitly.
   --------------------------------------------------------------------------- */

/* "Not on template" rows: present in the data, absent from the template. Amber rather
   than red, and declared BEFORE the expiring rules so that if a row is ever both, the
   expiring warning still wins — per the asymmetric-stakes note above. */
[b-0npxxw017z] .k-grid-table .k-table-row.cart-inventory-grid-row-not-on-template {
    background: #fffbeb;
}

[b-0npxxw017z] .k-grid-table .k-table-alt-row.cart-inventory-grid-row-not-on-template {
    background: #fef3c7;
}

/* Reader-facing explanation for "not on template" rows. Shown only when such rows exist.
   The goal is deflecting a support ticket: say what the row is, why the drawer totals look
   inconsistent, and the one self-service route — restore the slot, then pull at restock.
   (There is no UI that deletes a Device row; the only delete is the expiration pull in
   CartInventoryService, which a restock can reach only once the template demands the item.) */
.not-on-template-notice[b-0npxxw017z] {
    margin-bottom: .75rem;
    padding: .75rem 1rem;
    border: 1px solid #d97706;
    border-left-width: 4px;
    border-radius: 4px;
    background: #fffbeb;
    color: #713f12;
    font-size: .875rem;
    line-height: 1.5;
}

.not-on-template-notice-title[b-0npxxw017z] {
    margin-bottom: .25rem;
    font-weight: 700;
    color: #92400e;
}

.not-on-template-notice p[b-0npxxw017z] {
    margin: 0 0 .625rem;
}

.not-on-template-notice ol[b-0npxxw017z],
.not-on-template-notice ul[b-0npxxw017z] {
    margin: 0 0 .625rem;
    padding-left: 1.25rem;
}

.not-on-template-notice li[b-0npxxw017z] {
    margin-bottom: .375rem;
}

.not-on-template-notice-footer[b-0npxxw017z] {
    margin-bottom: 0 !important;
    padding-top: .5rem;
    border-top: 1px solid #fde68a;
}

[b-0npxxw017z] .cart-inventory-not-on-template-badge {
    display: inline-block;
    margin-left: .5rem;
    padding: 0 .375rem;
    border: 1px solid #d97706;
    border-radius: 3px;
    background: #fef3c7;
    color: #92400e;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

[b-0npxxw017z] .k-grid-table .k-table-row.cart-inventory-grid-row-expiring {
    background: #fef2f2;
}

[b-0npxxw017z] .k-grid-table .k-table-alt-row.cart-inventory-grid-row-expiring {
    background: #fee2e2;
}

/* remove the default cell padding to remove traces of the original background */
[b-0npxxw017z] .k-grid-table .k-table-row > .k-table-td.cart-inventory-grid-cell-error {
    background: #fef2f2 !important;
}

[b-0npxxw017z] .k-grid-table .k-table-alt-row > .k-table-td.cart-inventory-grid-cell-error {
    background: #fee2e2 !important;
}

[b-0npxxw017z] .k-grid-table .k-table-row > .k-table-td:has(> .cart-inventory-grid-data-error) {
    background: #fef2f2 !important;
}

[b-0npxxw017z] .k-grid-table .k-table-alt-row > .k-table-td:has(> .cart-inventory-grid-data-error) {
    background: #fee2e2 !important;
}

/* #C81E1E, not the old #ef4444: that measured 3.44:1 on white and less on the red tint; this is
   5.24:1 on white and 4.77:1 on #fee2e2 (WCAG 1.4.3). */
[b-0npxxw017z] .k-grid-table .k-table-td > .cart-inventory-grid-data-error {
    color: #c81e1e;
}

/* The drawer color written out by name beside the drawer, so the color is not the only carrier of
   which physical drawer this is (WCAG 1.4.1). The dot repeats the palette swatch; its border keeps a
   White drawer's dot visible on a white row. */
[b-0npxxw017z] .drawer-color-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .5rem;
    font-size: .75rem;
    color: var(--kendo-color-subtle, #595959);
    white-space: nowrap;
}

[b-0npxxw017z] .drawer-color-tag__dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .45);
    background: var(--dc-fill-round);
    background-clip: padding-box;
}
/* /Components/Shared/Dashboard/ContainerTypeFilter.razor.rz.scp.css */
/* /Components/Shared/Dashboard/DashboardChartAlternative.razor.rz.scp.css */
.dash-chart[b-sxpj58z4pf] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.dash-chart__bar[b-sxpj58z4pf] {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
}

/* The chart takes whatever the toggle leaves; min-height 0 lets it shrink inside the tile. */
.dash-chart__body[b-sxpj58z4pf] {
    flex: 1 1 auto;
    min-height: 0;
}

.dash-chart__table-wrap[b-sxpj58z4pf] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.dash-chart__table[b-sxpj58z4pf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.dash-chart__table th[b-sxpj58z4pf],
.dash-chart__table td[b-sxpj58z4pf] {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--kendo-color-border, #DEE2E6);
    text-align: right;
}

.dash-chart__table th[scope="row"][b-sxpj58z4pf],
.dash-chart__table thead th:first-child[b-sxpj58z4pf] {
    text-align: left;
    font-weight: 500;
}

.dash-chart__table thead th[b-sxpj58z4pf] {
    font-weight: 600;
}
/* /Components/Shared/Dashboard/Tiles/ItemUtilizationWidget.razor.rz.scp.css */
.uw[b-iptvavc59k] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.uw-loading[b-iptvavc59k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #4b5563;
}

.uw-empty[b-iptvavc59k] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 0.85rem;
    text-align: center;
    padding: 1rem;
}

/* The bar: what is shown, and the controls. The page dots live in the tile header (WidgetPagerDots). */
.uw-bar[b-iptvavc59k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.25rem 0.4rem;
}

.uw-scope[b-iptvavc59k] {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #6b7280;
    font-size: 0.8rem;
}

    /* A refusal the user can act on, said in place of the scope until their next change. */
    .uw-scope.is-notice[b-iptvavc59k] {
        color: #b91c1c;
    }

.uw-actions[b-iptvavc59k] {
    margin-left: auto;
    display: flex;
    flex-shrink: 0;
    gap: 0.25rem;
}

/* At least 24 x 24 px, the smallest target WCAG 2.2 (and Lighthouse's target-size audit) accepts. */
.uw-icon[b-iptvavc59k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    border: none;
    background: none;
    padding: 0.2rem;
    border-radius: 6px;
    color: #4b5563;
    cursor: pointer;
}

    .uw-icon:hover:not(:disabled)[b-iptvavc59k] {
        background: rgba(31, 119, 180, 0.12);
        color: #1f77b4;
    }

    .uw-icon.is-on[b-iptvavc59k] {
        background: rgba(31, 119, 180, 0.16);
        color: #1f77b4;
    }


    .uw-icon:disabled[b-iptvavc59k] {
        opacity: 0.4;
        cursor: default;
    }

/* The resize popout (a TelerikPopup): one row per size, each with a small picture of its footprint. */
.uw-size-menu[b-iptvavc59k] {
    display: flex;
    flex-direction: column;
    min-width: 230px;
    padding: 0.25rem;
    background: #fff;
}

.uw-size-option[b-iptvavc59k] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.5rem;
    border: none;
    border-radius: 6px;
    background: none;
    text-align: left;
    cursor: pointer;
}

    .uw-size-option:hover[b-iptvavc59k] {
        background: rgba(31, 119, 180, 0.08);
    }

    .uw-size-option.is-on[b-iptvavc59k] {
        background: rgba(31, 119, 180, 0.16);
    }

.uw-size-glyph[b-iptvavc59k] {
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .uw-size-glyph > span[b-iptvavc59k] {
        display: block;
        border: 1.5px solid #1f77b4;
        border-radius: 2px;
        background: rgba(31, 119, 180, 0.12);
    }

.uw-size-text[b-iptvavc59k] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.uw-size-name[b-iptvavc59k] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1f2937;
}

.uw-size-hint[b-iptvavc59k] {
    font-size: 0.72rem;
    color: #6b7280;
}

/* The graphs: a pair side by side (default), a pair stacked, or one at a time. */
.uw-panels[b-iptvavc59k] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    cursor: pointer;
    animation: uw-slide-in-b-iptvavc59k 0.6s ease-out;
}

    .uw-panels.is-stacked[b-iptvavc59k] {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 0.5rem;
    }

    .uw-panels.is-single[b-iptvavc59k] {
        grid-template-columns: 1fr;
    }

.uw-panel[b-iptvavc59k] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 0.4rem 0.5rem 0;
    border-radius: 8px;
    border-top: 3px solid transparent;
}

    .uw-panel.uw-good[b-iptvavc59k] {
        border-top-color: #2ca02c;
        background: #f6fbf6;
    }

    .uw-panel.uw-bad[b-iptvavc59k] {
        border-top-color: #d62728;
        background: #fdf6f6;
    }

    .uw-panel[b-iptvavc59k]  .k-chart {
        flex: 1;
        min-height: 0;
    }

/* The graph itself appears at once; its lines are drawn in by ItemUtilizationWidget.razor.js, which is
   where the speed lives (DrawMilliseconds in the component). */
.uw-chart[b-iptvavc59k] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.uw-panel-title[b-iptvavc59k] {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uw-panel-sub[b-iptvavc59k] {
    color: #6b7280;
    font-size: 0.75rem;
}

/* Compact sizes: a tighter bar and titles; the markup drops subtitles, legend and dots. */
.uw.is-compact .uw-bar[b-iptvavc59k] {
    gap: 0.4rem;
    padding-bottom: 0.2rem;
}

.uw.is-compact .uw-panels[b-iptvavc59k] {
    gap: 0.5rem;
}

.uw.is-compact .uw-panel[b-iptvavc59k] {
    padding: 0.2rem 0.35rem 0;
}

.uw.is-compact .uw-panel-title[b-iptvavc59k] {
    font-size: 0.8rem;
}

@keyframes uw-slide-in-b-iptvavc59k {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Stay still for anyone who has asked for less motion: no slide (the timer still turns the page), and
   the script skips the line draw-in. */
@media (prefers-reduced-motion: reduce) {
    .uw-panels[b-iptvavc59k] {
        animation: none;
    }
}
/* /Components/Shared/Dashboard/Tiles/RestockMetrics.razor.rz.scp.css */
/* One row per restock type. The tile declares itself a container so the table can respond to the
   TILE's width rather than the viewport's — the dashboard has no per-tile responsive hook, and how
   wide this tile ends up depends on the statistics grid's column count, not just the breakpoint. */
.restock-metric-tile[b-fiw0mjwkg0] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-height: 0;
    overflow-y: auto;
    /* Explicit, and not just tidiness: setting only overflow-y leaves overflow-x computed as auto,
       so anything a cell spills sideways turns into a horizontal scrollbar across the whole tile.
       The cells below clip themselves, so there should be nothing to scroll to anyway. */
    overflow-x: hidden;
    container-type: inline-size;
    container-name: restock-metric;
}

.restock-metric-table[b-fiw0mjwkg0] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

/* Columns are sized by the percentages below (table-layout: fixed), so content never widens a
   column. Clipping rather than wrapping keeps every row one line tall, which is what lets four rows
   plus a header fit the tile's single 240px grid row. */
.restock-metric-table th[b-fiw0mjwkg0],
.restock-metric-table td[b-fiw0mjwkg0] {
    padding: 0.1875rem 0.1875rem;
    white-space: nowrap;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* No letter-spacing: at this size it buys nothing legibly and costs several pixels per header, and
   the headers are the widest thing in most columns — the data under "Count" is one or two digits. */
.restock-metric-table thead th[b-fiw0mjwkg0] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6B7280;
    border-bottom: 1px solid #E5E7EB;
}

.restock-metric-table .col-type[b-fiw0mjwkg0] {
    text-align: left;
}

.restock-metric-table tbody th[b-fiw0mjwkg0] {
    font-weight: 500;
    color: #2A70B8;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lining up the digits matters more here than anywhere else on the tile: the whole point is
   comparing one row against another at a glance. */
.restock-metric-table tbody td[b-fiw0mjwkg0] {
    color: #374151;
    font-variant-numeric: tabular-nums;
}

.col-type[b-fiw0mjwkg0] { width: 26%; }
.col-count[b-fiw0mjwkg0] { width: 17%; }
.col-typical[b-fiw0mjwkg0] { width: 22%; }
.col-range[b-fiw0mjwkg0] { width: 21%; }
.col-delta[b-fiw0mjwkg0] { width: 14%; }

/* Faster is good. Slower is amber rather than red, because a slower restock can simply be a more
   thorough one and this tile should not call that a failure. */
.delta-faster[b-fiw0mjwkg0] {
    color: #15803D;
    font-variant-numeric: tabular-nums;
}

.delta-slower[b-fiw0mjwkg0] {
    color: #B45309;
    font-variant-numeric: tabular-nums;
}

.delta-flat[b-fiw0mjwkg0],
.delta-none[b-fiw0mjwkg0] {
    color: #6B7280;
}

/* The coverage note and the link to the full report share one line, so the link costs no height in a
   tile that only has a single 240px grid row to work with. */
.restock-metric-footer[b-fiw0mjwkg0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.restock-metric-coverage[b-fiw0mjwkg0] {
    font-size: 0.75rem;
    line-height: 1rem;
    margin: 0;
    color: #6B7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.restock-metric-details[b-fiw0mjwkg0] {
    font-size: 0.75rem;
    line-height: 1rem;
    white-space: nowrap;
    flex: 0 0 auto;
}

.restock-metric-empty[b-fiw0mjwkg0] {
    font-size: 1rem;
    line-height: 1.25rem;
    color: #6B7280;
}

/* Why the tile can describe fewer restocks than the ward did. Smaller and lighter than everything
   around it: it is standing background information, not a figure or a warning, and it is read once and
   then ignored. Wraps rather than truncating — half of this sentence is worse than none of it. */
.restock-metric-note[b-fiw0mjwkg0] {
    font-size: 0.6875rem;
    line-height: 0.9375rem;
    color: #6B7280;
    margin: 0;
    text-wrap: pretty;
}

/* All five columns need roughly 260px of table, so Range goes only once the tile can no longer hold
   that plus its padding. Range is the right column to lose: the typical time already answers "how
   long does this take", while the comparison is the only forward-looking figure here.

   The number matters more than it looks. Measured on a real dashboard, a statistics column is about
   123px, so this tile at three columns is around 370px and at two it was 245px. An earlier 380px
   threshold sat just above the three-column width and dropped Range on every screen — which is what
   the tile was widened to avoid. Keep this comfortably below the three-column width. */
@container restock-metric (max-width: 300px) {
    .restock-metric-table .col-range[b-fiw0mjwkg0] {
        display: none;
    }

    .col-type[b-fiw0mjwkg0] { width: 32%; }
    .col-count[b-fiw0mjwkg0] { width: 20%; }
    .col-typical[b-fiw0mjwkg0] { width: 29%; }
    .col-delta[b-fiw0mjwkg0] { width: 19%; }
}

/* Narrower still — a small phone, where the tile is the full width of a one-column grid. Give back
   what the padding and the type name are using, since "Typical" and the trend are the two columns
   that must stay readable. */
@container restock-metric (max-width: 240px) {
    .restock-metric-table[b-fiw0mjwkg0] {
        font-size: 0.75rem;
    }

    /* At this width the coverage note and a two-word link cannot both fit. Shorten the link rather
       than the note: the note is the one carrying information.

       Scoped to the footer on purpose. The empty state shows the same link with nothing beside it and
       the full width of the tile to itself, so there is nothing to make room for and it keeps its
       proper label. */
    .restock-metric-footer .restock-metric-details[b-fiw0mjwkg0] {
        font-size: 0;
    }

    .restock-metric-footer .restock-metric-details[b-fiw0mjwkg0]::after {
        content: "Details";
        font-size: 0.75rem;
    }

    .restock-metric-table th[b-fiw0mjwkg0],
    .restock-metric-table td[b-fiw0mjwkg0] {
        padding: 0.1875rem 0.125rem;
    }

    .col-type[b-fiw0mjwkg0] { width: 28%; }
    .col-count[b-fiw0mjwkg0] { width: 18%; }
    .col-typical[b-fiw0mjwkg0] { width: 32%; }
    .col-delta[b-fiw0mjwkg0] { width: 22%; }
}
/* /Components/Shared/Dashboard/WidgetPagerDots.razor.rz.scp.css */
.wp-dots[b-t1vfmoo3ev] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* The button is the 24 x 24 px target (the smallest WCAG 2.2 / Lighthouse target-size accepts); the dot
   is drawn inside it. The ring is #6b7280, 4.8:1 on white, so an unselected dot meets the 3:1 that a
   control's outline needs (SC 1.4.11) — the old #9ca3af was 2.5:1. */
.wp-dot[b-t1vfmoo3ev] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

    .wp-dot[b-t1vfmoo3ev]::before {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 50%;
        border: 1px solid #6b7280;
        background: transparent;
    }

    .wp-dot.is-on[b-t1vfmoo3ev]::before {
        background: #1f77b4;
        border-color: #1f77b4;
    }

    .wp-dot:hover[b-t1vfmoo3ev]::before {
        border-color: #1f77b4;
    }
/* /Components/Shared/GridSearchBar.razor.rz.scp.css */
.grid-search-bar[b-erwmsowumk] {
    display: flex;
    align-items: center;
}

[b-erwmsowumk] .grid-search-wrap {
    display: flex;
    align-items: center;
}

[b-erwmsowumk] .grid-search-toggle-mobile {
    display: none;
}

@media (max-width: 640px) {
    [b-erwmsowumk] .grid-search-toggle-mobile {
        display: inline-flex;
    }

    [b-erwmsowumk] .grid-search-wrap {
        display: none;
    }

    [b-erwmsowumk] .grid-search-wrap.mobile-open {
        display: flex;
    }

    [b-erwmsowumk] .grid-search-wrap .k-grid-search .k-input-icon,
    [b-erwmsowumk] .grid-search-wrap .k-grid-search .k-input-prefix,
    [b-erwmsowumk] .grid-search-wrap .k-grid-search .k-icon {
        display: none !important;
    }

    [b-erwmsowumk] .grid-search-wrap .k-grid-search .k-input-inner,
    [b-erwmsowumk] .grid-search-wrap .k-grid-search input {
        padding-left: 8px !important;
    }
}
/* /Components/Shared/Inspections/AddContainerTypeAsInspectionItemTypeDialog.razor.rz.scp.css */
/* Add border between each container-type-item */
.container-type-item+.container-type-item[b-z7ajtx699l] {
    border-top: 1px solid oklch(96.7% 0.003 264.542);
    padding: 0.5rem 0;
}

/* Add padding to the first container-type-item */
.container-type-item:first-child[b-z7ajtx699l] {
    padding-bottom: 0.5rem;
}

/* Add padding to the first container-type-item */
.container-type-item:last-child[b-z7ajtx699l] {
    padding-bottom: 0;
}
/* /Components/Shared/Inspections/AddInspectionTemplateFormDialog.razor.rz.scp.css */
/* /Components/Shared/Inspections/EditInspectionQuestionForms/MultiplePassFailQuestionForm.razor.rz.scp.css */
[b-nhhxsu2qgz] .question-drag-handle {
    cursor: move;
    margin: -1rem -1rem 0;
}

    [b-nhhxsu2qgz] .question-drag-handle svg {
        visibility: hidden;
        color: var(--kendo-color-subtle);
    }

@media (hover: hover) {
    [b-nhhxsu2qgz] .question-drag-handle svg:is(:where(.form-question-wrapper):hover *) {
        visibility: visible;
    }
}

[b-nhhxsu2qgz] .description-editor-wrapper .description-editor {
    min-height: 150px;
    max-height: 500px;
}

.k-form-layout > .k-form-field:first-of-type[b-nhhxsu2qgz] {
    margin-top: 0;
}

/* remove the horizontal space between the RadioGroup items */
[b-nhhxsu2qgz] .labels-only {
    display: flex;
    gap: .5rem;
}

    /* reset styles and support absolute radio inputs */
    [b-nhhxsu2qgz] .labels-only .k-radio-list-item {
        margin: 0;
        padding: 0;
        gap: 0;
        position: relative;
    }

    /* hide the radio buttons */
    [b-nhhxsu2qgz] .labels-only .k-radio {
        opacity: 0;
        position: absolute;
    }

        [b-nhhxsu2qgz] .labels-only .k-radio:checked::before {
            display: none;
        }

    /* make the radio labels look like buttons */
    [b-nhhxsu2qgz] .labels-only .k-radio-label {
        display: inline-block;
        margin: 0;
        padding: .4em .6em .3em;
        border: 1px solid #4b5563;
        border-radius: 4px;
        position: relative;
        color: #1f2937;
    }

    /* first and last button borders */
    /*::deep .labels-only .k-radio-list-item:first-child .k-radio-label {*/
    /*    border-left-width: 1px;*/
    /*    border-top-left-radius: 4px;*/
    /*    border-bottom-left-radius: 4px;*/
    /*}*/
    /*::deep .labels-only .k-radio-list-item:last-child .k-radio-label {*/
    /*    border-top-right-radius: 4px;*/
    /*    border-bottom-right-radius: 4px;*/
    /*}*/

    /* button selected state */
    [b-nhhxsu2qgz] .labels-only .k-radio-wrap:has(.k-radio:checked) + .k-radio-label:has(span.option-fail) {
        border-color: #bf2e29;
        background-color: #c9302c;
        color: #fff;
    }

    [b-nhhxsu2qgz] .labels-only .k-radio-wrap:has(.k-radio:checked) + .k-radio-label:has(span.option-na) {
        border-color: #e5e7eb;
        background-color: #f3f4f6;
        color: #1f2937;
    }

    [b-nhhxsu2qgz] .labels-only .k-radio-wrap:has(.k-radio:checked) + .k-radio-label:has(span.option-pass) {
        border-color: #25792A;
        background-color: #2C872E;
        color: #fff;
    }

/* The radio itself is invisible, so the keyboard focus ring goes on the label that looks like the button. */
[b-nhhxsu2qgz] .labels-only .k-radio-wrap:has(.k-radio:focus-visible) + .k-radio-label {
    outline: 2px solid var(--cc-focus-ring, #0E5781) !important;
    outline-offset: 2px;
}
/* /Components/Shared/Inspections/EditInspectionQuestionForms/PassFailQuestionForm.razor.rz.scp.css */
[b-duzjhg57nl] .question-drag-handle {
    cursor: move;
    margin: -1rem -1rem 0;
}

    [b-duzjhg57nl] .question-drag-handle svg {
        visibility: hidden;
        color: var(--kendo-color-subtle);
    }

@media (hover: hover) {
    [b-duzjhg57nl] .question-drag-handle svg:is(:where(.form-question-wrapper):hover *) {
        visibility: visible;
    }
}

[b-duzjhg57nl] .description-editor-wrapper .description-editor {
    min-height: 150px;
    max-height: 500px;
}

.k-form-layout > .k-form-field:first-of-type[b-duzjhg57nl] {
    margin-top: 0;
}

/* remove the horizontal space between the RadioGroup items */
[b-duzjhg57nl] .labels-only {
    display: flex;
    gap: .5rem;
}

    /* reset styles and support absolute radio inputs */
    [b-duzjhg57nl] .labels-only .k-radio-list-item {
        margin: 0;
        padding: 0;
        gap: 0;
        position: relative;
    }

    /* hide the radio buttons */
    [b-duzjhg57nl] .labels-only .k-radio {
        opacity: 0;
        position: absolute;
    }

        [b-duzjhg57nl] .labels-only .k-radio:checked::before {
            display: none;
        }

    /* make the radio labels look like buttons */
    [b-duzjhg57nl] .labels-only .k-radio-label {
        display: inline-block;
        margin: 0;
        padding: .4em .6em .3em;
        border: 1px solid #4b5563;
        border-radius: 4px;
        position: relative;
        color: #1f2937;
    }

    /* first and last button borders */
    /*::deep .labels-only .k-radio-list-item:first-child .k-radio-label {*/
    /*    border-left-width: 1px;*/
    /*    border-top-left-radius: 4px;*/
    /*    border-bottom-left-radius: 4px;*/
    /*}*/
    /*::deep .labels-only .k-radio-list-item:last-child .k-radio-label {*/
    /*    border-top-right-radius: 4px;*/
    /*    border-bottom-right-radius: 4px;*/
    /*}*/

    /* button selected state */
    [b-duzjhg57nl] .labels-only .k-radio-wrap:has(.k-radio:checked) + .k-radio-label:has(span.option-fail) {
        border-color: #bf2e29;
        background-color: #c9302c;
        color: #fff;
    }

    [b-duzjhg57nl] .labels-only .k-radio-wrap:has(.k-radio:checked) + .k-radio-label:has(span.option-na) {
        border-color: #e5e7eb;
        background-color: #f3f4f6;
        color: #1f2937;
    }

    [b-duzjhg57nl] .labels-only .k-radio-wrap:has(.k-radio:checked) + .k-radio-label:has(span.option-pass) {
        border-color: #25792A;
        background-color: #2C872E;
        color: #fff;
    }

/* The radio itself is invisible, so the keyboard focus ring goes on the label that looks like the button. */
[b-duzjhg57nl] .labels-only .k-radio-wrap:has(.k-radio:focus-visible) + .k-radio-label {
    outline: 2px solid var(--cc-focus-ring, #0E5781) !important;
    outline-offset: 2px;
}
/* /Components/Shared/Inspections/EditInspectionQuestionForms/QuestionFormWrapper.razor.rz.scp.css */
/* A question with several controls is a fieldset; keep it looking like the label-and-control question. */
.question-fieldset[b-zc91l37wip] {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* Bootstrap's reboot floats the legend at full width and h5 size: size it like a form label and let the
   instructions button sit beside it, as it does beside a label. */
.question-legend[b-zc91l37wip] {
    float: left;
    width: auto;
    margin: 0 0.25rem 0.25rem 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.question-fieldset > .question-info-button[b-zc91l37wip] {
    clear: none;
    float: left;
}

.question-body[b-zc91l37wip] {
    clear: both;
}

.question-required[b-zc91l37wip] {
    color: var(--kendo-color-error-on-surface, #B3261E);
}
/* /Components/Shared/Inspections/EditInspectionTemplateFormDialog.razor.rz.scp.css */
/* /Components/Shared/Inspections/InspectionGroupFormDialog.razor.rz.scp.css */
/* /Components/Shared/Inspections/InspectionQuestionFailConditionForm.razor.rz.scp.css */
/* /Components/Shared/Inspections/InspectionQuestionForm.razor.rz.scp.css */
[b-p3hn8395zl] .question-drag-handle {
    cursor: move;
    margin: -1rem -1rem 0;
}

[b-p3hn8395zl] .question-drag-handle svg {
    visibility: hidden;
    color: var(--kendo-color-subtle);
}

@media (hover: hover) {
    [b-p3hn8395zl] .question-drag-handle svg:is(:where(.form-question-wrapper):hover *) {
        visibility: visible;
    }
}

[b-p3hn8395zl] .description-editor-wrapper .description-editor {
    min-height: 150px;
    max-height: 500px;
}

.k-form-layout > .k-form-field:first-of-type[b-p3hn8395zl] {
    margin-top: 0;
}

/* remove the horizontal space between the RadioGroup items */
[b-p3hn8395zl] .labels-only {
    display: flex;
    gap: .5rem;
}

    /* reset styles and support absolute radio inputs */
    [b-p3hn8395zl] .labels-only .k-radio-list-item {
        margin: 0;
        padding: 0;
        gap: 0;
        position: relative;
    }

    /* hide the radio buttons */
    [b-p3hn8395zl] .labels-only .k-radio {
        opacity: 0;
        position: absolute;
    }

        [b-p3hn8395zl] .labels-only .k-radio:checked::before {
            display: none;
        }

    /* make the radio labels look like buttons */
    [b-p3hn8395zl] .labels-only .k-radio-label {
        display: inline-block;
        margin: 0;
        padding: .4em .6em .3em;
        border: 1px solid #4b5563;
        border-radius: 4px;
        position: relative;
        color: #1f2937;
    }

    /* first and last button borders */
    /*::deep .labels-only .k-radio-list-item:first-child .k-radio-label {*/
    /*    border-left-width: 1px;*/
    /*    border-top-left-radius: 4px;*/
    /*    border-bottom-left-radius: 4px;*/
    /*}*/
    /*::deep .labels-only .k-radio-list-item:last-child .k-radio-label {*/
    /*    border-top-right-radius: 4px;*/
    /*    border-bottom-right-radius: 4px;*/
    /*}*/

    /* button selected state */
    [b-p3hn8395zl] .labels-only .k-radio-wrap:has(.k-radio:checked) + .k-radio-label:has(span.option-fail) {
        border-color: #bf2e29;
        background-color: #c9302c;
        color: #fff;
    }

    [b-p3hn8395zl] .labels-only .k-radio-wrap:has(.k-radio:checked) + .k-radio-label:has(span.option-na) {
        border-color: #e5e7eb;
        background-color: #f3f4f6;
        color: #1f2937;
    }

    [b-p3hn8395zl] .labels-only .k-radio-wrap:has(.k-radio:checked) + .k-radio-label:has(span.option-pass) {
        border-color: #25792A;
        background-color: #2C872E;
        color: #fff;
    }

/* The radio itself is invisible, so the keyboard focus ring goes on the label that looks like the button. */
[b-p3hn8395zl] .labels-only .k-radio-wrap:has(.k-radio:focus-visible) + .k-radio-label {
    outline: 2px solid var(--cc-focus-ring, #0E5781) !important;
    outline-offset: 2px;
}
/* /Components/Shared/Inspections/InspectionQuestionOptionForm.razor.rz.scp.css */
.form-option-wrapper[b-vxs924qogo] {
    padding: .25rem 0;
    margin: 0 0 0 -1rem;
}

.option-drag-handle[b-vxs924qogo] {
    cursor: move;
    width: 16px;
    height: 20px;
}

.option-drag-handle[b-vxs924qogo]  svg {
    visibility: hidden;
    color: var(--kendo-color-subtle);
    height: 20px;
}

@media (hover: hover) {
    .option-drag-handle[b-vxs924qogo]  svg:is(:where(.form-option-wrapper):hover *) {
        visibility: visible;
    }
}
/* /Components/Shared/Inspections/InspectionQuestionValidationRuleForm.razor.rz.scp.css */
/* /Components/Shared/Inspections/InspectionTemplateFormItem.razor.rz.scp.css */
[b-v35eakhf18] .template-form-drag-handle {
    cursor: move;
    margin: -1rem -1rem 0;
}

[b-v35eakhf18] .template-form-drag-handle svg {
    visibility: hidden;
    color: var(--kendo-color-subtle);
}

@media (hover: hover) {
    [b-v35eakhf18] .template-form-drag-handle svg:is(:where(.template-form-wrapper):hover *) {
        visibility: visible;
    }
}

[b-v35eakhf18] .description-editor-wrapper .description-editor {
    min-height: 150px;
    max-height: 500px;
}
/* /Components/Shared/Notes/NotesDialog.razor.rz.scp.css */
.notes-dialog__body[b-dvjlwwfwk7] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.notes-dialog__subject[b-dvjlwwfwk7] {
    margin: 0;
    font-weight: 600;
}

.notes-dialog__toolbar[b-dvjlwwfwk7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.notes-dialog__empty[b-dvjlwwfwk7] {
    margin: 0;
    padding: 1.5rem 0;
    text-align: center;
    color: var(--kendo-color-subtle, #6c757d);
}

/* One line per note in the list; the eye shows all of it. The cell's width is the grid's, so a block with an
   ellipsis truncates where the column ends. */
.notes-dialog__snippet[b-dvjlwwfwk7] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notes-dialog__alert[b-dvjlwwfwk7] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--kendo-color-error-on-subtle, #9e1c1c);
    font-weight: 600;
}

.notes-dialog__row-actions[b-dvjlwwfwk7] {
    display: inline-flex;
    gap: .125rem;
}

.notes-dialog__meta[b-dvjlwwfwk7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: .5rem 1.5rem;
    margin: 0;
}

    .notes-dialog__meta dt[b-dvjlwwfwk7] {
        font-size: .8rem;
        color: var(--kendo-color-subtle, #6c757d);
    }

    .notes-dialog__meta dd[b-dvjlwwfwk7] {
        margin: 0;
    }

/* The whole note, as written: line breaks kept, long words wrapped, and it scrolls rather than pushing Close off
   the screen (docs/UIStyleGuide.md §3). */
.notes-dialog__full[b-dvjlwwfwk7] {
    max-height: min(50vh, 28rem);
    overflow: auto;
    padding: .75rem 1rem;
    border: 1px solid var(--kendo-color-border, #dee2e6);
    border-radius: 4px;
    background: var(--kendo-color-surface-alt, #f8f9fa);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

    .notes-dialog__full:focus-visible[b-dvjlwwfwk7] {
        outline: 2px solid var(--kendo-color-primary, #0d6efd);
        outline-offset: 2px;
    }

/* TelerikButton renders the element, so it carries no scope attribute: reach it through ::deep. */
.notes-dialog__body[b-dvjlwwfwk7]  .notes-dialog__back {
    width: 100%;
}

.notes-dialog__confirm[b-dvjlwwfwk7] {
    margin: 0;
    font-weight: 600;
}

.notes-dialog__alert-field[b-dvjlwwfwk7] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.notes-dialog__edit-actions[b-dvjlwwfwk7] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
.page-header-wrapper[b-hw5aymgkgd] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.page-header-text[b-hw5aymgkgd] {
    margin: 0;
}

.page-header-titles[b-hw5aymgkgd] {
    min-width: 0;
}

.page-header-subtitle[b-hw5aymgkgd] {
    margin: .25rem 0 0;
    color: var(--kendo-color-subtle, #6c757d);
}

.page-header-actions[b-hw5aymgkgd] {
    /*    */
}

@media (min-width: 768px) {
    .page-header-wrapper[b-hw5aymgkgd] {
        margin-bottom: 1.25rem;
    }
}
/* /Components/Shared/Product/AddAccountProductDialog.razor.rz.scp.css */
.add-product-dialog-content[b-qpg23lmxl2] {
    padding: 0;
}

@media (min-width: 768px) {
    .add-product-dialog-content[b-qpg23lmxl2] {
        padding: 0.5rem;
    }
}
/* /Components/Shared/Product/ProductDetailCard.razor.rz.scp.css */
.product-detail-card[b-kbb79gspou] {
    width: 100%;
    max-width: 100%;
}

.product-detail-card[b-kbb79gspou]  .k-card-subtitle {
    margin-top: 0.25rem !important;
}

.product-detail-card[b-kbb79gspou]  .k-card-body p {
    margin-bottom: 0.5rem !important;
}

.product-detail-card[b-kbb79gspou]  .k-card-body > .k-last,
.product-detail-card[b-kbb79gspou]  .k-card-body > :last-child {
    margin-bottom: 0 !important;
}
/* /Components/Shared/Product/ProductSearchList.razor.rz.scp.css */
.product-search-list-container[b-6yu4qhkuij] {
    min-height: 400px;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.product-search-list-empty[b-6yu4qhkuij] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: #f3f4f6;
    font-size: 1rem;
}

[b-6yu4qhkuij] .barcode-scan-button {
    flex: 1;
}

[b-6yu4qhkuij] .manual-search-button {
    flex: 1;
}

@media (min-width: 768px) {
    [b-6yu4qhkuij] .manual-search-button {
        flex: 0;
        padding-left:  1rem;
        padding-right: 1rem;
    }
}
/* /Components/Shared/Reports/DashboardWidgetsDialog.razor.rz.scp.css */
.dw-note[b-x0lcgdz1m8] {
    color: #6b7280;
    font-size: 0.8rem;
}

.dw-error[b-x0lcgdz1m8] {
    color: #b91c1c;
    margin: 0.5rem 0 0;
}

/* One card per widget; the switch and title lead, the settings follow. */
.dw-card[b-x0lcgdz1m8] {
    margin-top: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

    .dw-card.is-on[b-x0lcgdz1m8] {
        border-color: rgba(31, 119, 180, 0.45);
        background: #f8fbfe;
    }

.dw-head[b-x0lcgdz1m8] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.dw-title[b-x0lcgdz1m8] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}

.dw-state[b-x0lcgdz1m8] {
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 400;
}

.dw-desc[b-x0lcgdz1m8] {
    margin: 0.25rem 0 0.5rem;
    color: #4b5563;
    font-size: 0.85rem;
}

/* Off: the settings are DISABLED (the fieldset's disabled attribute), so graying them is allowed —
   inactive controls are exempt from the contrast rule (SC 1.4.3). It was not while they stayed clickable.
   They keep their values for when the widget is turned back on. */
.dw-settings.is-off[b-x0lcgdz1m8] {
    opacity: 0.55;
}

    .dw-settings.is-off .dw-size[b-x0lcgdz1m8],
    .dw-settings.is-off .dw-radio[b-x0lcgdz1m8],
    .dw-settings.is-off .dw-place[b-x0lcgdz1m8] {
        cursor: not-allowed;
    }

.dw-label[b-x0lcgdz1m8] {
    margin: 0.6rem 0 0.3rem;
    color: #374151;
    font-size: 0.8rem;
    font-weight: 600;
}

.dw-sizes[b-x0lcgdz1m8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dw-size[b-x0lcgdz1m8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 70px;
    padding: 0.35rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 0.75rem;
    cursor: pointer;
}

    .dw-size:hover[b-x0lcgdz1m8] {
        background: rgba(31, 119, 180, 0.08);
    }

    .dw-size.is-on[b-x0lcgdz1m8] {
        border-color: #1f77b4;
        background: rgba(31, 119, 180, 0.14);
        font-weight: 600;
    }

.dw-size-glyph[b-x0lcgdz1m8] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
}

    .dw-size-glyph > span[b-x0lcgdz1m8] {
        display: block;
        border: 1.5px solid #1f77b4;
        border-radius: 2px;
        background: rgba(31, 119, 180, 0.12);
    }

.dw-scopes[b-x0lcgdz1m8] {
    display: flex;
    gap: 1.25rem;
}

.dw-radio[b-x0lcgdz1m8] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    cursor: pointer;
}

    .dw-radio.is-disabled[b-x0lcgdz1m8] {
        color: #9ca3af;
        cursor: default;
    }

/* The area or unit tick list. An account can have many units, so it scrolls rather than growing. */
.dw-places[b-x0lcgdz1m8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.3rem 1rem;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 0.4rem;
    padding: 0.25rem 0.25rem 0.25rem 0;
}

.dw-place[b-x0lcgdz1m8] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    cursor: pointer;
}

/* A manager's sharing for the widget, set apart from their own settings above it. */
.dw-share[b-x0lcgdz1m8] {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #d1d5db;
}

/* Groups of choices are fieldsets (named by their legend) for screen readers; drawn with no box. */
.dw-fieldset[b-x0lcgdz1m8] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

legend.dw-label[b-x0lcgdz1m8] {
    float: none;
    width: auto;
    padding: 0;
    font-size: 0.8rem;
}

/* An error region is always present so it is announced (UIStyleGuide §15); empty, it takes no room. */
.dw-error:empty[b-x0lcgdz1m8] {
    margin: 0;
}

/* The animation switch, at the right of the On/Off row: lit while on. A pressed button, not color alone —
   aria-pressed carries the state, and "Animation" stays written on it. */
.dw-animate[b-x0lcgdz1m8] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 28px;
    padding: 0.2rem 0.65rem;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: #4b5563;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

    .dw-animate:hover:not(:disabled)[b-x0lcgdz1m8] {
        border-color: #1f77b4;
        color: #1f77b4;
    }

    .dw-animate.is-on[b-x0lcgdz1m8] {
        border-color: #1f77b4;
        background: rgba(31, 119, 180, 0.14);
        color: #1f5f8f;
    }

    /* Disabled while the widget is off, like the rest of its settings; inactive, so gray is allowed. */
    .dw-animate:disabled[b-x0lcgdz1m8] {
        opacity: 0.55;
        cursor: not-allowed;
    }

/* People to share with: a bubble each, initial and last name over a small email. Gray until chosen,
   then lit blue like the Animation pill; the check mark says it in more than color (SC 1.4.1). */
.dw-people[b-x0lcgdz1m8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.4rem;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 0.4rem;
    padding: 0.15rem;
}

.dw-person[b-x0lcgdz1m8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
    padding: 0.4rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    background: #f3f4f6;
    color: #374151;
    text-align: left;
    cursor: pointer;
}

    .dw-person:hover[b-x0lcgdz1m8] {
        border-color: #1f77b4;
    }

    .dw-person.is-on[b-x0lcgdz1m8] {
        border-color: #1f77b4;
        background: rgba(31, 119, 180, 0.14);
        color: #1f5f8f;
    }

.dw-person-name[b-x0lcgdz1m8] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dw-person-check[b-x0lcgdz1m8] {
    flex: 0 0 0.8rem;
    font-size: 0.75rem;
}

/* #4b5563 on the gray and on the lit blue both stay above 4.5:1. */
.dw-person-email[b-x0lcgdz1m8] {
    max-width: 100%;
    padding-left: 1.1rem;
    color: #4b5563;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Shared/RestockTimeBreakdown.razor.rz.scp.css */
/* Two small grids side by side inside an expanded restock row, stacking on a narrow screen. */
.breakdown-panels[b-etk999cewz] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.5rem 0;
}

.breakdown-panel[b-etk999cewz] {
    flex: 1 1 380px;
    min-width: 0;
}

.breakdown-heading[b-etk999cewz] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6B7280;
    margin: 0 0 0.5rem;
}

.breakdown-grid[b-etk999cewz] {
    font-size: 0.8125rem;
}

.breakdown-message[b-etk999cewz] {
    font-size: 0.8125rem;
    line-height: 1.125rem;
    color: #6B7280;
    margin: 0.5rem 0 0;
}
/* /Components/Shared/Templates/DrawerColorPicker.razor.rz.scp.css */
/* Radial drawer-color menu. Swatches are placed around a circle by an inline transform computed in
   the component (see RingPosition); everything here is size, shape, state and motion. */

/* Catches clicks anywhere outside a swatch. Transparent — the visible darkening is the halo below,
   which is a separate element so it can be shaped and animated independently of the hit area. */
.drawer-color-menu__backdrop[b-78sympehko] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: transparent;
}

/* The darkening. A DONUT, not a flat dim: darkest in a band just outside the swatch ring, clear in the
   middle so the center label reads against the page, and fading to nothing well before the viewport
   edges so the rest of the screen stays legible. Reads as focus rather than as a modal curtain.

   TUNING HISTORY — the peak alpha is the dial worth touching:
     .46  original. Genuinely striking, but too showy for this client base.
     off  removing it entirely left the ring feeling unanchored on a busy grid.
     .18  current. Enough to pull the eye and say "this is open"; soft enough not to announce itself.
   The shoulder stops were flattened at the same time, so the falloff is a gentle vignette rather than
   a defined ring — the visible band edge was doing as much of the "look at me" as the darkness was.

   Sized in px rather than vw/vh so the falloff is the same wherever it opens. */
.drawer-color-menu__halo[b-78sympehko] {
    position: fixed;
    width: 860px;
    height: 860px;
    z-index: 10000;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: radial-gradient(circle closest-side,
        rgba(0, 0, 0, 0) 15%,      /* clear center — the label sits here */
        rgba(0, 0, 0, .10) 26%,    /* ramps up behind the swatch ring */
        rgba(0, 0, 0, .18) 34%,    /* darkest band, just outside the swatches */
        rgba(0, 0, 0, .14) 46%,
        rgba(0, 0, 0, .06) 66%,    /* long, soft shoulder */
        rgba(0, 0, 0, 0) 100%);
    animation: drawer-color-halo-in-b-78sympehko 200ms ease-out;
}

/* Blooms rather than bursts: starting at .7 instead of .45 keeps the entrance a settle rather than an
   expansion, which was the other half of what made the original feel theatrical. */
@keyframes drawer-color-halo-in-b-78sympehko {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.7);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .drawer-color-menu__halo[b-78sympehko] {
        animation: none;
    }
}

/* Zero-size anchor pinned to the click point; the ring is drawn around it. position:fixed rather than
   absolute so the grid's scroll container cannot clip it. outline:none is safe here: it is a zero-size,
   tabindex="-1" fallback focus target only, and each swatch draws its own focus ring. */
.drawer-color-menu[b-78sympehko] {
    position: fixed;
    width: 0;
    height: 0;
    z-index: 10001;
    outline: none;
    /* Springs out of the clicked cell rather than just appearing. */
    animation: drawer-color-menu-in-b-78sympehko 140ms cubic-bezier(.2, .9, .3, 1.2);
    transform-origin: center;
}

@keyframes drawer-color-menu-in-b-78sympehko {
    from {
        opacity: 0;
        transform: scale(.55);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .drawer-color-menu[b-78sympehko] {
        animation: none;
    }
}

.drawer-color-menu__swatch[b-78sympehko] {
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    /* NO colored ring on the bubbles, deliberately. A segmented border round a 44px circle read as
       busy rather than informative — the split fill already says what the combination is, and the ring
       was competing with it. The drawers themselves keep their segmented border, where it has room to
       be read.

       The thin neutral edge stays: the palette contains #ffffff, which would otherwise be an invisible
       circle on a light page. */
    border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, .28));
    background: var(--dc-fill-round);
    /* Stop the fill at the INNER edge of the border. The default (border-box) paints it underneath,
       and these neutral borders are semi-transparent — including var(--kendo-color-border) itself — so
       whichever band happened to sit under a given stretch of edge showed through and read as a stray
       color bleeding around the rim. */
    background-clip: padding-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
    cursor: pointer;
    transition: outline-offset 100ms ease-out, transform 100ms ease-out;
}

.drawer-color-menu__swatch:hover[b-78sympehko],
.drawer-color-menu__swatch:focus-visible[b-78sympehko] {
    outline: 2px solid var(--kendo-color-primary, #3f51b5);
    outline-offset: 3px;
}

/* The currently stored color. An outline rather than a tick, so it reads on every swatch — including
   white and yellow, where a dark glyph would be the only legible option. */
.drawer-color-menu__swatch--current[b-78sympehko] {
    box-shadow: 0 0 0 3px var(--kendo-color-primary, #3f51b5), 0 2px 6px rgba(0, 0, 0, .28);
}

/* "No color" — the checkerboard every image editor uses for "nothing here". A plain white fill read as
   the color white, which is an actual palette entry two positions away; the checkerboard cannot be
   mistaken for a color because no color looks like that.

   Painted rather than genuinely transparent: real transparency would show the page and the halo
   through it and look like a rendering fault. The checkerboard DEPICTS emptiness, which is the
   convention people already know.

   Two 45deg gradients offset by half a tile is the standard way to get a checkerboard from CSS. Tiles
   are small (7px) so the pattern reads as texture at 44px rather than as four big squares. */
.drawer-color-menu__swatch--none[b-78sympehko] {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, rgba(0, 0, 0, .16) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .16) 75%),
        linear-gradient(45deg, rgba(0, 0, 0, .16) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .16) 75%);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
    border: 2px dashed var(--kendo-color-subtle, rgba(0, 0, 0, .45));
}

/* Center label. Sits in the hole of the ring and names the swatch under the cursor.

   PREVIOUSLY: the text itself was tinted with the color it named and outlined in black to survive
   whatever was behind it. Every name was then only as readable as its own color allowed — dark blue
   and purple disappeared into their own outline, and "No color", having no tint, rendered as dark
   text inside a dark outline and was the least readable of all.

   NOW: the color moves to a dot beside the name, and the text is plain near-black on a solid light
   plate. One legible treatment for all ten options instead of ten treatments of varying quality. */
.drawer-color-menu__label[b-78sympehko] {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* Shrink-wrapped and centered on the ring's middle rather than a fixed width, so short names get a
       small plate and long ones stay on one line. */
    width: max-content;
    max-width: 150px;
    padding: 5px 11px;
    border-radius: 999px;
    /* Opaque, not translucent: this sits over the grid, so anything showing through is noise behind
       text that has to be read at a glance. */
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .16);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    pointer-events: none;
    user-select: none;
}

.drawer-color-menu__label-text[b-78sympehko] {
    /* Near-black rather than the theme's on-surface color, which varies; this plate is always white. */
    color: #1f2430;
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The color itself, now that the text no longer carries it. The border matters: without it #ffffff
   would be an invisible dot on a white plate. */
.drawer-color-menu__label-dot[b-78sympehko] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    /* Mirrors the swatch: split fill, plain neutral edge, no colored ring. The border matters here —
       without it #ffffff would be an invisible dot on a white plate. */
    border: 1px solid rgba(0, 0, 0, .30);
    background: var(--dc-fill-round);
    /* Stop the fill at the INNER edge of the border. The default (border-box) paints it underneath,
       and these neutral borders are semi-transparent — including var(--kendo-color-border) itself — so
       whichever band happened to sit under a given stretch of edge showed through and read as a stray
       color bleeding around the rim. */
    background-clip: padding-box;
}

/* Same checkerboard as the "no color" swatch, scaled down — the dot and the ring position it refers
   to should look like the same thing. */
.drawer-color-menu__label-dot--none[b-78sympehko] {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, rgba(0, 0, 0, .20) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .20) 75%),
        linear-gradient(45deg, rgba(0, 0, 0, .20) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .20) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
}
/* /Components/Shared/Templates/TemplateAddChildContainersDialog.razor.rz.scp.css */
/* /Components/Shared/Templates/TemplateAddItemsDialog.razor.rz.scp.css */
/* /Components/Shared/Templates/TemplateContentGrid.razor.rz.scp.css */
/* /Components/Shared/Templates/TemplateCreateGrid.razor.rz.scp.css */
.substitute-badge[b-v8wjpdif10] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--kendo-color-on-app-surface, #3d3d3d);
    background-color: var(--kendo-color-surface, #ededed);
    border: 1px solid var(--kendo-color-border, #d6d6d6);
}

/* The drawer color swatch (.drawer-color-cell) is shared with the create wizard's drawer rows and
   lives in wwwroot/css/app.css. */
/* /Components/Shared/Templates/TemplateItemSearchPanel.razor.rz.scp.css */
[b-v0seni34m0] .search-panel-dialog {
    width: 95%;
    max-width: 720px;
    max-height: 85vh;
    margin: 0 1rem;
}

.search-panel[b-v0seni34m0] {
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.search-panel__input[b-v0seni34m0] {
    margin-bottom: 0.75rem;
}

.search-panel__loading[b-v0seni34m0],
.search-panel__empty[b-v0seni34m0] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2rem 1rem;
    text-align: center;
}

.search-panel__results[b-v0seni34m0] {
    max-height: 55vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* ── Result card ── */

.search-result[b-v0seni34m0] {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    background: #fff;
    transition: border-color 0.15s;
}

.search-result:hover[b-v0seni34m0] {
    border-color: #b0b0b0;
}

.search-result__breadcrumb[b-v0seni34m0] {
    font-size: 0.7rem;
    color: #707070;
    margin-bottom: 0.25rem;
    letter-spacing: 0.01em;
}

.search-result__main[b-v0seni34m0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-result__info[b-v0seni34m0] {
    flex: 1;
    min-width: 0;
}

/* Name + the "view photo" icon on one line; the name keeps its ellipsis. */
.search-result__title[b-v0seni34m0] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

    .search-result__title .search-result__name[b-v0seni34m0] {
        min-width: 0;
    }

.search-result__name[b-v0seni34m0] {
    font-weight: 600;
    font-size: 0.875rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result__brand[b-v0seni34m0] {
    font-size: 0.775rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result__product-details[b-v0seni34m0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.6rem;
    font-size: 0.75rem;
    color: #666;
    margin-top: 0.15rem;
}

.search-result__chips[b-v0seni34m0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.search-chip[b-v0seni34m0] {
    font-size: 0.675rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background: #eee;
    color: #555;
    white-space: nowrap;
}

.search-chip--shared[b-v0seni34m0] {
    background: #fff3cd;
    color: #856404;
}

.search-chip--id[b-v0seni34m0] {
    background: #e8f0fe;
    color: #1a5276;
    font-family: monospace;
}

.search-chip--warning[b-v0seni34m0] {
    background: #f8d7da;
    color: #842029;
}

.search-chip--substitute[b-v0seni34m0] {
    background: #e2e3e5;
    color: #41464b;
}

.search-result__actions[b-v0seni34m0] {
    display: flex;
    gap: 0.125rem;
    flex-shrink: 0;
}

/* ── Clickable qty chip ── */

/* A <button> now (keyboard-reachable), so it sheds the browser's button chrome to keep the chip look. */
.search-chip--qty[b-v0seni34m0] {
    cursor: pointer;
    transition: background 0.15s;
    border: 0;
    font: inherit;
    font-size: 0.675rem;
    line-height: inherit;
}

.search-chip--qty:hover[b-v0seni34m0] {
    background: #d4edda;
    color: #155724;
}

.search-chip--qty-edit[b-v0seni34m0] {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0;
    background: transparent;
}
/* /Components/Shared/Templates/TemplateReplaceItemDialog.razor.rz.scp.css */
/* /Components/Shared/Templates/TemplateSubstituteItemDialog.razor.rz.scp.css */