/*
 * okama-dash — single source of truth for form-control sizing & spacing.
 *
 * The widgets mix three control families that ship with different default
 * heights, which looks sloppy when they share a dbc.Row:
 *   - dbc.Input / dbc.Select  -> 38px (Bootstrap .form-control)
 *   - dcc.Dropdown (Dash 3.x) -> 34px (.dash-dropdown-trigger min-height 32px + 2px border)
 *   - dmc.Select  (Mantine)   -> 36px (.mantine-Select-input min-height 36px)
 *
 * Design rule 1 — Equal height in a row: normalize every interactive control to
 * 38px so dropdowns and selects line up with inputs in the same row.
 *
 * Design rule 2 — Vertical rhythm: stacked form rows must never touch. The
 * CONTAINER of stacked rows owns the gap via Bootstrap `vstack gap-2` (0.5rem),
 * so every row — including ones added dynamically — keeps a consistent gap and
 * no row has to remember a bottom-margin utility. See #dynamic-container in
 * pages/portfolio/cards_portfolio/portfolio_controls.py.
 */

/* Rule 1: dcc.Dropdown -> 38px (36px trigger + 2px border on the wrapper). */
.dash-dropdown .dash-dropdown-trigger {
    min-height: 36px;
}

/* Rule 1: single dmc.Select -> 38px. min-height (not height) keeps the
   PillsInput-based dmc.MultiSelect free to grow as tags wrap. */
.mantine-Select-input {
    min-height: 38px;
}

/* Rule 1: dmc.MultiSelect -> 38px base height (still grows as tags wrap,
   min-height only lifts the single-line case to match its row neighbours). */
.mantine-MultiSelect-input {
    min-height: 38px;
}

/* Rule 1: dmc.NumberInput (Initial amount / Cash flow amount, #17) -> 38px
   so it lines up with the dbc.Input neighbours (Discount/Indexation rate). */
.mantine-NumberInput-input {
    min-height: 38px;
}

/* "Go to" dropdown (Portfolio): dbc.DropdownMenu's default color renders the
   toggle as solid btn-primary; btn-outline-primary (toggle_class_name) wins
   every --bs-btn-* variable it declares, but never declares the background.
   Neutralize bg (incl. disabled) so the toggle looks like the outline button
   it replaced — hover/active fills still come from btn-outline-primary. */
#pf-goto-menu .dropdown-toggle {
    --bs-btn-bg: transparent;
    --bs-btn-disabled-bg: transparent;
}