<!--
|--------------------------------------------------------------------------
| DevField — wrapper de label/input consistente pros forms de dev
|--------------------------------------------------------------------------
-->
<script setup>
defineProps({
    label: { type: String, required: true },
    hint: { type: String, default: '' },
    required: { type: Boolean, default: false }
});
</script>

<template>
    <div class="dev-field">
        <label class="dev-field-label">
            {{ label }}
            <span v-if="required" class="dev-field-req">*</span>
        </label>
        <slot />
        <small v-if="hint" class="dev-field-hint">{{ hint }}</small>
    </div>
</template>

<style scoped>
.dev-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.dev-field-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.dev-field-req { color: #ef4444; }
.dev-field-hint {
    font-size: 11px;
    color: var(--text-color-secondary);
    line-height: 1.45;
}

/* Styling global pros inputs dentro do field (aplicado via :deep em pais) */
.dev-field :deep(input),
.dev-field :deep(select),
.dev-field :deep(textarea) {
    background: var(--surface-ground, #f8fafc);
    border: 1px solid var(--surface-border, #e2e8f0);
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 12px;
    color: var(--text-color);
    outline: none;
    width: 100%;
    font-family: inherit;
    transition: border-color 0.15s;
}
.dev-field :deep(input:focus),
.dev-field :deep(select:focus),
.dev-field :deep(textarea:focus) {
    border-color: var(--primary-color);
}
.dev-field :deep(textarea) {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}
.dev-field :deep(select) { cursor: pointer; }
</style>
