/**
 * core-staff-tools.css — the staff drawer's toggle and placement.
 *
 * Chrome (paper, border, radius, shadow) comes from .core-popover in
 * core-modal.css, which core-configurator already declares as a dependency.
 * This sheet MUST NOT restate it — the room breakdown sheet documents the same
 * rule, and two copies drift.
 *
 * Design tokens only: spacing from --sp-*, rules from --rule. No hardcoded hex. Control height comes from the
 * `.core-btn--sm` rung, not from a local --h-* declaration.
 */

/* Height, padding, radius and the shrink-to-fit width come from
   `.core-btn--sm.core-btn--inline` in core-controls.css — only the flex
   behaviour in the summary strip belongs here. Without `flex: 0 0 auto` the
   toggle stretches toward the 52px primary beside it. The room breakdown's
   toggle carries the identical pair. */
.core-staff-tools__toggle {
    margin-left: var(--sp-2);
    flex: 0 0 auto;
    align-self: center;
}

/* The panel is positioned against the configurator root, so the roots get
   `position: relative` here. Do NOT add a blanket
   [class$="-configurator"] rule here — that would create a containing block on
   every configurator network-wide and can reposition existing absolutely
   positioned descendants. */
.desk-configurator,
.table-configurator,
.panelling-configurator,
.frame-configurator,
.door-configurator,
.cabinet-configurator,
.wardrobe-configurator {
    position: relative;
}

/* `--core-staff-tools-offset` is written by core-staff-tools.js: the measured
   distance from the root's bottom edge up to the top of the summary strip, so
   the panel sits just above the strip its toggle lives in. The containing block
   is the whole configurator root, so the `100%` fallback would float the panel
   above the entire configurator — that is the bug this replaces, not a
   reasonable default; it only ever applies for the one frame before the JS
   measures. `max-height` + scroll so a long breakdown stays readable rather
   than running off the top of the shell. */
.core-staff-tools__panel {
    position: absolute;
    right: var(--sp-6);
    bottom: calc(var(--core-staff-tools-offset, 100%) + var(--sp-2));
    z-index: var(--z-overlay);
    width: min(360px, calc(100vw - 32px));
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--sp-4);
}

.core-staff-tools__panel .core-pricing {
    margin: 0;
}

/* The mirrored total, appended by core-staff-tools.js below the workings. It
   is a copy of the stepper footer's number, never a second calculation — see
   the file header of core-staff-tools.js. `.core-price-line` gives it the
   flex row; only the separating rule and the value column belong here.
   This is NOT a reinstatement of the deleted `.core-price-line.core-total`
   rule in core-configurator.css: that styled three duplicate totals rendered
   by Core_Price_Panel, which still renders none. */
.core-staff-tools__panel .core-staff-tools__total {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--rule);
}

.core-staff-tools__total-value {
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-normal);
}

.core-staff-tools__panel .core-actions {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* Narrow viewports: a bottom sheet. The room breakdown achieves this with an
   `.is-bottom-sheet` class driven by CoreRoom.popoverDom, which does not exist
   on a single-product page — hence a media query here, at the stepper's own
   900px breakpoint rather than an invented one. */
@media (max-width: 900px) {
    .core-staff-tools__panel {
        position: fixed;
        right: 0;
        left: 0;
        /* Beats the measured offset above without the JS having to know this
           breakpoint exists. */
        bottom: 0;
        width: auto;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
    }
}