/* ── CountryPhoneField (zf-cpf) ──
   Flag + dialling-code chip fused to a national-number input so the two read as one control —
   mirrors the mobile app's CountryCodePicker.tsx chip (flag, code, right hairline divider).
   Local tokens alias the global --zf-* semantic variables (already dark-theme aware via
   html[data-theme="dark"] in app.css), so no hardcoded hex lives here. */

.zf-cpf {
    --zf-cpf-ink: var(--zf-text-primary);
    --zf-cpf-muted: var(--zf-text-placeholder);
    --zf-cpf-hair: var(--zf-border);
    --zf-cpf-surface: var(--zf-input-bg);
    --zf-cpf-focus: var(--zf-primary);
    --zf-cpf-focus-ring: var(--zf-primary-light);

    display: flex;
    align-items: stretch;
    border: 1px solid var(--zf-cpf-hair);
    border-radius: 10px;
    background: var(--zf-cpf-surface);
    /* NOT overflow: hidden. The country dropdown's menu is position: absolute inside
       .zf-dropdown, which is position: relative inside .zf-cpf__code, which lives inside THIS
       element — that puts .zf-cpf in the menu's overflow clip chain. `overflow: hidden` here
       clips the menu to this element's ~44px height, so no country other than the default can
       ever be picked (dropdown-select.js's clipBounds() confirms it: it walks up from the
       trigger looking for the first hidden|auto|scroll overflow and stops here). The seamless
       "one control" look this rule used to buy is recreated below by rounding the two child
       edges (.zf-cpf__code trigger's left corners, .zf-cpf__number's right corners) instead of
       clipping the whole wrapper. Do not reintroduce overflow: hidden on .zf-cpf. */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.zf-cpf:focus-within {
    border-color: var(--zf-cpf-focus);
    box-shadow: 0 0 0 3px var(--zf-cpf-focus-ring);
}

/* Validation state lives on the WRAPPER, not the inner <input>. .zf-cpf__number is
   `border: 0; background: transparent` (below), so `.form-control.is-invalid`'s red border
   ties on specificity and never paints — the visible border belongs to .zf-cpf. Callers must
   toggle `is-invalid` on the .zf-cpf element itself (see invite-employee-modal.js). */
.zf-cpf.is-invalid {
    border-color: var(--zf-error, #dc2626);
}

.zf-cpf.is-invalid:focus-within {
    box-shadow: 0 0 0 3px var(--zf-error-light, rgba(220, 38, 38, 0.15));
}

/* ── Country chip (content-width) ── */

.zf-cpf__code {
    flex: 0 0 auto;
    border-right: 1px solid var(--zf-cpf-hair);
}

/* Fold the dropdown-select component's own border/background/focus-ring into this shared
   control — it must look like one input, not two stacked ones. */
.zf-cpf__code .zf-dropdown {
    height: 100%;
}

.zf-cpf__code .zf-dropdown__trigger {
    height: 100%;
    box-sizing: border-box;
    border: 0;
    /* Round the left edge to match .zf-cpf's own 10px radius now that .zf-cpf no longer clips
       via overflow: hidden (see the comment on .zf-cpf above) — this is what keeps the chip
       looking fused to the wrapper instead of square-cornered inside a rounded one. */
    border-radius: 10px 0 0 10px;
    background: transparent;
    padding: 10px 8px 10px 12px;
}

.zf-cpf__code .zf-dropdown--open .zf-dropdown__trigger {
    box-shadow: none;
}

/* The chip shows "<flag> +91" only. That is done in country-phone-field.js (paintTrigger), not
   here: an earlier max-width + ellipsis crop rendered "+91 — Ind…" and would still have clipped a
   longer code such as "+1-268". Do not reintroduce a width cap to "shorten" this label. */

/* frontend-design pass (task-4-report.md, Finding 2): the shared dropdown component's chevron
   is a bright gradient-filled circle badge, right for a full-size dropdown but wrong inside a
   chip that's supposed to read as "flag + code", not a second clickable control competing with
   the page's real call-to-action. Muted to a plain caret, matching the mobile app's chip
   (CountryCodePicker.tsx uses an unadorned "▾" in a muted icon color, no badge). Everything else
   in this file — shared border, hairline divider, crop width, focus ring, tabular-nums — was
   judged sound as-is and left alone. */
.zf-cpf__code .zf-dropdown__chevron {
    width: 14px;
    height: 14px;
    background: transparent;
    color: var(--zf-cpf-muted);
}

/* ── Number input (flexes to fill) ── */

.zf-cpf__number.form-control {
    flex: 1;
    min-width: 0;
    height: 44px;
    box-sizing: border-box;
    border: 0;
    /* Round the right edge to match .zf-cpf's own 10px radius — see the .zf-cpf__code trigger
       comment above for why rounding moved from the (removed) wrapper overflow: hidden to the
       two end children instead. */
    border-radius: 0 10px 10px 0;
    background: transparent;
    color: var(--zf-cpf-ink);
    font-variant-numeric: tabular-nums;
    box-shadow: none;
}

.zf-cpf__number.form-control::placeholder {
    color: var(--zf-cpf-muted);
}

.zf-cpf__number.form-control:focus {
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
}

/* A <script> island is already non-rendering — explicit for clarity and so a stray future rule
   targeting "script" can't accidentally surface it. */
.zf-cpf__dial-codes {
    display: none;
}

/* ── Dark theme ──
   No local override block: every --zf-cpf-* token above (lines 8-13) is a straight alias of a
   global --zf-* custom property, and app.css already redefines all of those under
   html[data-theme="dark"] (see app.css:62-100). Dark mode is inherited for free — a block here
   restating the same values under the same selector would be dead weight, not a contract. If any
   --zf-cpf-* token above ever stops being a pure alias (a literal hex, a computed value, etc.),
   it needs its own dark override at that point, not before. */