/* ── Shared contract create/edit modal (ContractCreateModal.vue) ──────
   Used on /admin/contracts, /admin/leads and /admin/leads/:id. Builds on the
   shared modal/form/button styles in admin.css. All three host pages are
   Hebrew RTL islands, but this file re-asserts RTL on the modal so it is
   self-contained regardless of where it mounts. LTR-sensitive values (phones,
   emails, IDs, links) keep their dir="ltr" attributes in the template. */

.ccm-modal {
    max-width: 640px;
    width: min(640px, calc(100vw - 32px));
    direction: rtl;
    text-align: right;
}

/* Mirror the search-box adornment (admin.css positions it physically LTR). */
.ccm-search .fa-search {
    left: auto;
    right: 10px;
}

/* ── Enrollment picker (search / create) ──────────────────── */

.ccm-enroll-picker {
    margin-bottom: 4px;
}

.ccm-enroll-results {
    margin-top: 8px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #E4EAF2;
    border-radius: 10px;
    background: #FFFFFF;
}

.ccm-enroll-result {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #EEF2F7;
    text-align: right;
    font: inherit;
    color: var(--text-color, #191A23);
    cursor: pointer;
}

.ccm-enroll-result:last-child {
    border-bottom: 0;
}

.ccm-enroll-result:hover {
    background: #F5F9FF;
}

.ccm-enroll-result__name {
    font-weight: 600;
}

.ccm-enroll-result__cohort {
    color: #5A5B6A;
    font-size: 12.5px;
}

.ccm-enroll-result__flag {
    margin-inline-start: auto;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(90, 91, 106, 0.12);
    color: #5A5B6A;
}

.ccm-enroll-empty {
    padding: 14px;
    text-align: center;
    font-size: 13px;
    color: #8E8F9E;
}

/* Selected enrollment chip (after a pick / on deep link). */
.ccm-enroll-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid #E4EAF2;
    border-radius: 10px;
    background: #F9FBFF;
}

.ccm-enroll-selected__caption {
    display: block;
    font-size: 11.5px;
    color: #8E8F9E;
    margin-bottom: 2px;
}

.ccm-enroll-selected__value {
    font-weight: 600;
}

/* ── Read-only enrollment-derived amount block ─────────────── */

.ccm-readonly-block {
    margin: 6px 0 4px;
    border: 1px solid #E4EAF2;
    border-radius: 10px;
    overflow: hidden;
    background: #F9FBFF;
}

.ccm-readonly-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid #EEF2F7;
}

.ccm-readonly-label {
    min-width: 120px;
    font-size: 12.5px;
    font-weight: 600;
    color: #5A5B6A;
}

.ccm-readonly-value {
    font-size: 14px;
    color: var(--text-color, #191A23);
}

.ccm-readonly-row--total .ccm-readonly-value {
    font-weight: 600;
}

/* No rule is needed for the ex-VAT parenthetical's GAP in this flex row, and
   that is worth stating because there used to be one. The parenthetical is a
   SIBLING of the value rather than text inside it, so in this row it is a third
   flex item - and a flex item is blockified, which strips the leading space
   ExVat.vue emits as its gap. The row's own 12px gap is therefore the whole
   distance, automatically. (The earlier version of this file zeroed a
   `margin-inline-start` here; the shared class no longer has one.) */

/* Under the deposit field the parenthetical needs more air than the shared
   block form's 0.1em: it trails a 40px-tall input, not a line of text. */
.ccm-deposit-exvat {
    margin-block-start: 5px;
}

.ccm-readonly-note {
    margin: 0;
    padding: 9px 14px;
    font-size: 12px;
    line-height: 1.6;
    color: #8E8F9E;
    background: #FFFFFF;
}

/* ── No-payment-form checkbox ──────────────────────────────── */

.ccm-checkbox-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 2px;
    font-size: 13.5px;
    color: var(--text-color, #191A23);
    cursor: pointer;
}

.ccm-checkbox-field input {
    width: 16px;
    height: 16px;
    accent-color: #0071E3;
    cursor: pointer;
}

/* ── Form layout ───────────────────────────────────────────── */

.ccm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.ccm-form-divider {
    height: 1px;
    background: #E8EEF8;
    margin: 4px 0 16px;
}

.ccm-form-hint {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #8E8F9E;
}

.ccm-form-error {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(214, 69, 69, 0.08);
    border: 1px solid rgba(214, 69, 69, 0.25);
    color: #B33636;
    font-size: 13px;
}

/* ── Post-create panel (signing link handoff) ──────────────── */

.ccm-created-panel__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #1F7A44;
    margin-bottom: 10px;
}

.ccm-created-panel__text {
    margin: 0 0 10px;
    font-size: 14px;
    color: #3A3B4A;
}

.ccm-created-panel__link-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ccm-created-panel__link {
    flex: 1;
    font-size: 12.5px;
    direction: ltr;
    text-align: left;
}

/* Validity note under the fresh link - staff should send it knowing the
   window, not discover it when the customer reports a dead page. */
.ccm-created-panel__expiry {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #5A5B6A;
}

.ccm-created-panel__footer {
    margin-top: 18px;
    padding: 0;
    border-top: 0;
}

@media (max-width: 767px) {
    .ccm-form-grid {
        grid-template-columns: 1fr;
    }
}