/* ==========================================================================
   AppField family - canonical eSmart form-control language

   This is intentionally a global stylesheet. AppField renders AntDesign child
   controls, so Blazor CSS isolation cannot reliably style their generated DOM.
   Scoping every rule through .app-field keeps raw AntDesign controls unchanged
   while giving all shared App* input components one reusable visual contract.
   ========================================================================== */

:root {
    --app-field-control-height: 32px;
    --app-field-control-radius: 8px;
    --app-field-control-border: #e2e8f0;
    --app-field-control-border-hover: #cbd5e1;
    --app-field-control-focus: #ea580c;
    --app-field-control-focus-ring: rgba(234, 88, 12, 0.1);
    --app-field-label: #475569;
    --app-field-label-disabled: #64748b;
    --app-field-label-size: 0.6875rem;
    --app-field-label-weight: 600;
    --app-field-label-tracking: 0.025em;
    --app-field-error: #dc2626;
}

.app-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.app-field .app-field__label {
    color: var(--app-field-label);
    font-size: var(--app-field-label-size) !important;
    font-weight: var(--app-field-label-weight) !important;
    letter-spacing: var(--app-field-label-tracking) !important;
    line-height: 1.2;
    text-transform: uppercase;
}

.app-field__required {
    color: var(--app-field-error);
    margin-left: 3px;
}

.app-field__control {
    min-width: 0;
    width: 100%;
}

.app-field__control-shell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

.app-field__control-shell > .design-gear {
    flex: 0 0 auto;
}

.app-field__help {
    color: var(--app-field-error);
    font-size: 0.75rem;
    line-height: 1.35;
}

.app-field--compact {
    gap: 4px;
}

.app-field--disabled .app-field__label {
    color: var(--app-field-label-disabled);
}

.app-field--warning .app-field__help {
    color: #d97706;
}

.app-field--success .app-field__help {
    color: #16a34a;
}

.app-field-grid {
    row-gap: 20px !important;
}

.app-field .ant-input,
.app-field .ant-input-affix-wrapper,
.app-field .ant-select,
.app-field .ant-picker,
.app-field .ant-input-number {
    width: 100%;
}

.app-field input.ant-input,
.app-field .ant-input-affix-wrapper,
.app-field .ant-picker,
.app-field .ant-input-number,
.app-field .ant-select:not(.ant-select-multiple) .ant-select-selector {
    height: var(--app-field-control-height) !important;
    min-height: var(--app-field-control-height) !important;
}

.app-field input.ant-input,
.app-field .ant-input-affix-wrapper,
.app-field .ant-picker {
    padding: 4px 11px !important;
}

.app-field textarea.ant-input {
    min-height: var(--app-field-control-height) !important;
    padding: 8px 11px !important;
}

.app-field .ant-select-selector {
    min-height: var(--app-field-control-height) !important;
    padding: 0 11px !important;
    align-items: center !important;
}

.app-field .ant-select-multiple .ant-select-selector {
    height: auto !important;
    padding: 1px 4px !important;
}

.app-field .ant-input-number {
    line-height: calc(var(--app-field-control-height) - 2px) !important;
    overflow: hidden;
}

.app-field .ant-input-number-input {
    height: calc(var(--app-field-control-height) - 2px) !important;
    padding: 0 11px !important;
}

.app-field input.ant-input,
.app-field textarea.ant-input,
.app-field .ant-input-affix-wrapper,
.app-field .ant-picker,
.app-field .ant-input-number,
.app-field .ant-select-selector {
    border-color: var(--app-field-control-border) !important;
    border-radius: var(--app-field-control-radius) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.app-field input.ant-input:hover,
.app-field textarea.ant-input:hover,
.app-field .ant-input-affix-wrapper:hover,
.app-field .ant-picker:hover,
.app-field .ant-input-number:hover,
.app-field .ant-select:hover .ant-select-selector {
    border-color: var(--app-field-control-border-hover) !important;
}

.app-field input.ant-input:focus,
.app-field textarea.ant-input:focus,
.app-field .ant-input-affix-wrapper-focused,
.app-field .ant-picker-focused,
.app-field .ant-input-number-focused,
.app-field .ant-input-number:focus-within,
.app-field .ant-select-focused .ant-select-selector {
    border-color: var(--app-field-control-focus) !important;
    box-shadow: 0 0 0 3px var(--app-field-control-focus-ring) !important;
}

.app-field--error input.ant-input,
.app-field--error textarea.ant-input,
.app-field--error .ant-input-affix-wrapper,
.app-field--error .ant-picker,
.app-field--error .ant-input-number,
.app-field--error .ant-select-selector {
    border-color: var(--app-field-error) !important;
}

.app-field__control > .ant-checkbox-wrapper,
.app-field__control > .ant-radio-group {
    display: inline-flex;
    align-items: center;
    min-height: var(--app-field-control-height);
}

.app-field .ant-checkbox-checked .ant-checkbox-inner {
    background-color: var(--app-field-control-focus);
    border-color: var(--app-field-control-focus);
}

.app-field .ant-checkbox:hover .ant-checkbox-inner,
.app-field .ant-radio-checked .ant-radio-inner,
.app-field .ant-radio:hover .ant-radio-inner {
    border-color: var(--app-field-control-focus);
}

.app-field .ant-radio-checked .ant-radio-inner::after {
    background-color: var(--app-field-control-focus);
}