/*
 * Form Control Tweaks
*/

.form-group.with-icon i,
.form-group.with-icon svg {
    left: 0;
    top: 25%;
    width: 50px;
    display: block;
    position: absolute;
    text-align: center;
    line-height: 3.5rem;
    margin-top: -10px;
    font-size: 20px;
}


.form-control {
    appearance: none;
    background-clip: padding-box;
    background-color: var(--abs-input-bg);
    border-radius: 2px;
    border: 1px solid var(--abs-input-border-color);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
    color: var(--abs-input-color);
    display: block;
    font-size: 1rem;
    font-weight: 500;
    height: calc(3rem) !important;
    line-height: 1.5;
    padding: .775rem 1rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    width: 100%;
}

[data-theme="dark"] .form-control {
    display: block;
    width: 100%;
    color: white;
    font-size: 1em;
    line-height: 1.5;
    padding: 1.375rem 1rem;
    background-color: #0a0a0a;
    background-clip: padding-box;
    border: 1px solid var(--abs-card-border-color);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: .4375rem .75rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4285714;
    color: #656d77;
    text-align: center;
    white-space: nowrap;
    background-color: #f4f6fa;
    border: 1px solid var(--abs-card-border-color);
    height: 3.4em;
    border-radius: 0px;
}

[data-theme="dark"] .input-group-text {
    display: flex;
    align-items: center;
    padding: .4375rem .75rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4285714;
    color: #656d77;
    text-align: center;
    white-space: nowrap;
    background-color: #0a0a0a;
    border: 1px solid var(--abs-card-border-color);
    height: 3.4em;
    border-radius: 0px;
}


@media (max-width:360px) {

    .form-group.label-floating label.control-label,
    .form-group.label-placeholder label.control-label {
        font-size: 12px
    }
}

.form-check-custom .form-check-label {
    margin-left: 2rem;
}


/* ==========================================================================
   Suite input primitives (ABS.SDK — Components/Primitives + Components/Inputs)
   --------------------------------------------------------------------------
   Relocated here from each component's inline <style> block so this CSS loads
   ONCE globally instead of being re-emitted into the DOM on every component
   instance (the .scfs/.sphone/.staxid blocks used to appear 3+ times per form).
   The marker classes stay in the .razor markup; only the <style> elements were
   removed. ::part(...) selectors cross the shadow-DOM boundary from a global
   sheet, so they work unchanged; the !important flags still out-specify
   FluentUI's CSS-isolated rules. The --abs-input-height token (default 40px)
   lives with the other --abs-input-* tokens in abs.tweaks.colors.css; the
   var(--abs-input-height, 40px) fallbacks are kept.
   ========================================================================== */

/* ── Country flag selector (SuiteCountryFlagSelect .scfs) — ONE definition;
      previously duplicated per phone / tax-id instance. ─────────────────── */
.scfs { position: relative; display: inline-flex; }

.scfs-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px;
    background: var(--abs-input-bg, #fff);
    color: var(--abs-input-color, inherit);
    border: 1px solid var(--abs-input-border-color, #ccc);
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease;
}
.scfs-trigger:hover:not(:disabled) { background: var(--neutral-fill-secondary-hover, rgba(0,0,0,.04)); }
.scfs-trigger:disabled { opacity: .6; cursor: not-allowed; }
.scfs-trigger.scfs-open { border-color: var(--abs-primary, var(--accent-fill-rest)); }

/* Attached: embedded on the left of a flat field — drop own chrome so the parent field owns the border. */
.scfs-attached { display: flex; }
.scfs-attached .scfs-trigger {
    height: 100%;
    border: none;
    border-radius: 0;
    border-right: 1px solid var(--abs-input-border-color, #ccc);
    background: transparent;
}

.scfs-label { font-size: 13px; }
.scfs-chevron { display: inline-flex; opacity: .6; }
.scfs-noflag { display: inline-flex; opacity: .6; }

.scfs-backdrop { position: fixed; inset: 0; z-index: 1000; background: transparent; }

.scfs-popup {
    position: absolute;
    z-index: 1001;
    top: calc(100% + 4px);
    left: 0;
    width: 280px;
    max-width: 90vw;
    background: var(--abs-card-bg, #fff);
    color: var(--abs-input-color, inherit);
    border: 1px solid var(--abs-input-border-color, #ccc);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    overflow: hidden;
}
.scfs-filterwrap { padding: 8px; border-bottom: 1px solid var(--abs-border-color, #eee); }
.scfs-filter {
    width: 100%;
    box-sizing: border-box;
    height: 30px;
    padding: 0 8px;
    background: var(--abs-input-bg, #fff);
    color: var(--abs-input-color, inherit);
    border: 1px solid var(--abs-input-border-color, #ccc);
    border-radius: 6px;
    font: inherit;
    outline: none;
}
.scfs-filter:focus { border-color: var(--abs-primary, var(--accent-fill-rest)); }

.scfs-list { max-height: 260px; overflow-y: auto; padding: 4px; }
.scfs-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    font: inherit;
    color: inherit;
    text-align: left;
}
.scfs-item:hover, .scfs-item.scfs-hl { background: var(--neutral-fill-secondary-hover, rgba(0,0,0,.06)); }
.scfs-item.scfs-sel { font-weight: 600; }
.scfs-item-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.scfs-item-dial { flex: 0 0 auto; color: var(--abs-text-muted, #888); font-size: 12px; }
.scfs-item-check { flex: 0 0 auto; display: inline-flex; color: var(--abs-primary, var(--accent-fill-rest)); }
.scfs-empty { padding: 12px; text-align: center; color: var(--abs-text-muted, #888); font-size: 12px; }

/* ── Uniform input height via FluentUI shadow parts. The visible box is the `root` part and the
      actual <input> is the `control` part; sizing the box (not the host) keeps an optional label
      above laying out naturally. FAST's internal base input height is ~32px (base-height-multiplier
      8 × design-unit 4); `!important` on the `height` rules guarantees the token height wins over
      that internal rule across EVERY appearance (outline / filled / underline). min-height floors
      (select / autocomplete) don't compete on specificity, so they need no `!important`. ──────── */
fluent-text-field.suite-text-field::part(root) { height: var(--abs-input-height, 40px) !important; }
fluent-text-field.suite-text-field::part(control) { height: 100% !important; }

fluent-number-field.suite-number-field::part(root) { height: var(--abs-input-height, 40px) !important; }
fluent-number-field.suite-number-field::part(control) { height: 100% !important; }

/* FluentSelect's clickable box is its `control` part; min-height lets an explicit Height / multi-select growth take over. */
fluent-select.suite-select::part(control) { min-height: var(--abs-input-height, 40px); align-items: center; }

/* Keep the select INSIDE its container. FAST's fluent-select has a large intrinsic min-width (on the host AND the
   `control` part) that overflows a narrow Bootstrap column — e.g. the JournalEntry Direction in col-lg-2, spilling
   into the money input's column. Force it to fill its column and shrink instead of overflowing. */
fluent-select.suite-select { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
fluent-select.suite-select::part(control) { min-width: 0 !important; width: 100%; box-sizing: border-box; }

/* FluentAutocomplete composes an internal shadow-DOM fluent-text-field; floor its box, leave it free to grow. */
.suite-autocomplete fluent-text-field::part(root) { min-height: var(--abs-input-height, 40px); }

/* Date / time / search share the same token height. FluentDatePicker & FluentTimePicker render an
   internal fluent-text-field for their display field — the marker class may land on that text-field
   itself OR on a wrapper around it, so both selector shapes are covered. FluentSearch is a
   fluent-search web component that, like text-field, exposes root + control parts. */
fluent-text-field.suite-date-picker::part(root),
.suite-date-picker fluent-text-field::part(root),
fluent-text-field.suite-time-picker::part(root),
.suite-time-picker fluent-text-field::part(root) { height: var(--abs-input-height, 40px) !important; }

fluent-text-field.suite-date-picker::part(control),
.suite-date-picker fluent-text-field::part(control),
fluent-text-field.suite-time-picker::part(control),
.suite-time-picker fluent-text-field::part(control) { height: 100% !important; }

fluent-search.suite-search::part(root) { height: var(--abs-input-height, 40px) !important; }
fluent-search.suite-search::part(control) { height: 100% !important; }

/* ── Phone input (SuitePhoneInput .sphone) ───────────────────────────────── */
.sphone {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: var(--abs-input-height, 40px);
    background: var(--abs-input-bg, #fff);
    border: 1px solid var(--abs-input-border-color, #ccc);
    border-radius: 6px;
}
.sphone:focus-within { border-color: var(--abs-primary, var(--accent-fill-rest)); }
.sphone.sphone-invalid { border-color: var(--abs-danger, #d13438); }
.sphone.sphone-disabled { opacity: .6; }
/* Round the attached flag trigger's left corners to sit inside the field's border. */
.sphone .scfs-attached .scfs-trigger { border-radius: 5px 0 0 5px; }
.sphone-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 10px;
    font: inherit;
    color: var(--abs-input-color, inherit);
    height: 100%;
}
.sphone-input::placeholder { color: var(--abs-input-placeholder-color, #999); }
.sphone-label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--abs-input-color, inherit); }
.sphone-msg { margin-top: 4px; font-size: 12px; color: var(--abs-danger, #d13438); }

/* ── Tax-ID input (SuiteTaxIdInput .staxid) ──────────────────────────────── */
.staxid {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: var(--abs-input-height, 40px);
    background: var(--abs-input-bg, #fff);
    border: 1px solid var(--abs-input-border-color, #ccc);
    border-radius: 6px;
}
.staxid:focus-within { border-color: var(--abs-primary, var(--accent-fill-rest)); }
.staxid.staxid-invalid { border-color: var(--abs-danger, #d13438); }
.staxid.staxid-disabled { opacity: .6; }
.staxid .scfs-attached .scfs-trigger { border-radius: 5px 0 0 5px; }
.staxid-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--abs-text-muted, #888);
    border-right: 1px solid var(--abs-input-border-color, #ccc);
    background: var(--neutral-fill-secondary-hover, rgba(0,0,0,.03));
    white-space: nowrap;
}
.staxid-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 10px;
    font: inherit;
    color: var(--abs-input-color, inherit);
    height: 100%;
}
.staxid-input::placeholder { color: var(--abs-input-placeholder-color, #999); }
.staxid-label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--abs-input-color, inherit); }
.staxid-msg { margin-top: 4px; font-size: 12px; color: var(--abs-danger, #d13438); }

/* ── Email input (SuiteEmailInput .semail) ───────────────────────────────── */
.semail {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: var(--abs-input-height, 40px);
    background: var(--abs-input-bg, #fff);
    border: 1px solid var(--abs-input-border-color, #ccc);
    border-radius: 6px;
}
.semail:focus-within { border-color: var(--abs-primary, var(--accent-fill-rest)); }
.semail.semail-invalid { border-color: var(--abs-danger, #d13438); }
.semail.semail-disabled { opacity: .6; }
.semail-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    color: var(--abs-text-muted, #888);
    border-right: 1px solid var(--abs-input-border-color, #ccc);
    background: var(--neutral-fill-secondary-hover, rgba(0,0,0,.03));
}
.semail-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 10px;
    font: inherit;
    color: var(--abs-input-color, inherit);
    height: 100%;
}
.semail-input::placeholder { color: var(--abs-input-placeholder-color, #999); }
.semail-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    color: var(--abs-text-muted, #888);
    border-left: 1px solid var(--abs-input-border-color, #ccc);
    text-decoration: none;
    cursor: pointer;
}
.semail-action:hover { color: var(--abs-primary, var(--accent-fill-rest)); }
.semail-label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--abs-input-color, inherit); }
.semail-msg { margin-top: 4px; font-size: 12px; color: var(--abs-danger, #d13438); }

/* ── Web URL input (SuiteWebUrlInput .sweburl) ───────────────────────────── */
.sweburl {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: var(--abs-input-height, 40px);
    background: var(--abs-input-bg, #fff);
    border: 1px solid var(--abs-input-border-color, #ccc);
    border-radius: 6px;
}
.sweburl:focus-within { border-color: var(--abs-primary, var(--accent-fill-rest)); }
.sweburl.sweburl-invalid { border-color: var(--abs-danger, #d13438); }
.sweburl.sweburl-disabled { opacity: .6; }
.sweburl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    color: var(--abs-text-muted, #888);
    border-right: 1px solid var(--abs-input-border-color, #ccc);
    background: var(--neutral-fill-secondary-hover, rgba(0,0,0,.03));
}
.sweburl-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 10px;
    font: inherit;
    color: var(--abs-input-color, inherit);
    height: 100%;
}
.sweburl-input::placeholder { color: var(--abs-input-placeholder-color, #999); }
.sweburl-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    color: var(--abs-text-muted, #888);
    border-left: 1px solid var(--abs-input-border-color, #ccc);
    text-decoration: none;
    cursor: pointer;
}
.sweburl-action:hover { color: var(--abs-primary, var(--accent-fill-rest)); }
.sweburl-label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--abs-input-color, inherit); }
.sweburl-msg { margin-top: 4px; font-size: 12px; color: var(--abs-danger, #d13438); }

/* ── Entity selector (SuiteSelector .suite-selector-*) ────────────────────── */
/* Host wrapper around the editable autocomplete. Block-level full width so wrapping the
   SuiteAutocomplete (Width 100%) in it does not shrink the control. Also the focusin
   anchor that flips the loading indicator on first open. */
.suite-selector-host {
    width: 100%;
}

/* The dropdown panel must be at least as wide as the input it belongs to. The listbox is a
   shadow-DOM part positioned (by default) against the fluent-autocomplete host, so 100%
   width/min-width resolves to the control's width — the panel then tracks the input exactly.
   Do NOT set position:fixed here: that reparents the listbox to the viewport, so % widths
   would resolve against the viewport instead and the panel would stop matching the input. */
fluent-autocomplete::part(listbox) {
    z-index: 9999 !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box;
}

/* Dropdown option rows: consistent vertical rhythm so a primary line and its secondary detail
   (unit name + conversion factor, contact name + email, …) never collide with the adjacent row.
   The options are light-DOM <fluent-option> children of the autocomplete's listbox, so this is
   general to every selector, not any one type. Row breathing room is set here; the per-line
   line-height that keeps a 2-line item from overlapping lives in SuitePersona.razor.css. */
/* The dropdown options render in a PORTALED <fluent-anchored-region> that is NOT a descendant of
   .suite-autocomplete, so scoping to .suite-autocomplete never reached them (that was the bug behind the
   cramped/overlapping rows). Target the flyout's options directly — this covers every selector's dropdown. */
.suite-autocomplete fluent-option,
fluent-anchored-region fluent-option {
    min-height: 44px !important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px;
    align-items: center;
}

/* SuiteLabel renders a BLOCK <p class="fluent-typography">. Inside a selector option or the selected value it
   dropped the name onto its own line beneath an adjacent badge/detail (e.g. a unit's conversion factor), and the
   stacked 2-line content then overlapped the short rows. Inline it (and drop the <p> margins) — scoped to selector
   contexts only, so form/field labels elsewhere are untouched — so name + detail sit on ONE row. */
fluent-anchored-region fluent-option .fluent-typography,
.suite-selector-selected .fluent-typography {
    display: inline;
    margin: 0;
}

/* A single-select selected value may show up to two lines — e.g. a contact rendered as its name
   over its email. The row grows (min-height, not a fixed height) instead of clipping. Multi-select
   chips still stay on one line via the fluent-horizontal-scroll rules further down. */
.suite-selector-selected {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    /* FLAT selected value — no pill/chip background (founder preference: not a pill on every selector). Just the
       flag/avatar + text, vertically centered by the field, so the field's own border is the only box. */
    max-width: calc(100% - 8px);
    overflow: hidden;
    padding-left: 2px;
}

.suite-selector-selected-content {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

/* Per-line ellipsis for the common persona-shaped selected value (name over secondary). */
.suite-selector-selected-content .suite-persona-name,
.suite-selector-selected-content .suite-persona-secondary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* FluentAutocomplete places the single-select selected value in its internal shadow-DOM
   fluent-text-field: it fixes the HOST + `root` height and clamps the `start` part (where the value
   sits) to one nowrap line with an ellipsis. Relax ALL of them (scoped to the selector host) so a
   2-line value — e.g. a contact's name over its email — is fully visible. The field grows to its
   content (~48px for two lines) and collapses back to the token height for a single-line value.
   Overriding the HOST too is essential: FAST fixes the host height, which would otherwise clip a
   taller root. !important is required — FAST's height and the FluentUI clamp carry the component's
   CSS-isolation attribute and would otherwise win on specificity. */
/* Selectors use ONE fixed height for ALL states — empty, 1-line, or 2-line (name over email) — so every selector
   is the same height regardless of what's selected (was height:auto, which grew per content and looked sloppy).
   It's a bit taller than plain inputs (--abs-input-height 40px) so a 2-line persona fits WITH breathing room, not
   crammed against the border; the content is vertically centered so there's padding above and below. Tunable via
   --abs-selector-height. */
.suite-selector-host fluent-text-field {
    height: var(--abs-selector-height, 48px) !important;
    min-height: var(--abs-selector-height, 48px);
}

.suite-selector-host fluent-text-field::part(root) {
    height: var(--abs-selector-height, 48px) !important;
    min-height: var(--abs-selector-height, 48px);
    align-items: center;
}

.suite-selector-host fluent-text-field::part(start) {
    white-space: normal !important;
    height: auto !important;
    align-self: center;
    max-width: calc(100% - 40px);
}

/* The single-select selected value is slotted into FluentAutocomplete's internal fluent-horizontal-scroll
   (built for one-line multi-select chips); its fixed height clips a 2-line persona (name over email) even after
   the field/root/start are relaxed. Let the scroller and its shadow content grow vertically. Multi-select chips
   stay on one line via the .fluent-autocomplete-multiselect nowrap rules below (each chip is single-line, so
   height:auto still resolves to one row there). */
.suite-selector-host fluent-horizontal-scroll,
.suite-selector-host fluent-horizontal-scroll::part(scroll-area),
.suite-selector-host fluent-horizontal-scroll::part(scroll-view),
.suite-selector-host fluent-horizontal-scroll::part(content-container) {
    height: auto !important;
    align-items: center;
}

/* Many selector SelectedOptionTemplates hard-code Style="height: 26px" on their persona/stack, which clips a
   2-line selected value. Relax it (scoped to the selected value) so name + secondary are fully visible. */
.suite-selector-selected .suite-persona,
.suite-selector-selected .stack-horizontal {
    height: auto !important;
}

/* The persona no longer carries its own box — the chip box moved to .suite-selector-selected (above) so the edit
   action is annexed inside it. Keep the persona transparent + padding-free here. */
.suite-selector-selected .suite-persona {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* The inline edit (pencil) action, annexed INSIDE the chip. Distinction = a SHORT hairline divider between the
   value and the action (via ::before, ~55% height) + a rounded button with a hover fill — not a full-height hard
   border (which looked square/cramped next to the clear "x"). Locale-independent — the only fluent-button inside
   the selected chip (the clear "x" is an <svg>, not a button). */
.suite-selector-selected fluent-button {
    position: relative;
    border-radius: 6px;
    margin-left: 9px;
}
.suite-selector-selected fluent-button::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: var(--neutral-stroke-divider-rest, rgba(127, 127, 127, 0.25));
}
.suite-selector-selected fluent-button:hover {
    background: var(--neutral-fill-stealth-hover, rgba(127, 127, 127, 0.12)) !important;
}

/* Multi-select selected items render as light-DOM children of the fluent-horizontal-scroll.
   Each item is a display:flex (block-level) box at width:100%, so even at auto width they
   STACK vertically. Force the scroll's shadow content-container (exposed as part) to a
   horizontal nowrap row, and each item to content width, so they all sit on ONE line and the
   horizontal-scroll flippers handle overflow. */
.fluent-autocomplete-multiselect fluent-horizontal-scroll::part(content-container) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    column-gap: 4px;
}

.fluent-autocomplete-multiselect fluent-horizontal-scroll > div {
    width: auto !important;
    max-width: 100%;
    flex: 0 0 auto !important;
    white-space: nowrap;
    overflow: hidden;
}

/* The label inside each item (fluent-typography paragraph) resets white-space, so it breaks
   per word. Force nowrap on every descendant — safe because the hover-preview card is
   portaled out of this subtree, not nested here. */
.fluent-autocomplete-multiselect fluent-horizontal-scroll > div * {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* ── Money input (MoneyInputComponent .money-*) ──────────────────────────── */
.money-input-container {
    display: flex !important;
    gap: 0 !important;
    /* ONE unified control: the CONTAINER is the visual field — theme-aware input bg + a single border/radius + a
       fixed height + overflow:hidden. Both halves render transparent inside it and fill 100% height, so amount +
       currency are ALWAYS exactly equal height (the container is 48px and overflow:hidden means the currency selector
       physically cannot exceed it) and read as one field split amount | currency, not two mismatched boxes. Using
       --abs-input-bg keeps it consistent with sibling inputs in both themes (dark-grey in dark, white in light). */
    align-items: stretch !important;
    width: 100%;
    height: var(--abs-input-height, 48px);
    box-sizing: border-box;
    background: var(--abs-input-bg, #fff);
    border: 1px solid var(--abs-input-border-color, #ccc);
    border-radius: 6px;
    overflow: hidden;
}
.money-input-container:focus-within {
    border-color: var(--abs-primary, var(--accent-fill-rest));
}

.money-amount-input {
    flex: 3;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

/* Strip BOTH halves to transparent/borderless and force them to FILL the container. The broad selector list catches
   the amount's number-field AND the currency's embedded autocomplete/text-field regardless of which element carries
   the box; combined with the container's overflow:hidden, neither half can exceed the 48px height. */
.money-amount-input fluent-number-field,
.money-amount-input fluent-number-field::part(root),
.money-amount-input fluent-number-field::part(control),
.money-currency-selector .suite-selector-host,
.money-currency-selector .suite-autocomplete,
.money-currency-selector fluent-autocomplete,
.money-currency-selector fluent-text-field,
.money-currency-selector fluent-text-field::part(root),
.money-currency-selector fluent-text-field::part(control) {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Join the amount + currency into ONE control ("we're together"): gap 0, flat inner corners so they abut, and the
   amount's right border dropped so the currency's left border is the single seam. Amount stays Filled (grey) so the
   value reads as money; currency is the compact flag+code. */
.money-amount-input fluent-number-field::part(root) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}
.money-currency-selector .suite-selector-host fluent-text-field::part(root) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Money value styling. NOTE: .money-amount-input is a <div> (no shadow parts), so the previous
   .money-amount-input::part(control) rule was inert — target the inner fluent-number-field. Bolder + a touch
   bigger to read as an amount, and sign-colored: default/black at 0, red negative, green positive. The sign
   class (money-positive / money-negative / money-zero) is set by MoneyInputComponent on .money-amount-input. */
.money-amount-input fluent-number-field::part(control) {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.money-amount-input.money-positive fluent-number-field::part(control) {
    color: #107c10 !important; /* legible money green as text on the light Filled field (the --abs-success token is a lighter badge-green, too low-contrast for text) */
}
.money-amount-input.money-negative fluent-number-field::part(control) {
    color: #c50f1f !important; /* legible money red */
}
[data-theme=dark] .money-amount-input.money-positive fluent-number-field::part(control) {
    color: #54d98c !important; /* lighter green for contrast on the dark Filled field */
}
[data-theme=dark] .money-amount-input.money-negative fluent-number-field::part(control) {
    color: #ff8a9a !important;
}

.money-currency-selector {
    /* shrinkable (flex-shrink 1) + a low min-width, so in a narrow Bootstrap column it yields room to the amount
       instead of squashing it; bounded max so in a wide/standalone field it stays a compact flag+code picker. */
    flex: 0 1 34%;
    min-width: 88px;
    max-width: 190px;
    display: flex;
    align-items: stretch;
    /* the single seam between amount | currency */
    border-left: 1px solid var(--abs-input-border-color, #ccc);
}

/* Vertically center the currency's embedded-autocomplete content within the fixed-height box. Its internal
   fluent-text-field top-aligns by default, so the placeholder/selected value sat high; make its root a centered
   flex row (scoped to the money currency only, so sibling selectors are untouched). */
.money-currency-selector fluent-text-field::part(root),
.money-currency-selector .suite-selector-host fluent-text-field::part(root) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}
.money-currency-selector .suite-selector-selected,
.money-currency-selector .suite-persona,
.money-currency-selector .stack-horizontal {
    align-items: center !important;
    height: auto !important;
}

/* The money currency picker is a compact "flag + code" (e.g. 🇺🇸 USD) — the full selected-chip box reads as a
   heavy box-in-a-box inside the narrow currency field. Flatten it here so the value sits cleanly (the chip box
   stays for full-width persona selectors like Contact, where it looks right). */
.money-currency-selector .suite-selector-selected {
    background: transparent;
    box-shadow: none;
    padding-left: 4px;
    padding-right: 0;
}

.money-currency-selector::part(listbox) {
    z-index: 9999 !important;
    position: fixed !important;
}

/* Selector/autocomplete popup: the JS pins its width to the field (horizontal-scaling="anchor"), but a narrow field
   like the money currency picker would give a cramped, truncated list. Give the popup a readable min-width floor —
   wide selectors still match their (larger) field width; narrow ones expand to at least this. `:has(fluent-option)`
   scopes it to actual option popups, not tooltips/menus. */
fluent-anchored-region:has(fluent-option) {
    min-width: 260px !important;
}

/* Responsive: Stack vertically on small screens */
@media (max-width: 640px) {
    .money-input-container {
        flex-direction: column !important;
    }

    .money-amount-input,
    .money-currency-selector {
        flex: unset !important;
        width: 100% !important;
    }
}