/**
 * Make My Sheet — Configurator Styles
 *
 * Minimal, clean layout for the bulk-table cut-to-size configurator.
 * Uses the `sheet-` prefix throughout. Does not override Core configurator
 * base styles (core-configurator.css handles the wrapper and form chrome).
 */

/* Shared bulk-table skeleton lives in core/assets/css/core-bulk-table.css */

/* Project meta fieldset: styled once for both bulk tables in
   core/assets/css/core-bulk-table.css, now that Trim collects it too. */

/* -----------------------------------------------------------------------
   Table
   -----------------------------------------------------------------------
   No min-width. The 17 columns are intrinsically ~1330 px wide, so the old
   760 px floor never once applied — it read as "this table needs 760 px" when
   the real answer was closer to 1.8× that. Sizing is left to the shared
   skeleton in core/assets/css/core-bulk-table.css: a horizontal scroller at
   table widths, a card per row below 900 px. */

/* -----------------------------------------------------------------------
   Row inputs
   ----------------------------------------------------------------------- */

/* Grain-direction select — sized to its two short options; disabled (i.e. the
   material has no grain) reads as muted/greyed. */
.sheet-grain {
    width: 100px;
    min-width: 90px;
}

.sheet-grain:disabled {
    background: var(--paper-soft);
    color: var(--ink-faint);
    cursor: not-allowed;
}

/* Edge checkboxes are styled once for both bulk tables in
   core/assets/css/core-bulk-table.css (efficiency #223). */

/* Validation banner: styled by Core's .core-validation-messages class,
   which the markup carries alongside .sheet-validation. */

/* ------------------------------------------------------------------
 * Cut-out handles — per-row Handle trigger + popover (sheet-cutout.js).
 * ------------------------------------------------------------------ */
.sheet-cell-handle {
    position: relative;
    white-space: nowrap;
}

.sheet-cutout-trigger {
    /* Design.md §5.4 "One height per row": the row's controls are all 32px,
       so the trigger takes the same rung (the card layout lifts it to 44). */
    box-sizing: border-box;
    height: var(--h-btn-sm);
    font-size: var(--fs-12);
    padding: 0 8px;
    cursor: pointer;
}

/* A row whose material is not cut-out eligible hides the trigger outright
   (sheet-cutout.js::updateTrigger) — declared explicitly because the mobile
   card layout sets `width` on this button and a future `display` there would
   otherwise beat the UA `[hidden]` rule. */
.sheet-cutout-trigger[hidden] {
    display: none;
}

.sheet-cutout-trigger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Surface treatment (position / padding / z-index / min-width / font) is
   comma-joined onto Core's `.core-popup` in core-configurator.css — this
   popover is the same overlay, just built by JS instead of Core_Popup, and
   had drifted on four values (efficiency #223). Background / border / radius
   / shadow come from the shared `.core-popover` rung-2 chrome in
   core-modal.css, which sheet-cutout.js puts on the element (efficiency
   #230). Only the anchoring and the internal stack stay here. */
.sheet-cutout-popover {
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.sheet-cutout-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--fs-12);
}

/* No text-transform: the labels arrive already cased from CoreHandleLabels
   (core-handle-labels.js), and `capitalize` would mangle "X offset (mm)". */
.sheet-cutout-field > span {
    font-weight: var(--fw-semibold);
}

/* Group heading above the per-param dimension inputs — carries the "(mm)" unit
   once, mirroring Core_Handle_Select's `.core-handle-sublabel` dims block. */
.sheet-cutout-subhead {
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    opacity: 0.75;
}

.sheet-cutout-field input,
.sheet-cutout-field select {
    width: 100%;
    box-sizing: border-box;
}

.sheet-cutout-dynamic {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sheet-cutout-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}