/*
 * cockpit-deals-intake.css
 * ========================
 *
 * Plain language: the look-and-feel for the "Nouvelle affaire" popup
 * and for the win/loss close popup. Matches the rest of Cockpit
 * (dark surface, subtle borders, restrained accents).
 *
 * Why this file exists:
 *   The intake modal needs a couple of new patterns the global
 *   stylesheet doesn't carry yet (radio chips for deal-type, a
 *   capture-conversion badge, a two-column row inside a form).
 *   Keeping them in a dedicated file makes the visual scope of Phase
 *   2 Agent 2A easy to audit, and a future density retrofit (Phase 6)
 *   can rewrite this file in isolation.
 *
 * Conventions:
 *   - Reuses --bg, --border, --text*, --primary, --color-danger
 *     tokens defined in styles.css. Never hard-codes hex.
 *   - Modal backdrop / panel sizing is inherited from the global
 *     .modal-overlay / .modal classes; we only add intake-specific
 *     bits.
 */

/* The modal panel itself — slightly wider than the default 500px so
   the two-column row (branche + commercial) breathes on a 14"
   screen. */
.modal.deals-intake-modal {
    max-width: 560px;
    width: min(560px, 92vw);
}

/* When opening from a capture, a small badge sits under the title to
   make the conversion context obvious. Without it, the rep would
   sometimes wonder "did this start from my capture or from scratch?".
   Same words appear in the API trail (deal.source = 'capture'). */
.deals-intake-modal .di-capture-badge {
    background: rgba(56, 139, 253, 0.10);
    border: 1px solid rgba(56, 139, 253, 0.35);
    color: var(--text-bright, #e6edf3);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 16px;
    font-size: 13px;
}

/* Field hint text under inputs. Kept short — "say what the field is,
   not what it means". */
.deals-intake-modal .di-help {
    color: var(--text-secondary, #8b949e);
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.4;
}

/* Two-column row inside a single form-group container. Grid lets
   each child claim its own label / input pair without bleeding into
   the parent's spacing. */
.deals-intake-modal .di-row-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.deals-intake-modal .di-row-two > div {
    display: flex;
    flex-direction: column;
}
.deals-intake-modal .di-row-two label {
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--text-bright, #e6edf3);
}
@media (max-width: 520px) {
    .deals-intake-modal .di-row-two {
        grid-template-columns: 1fr;
    }
}

/* ---- Deal-type chips (radios styled as cards) ----
 *
 * WHY chips and not a <select>: there are at most 5 types and Jean
 * needs to see them all without a dropdown reveal. Chips also let us
 * disable two of them inline with a hint, which a native <select>
 * can't carry without an extra <span>. */
.deals-intake-modal .di-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.deals-intake-modal .di-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border, #30363d);
    border-radius: 999px;
    background: var(--bg, #161b22);
    color: var(--text-bright, #e6edf3);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 120ms, background-color 120ms;
}

.deals-intake-modal .di-chip:hover {
    border-color: var(--primary, #2f81f7);
}

.deals-intake-modal .di-chip input[type="radio"] {
    /* WHY: the native radio bullet is hidden inside the chip so the
       chip itself acts as the affordance. We keep the input in the
       DOM so keyboard users can tab through and screen readers
       announce the role. */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Selected chip — primary-tinted border + soft background. Mirrors
   the existing "primary button" treatment elsewhere in Cockpit. */
.deals-intake-modal .di-chip:has(input[type="radio"]:checked) {
    border-color: var(--primary, #2f81f7);
    background: rgba(56, 139, 253, 0.12);
}

.deals-intake-modal .di-chip--disabled,
.deals-intake-modal .di-chip:has(input[type="radio"]:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.deals-intake-modal .di-chip-hint {
    color: var(--text-secondary, #8b949e);
    font-size: 11px;
    font-style: italic;
}

/* Inline error region — visible only when something fails. We
   intentionally render the error inline rather than as a toast so
   the user sees it in the same visual space as the form they need to
   fix, without the toast interrupting their typing. */
.deals-intake-modal .di-error {
    background: rgba(248, 81, 73, 0.12);
    border: 1px solid rgba(248, 81, 73, 0.45);
    color: var(--color-danger, #f85149);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 8px;
    font-size: 13px;
}

/* ---- Win/loss close modal ----
 *
 * The follow-up modal that asks for a win/loss reason when a deal is
 * moved to a terminal stage. Reuses the chip pattern from the intake
 * modal so a Director who has seen one already understands the other.
 */

.modal.deals-close-modal {
    max-width: 540px;
    width: min(540px, 92vw);
}

.deals-close-modal .dc-stage-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
}

.deals-close-modal .dc-stage-banner--won {
    background: rgba(63, 185, 80, 0.14);
    border: 1px solid rgba(63, 185, 80, 0.45);
    color: #d1f7d1;
}
.deals-close-modal .dc-stage-banner--lost,
.deals-close-modal .dc-stage-banner--withdrawn {
    background: rgba(248, 81, 73, 0.10);
    border: 1px solid rgba(248, 81, 73, 0.40);
    color: #ffd1d1;
}

.deals-close-modal .dc-reason-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.deals-close-modal .dc-reason {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border, #30363d);
    border-radius: 999px;
    background: var(--bg, #161b22);
    color: var(--text-bright, #e6edf3);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 120ms, background-color 120ms;
}
.deals-close-modal .dc-reason:hover {
    border-color: var(--primary, #2f81f7);
}
.deals-close-modal .dc-reason input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.deals-close-modal .dc-reason:has(input[type="radio"]:checked) {
    border-color: var(--primary, #2f81f7);
    background: rgba(56, 139, 253, 0.12);
}

/* Voice-memo row inside the intake modal. Sits beneath the notes
   textarea. Same chip styling as the close modal so the affordance
   is consistent across surfaces. */
.di-voice-row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1.5;
}

.di-voice-help {
    color: var(--text-secondary, #8b949e);
    flex: 1;
    min-width: 200px;
}

/* Voice-memo trigger inside the deal-close modal. Phase 3 / Agent
   3B wired this up to the real Whisper pipeline; the previous
   disabled-stub treatment (dashed border + cursor: not-allowed) was
   removed in the same change. The chip uses the shared .vi-trigger
   styling defined in cockpit-voice-intake.css; the surrounding
   block here just adds spacing + the secondary help text alongside. */
.deals-close-modal .dc-voice-trigger {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--border, #30363d);
    border-radius: 8px;
    background: rgba(56, 139, 253, 0.04);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1.5;
}

.deals-close-modal .dc-voice-help {
    color: var(--text-secondary, #8b949e);
    flex: 1;
    min-width: 200px;
}