/* Forms module - extracted from main styles.css (FORMS section)
   Use this file to standardize all forms across the app.
*/
.form-section{margin-top:10px}
.form-title{font-size:16px;font-weight:700;color:var(--primary);margin-bottom:15px;text-transform:uppercase;letter-spacing:.5px}
.form-actions{margin-top:24px;display:flex;justify-content:flex-end;gap:12px}
.form-actions .btn-primary{margin:0}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px}
.form-group{display:flex;flex-direction:column;margin-bottom:20px}
.form-group label{font-weight:700;color:var(--text);margin-bottom:10px;font-size:14px}
.form-group input,.form-group select,.form-group textarea{
   padding:10px 12px;
   border-radius:8px;
   border:1px solid rgba(255,255,255,0.2);
   background: rgba(255,255,255,0.05);
   color:var(--text);
   font-size:14px;
   transition:all .18s ease;
   margin-bottom:5px;
}
.auth-form .form-group input{padding:8px 12px;border-radius:6px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
   outline:none;
   border-color:#3b82f6; /* same as prompt focus */
   box-shadow:0 0 18px rgba(59,130,246,0.16);
}

/* placeholder color matching prompt */
.form-group input::placeholder,.form-group textarea::placeholder,.form-group select::placeholder{
   color:#546e7a;
}
.form-group textarea{min-height:80px;resize:vertical}
.modal .modal-content select{background:rgba(255,255,255,0.03)!important;color:var(--text)!important;-webkit-text-fill-color:var(--text)!important;appearance:none}
.modal .modal-content select option{background:var(--bg-1)!important;color:var(--text)!important}
.field-hint{font-size:11px;color:var(--muted);margin-top:4px}
.file-input{cursor:pointer}

/* Small helpers to ensure consistent form button placement */
.form-inline{display:flex;gap:8px;align-items:center}