/* ------- Forms ------- */
.form-input {
    width: 100%;
    height: 36px;
    background: #0d0f16;
    color: #e6e6e6;
    border: 1px solid var(--line);
    padding: 0 12px;
    outline: none;
}

    .form-input::placeholder {
        color: var(--muted);
    }

    .form-input:focus {
        border-color: var(--accent);
    }

/* Select styled like .form-input (with custom arrow) */
select.form-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 36px;
    background: #0d0f16;
    color: #e6e6e6;
    border: 1px solid var(--line);
    padding: 0 36px 0 12px; /* room for the arrow on the right */
    outline: none;
    cursor: pointer;
    /* inline SVG arrow (color = --muted) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a1a1aa' d='M2 2l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
}

    select.form-input option {
        background: #0d0f16;
        color: #e6e6e6;
    }

/* Number inputs: show spinners by default; hide only when .no-spin is added */
input[type="number"].no-spin {
    -moz-appearance: textfield;
}

    input[type="number"].no-spin::-webkit-outer-spin-button,
    input[type="number"].no-spin::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* Date input: soften calendar icon for dark mode */
input[type="date"].form-input::-webkit-calendar-picker-indicator {
    filter: invert(80%);
    opacity: .8;
}

/* Form grid helpers */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* Field block: consistent spacing label ↔ control ↔ validation */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .field > label {
        display: block;
        color: var(--fg);
        font-size: .9rem;
        margin: 0; /* gap handles vertical rhythm */
    }

/* Validation text */
.text-danger {
    color: var(--err);
    font-size: .85rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}


/* Input prefix (e.g., currency symbol) */
.input-with-prefix {
    position: relative;
}

    .input-with-prefix .prefix {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted);
        pointer-events: none;
    }

.form-input.has-prefix {
    padding-left: 26px; /* room for the € prefix */
}


/* Alias for older views (Login/Register) */
.input {
    width: 100%;
    height: 36px;
    background: #0d0f16;
    color: #e6e6e6;
    border: 1px solid var(--line);
    padding: 0 12px;
    outline: none;
}

.input:focus {
    border-color: var(--accent);
}