/* ============================================================
   TMS Form Theme Presets
   - DefaultTms  : underline fields, warm labels (cmf-shared baseline)
   - MsD365      : Microsoft Fluent UI boxed fields, Segoe UI, D365 colors
   The MsD365 rules are scoped to .cmf-form (the main form) ONLY.
   The side pane (.cmf-party-flyout) is never touched here — it keeps
   its own styling from ContainerMovementForm.razor.css in both themes.
   Toggle via html[data-form-theme] set by inline head script + ui-theme.js
   ============================================================ */

/* User-customizable tokens (set by ui-theme.js from Admin UI Theme Settings) */
html {
    --ui-heading-font-size: 18px;
    --ui-label-font-size: 12px;
    --ui-field-font-size: 13px;
    --ui-textarea-font-size: 13px;
    --ui-label-color: #605e5c;
    --ui-field-text-color: #242424;
    --ui-field-border-color: #c8c6c4;
    --ui-field-bg-color: #ffffff;
    --ui-grid-header-bg: #f3f2f1;
    --ui-grid-header-text: #323130;
    --ui-grid-row-hover: #f3f9fd;
    --ui-grid-border-color: #edebe9;
    --ui-accent-color: #0078d4;
    --ui-field-focus-glow: 0 3px 10px -8px rgba(34, 102, 227, 0.38);
    --ui-grid-row-height: 32px;
    --ui-grid-cell-padding: 6px 8px;
}

html[data-grid-style="compact"] {
    --ui-grid-row-height: 26px;
    --ui-grid-cell-padding: 3px 6px;
}
html[data-grid-style="comfortable"] {
    --ui-grid-row-height: 38px;
    --ui-grid-cell-padding: 8px 12px;
}

.cmf-form .cmf-label,
.cmf-form .d365-form-label {
    font-size: var(--ui-label-font-size);
    color: var(--ui-label-color);
}
.cmf-form .cmf-field,
.cmf-form .d365-form-control,
.cmf-form textarea.cmf-field {
    font-size: var(--ui-field-font-size);
    color: var(--ui-field-text-color);
}
.cmf-form textarea.cmf-field {
    font-size: var(--ui-textarea-font-size);
}
.d365-page-heading,
.d365-card-title,
h1.d365-page-title,
h1.d365-page-heading-title,
.d365-page-heading-title {
    font-size: var(--ui-heading-font-size);
    font-family: var(--d365-form-heading-font, var(--d365-font-family));
}

html[data-field-style="boxed"] .cmf-form .cmf-field:not(.cmf-field-id):not(.cmf-field-readonly),
html[data-field-style="boxed"] .cmf-form input.d365-form-control:not(.autocomplete-input),
html[data-field-style="boxed"] .cmf-form select.d365-form-control,
html[data-field-style="boxed"] .cmf-form textarea.d365-form-control {
    border: 1px solid var(--ui-field-border-color);
    border-radius: var(--cmf-field-radius, 2px);
    background: var(--ui-field-bg-color);
    padding: 0 8px;
}
html[data-field-style="underline"] .cmf-form .cmf-field,
html[data-field-style="underline"] .cmf-form input.d365-form-control:not(.autocomplete-input),
html[data-field-style="underline"] .cmf-form select.d365-form-control,
html[data-field-style="underline"] .cmf-form textarea.d365-form-control {
    border: none;
    border-bottom: 1px solid var(--ui-field-border-color);
    border-radius: 0;
    background: var(--ui-field-bg-color);
    padding: 6px 2px;
    transition: border-color 0.2s ease, border-bottom-width 0.2s ease, padding-bottom 0.2s ease, box-shadow 0.2s ease;
}

/* Underline hover + focus — must beat the base underline rule above or focus stays gray */
html[data-field-style="underline"] .cmf-form .cmf-field:hover:not(:disabled):not(.cmf-field-readonly):not(:focus):not(:focus-visible),
html[data-field-style="underline"] .cmf-form input.d365-form-control:not(.autocomplete-input):hover:not(:disabled):not(:focus):not(:focus-visible),
html[data-field-style="underline"] .cmf-form select.d365-form-control:hover:not(:disabled):not(:focus):not(:focus-visible),
html[data-field-style="underline"] .cmf-form textarea.d365-form-control:hover:not(:disabled):not(:focus):not(:focus-visible) {
    border-bottom-color: color-mix(in srgb, var(--ui-accent-color) 55%, var(--ui-field-border-color));
}
html[data-field-style="underline"] .cmf-form .cmf-field:focus,
html[data-field-style="underline"] .cmf-form .cmf-field:focus-visible,
html[data-field-style="underline"] .cmf-form input.d365-form-control:not(.autocomplete-input):focus,
html[data-field-style="underline"] .cmf-form input.d365-form-control:not(.autocomplete-input):focus-visible,
html[data-field-style="underline"] .cmf-form select.d365-form-control:focus,
html[data-field-style="underline"] .cmf-form select.d365-form-control:focus-visible,
html[data-field-style="underline"] .cmf-form textarea.d365-form-control:focus,
html[data-field-style="underline"] .cmf-form textarea.d365-form-control:focus-visible {
    outline: none;
    border: none;
    border-bottom: 2px solid var(--ui-accent-color);
    box-shadow: var(--ui-field-focus-glow);
    padding-bottom: 5px;
}
html[data-field-style="underline"] .cmf-form .autosuggest-input .d365-form-control,
html[data-field-style="underline"] .cmf-form .autocomplete-select .autocomplete-input {
    transition: border-color 0.2s ease, border-bottom-width 0.2s ease, padding-bottom 0.2s ease, box-shadow 0.2s ease;
}
html[data-field-style="underline"] .cmf-form .autosuggest-input .d365-form-control:hover:not(:disabled):not(:focus):not(:focus-visible),
html[data-field-style="underline"] .cmf-form .autocomplete-select .autocomplete-input:hover:not(:disabled):not(:focus):not(:focus-visible) {
    border-bottom-color: color-mix(in srgb, var(--ui-accent-color) 55%, var(--ui-field-border-color)) !important;
}
html[data-field-style="underline"] .cmf-form .autosuggest-input .d365-form-control:focus,
html[data-field-style="underline"] .cmf-form .autosuggest-input .d365-form-control:focus-visible,
html[data-field-style="underline"] .cmf-form .autocomplete-select .autocomplete-input:focus,
html[data-field-style="underline"] .cmf-form .autocomplete-select .autocomplete-input:focus-visible {
    outline: none !important;
    border: none !important;
    border-bottom: 2px solid var(--ui-accent-color) !important;
    box-shadow: var(--ui-field-focus-glow) !important;
    padding-bottom: 5px !important;
}

/* Default TMS boxed fields (when user picks Boxed instead of Underline) */
html[data-form-theme="default-tms"][data-field-style="boxed"] .cmf-form .cmf-field:hover:not(:disabled):not(.cmf-field-readonly):not(:focus):not(:focus-visible) {
    border-color: color-mix(in srgb, var(--ui-accent-color) 45%, var(--ui-field-border-color));
}
html[data-form-theme="default-tms"][data-field-style="boxed"] .cmf-form .cmf-field:focus,
html[data-form-theme="default-tms"][data-field-style="boxed"] .cmf-form .cmf-field:focus-visible {
    outline: none;
    border-color: var(--ui-accent-color);
    box-shadow: 0 0 0 1px var(--ui-accent-color);
}
html[data-form-theme="default-tms"][data-field-style="boxed"] .cmf-form .autosuggest-input .d365-form-control:focus,
html[data-form-theme="default-tms"][data-field-style="boxed"] .cmf-form .autosuggest-input .d365-form-control:focus-visible,
html[data-form-theme="default-tms"][data-field-style="boxed"] .cmf-form .autocomplete-select .autocomplete-input:focus,
html[data-form-theme="default-tms"][data-field-style="boxed"] .cmf-form .autocomplete-select .autocomplete-input:focus-visible {
    outline: none !important;
    border-color: var(--ui-accent-color) !important;
    box-shadow: 0 0 0 1px var(--ui-accent-color) !important;
}

.d365-input-grid th,
.d365-grid th {
    background: var(--ui-grid-header-bg);
    color: var(--ui-grid-header-text);
    border-color: var(--ui-grid-border-color);
}
.d365-input-grid td,
.d365-grid td {
    border-color: var(--ui-grid-border-color);
    padding: var(--ui-grid-cell-padding);
}
.d365-input-grid tbody tr,
.d365-grid tbody tr {
    min-height: var(--ui-grid-row-height);
}
.d365-input-grid tbody tr:hover,
.d365-grid tbody tr:hover {
    background: var(--ui-grid-row-hover);
}
html[data-table-style="striped"] .d365-input-grid tbody tr:nth-child(even),
html[data-table-style="striped"] .d365-grid tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--ui-grid-row-hover) 40%, transparent);
}
html[data-table-style="bordered"] .d365-input-grid th,
html[data-table-style="bordered"] .d365-input-grid td,
html[data-table-style="bordered"] .d365-grid th,
html[data-table-style="bordered"] .d365-grid td {
    border: 1px solid var(--ui-grid-border-color);
}
html[data-table-style="fluent"] .d365-input-grid,
html[data-table-style="fluent"] .d365-grid {
    border: 1px solid var(--ui-grid-border-color);
    border-radius: 2px;
}
html[data-table-style="fluent"] .d365-input-grid th,
html[data-table-style="fluent"] .d365-grid th {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* ============================================================
   MS D365 THEME — Microsoft Fluent UI tokens
   Authentic Fluent UI (v2) color/spacing values.
   Field styling below mirrors the side pane (cmf-party-flyout) so every
   main form gets the same boxed Fluent look + focus glow.
   ============================================================ */
html[data-form-theme="ms-d365"] {
    /* Fluent UI brand / communication blue */
    --d365-primary: #0078d4;
    --d365-primary-dark: #005a9e;
    --d365-primary-light: #2b88d8;
    --d365-primary-lighter: #deecf9;
    --d365-primary-min: #0078d4;
    --d365-primary-hover: #106ebe;
    --d365-primary-pressed: #005a9e;

    /* Fluent UI neutrals */
    --fluent-neutral-bg: #faf9f8;
    --fluent-neutral-bg-hover: #f3f2f1;
    --fluent-neutral-bg-pressed: #edebe9;
    --fluent-neutral-bg-selected: #e1dfdd;
    --fluent-neutral-bg-secondary: #f3f2f1;
    --fluent-neutral-bg-tertiary: #faf9f8;
    --fluent-neutral-bg-disabled: #f3f2f1;
    --fluent-neutral-border: #edebe9;
    --fluent-neutral-border-strong: #c8c6c4;
    --fluent-neutral-border-available: #605e5c;
    --fluent-neutral-border-subtle: #e1dfdd;

    /* Fluent UI status */
    --fluent-status-success: #107c10;
    --fluent-status-warning: #f9c74f;
    --fluent-status-danger: #d13438;

    /* Form field tokens */
    --cmf-label-color: #605e5c;
    --cmf-field-border: #c8c6c4;
    --cmf-field-border-hover: #616161;
    --cmf-field-bg: #ffffff;
    --cmf-field-bg-disabled: #f3f2f1;
    --cmf-field-bg-readonly: #f3f2f1;
    --cmf-field-text: #242424;
    --cmf-field-text-disabled: #605e5c;
    --cmf-field-placeholder: #a19f9d;
    --cmf-field-radius: 2px;
    --cmf-field-focus: #0078d4;

    /* Focus glow color (used in box-shadow) */
    --fluent-focus-glow: rgba(0, 120, 212, 0.35);

    --d365-form-heading-color: #242424;
    --d365-text-primary: #242424;
    --d365-text-secondary: #605e5c;
    --d365-text-muted: #a19f9d;
    --d365-border: #edebe9;
    --d365-border-strong: #c8c6c4;
    --d365-bg-secondary: #f3f2f1;
    --d365-bg-tertiary: #faf9f8;

    /* Fluent UI typography — Segoe UI Variable on Windows, fallback everywhere */
    --d365-font-family: "Segoe UI Variable", "Segoe UI", "Segoe UI Web",
        -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue",
        Arial, sans-serif;
}

/* ============================================================
   LABELS (main form only) — Fluent neutrals, sentence case
   ============================================================ */
html[data-form-theme="ms-d365"] .cmf-form .cmf-label,
html[data-form-theme="ms-d365"] .cmf-form .d365-form-label {
    color: var(--cmf-label-color) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 13px !important;
}
html[data-form-theme="ms-d365"] .cmf-form .d365-form-label {
    color: var(--cmf-label-color) !important;
    text-transform: none !important;
    font-weight: 400 !important;
}

/* ============================================================
   TEXT INPUT (.cmf-field) — Fluent boxed control
   Mirrors the side pane. cmf-party-flyout is excluded so the
   side pane keeps its own styling.
   ============================================================ */
html[data-form-theme="ms-d365"] .cmf-form .cmf-field {
    border: 1px solid var(--cmf-field-border) !important;
    border-radius: var(--cmf-field-radius) !important;
    background: var(--cmf-field-bg) !important;
    padding: 0 8px !important;
    height: 32px !important;
    text-transform: none !important;
    font-size: 13px !important;
    color: var(--cmf-field-text) !important;

}
html[data-form-theme="ms-d365"] .cmf-form .cmf-field:hover:not(:disabled):not(:focus) {
    border-color: var(--cmf-field-border-hover) !important;
}
/* Excellent focus effect — blue border + smooth glow ring */
html[data-form-theme="ms-d365"] .cmf-form .cmf-field:focus {
    border-color: #0078d4;
    border-bottom-width: 1px;
    padding-bottom: 0;
    outline: 1px solid #0078d4;
    outline-offset: -1px;
    box-shadow: none;
}
html[data-form-theme="ms-d365"] .cmf-form .cmf-field:disabled,
html[data-form-theme="ms-d365"] .cmf-form .cmf-field.cmf-field-readonly {
    background: var(--cmf-field-bg-disabled) !important;
    border-color: var(--d365-border) !important;
    color: var(--cmf-field-text-disabled) !important;
    border-bottom-style: solid !important;
    cursor: not-allowed !important;
}
html[data-form-theme="ms-d365"] .cmf-form .cmf-field::placeholder {
    color: var(--cmf-field-placeholder) !important;
    font-style: normal !important;
    text-transform: none !important;
}
/* ID field — neutral Fluent fill instead of cream */
html[data-form-theme="ms-d365"] .cmf-form .cmf-field-id,
html[data-form-theme="ms-d365"] .cmf-form .cmf-field-id:disabled {
    background-color: var(--fluent-neutral-bg-secondary) !important;
    border: 1px solid var(--cmf-field-border) !important;
    border-radius: var(--cmf-field-radius) !important;
    color: var(--cmf-field-text) !important;
    padding: 0 8px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

/* ============================================================
   AUTOSUGGEST / AUTOCOMPLETE INPUTS — boxed Fluent (main form only)
   Matches the side pane. cmf-party-flyout excluded.
   ============================================================ */
html[data-form-theme="ms-d365"] .cmf-form .autosuggest-input .d365-form-control,
html[data-form-theme="ms-d365"] .cmf-form .autocomplete-input {
    text-transform: none !important;
}
html[data-form-theme="ms-d365"] .cmf-form .autosuggest-input .d365-form-control {
    border: 1px solid var(--cmf-field-border) !important;
    border-radius: var(--cmf-field-radius) !important;
    background: var(--cmf-field-bg) !important;
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    text-transform: none !important;
    color: var(--cmf-field-text) !important;
    box-shadow: none;
}
html[data-form-theme="ms-d365"] .cmf-form .autosuggest-input .d365-form-control:hover:not(:disabled):not(:focus) {
    border-color: var(--cmf-field-border-hover) !important;
}
html[data-form-theme="ms-d365"] .cmf-form .autosuggest-input .d365-form-control:focus {
    border-color: #0078d4;
    outline: 1px solid #0078d4;
    outline-offset: -1px;
    box-shadow: none;

}
html[data-form-theme="ms-d365"] .cmf-form .autosuggest-input .d365-form-control:disabled {
    background: var(--cmf-field-bg-disabled) !important;
    border-color: var(--d365-border) !important;
    color: var(--cmf-field-text-disabled) !important;
}
html[data-form-theme="ms-d365"] .cmf-form .autosuggest-input .d365-form-control::placeholder {
    color: var(--cmf-field-placeholder) !important;
    font-style: normal !important;
    text-transform: none !important;
}
/* Autocomplete select (main form) */
html[data-form-theme="ms-d365"] .cmf-form .autocomplete-select .autocomplete-input {
    border: 1px solid var(--cmf-field-border) !important;
    border-radius: var(--cmf-field-radius) !important;
    background: var(--cmf-field-bg) !important;
    padding: 0 8px !important;
    text-transform: none !important;
    height: 32px !important;

}
html[data-form-theme="ms-d365"] .cmf-form .autocomplete-select .autocomplete-input:focus {
    border-color: #0078d4;
    outline: 1px solid #0078d4;
    outline-offset: -1px;
    box-shadow: none;
}

/* ============================================================
   GENERIC d365-form-control (used outside cmf-form on main pages)
   ============================================================ */
html[data-form-theme="ms-d365"] .d365-form-control {
    border-color: var(--cmf-field-border) !important;
    border-radius: var(--cmf-field-radius) !important;
    text-transform: none !important;
    color: var(--fluent-neutral-text) !important;

}
html[data-form-theme="ms-d365"] .d365-form-control:focus {
    border-color: #0078d4;
    outline: 1px solid #0078d4;
    outline-offset: -1px;
    box-shadow: none;
}
html[data-form-theme="ms-d365"] .d365-form-control:disabled {
    background-color: var(--fluent-neutral-bg-disabled) !important;
    color: var(--cmf-field-text-disabled) !important;
}

/* ============================================================
   FIELDSET / SECTION GROUPING — Fluent neutrals (main form)
   ============================================================ */
html[data-form-theme="ms-d365"] .cmf-form .cmf-fieldset {
    border-color: var(--d365-border) !important;
    border-radius: var(--cmf-field-radius) !important;
    background: var(--fluent-neutral-bg) !important;
}
html[data-form-theme="ms-d365"] .cmf-form .cmf-fieldset-legend {
    color: var(--d365-primary) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
html[data-form-theme="ms-d365"] .cmf-form .cmf-section-divider {
    border-top-color: var(--d365-border) !important;
}

/* VALUE DISPLAY (read-only pill) */
html[data-form-theme="ms-d365"] .cmf-form .cmf-value-display {
    border: 1px solid var(--d365-border) !important;
    border-radius: var(--cmf-field-radius) !important;
    background: var(--fluent-neutral-bg) !important;
    padding: 0 8px !important;
    border-bottom-style: solid !important;
    color: var(--cmf-field-text) !important;
}

/* ============================================================
   TOGGLE / CAPSULE CHOICES (Fluent neutrals)
   ============================================================ */
html[data-form-theme="ms-d365"] .cmf-form .pill-toggle-btn {
    color: var(--d365-primary) !important;
    text-transform: none !important;
}
html[data-form-theme="ms-d365"] .cmf-form .pill-toggle-btn.pill-toggle-active {
    background: var(--d365-primary) !important;
    color: #fff !important;
}
html[data-form-theme="ms-d365"] .cmf-form .pill-toggle-btn:hover:not(:disabled):not(.pill-toggle-active) {
    background: var(--fluent-neutral-bg-hover) !important;
}
html[data-form-theme="ms-d365"] .cmf-party-capsule-sm .pill-toggle-btn {
    color: var(--d365-primary) !important;
}
html[data-form-theme="ms-d365"] .cmf-party-capsule-sm .pill-toggle-btn.pill-toggle-active {
    background: var(--d365-primary) !important;
    color: #fff !important;
}
html[data-form-theme="ms-d365"] .cmf-details-capsule-btn {
    background: var(--d365-primary) !important;
}
html[data-form-theme="ms-d365"] .cmf-details-capsule-btn:hover {
    background: var(--d365-primary-dark) !important;
}

/* ============================================================
   BUTTONS — Fluent accent button styling
   ============================================================ */
html[data-form-theme="ms-d365"] .cmf-form .d365-btn-primary,
html[data-form-theme="ms-d365"] .ui-theme-preview-btn {
    background: var(--d365-primary) !important;
    border-color: var(--d365-primary) !important;
    color: #fff !important;
    border-radius: var(--cmf-field-radius) !important;
    font-weight: 600 !important;
    text-transform: none !important;

}
html[data-form-theme="ms-d365"] .cmf-form .d365-btn-primary:hover,
html[data-form-theme="ms-d365"] .ui-theme-preview-btn:hover {
    background: var(--d365-primary-hover) !important;
    border-color: var(--d365-primary-dark) !important;
}

/* DROPDOWNS */
html[data-form-theme="ms-d365"] .cmf-form .autosuggest-dropdown {
    border: 1px solid var(--cmf-field-border) !important;
    border-radius: var(--cmf-field-radius) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08) !important;
    background: #fff !important;
}
html[data-form-theme="ms-d365"] .cmf-form .autosuggest-clear-btn,
html[data-form-theme="ms-d365"] .cmf-form .cmf-flyout-field-clear {
    color: #605e5c !important;
}
html[data-form-theme="ms-d365"] .cmf-form .autosuggest-clear-btn:hover,
html[data-form-theme="ms-d365"] .cmf-form .cmf-flyout-field-clear:hover {
    background: var(--fluent-neutral-bg-hover) !important;
    color: var(--fluent-neutral-text) !important;
}

/* CARD SURFACE */
html[data-form-theme="ms-d365"] .d365-card {
    border-color: var(--d365-border) !important;
    border-radius: 2px !important;
    box-shadow: 0 1.6px 3.6px rgba(0,0,0,0.12), 0 0.3px 0.9px rgba(0,0,0,0.08) !important;
}

/* GRID HEADER — Fluent neutral */
html[data-form-theme="ms-d365"] .d365-grid thead {
    background-color: var(--fluent-neutral-bg-secondary) !important;
}

/* SELECT fields — keep native arrow visible inside boxed style */
html[data-form-theme="ms-d365"] .cmf-form select.cmf-field {
    padding-right: 24px !important;
}

/* ============================================================
   FLUENT UI COMPONENTS THEME — Microsoft Fluent UI Blazor library
   Same Fluent UI token palette as MS D365, but activates real
   <Fluent*> web components in CMF (and any future migrated page).
   Non-migrated fields inherit the same boxed Fluent treatment so
   the form looks consistent while the real web-components render
   with their authentic DOM/styles from reboot.css.
   ============================================================ */
html[data-form-theme="fluent-ui"] {
    --d365-primary: #0078d4;
    --d365-primary-dark: #005a9e;
    --d365-primary-light: #2b88d8;
    --d365-primary-lighter: #deecf9;
    --d365-primary-min: #0078d4;
    --d365-primary-hover: #106ebe;
    --d365-primary-pressed: #005a9e;

    --fluent-neutral-bg: #faf9f8;
    --fluent-neutral-bg-hover: #f3f2f1;
    --fluent-neutral-bg-pressed: #edebe9;
    --fluent-neutral-bg-selected: #e1dfdd;
    --fluent-neutral-bg-secondary: #f3f2f1;
    --fluent-neutral-bg-tertiary: #faf9f8;
    --fluent-neutral-bg-disabled: #f3f2f1;
    --fluent-neutral-border: #edebe9;
    --fluent-neutral-border-strong: #c8c6c4;
    --fluent-neutral-border-available: #605e5c;
    --fluent-neutral-border-subtle: #e1dfdd;

    --fluent-status-success: #107c10;
    --fluent-status-warning: #f9c74f;
    --fluent-status-danger: #d13438;

    --cmf-label-color: #605e5c;
    --cmf-field-border: #c8c6c4;
    --cmf-field-border-hover: #616161;
    --cmf-field-bg: #ffffff;
    --cmf-field-bg-disabled: #f3f2f1;
    --cmf-field-bg-readonly: #f3f2f1;
    --cmf-field-text: #242424;
    --cmf-field-text-disabled: #605e5c;
    --cmf-field-placeholder: #a19f9d;
    --cmf-field-radius: 2px;
    --cmf-field-focus: #0078d4;
    --fluent-focus-glow: rgba(0, 120, 212, 0.35);

    --d365-form-heading-color: #242424;
    --d365-text-primary: #242424;
    --d365-text-secondary: #605e5c;
    --d365-text-muted: #a19f9d;
    --d365-border: #edebe9;
    --d365-border-strong: #c8c6c4;
    --d365-bg-secondary: #f3f2f1;
    --d365-bg-tertiary: #faf9f8;

    --d365-font-family: "Segoe UI Variable", "Segoe UI", "Segoe UI Web",
        -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue",
        Arial, sans-serif;
}

/* Mirror the ms-d365 boxed-field treatment for non-migrated fields */
html[data-form-theme="fluent-ui"] .cmf-form .cmf-label,
html[data-form-theme="fluent-ui"] .cmf-form .d365-form-label {
    color: var(--cmf-label-color) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 13px !important;
}
html[data-form-theme="fluent-ui"] .cmf-form .cmf-field {
    border: 1px solid var(--cmf-field-border) !important;
    border-radius: var(--cmf-field-radius) !important;
    background: var(--cmf-field-bg) !important;
    padding: 0 8px !important;
    height: 32px !important;
    text-transform: none !important;
    font-size: 13px !important;
    color: var(--cmf-field-text) !important;
}
html[data-form-theme="fluent-ui"] .cmf-form .cmf-field:hover:not(:disabled):not(:focus) {
    border-color: var(--cmf-field-border-hover) !important;
}
html[data-form-theme="fluent-ui"] .cmf-form .cmf-field:focus {
    border-color: #0078d4;
    outline: 1px solid #0078d4;
    outline-offset: -1px;
    box-shadow: none;
}
html[data-form-theme="fluent-ui"] .cmf-form .cmf-field:disabled,
html[data-form-theme="fluent-ui"] .cmf-form .cmf-field.cmf-field-readonly {
    background: var(--cmf-field-bg-disabled) !important;
    border-color: var(--d365-border) !important;
    color: var(--cmf-field-text-disabled) !important;
    border-bottom-style: solid !important;
    cursor: not-allowed !important;
}
html[data-form-theme="fluent-ui"] .cmf-form .cmf-field::placeholder {
    color: var(--cmf-field-placeholder) !important;
    font-style: normal !important;
    text-transform: none !important;
}
html[data-form-theme="fluent-ui"] .cmf-form .cmf-field-id,
html[data-form-theme="fluent-ui"] .cmf-form .cmf-field-id:disabled {
    background-color: var(--fluent-neutral-bg-secondary) !important;
    border: 1px solid var(--cmf-field-border) !important;
    border-radius: var(--cmf-field-radius) !important;
    color: var(--cmf-field-text) !important;
    padding: 0 8px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}
html[data-form-theme="fluent-ui"] .cmf-form .autosuggest-input .d365-form-control {
    border: 1px solid var(--cmf-field-border) !important;
    border-radius: var(--cmf-field-radius) !important;
    background: var(--cmf-field-bg) !important;
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    text-transform: none !important;
    color: var(--cmf-field-text) !important;
    box-shadow: none;
}
html[data-form-theme="fluent-ui"] .cmf-form .autosuggest-input .d365-form-control:focus {
    border-color: #0078d4;
    outline: 1px solid #0078d4;
    outline-offset: -1px;
    box-shadow: none;
}
html[data-form-theme="fluent-ui"] .cmf-form .autocomplete-select .autocomplete-input {
    border: 1px solid var(--cmf-field-border) !important;
    border-radius: var(--cmf-field-radius) !important;
    background: var(--cmf-field-bg) !important;
    padding: 0 8px !important;
    text-transform: none !important;
    height: 32px !important;
}
html[data-form-theme="fluent-ui"] .cmf-form .autocomplete-select .autocomplete-input:focus {
    border-color: #0078d4;
    outline: 1px solid #0078d4;
    outline-offset: -1px;
    box-shadow: none;
}
html[data-form-theme="fluent-ui"] .d365-form-control {
    border-color: var(--cmf-field-border) !important;
    border-radius: var(--cmf-field-radius) !important;
    text-transform: none !important;
}
html[data-form-theme="fluent-ui"] .d365-form-control:focus {
    border-color: #0078d4;
    outline: 1px solid #0078d4;
    outline-offset: -1px;
    box-shadow: none;
}
html[data-form-theme="fluent-ui"] .cmf-form .cmf-fieldset {
    border-color: var(--d365-border) !important;
    border-radius: var(--cmf-field-radius) !important;
    background: var(--fluent-neutral-bg) !important;
}
html[data-form-theme="fluent-ui"] .cmf-form .cmf-fieldset-legend {
    color: var(--d365-primary) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
html[data-form-theme="fluent-ui"] .cmf-form .cmf-value-display {
    border: 1px solid var(--d365-border) !important;
    border-radius: var(--cmf-field-radius) !important;
    background: var(--fluent-neutral-bg) !important;
    padding: 0 8px !important;
    border-bottom-style: solid !important;
    color: var(--cmf-field-text) !important;
}
html[data-form-theme="fluent-ui"] .cmf-form .pill-toggle-btn {
    color: var(--d365-primary) !important;
    text-transform: none !important;
}
html[data-form-theme="fluent-ui"] .cmf-form .pill-toggle-btn.pill-toggle-active {
    background: var(--d365-primary) !important;
    color: #fff !important;
}
html[data-form-theme="fluent-ui"] .cmf-form .d365-btn-primary {
    background: var(--d365-primary) !important;
    border-color: var(--d365-primary) !important;
    color: #fff !important;
    border-radius: var(--cmf-field-radius) !important;
    font-weight: 600 !important;
    text-transform: none !important;
}
html[data-form-theme="fluent-ui"] .cmf-form .d365-btn-primary:hover {
    background: var(--d365-primary-hover) !important;
    border-color: var(--d365-primary-dark) !important;
}
html[data-form-theme="fluent-ui"] .cmf-form select.cmf-field {
    padding-right: 24px !important;
}

/* Real FluentUI web components inside CMF — keep them on the same grid */
html[data-form-theme="fluent-ui"] .cmf-form fluent-text-field,
html[data-form-theme="fluent-ui"] .cmf-form fluent-select,
html[data-form-theme="fluent-ui"] .cmf-form fluent-autocomplete,
html[data-form-theme="fluent-ui"] .cmf-form fluent-radio-group,
html[data-form-theme="fluent-ui"] .cmf-form fluent-button {
    display: block;
    min-width: 0;
    width: 100%;
    margin-bottom: 8px;
    font-family: var(--d365-font-family);
    --neutral-fill-input-rest: #ffffff;
    --neutral-fill-input-hover: #faf9f8;
    --accent-rest: #0078d4;
    --accent-hover: #106ebe;
    --accent-active: #005a9e;
}
html[data-form-theme="fluent-ui"] .cmf-form fluent-text-field::part(label),
html[data-form-theme="fluent-ui"] .cmf-form fluent-select::part(label),
html[data-form-theme="fluent-ui"] .cmf-form fluent-autocomplete::part(label) {
    color: var(--cmf-label-color);
    font-size: 13px;
    font-weight: 400;
}

/* Fluent autocomplete dropdown panel */
html[data-form-theme="fluent-ui"] .cmf-form fluent-autocomplete {
    position: relative;
    z-index: 2;
}
html[data-form-theme="fluent-ui"] .cmf-form fluent-autocomplete::part(listbox) {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--fluent-neutral-border-strong);
    border-radius: var(--cmf-field-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    background: #ffffff;
}
html[data-form-theme="fluent-ui"] .cmf-form fluent-autocomplete::part(option) {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 13px;
    color: var(--cmf-field-text);
    cursor: pointer;
}
html[data-form-theme="fluent-ui"] .cmf-form fluent-autocomplete::part(option):hover,
html[data-form-theme="fluent-ui"] .cmf-form fluent-autocomplete [aria-selected="true"]::part(option) {
    background: var(--d365-primary-lighter);
    color: var(--d365-text-primary);
}
html[data-form-theme="fluent-ui"] .cmf-form fluent-autocomplete::part(control) {
    min-height: 32px;
    border-radius: var(--cmf-field-radius);
}
html[data-form-theme="fluent-ui"] .cmf-form fluent-button[appearance="accent"]::part(control) {
    background: var(--d365-primary);
    border-color: var(--d365-primary);
    color: #fff;
    border-radius: var(--cmf-field-radius);
    font-weight: 600;
}
html[data-form-theme="fluent-ui"] .cmf-form fluent-button[appearance="accent"]:hover::part(control) {
    background: var(--d365-primary-hover);
    border-color: var(--d365-primary-dark);
}

/* Preview mirrors Fluent UI look (same as ms-d365 for the live preview) */
.ui-theme-preview[data-form-theme-preview="fluent-ui"] .cmf-label {
    color: #605e5c;
}
.ui-theme-preview[data-form-theme-preview="fluent-ui"] .cmf-field {
    border: 1px solid #c8c6c4;
    border-radius: 2px;
    background: #fff;
    padding: 0 8px;
    height: 32px;
    text-transform: none;
    color: #242424;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ui-theme-preview[data-form-theme-preview="fluent-ui"] .cmf-field:focus {
    border-color: #0078d4;
    outline: 1px solid #0078d4;
    outline-offset: -1px;
    box-shadow: none;
}
.ui-theme-preview[data-form-theme-preview="fluent-ui"] .ui-theme-preview-btn {
    background: #0078d4;
    border-color: #0078d4;
    border-radius: 2px;
    color: #fff;
    font-weight: 600;
    text-transform: none;
    padding: 6px 16px;
}

/* ============================================================
   DEFAULT TMS THEME — underline fields
   Keep app shell as-is. The side pane (.cmf-party-flyout) is
   intentionally NOT styled here — it keeps its own scoped
   Fluent boxed look from ContainerMovementForm.razor.css in
   both themes, so the side pane never changes when switching.
   ============================================================ */
html[data-form-theme="default-tms"] {
    --d365-primary: #2266e3;
    --d365-primary-dark: #1b4eb8;
    --d365-link: #2266e3;
}

/* ============================================================
   UI Theme Settings page — preset picker + live preview
   ============================================================ */
.ui-theme-preset-option {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 1rem 14px;
    border: 1px solid #e1dfdd;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.ui-theme-preset-option:hover {
    border-color: #c8c6c4;
    background: #faf9f8;
}
.ui-theme-preset-option.is-selected {
    border-color: #0078d4;
    background: #f3f9fd;
    box-shadow: inset 0 0 0 1px #0078d4;
}
.ui-theme-preset-option input[type="radio"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: #0078d4;
}
.ui-theme-preset-option-title {
    font-weight: 600;
    font-size: 13px;
    color: #323130;
    margin-bottom: 2px;
}
.ui-theme-preset-option-desc {
    font-size: 12px;
    color: #605e5c;
    line-height: 1.4;
    margin: 0;
}

/* Live preview form sample */
.ui-theme-preview-form {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #edebe9;
}
.ui-theme-preview-form .cmf-label,
.ui-theme-preview-form .d365-form-label {
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
}
.ui-theme-preview-form .cmf-field,
.ui-theme-preview-form .d365-form-control {
    width: 100%;
    margin-bottom: 8px;
}

/* Preview mirrors MS D365 look */
.ui-theme-preview[data-form-theme-preview="ms-d365"] .cmf-label {
    color: #605e5c;
}
.ui-theme-preview[data-form-theme-preview="ms-d365"] .cmf-field {
    border: 1px solid #c8c6c4;
    border-radius: 2px;
    background: #fff;
    padding: 0 8px;
    height: 32px;
    text-transform: none;
    color: #242424;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ui-theme-preview[data-form-theme-preview="ms-d365"] .cmf-field:focus {
    border-color: #0078d4;
    outline: 1px solid #0078d4;
    outline-offset: -1px;
    box-shadow: none;

}
.ui-theme-preview[data-form-theme-preview="ms-d365"] .ui-theme-preview-btn {
    background: #0078d4;
    border-color: #0078d4;
    border-radius: 2px;
    color: #fff;
    font-weight: 600;
    text-transform: none;
    padding: 6px 16px;
}

/* Preview mirrors Default TMS look */
.ui-theme-preview[data-form-theme-preview="default-tms"] .cmf-label {
    color: #837b53;
}
.ui-theme-preview[data-form-theme-preview="default-tms"] .cmf-field {
    border: none;
    border-bottom: 1px solid #d5d0c8;
    border-radius: 0;
    background: transparent;
    padding: 6px 2px;
    text-transform: uppercase;
    color: #323130;
    transition: border-color 0.2s ease, border-bottom-width 0.2s ease, padding-bottom 0.2s ease;
}
.ui-theme-preview[data-form-theme-preview="default-tms"] .cmf-field:focus {
    outline: none;
    border: none;
    border-bottom: 2px solid #2266e3;
    box-shadow: var(--ui-field-focus-glow);
    padding-bottom: 5px;
}
.ui-theme-preview[data-form-theme-preview="default-tms"] .ui-theme-preview-btn {
    background: #2266e3;
    border-color: #2266e3;
    border-radius: 4px;
    color: #fff;
    padding: 6px 16px;
}

/* Fluent UI density, control height, and dark mode (from admin settings) */
html[data-form-theme="fluent-ui"][data-fluent-density="compact"] .cmf-form fluent-text-field,
html[data-form-theme="fluent-ui"][data-fluent-density="compact"] .cmf-form fluent-select,
html[data-form-theme="fluent-ui"][data-fluent-density="compact"] .cmf-form fluent-autocomplete,
html[data-form-theme="fluent-ui"][data-fluent-density="compact"] .cmf-form fluent-date-picker,
html[data-form-theme="fluent-ui"][data-fluent-density="compact"] .cmf-form fluent-time-picker,
html[data-form-theme="fluent-ui"][data-fluent-density="compact"] .cmf-form fluent-number-field {
    --density: -4;
}

html[data-form-theme="fluent-ui"][data-fluent-density="comfortable"] .cmf-form fluent-text-field,
html[data-form-theme="fluent-ui"][data-fluent-density="comfortable"] .cmf-form fluent-select,
html[data-form-theme="fluent-ui"][data-fluent-density="comfortable"] .cmf-form fluent-autocomplete,
html[data-form-theme="fluent-ui"][data-fluent-density="comfortable"] .cmf-form fluent-date-picker,
html[data-form-theme="fluent-ui"][data-fluent-density="comfortable"] .cmf-form fluent-time-picker,
html[data-form-theme="fluent-ui"][data-fluent-density="comfortable"] .cmf-form fluent-number-field {
    --density: 4;
}

html[data-form-theme="fluent-ui"] .cmf-form fluent-text-field::part(control),
html[data-form-theme="fluent-ui"] .cmf-form fluent-select::part(control),
html[data-form-theme="fluent-ui"] .cmf-form fluent-autocomplete::part(control),
html[data-form-theme="fluent-ui"] .cmf-form fluent-date-picker::part(control),
html[data-form-theme="fluent-ui"] .cmf-form fluent-time-picker::part(control),
html[data-form-theme="fluent-ui"] .cmf-form fluent-number-field::part(control) {
    min-height: var(--fluent-control-height, 32px);
}

html.fluent-dark[data-form-theme="fluent-ui"],
html.fluent-dark[data-form-theme="fluent-ui"] body {
    color-scheme: dark;
}

html.fluent-dark[data-form-theme="fluent-ui"] {
    --fluent-neutral-bg: #1f1f1f;
    --fluent-neutral-fill-rest: #292929;
    --fluent-neutral-fill-hover: #333333;
    --fluent-neutral-fill-input: #292929;
    --fluent-stroke-rest: #525252;
    --fluent-stroke-hover: #666666;
    --fluent-foreground-rest: #ffffff;
    --fluent-foreground-hover: #d6d6d6;
    --d365-bg-page: #141414;
    --cmf-field-bg: #292929;
    --cmf-field-text: #ffffff;
    --cmf-label-color: #d6d6d6;
}

.ui-theme-fluent-preview-wrap {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #edebe9;
}

.ui-theme-fluent-preview-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #605e5c;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ui-theme-fluent-preview-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ui-theme-fluent-preview-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ui-theme-fluent-preview-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}