/*
 * deal-form.css
 * Shared styles for the deal create wizard form fields and team picker.
 * Used by deals.html (create wizard) and deal.html (edit drawer).
 * CSS custom properties are defined in tokens.css, loaded before this file.
 */

/* ── Custom Select Component ── */
.cs { position:relative; min-width:140px; }
.cs__trigger { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:var(--df-space-3) var(--df-space-4); border:1px solid var(--df-border); border-radius:var(--df-radius); background:var(--df-bg-surface); font-size:var(--df-text-micro); color:var(--df-text-secondary); cursor:pointer; transition:border-color 0.15s; user-select:none; }
.cs__trigger:hover { border-color:var(--df-accent-border); }
.cs.open .cs__trigger { border-color:var(--df-accent); }
.cs__arrow { font-size:0.5rem; color:var(--df-text-muted); transition:transform 0.15s; }
.cs.open .cs__arrow { transform:rotate(180deg); }
.cs__dropdown { display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--df-bg-surface); border:1px solid var(--df-border); border-radius:var(--df-radius); box-shadow:0 8px 24px rgba(25,25,24,0.12); z-index:100; max-height:240px; overflow-y:auto; }
.cs.open .cs__dropdown { display:block; }
.cs__option { padding:8px 12px; font-size:var(--df-text-nano); color:var(--df-text-secondary); cursor:pointer; transition:background 0.1s; }
.cs__option:hover { background:rgba(252,170,45,0.06); }
.cs__option--selected { color:var(--df-accent-dim); font-weight:var(--df-weight-semibold); }
.cs__option--selected::before { content:''; display:inline-block; width:3px; height:14px; background:var(--df-accent); border-radius:2px; margin-right:8px; vertical-align:middle; }

/* Form grid */
.wiz-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--df-space-4); }
.wiz-field label { display:block; font-size:var(--df-text-nano); font-weight:var(--df-weight-bold); color:var(--df-text-secondary); margin-bottom:var(--df-space-1); }
.wiz-field input { width:100%; padding:var(--df-space-3) var(--df-space-4); border:1px solid var(--df-border); border-radius:var(--df-radius); background:var(--df-bg-surface); font-family:var(--df-font-body); font-size:var(--df-text-micro); color:var(--df-text-primary); transition:border-color var(--df-duration-fast); }
.wiz-field input:focus { outline:none; border-color:var(--df-accent-border); }
.wiz-field input::placeholder { color:var(--df-text-muted); }
.wiz-field .cs { width:100%; }

/* Team step */
.wiz-team-row { display:flex; align-items:center; gap:var(--df-space-3); padding:var(--df-space-3) var(--df-space-4); border:1px solid var(--df-border-light); border-radius:var(--df-radius-md); transition:border-color 0.15s; }
.wiz-team-row:hover { border-color:var(--df-accent-border); }
.wiz-team-row input[type="checkbox"] { accent-color:var(--df-accent); flex-shrink:0; }
.wiz-team-avatar { width:32px; height:32px; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-size:0.6875rem; font-weight:var(--df-weight-bold); color:#fff; flex-shrink:0; }
.wiz-team-info { flex:1; min-width:0; }
.wiz-team-name { font-size:var(--df-text-micro); font-weight:var(--df-weight-bold); color:var(--df-text-primary); }
.wiz-team-role { font-size:var(--df-text-nano); color:var(--df-text-tertiary); }
.wiz-invite-row { display:flex; gap:var(--df-space-2); margin-top:var(--df-space-4); }
.wiz-invite-row input { flex:1; }
.wiz-invite-row button { white-space:nowrap; }