/* ===================== FORM INPUTS ===================== */
.input-text, .input-select, textarea {
    border-radius: 10px;
    border: 1px solid #374151;
    padding: 0.55rem 0.85rem;
    background: #0f172a;
    color: #f1f5f9;
    font-size: 0.9rem;
    transition: border-color 0.15s, background 0.15s;
}
.input-text::placeholder, textarea::placeholder {
    color: #64748b;
}
.input-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

body.light-mode .input-text, body.light-mode .input-select, body.light-mode textarea {
    background: #fff;
    color: #1e293b;
    border: 1px solid #cbd5e1;
}
body.light-mode .input-text::placeholder, body.light-mode textarea::placeholder {
    color: #64748b;
}
body.light-mode .input-select {
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.input-text:focus, .input-select:focus, textarea:focus {
    outline: none;
    border-color: #38bdf8;
    background: #1e293b;
}
body.light-mode .input-text:focus, body.light-mode .input-select:focus, body.light-mode textarea:focus {
    background: #f1f5f9;
    border-color: #38bdf8;
}