/* ADR-0102 — house-tight AntDesign overrides. Ant Blazor 1.x tracks antd v4 (no v5 token system), so this is
   plain CSS, loaded LAST. Compact density + ONE radius matched to the ~5px buttons + no numeric-spinner chrome +
   espresso (#4a2613) accents to match MudBlazor's palette. Ant is only used by the App* form wrappers today, so
   these globals are effectively form-scoped. */

/* Radius — 4px everywhere (owner). */
.ant-input,
.ant-input-affix-wrapper,
.ant-input-number,
.ant-select-selector,
.ant-btn,
.ant-picker { border-radius: 4px !important; }

/* Control size — bigger + larger text (owner): ~40px tall, 15px text. */
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector { height: 40px; }
.ant-select-single .ant-select-selector .ant-select-selection-item,
.ant-select-single .ant-select-selector .ant-select-selection-placeholder { line-height: 38px; font-size: 15px; }
.ant-input-number { height: 40px; }
.ant-input-number-input { height: 38px; font-size: 15px; }
.ant-input { height: 40px; font-size: 15px; }

/* Form rhythm — label hugs the control, a bit bigger + bolder (owner). */
.ant-form-vertical .ant-form-item { margin-bottom: 12px; }
.ant-form-vertical .ant-form-item-label { padding: 0; }
.ant-form-vertical .ant-form-item-label > label { height: 20px; line-height: 20px; font-size: 13px; font-weight: 600; color: #5b4a33; }

/* Numeric steppers: Ant's native up/down spinners are ON by default (owner). AppNumberField Steppers=false adds
   .ans-no-spin to hide them per field (e.g. free-form dollar amounts where ±1 is meaningless). */
.ant-input-number.ans-no-spin .ant-input-number-handler-wrap { display: none !important; }

/* Money field (AppNumberField Money=true) — a "$" sitting inside the control on the left. */
.ant-input-number.ans-money { position: relative; }
.ant-input-number.ans-money .ant-input-number-input { padding-left: 18px; }
.ant-input-number.ans-money::before { content: "$"; position: absolute; left: 10px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--mud-palette-text-secondary, #6b7280); z-index: 1; }

/* Form field layout — a 12-col grid so App* field wrappers compose without Ant Row/Col at the call site. */
.erp-form-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 14px; align-items: start; }
.erp-form-grid > * { min-width: 0; }

/* Espresso primary to match MudBlazor (no variable.css needed for these few primary-driven surfaces). */
.ant-switch-checked { background-color: #4a2613; }
.ant-btn-primary { background-color: #4a2613; border-color: #4a2613; }
.ant-select-focused:not(.ant-select-disabled) .ant-select-selector,
.ant-input:focus, .ant-input-focused,
.ant-input-number-focused,
.ant-input-affix-wrapper:focus { border-color: #4a2613 !important; box-shadow: 0 0 0 2px rgba(74, 38, 19, .12) !important; }

/* ============================================================================================
   Dark theme — Ant Blazor (v4) overrides. Ant v4 has no token system so this is plain CSS keyed
   on the same [data-theme="dark"] root selector the rest of the app uses. Inputs/selects/forms
   are the surfaces Ant owns in this app (per ADR-0102); focus + primary swap from espresso to
   tan so the action color reads on the dark BG.
   ============================================================================================ */
:root[data-theme="dark"] .ant-input,
:root[data-theme="dark"] .ant-input-number,
:root[data-theme="dark"] .ant-input-affix-wrapper,
:root[data-theme="dark"] .ant-picker,
:root[data-theme="dark"] .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    background-color: #2D1E14;
    border-color: rgba(217, 173, 109, 0.30);
    color: #F5F0E6;
}
:root[data-theme="dark"] .ant-input::placeholder,
:root[data-theme="dark"] .ant-input-number-input::placeholder,
:root[data-theme="dark"] .ant-select-selection-placeholder { color: rgba(245, 240, 230, 0.45); }

:root[data-theme="dark"] .ant-form-vertical .ant-form-item-label > label { color: #d9ad6d; }
:root[data-theme="dark"] .ant-form-item-explain,
:root[data-theme="dark"] .ant-form-item-extra { color: rgba(245, 240, 230, 0.55); }

:root[data-theme="dark"] .ant-btn { background-color: transparent; border-color: rgba(217, 173, 109, 0.40); color: #F5F0E6; }
:root[data-theme="dark"] .ant-btn:hover { border-color: #d9ad6d; color: #d9ad6d; }
:root[data-theme="dark"] .ant-btn-primary { background-color: #d9ad6d; border-color: #d9ad6d; color: #1A100A; }
:root[data-theme="dark"] .ant-btn-primary:hover { background-color: #E5CCA9; border-color: #E5CCA9; color: #1A100A; }

:root[data-theme="dark"] .ant-select-focused:not(.ant-select-disabled) .ant-select-selector,
:root[data-theme="dark"] .ant-input:focus, :root[data-theme="dark"] .ant-input-focused,
:root[data-theme="dark"] .ant-input-number-focused,
:root[data-theme="dark"] .ant-input-affix-wrapper:focus { border-color: #d9ad6d !important; box-shadow: 0 0 0 2px rgba(217, 173, 109, .18) !important; }

/* Dropdown popovers (Select/Picker) — Ant renders them in <body>, so they need their own dark background. */
:root[data-theme="dark"] .ant-select-dropdown,
:root[data-theme="dark"] .ant-picker-dropdown .ant-picker-panel-container { background: #241710; border: 1px solid rgba(217, 173, 109, 0.18); }
:root[data-theme="dark"] .ant-select-item { color: #F5F0E6; }
:root[data-theme="dark"] .ant-select-item-option-active:not(.ant-select-item-option-disabled) { background: rgba(217, 173, 109, 0.12); }
:root[data-theme="dark"] .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { background: rgba(217, 173, 109, 0.20); color: #F5F0E6; }

/* DatePicker calendar: header nav, day names, cells, today ring, selected, suffix icon */
:root[data-theme="dark"] .ant-picker-header { color: #F5F0E6; border-bottom-color: rgba(217, 173, 109, 0.18); }
:root[data-theme="dark"] .ant-picker-header button { color: rgba(245, 240, 230, 0.65); }
:root[data-theme="dark"] .ant-picker-header button:hover { color: #d9ad6d; }
:root[data-theme="dark"] .ant-picker-content th { color: rgba(245, 240, 230, 0.50); }
:root[data-theme="dark"] .ant-picker-cell { color: rgba(245, 240, 230, 0.35); }
:root[data-theme="dark"] .ant-picker-cell-in-view { color: #F5F0E6; }
:root[data-theme="dark"] .ant-picker-cell:hover:not(.ant-picker-cell-selected) .ant-picker-cell-inner { background: rgba(217, 173, 109, 0.15); }
:root[data-theme="dark"] .ant-picker-cell-selected .ant-picker-cell-inner { background: #d9ad6d !important; color: #1A100A !important; }
:root[data-theme="dark"] .ant-picker-cell-today .ant-picker-cell-inner::before { border-color: #d9ad6d !important; }
:root[data-theme="dark"] .ant-picker-footer { border-top-color: rgba(217, 173, 109, 0.18); }
:root[data-theme="dark"] .ant-picker-today-btn { color: #d9ad6d; }
:root[data-theme="dark"] .ant-picker-suffix { color: rgba(245, 240, 230, 0.45); }
:root[data-theme="dark"] .ant-picker-clear { background: #2D1E14; color: rgba(245, 240, 230, 0.45); }
:root[data-theme="dark"] .ant-picker-clear:hover { color: #F5F0E6; }

/* Popups must float above SidePanel (z 1391) and the house dialog scrim (z 1400) — Ant's default 1050
   opened select lists BEHIND fly-ins (the "can't pick a supplier in Edit bill" bug). */
.ant-select-dropdown, .ant-picker-dropdown, .ant-dropdown, .ant-tooltip { z-index: 1450; }