/* Legacy field spelling: .app-field / .app-label / .app-input / .app-select /
   .app-textarea. Still used by the filter toolbars and search bars across the app --
   those are toolbar controls, not entry forms, so they were deliberately not moved
   onto the module-form component.
   ------------------------------------------------------------------------------
   2026-08-21: rewritten so a control here is indistinguishable from an
   .app-module-form__control. It previously hardcoded 34px / 13px / radius 6px and
   focused on --color-primary with a #6f4268 fallback -- the pre-SAP aubergine, which
   was never defined after the 2026-08-11 blue adoption, so every filter input in the
   product still lit up purple. Everything below now resolves through the same tokens
   the module form uses, which is what makes the two spellings agree on screen. */

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

.app-label {
    color: var(--tbl-text-secondary, #3d4a5a);
    font-size: var(--ui-small-font-size, 12px);
    font-weight: 700;
    letter-spacing: .02em;
}

.app-filter-hint,
.app-field-hint {
    margin: 0;
    color: var(--tbl-text-muted, #6b7a8a);
    font-size: var(--ui-small-font-size, 12px);
    line-height: 1.35;
}

.app-input,
.app-select,
.app-textarea {
    width: 100%;
    min-width: 0;
    height: var(--ui-control-height, 34px);
    padding: 0 var(--ui-control-padding-x, 12px);
    border: 1px solid var(--tbl-border, #bcc3cd);
    border-radius: var(--tbl-radius-sm, 2px);
    background: var(--tbl-surface, #fff);
    color: var(--tbl-text, #1a2026);
    font-family: inherit;
    font-size: var(--ui-small-font-size, 12px);
    line-height: normal;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.app-textarea {
    height: auto;
    min-height: calc(var(--ui-control-height, 34px) * 2);
    padding: var(--ui-space-xs, 6px) var(--ui-control-padding-x, 12px);
    line-height: var(--ui-line-height, 1.45);
    resize: vertical;
}

.app-input:focus,
.app-select:focus,
.app-textarea:focus {
    border-color: var(--tbl-brand, #005c9e);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tbl-brand, #005c9e) 16%, transparent);
}

.app-input:disabled,
.app-select:disabled,
.app-textarea:disabled,
.app-input[readonly] {
    background: var(--tbl-control-bg, #f0f2f5);
    color: var(--tbl-text-muted, #6b7a8a);
    cursor: not-allowed;
}

.app-input--search {
    min-width: 260px;
}

.app-check {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-xs, 6px);
    font-size: var(--ui-small-font-size, 12px);
    font-weight: 600;
}

.app-check input {
    margin: 0;
    accent-color: var(--tbl-brand, #005c9e);
}

.app-help {
    font-size: var(--ui-small-font-size, 12px);
    color: var(--tbl-text-muted, #6b7a8a);
}

.app-error {
    font-size: var(--ui-small-font-size, 12px);
    color: var(--tbl-danger, #b1302a);
}