/* SubscriptionActivationPanel — top-row layout normalisation.

   The Activate-your-subscription card top row contains three controls of
   different MudBlazor types: a MudToggleGroup (Cadence), a MudNumericField
   (Seats), and a MudTextField + MudButton pair (Promo code). Out of the box
   each component picks its own height — toggle ~48 px, outlined field
   ~56 px, default button ~36 px — which makes the row read as three
   disjointed bands. These rules pin all three controls to a shared
   --activation-row-h height so the row is one clean band. */

.activation-row {
    --activation-row-h: 44px;
}

.activation-row .activation-row__control,
.activation-row .activation-row__apply {
    box-sizing: border-box;
    min-height: var(--activation-row-h);
}

/* MudToggleGroup: the .mud-toggle-group element is the visible band.
   Force the group + each item to fill the height, and let labels centre
   vertically. */
.activation-row .activation-row__toggle.mud-toggle-group {
    height: var(--activation-row-h);
    align-items: stretch;
}

.activation-row .activation-row__toggle .mud-toggle-item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* MudNumericField + MudTextField (Variant.Outlined, Margin.Dense). The
   visible outlined border element is .mud-input.mud-input-outlined; its
   height is what the user sees, NOT the surrounding .mud-input-control.
   Override the inner element directly + neutralise its top/bottom padding
   so the value sits centred. The accompanying Margin="Margin.Dense" on
   the field markup is what removes the floating-label gap above the
   outlined box (it's that gap that made the field look taller than the
   toggle even when the inner box itself was sized correctly). */
.activation-row .activation-row__control .mud-input.mud-input-outlined {
    height: var(--activation-row-h);
    min-height: var(--activation-row-h);
}

.activation-row .activation-row__control .mud-input.mud-input-outlined input {
    padding-top: 0;
    padding-bottom: 0;
    height: 100%;
    box-sizing: border-box;
}

/* MudNumericField increment/decrement spinner — keep it centred too. */
.activation-row .activation-row__control .mud-input-adornment {
    height: 100%;
    align-items: center;
}

/* Promo row: text field + Apply button sit side-by-side. align-items
   is FLEX-START (not stretch) on purpose — `stretch` makes MudTextField's
   outer .mud-input-control wrapper grow to whatever the button column's
   intrinsic height is, which then lets the inner outlined box drift down
   inside that taller wrapper and visually misalign with the seats field
   one column over. Both children are already height-pinned via
   --activation-row-h below, so no stretch is needed. */
.activation-row__promo {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* The MudTextField root + its .mud-input-control wrapper would otherwise
   inherit MudBlazor's default top padding reserved for a floating label.
   Margin.Dense reduces it but doesn't zero it. Explicit margin/padding
   reset keeps the visible outlined box flush against the column top so
   it lines up with the seats field beside it. */
.activation-row__promo .activation-row__control,
.activation-row__promo .activation-row__control .mud-input-control {
    margin-top: 0;
    padding-top: 0;
}

/* MudButton: its rendered height comes from padding-top/bottom on the
   .mud-button element itself, NOT from a height attribute. Neutralise
   the padding and pin the height so the Apply button matches the field
   exactly. */
.activation-row .activation-row__apply.mud-button {
    height: var(--activation-row-h);
    min-height: var(--activation-row-h);
    flex-shrink: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Modules list — four module rows stacked under the top row. Tightened
   from the original inline (gap:8px, padding:12px, default checkbox)
   to a more compact band so all four rows fit in the visible area
   without scrolling on a typical laptop. */
.activation-modules {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.activation-module-row {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 6px 12px;
}

.activation-module-row__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* MudCheckBox Size.Small still ships with surrounding label/hit-target
   padding that adds vertical bulk. Strip the label wrapper padding so
   the checkbox doesn't dictate row height. */
.activation-module-row .mud-checkbox .mud-button-root {
    padding: 4px;
}

/* Tagline — drop the inherited body2 line-height a touch so the two-line
   text block (name + tagline) stays compact. */
.activation-module-row__head .mud-typography-body2 {
    line-height: 1.25;
}