/* Styles for the per-field weight grab button (ScaleCaptureButton).
 *
 * This is a GLOBAL stylesheet rather than component-scoped CSS on purpose: .vcc-scale-field is
 * written in each consuming page's markup, so a scoped rule could never match it (Blazor would
 * rewrite the selector with the component's own scope attribute), and ::deep only reaches
 * downwards into children, never up to an ancestor wrapper.
 *
 * Referenced from each app's App.razor alongside js/vcc-scales.js.
 */

/* Pairs one weight input with its own grab button. Doubles as the scope JS uses to work out
   which input a given button belongs to — see resolveTargetFor in vcc-scales.js. */
.vcc-scale-field {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* For call sites where the input is full width (a vertical stack, a grid cell): the row fills
   its container and the input shrinks to leave room for the button beside it. */
.vcc-scale-field--fill {
    display: flex;
    width: 100%;
}

/* For call sites wrapping a RadzenFormField, whose box is taller than the input because the
   floating label sits above it.
   Anchored from the BOTTOM deliberately: the field box and the input share their bottom edge,
   whereas the top edge differs by the label's height — so offsetting from the top means guessing
   that height, while offsetting from the bottom is just (input height - button height) / 2.
   30px button on a 40px input = 5px. */
.vcc-scale-field--form-field {
    align-items: flex-end;
}

.vcc-scale-field--form-field .vcc-scale-field-btn {
    margin-bottom: 5px;
}

/* Visibility is NOT handled here — ScaleCaptureButton only renders itself while a scale is
   attached, driven by the circuit-scoped ScaleConnectionState. (An earlier version hid it with
   a body.vcc-scales-connected rule, but Blazor's enhanced navigation wipes body attributes.) */
/* Solid white surface with a dark icon, NOT a tinted/outlined blue one. These buttons sit on
   category cards whose colour varies (yellow gold cards, purple platinum/silver cards, plain
   white panels), so any coloured-on-transparent treatment vanishes against some of them — blue
   on the purple cards came out at roughly 1.3:1. White also matches the input beside it, and the
   grey border plus small shadow keep it distinct where the card behind is white too. */
.vcc-scale-field-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    flex: 0 0 auto;
    border: 1px solid #94a3b8;
    border-radius: 4px;
    background: #fff;
    color: #0b5ed7;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.vcc-scale-field-btn:hover {
    background: #f1f5f9;
    border-color: #0b5ed7;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
}

.vcc-scale-field-btn:active {
    background: #e2e8f0;
    box-shadow: none;
}

/* White outline as well, so the focus ring is visible against the dark purple cards too. */
.vcc-scale-field-btn:focus-visible {
    outline: 2px solid #0b5ed7;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85);
}

.vcc-scale-field-btn .rzi {
    font-size: 1.05rem;
    width: auto;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .vcc-scale-field-btn {
        transition: none;
    }
}