/* /Components/CellGrid.razor.rz.scp.css */
/* Cell grid fills the available space; 1fr tracks (set per cart kind) share it equally so cells scale proportionally. */
.cell-layout[b-26dj7xz1mj] {
    display: grid;
    gap: 0.5rem;
    width: 100%;
    height: calc(100% - 24px);
}

[b-26dj7xz1mj] .cell {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 1;
    position: relative;
    color: #FFFFFF;
    /* A long press must neither select the text nor raise the browser's own menu, and a touch is never a pan. */
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* Status fills; the inactive cell is surface-toned with a primary glow along its bottom edge. */
[b-26dj7xz1mj] .cell-inactive {
    background: var(--cart-cell-inactive);
    color: var(--mud-palette-text-secondary);
}

[b-26dj7xz1mj] .cell-empty {
    background-color: var(--cart-cell-empty);
    color: var(--mud-palette-text-secondary);
}

[b-26dj7xz1mj] .cell-waiting {
    background-color: var(--mud-palette-primary);
}

[b-26dj7xz1mj] .cell-confirmation {
    background-color: var(--mud-palette-success);
}

[b-26dj7xz1mj] .cell-warning {
    background-color: var(--mud-palette-warning);
}

[b-26dj7xz1mj] .cell-error {
    background-color: var(--mud-palette-error);
}

[b-26dj7xz1mj] .cell-secondary {
    opacity: 0.85;
}

/* The ring along the cell's border that fills clockwise from 12 o'clock while the cell is held pressed: a frame on top of
   the cell, revealed by a conic mask whose angle runs from 0 to 360 degrees. The grid sets --long-press, the time the press
   takes to become a long one, and --ring-delay, the part of it before the ring starts (so that a short tap shows no ring);
   the ring is full exactly when the press becomes a long one. The thin dark line inside the ring keeps it visible on a pale cell. */
@property --cell-hold-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

[b-26dj7xz1mj] .cell-holding::after {
    content: '';
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: 6px solid rgba(255, 255, 255, 0.6);
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    -webkit-mask-image: conic-gradient(from 0deg, #000 var(--cell-hold-angle), transparent var(--cell-hold-angle));
    mask-image: conic-gradient(from 0deg, #000 var(--cell-hold-angle), transparent var(--cell-hold-angle));
    animation: cell-hold-b-26dj7xz1mj calc(var(--long-press) - var(--ring-delay)) linear var(--ring-delay) forwards;
}

@keyframes cell-hold-b-26dj7xz1mj {
    from {
        --cell-hold-angle: 0deg;
    }

    to {
        --cell-hold-angle: 360deg;
    }
}

/* White status icon in a circle of the icon's color, pinned to the cell's top right corner, independent of the centered content below. */
[b-26dj7xz1mj] .cell-icon {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
}

[b-26dj7xz1mj] .cell-icon .mud-icon-root {
    font-size: 2.5rem;
}

[b-26dj7xz1mj] .cell-icon-info {
    background-color: var(--mud-palette-info);
}

[b-26dj7xz1mj] .cell-icon-success {
    background-color: var(--mud-palette-success);
}

[b-26dj7xz1mj] .cell-icon-warning {
    background-color: var(--mud-palette-warning);
}

[b-26dj7xz1mj] .cell-icon-error {
    background-color: var(--mud-palette-error);
}

[b-26dj7xz1mj] .cell-icon-neutral {
    background-color: var(--mud-palette-secondary);
}
/* /Components/Pages/PutToLightView.razor.rz.scp.css */
    /* Simulator-only styling: imitates the physical PTL device (seven-segment display, LED button). */
    .ptl-cells-row[b-w7r7vx2r1x] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .ptl-cell-wrapper[b-w7r7vx2r1x] {
        --ptl-cell-width: 182px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .ptl-cell[b-w7r7vx2r1x] {
        width: var(--ptl-cell-width);
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    .ptl-cell-buttons[b-w7r7vx2r1x] {
        display: flex;
        flex-direction: column;
    }

    .ptl-plus-minus[b-w7r7vx2r1x] {
        width: 32px;
        height: 36px;
        min-width: 32px;
        font-size: 20px;
        border: 1px solid var(--mud-palette-lines-default);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ptl-display[b-w7r7vx2r1x] {
        font-family: 'Seven Segment', monospace;
        font-size: 42px;
        color: darkred;
        background: #1a1a1a;
        padding: 2px 8px;
        min-width: 72px;
        text-align: center;
        line-height: 72px;
        border: 1px solid #555;
    }

    .ptl-ok-button[b-w7r7vx2r1x] {
        width: 52px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        border: 1px solid var(--mud-palette-lines-default);
        background: var(--mud-palette-action-default);
        cursor: pointer;
        padding: 2px;
    }

    .ptl-ok-button.blink[b-w7r7vx2r1x] {
        animation: ptl-blink-b-w7r7vx2r1x 0.3s step-start infinite;
    }

    @keyframes ptl-blink-b-w7r7vx2r1x {
        50% {
            opacity: 0.3;
        }
    }

    .ptl-ok-text[b-w7r7vx2r1x] {
        font-size: 16px;
        color: var(--mud-palette-text-primary);
        margin-top: 8px;
    }

    .ptl-cell-number[b-w7r7vx2r1x] {
        font-size: 12px;
        color: var(--mud-palette-text-primary);
        opacity: 0.7;
        align-self: flex-start;
    }

    .ptl-weight[b-w7r7vx2r1x] {
        width: var(--ptl-cell-width);
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 4px;
        align-items: center;
    }

    .ptl-ok-led-red[b-w7r7vx2r1x] {
        background: red;
    }

    .ptl-ok-led-blue[b-w7r7vx2r1x] {
        background: blue;
    }

    .ptl-ok-led-green[b-w7r7vx2r1x] {
        background: green;
    }

    .ptl-ok-led-magenta[b-w7r7vx2r1x] {
        background: magenta;
    }

    .ptl-ok-led-cyan[b-w7r7vx2r1x] {
        background: cyan;
    }

    .ptl-ok-led-lightgreen[b-w7r7vx2r1x] {
        background: orange;
    }

    .ptl-ok-led-lightblue[b-w7r7vx2r1x] {
        background: lightblue;
    }

    .ptl-ok-led-white[b-w7r7vx2r1x] {
        background: white;
    }

    .ptl-ok-led-disable[b-w7r7vx2r1x] {
        background: var(--mud-palette-action-default);
    }