.service-form{display:grid;gap:1rem;max-width:1050px}.service-form label,.service-card label{display:grid;gap:.35rem}.service-form label:has(input[type=checkbox]),.service-card label:has(input[type=checkbox]){display:block}.service-form input[type=checkbox],.service-permissions input{width:1.15rem;height:1.15rem;vertical-align:middle;margin-right:.45rem}.service-permissions td{text-align:center}.service-permissions th{min-width:100px}.service-permissions th:first-child{min-width:230px}.service-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1rem}.service-card{background:#fff;padding:1.2rem;border:1px solid #dce5e1;border-radius:14px;display:flex;flex-direction:column;gap:.7rem}.service-card h2{font-size:1.1rem;font-weight:700}.service-card h3{font-weight:650}.service-card form{display:grid;gap:.8rem}.service-stage-time{display:block;color:#64756f;font-size:.8rem}.service-option-row{display:grid;grid-template-columns:1.4fr .7fr 1.5fr .7fr .6fr auto;gap:.6rem;padding:.8rem 0;align-items:end}.service-ingredient-row{display:grid;grid-template-columns:2fr 1fr .6fr auto;gap:.6rem;align-items:end;padding:.6rem 0}.service-history{padding:1rem 0;border-bottom:1px solid #e0e6e3}.service-history h3{font-weight:700}.service-history p{margin:.4rem 0}.service-options-dialog{width:min(560px,94vw);max-height:85vh;overflow:auto;border:0;border-radius:18px;padding:1.5rem}.service-options-dialog::backdrop{background:#14201dbb}.service-options-dialog h2{font-weight:700;font-size:1.3rem;margin-bottom:1rem}.service-options-dialog fieldset{margin:1rem 0}.service-options-dialog legend{font-weight:650}.service-options-dialog label{display:block;margin:.6rem 0}.service-options-dialog footer{display:flex;justify-content:flex-end;gap:.6rem}.service-chart-table{font-size:.9rem}.service-filter-empty{padding:1rem}@media(max-width:760px){.service-option-row,.service-ingredient-row{grid-template-columns:1fr 1fr}.service-permissions{font-size:.85rem}.service-card-grid{grid-template-columns:1fr}}

/* Keep the three POS panes usable beside the desktop sidebar. */
@media (min-width: 1181px) and (max-width: 1550px) {
    .pos-view-switch {
        min-width: 0;
        margin-bottom: .8rem;
        padding: 4px;
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        position: sticky;
        top: .5rem;
        z-index: 20;
        background: rgba(255, 255, 255, .96);
        box-shadow: var(--shadow);
        backdrop-filter: blur(10px);
    }

    .pos-view-switch button {
        min-width: 0;
        min-height: 44px;
        padding: .35rem;
        border: 0;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        position: relative;
        background: transparent;
        color: var(--muted);
        font: inherit;
        font-size: .78rem;
        font-weight: 800;
    }

    .pos-view-switch button.is-active {
        background: var(--primary);
        color: #fff;
    }

    .pos-view-switch b {
        min-width: 20px;
        height: 20px;
        padding: 0 .25rem;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, .2);
        font-size: .66rem;
    }

    .pos-shell {
        display: block;
    }

    .pos-shell > [data-pos-pane] {
        display: none;
    }

    .pos-shell > [data-pos-pane].is-mobile-active {
        display: block;
    }

    .pos-menu,
    .pos-ticket {
        position: static;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
    }

}