/* ========================================================================== Dashboard - lane A -------------------------------------------------------------------------- Parallel-work lane. `dashboard.css` is shared, so concurrent sessions editing it overwrite each other; each session writes only to its own lane file instead. Loaded after `dashboard.css` and declared dependent on it, so rules here win at equal specificity and the cascade order stays A, B, C. Enqueue handle: `uaematch-dashboard-a` Registered in: functions.php -> uaematch_dashboard_scripts() ========================================================================== CONTENT: the two lane-A screens - provider offer detail and company profile. Design source: ui_kits/emirae-dashboard-v2/v2.css, build "Back office v2 - reconciled 27 Jul 2026", read through DesignSync. Only the blocks those two screens actually reference are ported; nothing is copied that no template uses, and nothing here is invented. SCOPE Everything is scoped under `.uaec-dash-root`, exactly like dashboard.css, so no rule can reach the public site. ICON SIZING uaematch_dash_icon() deliberately prints no width/height - the component sizes its own glyph. Every rule below that can contain an therefore states a width and a height. Skipping that is the failure recorded in feedback_inline-svg-sizing-gotcha: a bare inline SVG expands to its container and a 14px tick becomes a 400px tick. ========================================================================== */ /* ========================================================================== 1. OFFER DETAIL ========================================================================== */ /* Price and timeline are the offer, so they lead the card. */ .uaec-dash-root .ofhead { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 14px 18px; align-items: end; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .uaec-dash-root .ofhead__k > span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .uaec-dash-root .ofhead__k > b { display: block; margin-top: 4px; font-size: 30px; line-height: 1.05; font-weight: var(--fw-bold); letter-spacing: -0.025em; color: var(--text-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .uaec-dash-root .ofhead__k--sm > b { font-size: 18px; letter-spacing: -0.015em; } .uaec-dash-root .ofhead__st { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .uaec-dash-root .ofsec { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .uaec-dash-root .ofbody { font-size: var(--fs-sm); line-height: 1.6; color: var(--text); margin: 0; } .uaec-dash-root .ofbody p { margin: 0 0 10px; } .uaec-dash-root .ofbody p:last-child { margin-bottom: 0; } /* A field the provider left empty. Named, never silently skipped: a missing block reads as "the page is broken", a named absence reads as "nothing was typed here". Every offer on dev has an empty `included_services`, so this is the normal state of the screen, not an edge case. */ .uaec-dash-root .ofbody--none { color: var(--text-muted); font-style: italic; } .uaec-dash-root .ofnote { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-alt); padding: 13px 15px; } .uaec-dash-root .ofblock + .ofblock { margin-top: 16px; } /* Revise and withdraw happen on the offer card itself. There is no separate screen for either, in the kit or here. */ .uaec-dash-root .inlinepanel { margin-top: 18px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-alt); scroll-margin-top: 90px; } .uaec-dash-root .inlinepanel__h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent-hover); background: var(--accent-soft); } .uaec-dash-root .inlinepanel__h svg { width: 16px; height: 16px; stroke-width: 2; flex: none; } .uaec-dash-root .inlinepanel__b { padding: 14px; display: flex; flex-direction: column; gap: 16px; } .uaec-dash-root .inlinepanel__b > p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; margin: 0; } .uaec-dash-root .inlinepanel--danger { border-color: color-mix(in srgb, var(--error-500) 32%, var(--border)); } .uaec-dash-root .inlinepanel--danger .inlinepanel__h { color: var(--error-500); background: var(--error-50); } /*
/ carries the panel, so it opens with JavaScript off. */ .uaec-dash-root details.inlinepanel > summary { list-style: none; cursor: pointer; } .uaec-dash-root details.inlinepanel > summary::-webkit-details-marker { display: none; } .uaec-dash-root details.inlinepanel > summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; flex: none; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .16s; } .uaec-dash-root details.inlinepanel[open] > summary::after { transform: rotate(-135deg) translateY(-2px); } /* Version snapshots, with the fields that did not move called out. */ .uaec-dash-root .vsnap { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 10px; background: var(--surface); } .uaec-dash-root .vsnap.is-current { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: linear-gradient(160deg, var(--accent-soft), #fff 70%); } .uaec-dash-root .vsnap__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .uaec-dash-root .vsnap__h b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); } .uaec-dash-root .vsnap__h span { font-size: var(--fs-xs); color: var(--text-muted); } .uaec-dash-root .vrow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 5px 0; border-top: 1px solid var(--border); } .uaec-dash-root .vrow:first-of-type { border-top: none; } .uaec-dash-root .vrow__k { font-size: var(--fs-xs); color: var(--text-muted); flex: none; } .uaec-dash-root .vrow__v { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-strong); text-align: right; display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .uaec-dash-root .vrow__v em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; } .uaec-dash-root .vrow__long { font-weight: 400; color: var(--text-secondary); font-size: var(--fs-xs); line-height: 1.5; max-width: 46ch; overflow-wrap: anywhere; } /* A timeline row for an event whose date the system does not keep. */ .uaec-dash-root .tl__time.is-none { color: var(--text-muted); font-style: italic; } /* Action slot inside a notice. dashboard.css styles .notice__t and .notice__x but never gave the buttons a row of their own. */ .uaec-dash-root .notice__a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .uaec-dash-root .notice__a .uaec-btn svg { width: 14px; height: 14px; flex: none; } @media (max-width: 620px) { .uaec-dash-root .ofhead__st { justify-content: flex-start; } .uaec-dash-root .ofhead__k > b { font-size: 26px; } } /* ========================================================================== 2. COMPANY PROFILE ========================================================================== */ /* NAME COLLISION, AND WHY THIS BLOCK IS NOT CALLED `.pf`. * * The kit uses `pf` twice for two unrelated components: the profile PAGE wrapper * (this one) and the phone-control shell in ui_kits/_partials/contact-fields.css. * In the kit they never share a screen. In our build they do: contact-fields.css * and this file are both loaded on every dashboard route, so `.uaec-ds .pf` (the * phone) and `.uaec-dash-root .pf` (the page) matched the same element on * ?section=new-request, where the applicant's phone control lives. * * Equal specificity meant the LATER sheet won per property - but only for the * properties both declared. `display` and `align-items` came back from * contact-fields; `gap: 26px` and `padding-bottom: 76px` had no counterpart there * and leaked straight onto the phone shell, which measured 126px tall instead of * 48 with a 26px hole between the country button and the number. * * Renamed rather than out-specified: a specificity war would have to be re-won * every time either component changes, and `:not()` scoping hides the real * problem, which is that one name means two things. `.pf-cap` below is renamed * `.pf-caps` for the same reason - contact-fields calls its phone caption * `.pf-cap`. Names, not behaviour: the markup is the kit's. */ .uaec-dash-root .pfpage { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 26px; align-items: start; padding-bottom: 76px; } .uaec-dash-root .pfpage__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .uaec-dash-root .pfpage__side { min-width: 0; } /* --- Header: about the work, not about a percentage --- */ .uaec-dash-root .pf-head { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } .uaec-dash-root .pf-head__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid var(--border); } .uaec-dash-root .pf-head__code { font-size: var(--fs-xs); color: var(--text-muted); } .uaec-dash-root .pf-head__top .chip svg { width: 13px; height: 13px; stroke-width: 2.2; flex: none; } .uaec-dash-root .pf-head__top a.linklike { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .uaec-dash-root .pf-head__top a.linklike svg { width: 13px; height: 13px; stroke-width: 2; flex: none; } .uaec-dash-root .pf-reach { display: flex; align-items: flex-start; gap: 20px; padding: 22px; } .uaec-dash-root .pf-reach__n { flex: none; min-width: 74px; font-size: 54px; line-height: .9; font-weight: var(--fw-bold); letter-spacing: -0.04em; color: var(--text-strong); font-variant-numeric: tabular-nums; } .uaec-dash-root .pf-reach__t { min-width: 0; } .uaec-dash-root .pf-reach__t b { display: block; font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.012em; color: var(--text-strong); } .uaec-dash-root .pf-reach__t span { display: block; margin: 5px 0 9px; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; max-width: 56ch; } .uaec-dash-root .pf-reach__t a.linklike { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; font-size: var(--fs-sm); } .uaec-dash-root .pf-reach__t a.linklike svg { width: 14px; height: 14px; stroke-width: 2.2; flex: none; } .uaec-dash-root .pf-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--border); } .uaec-dash-root .pf-fact { padding: 13px 22px; border-left: 1px solid var(--border); min-width: 0; } .uaec-dash-root .pf-fact:first-child { border-left: none; } .uaec-dash-root .pf-fact span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .uaec-dash-root .pf-fact b { display: block; margin-top: 3px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); overflow-wrap: anywhere; } /* The empty required fields, named - and each one a link to its own field. */ .uaec-dash-root .pf-gap { padding: 16px 22px; border-top: 1px solid var(--border); background: var(--warning-50); } .uaec-dash-root .pf-gap__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .uaec-dash-root .pf-gap__h b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--warning-700); } .uaec-dash-root .pf-gap__pct { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--warning-700); font-variant-numeric: tabular-nums; } .uaec-dash-root .pf-gap__list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; } .uaec-dash-root .pf-gap__i { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-strong); background: var(--surface); border: 1px solid color-mix(in srgb, var(--warning-700) 22%, transparent); border-radius: 999px; padding: 4px 11px 4px 8px; text-decoration: none; } .uaec-dash-root .pf-gap__i:hover { border-color: var(--warning-700); color: var(--text-strong); } .uaec-dash-root .pf-gap__i svg { display: block; width: 12px; height: 12px; stroke-width: 2.4; color: var(--error-500); flex: none; } .uaec-dash-root .pf-gap__i em { font-style: normal; font-weight: var(--fw-medium); color: var(--text-muted); } .uaec-dash-root .pf-done { display: flex; align-items: center; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--border); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--success-700); background: var(--success-50); } .uaec-dash-root .pf-done svg { display: block; width: 15px; height: 15px; stroke-width: 2.4; flex: none; } /* --- Sections --- */ .uaec-dash-root .pf-sec { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); scroll-margin-top: 90px; } .uaec-dash-root .pf-sec__h { display: flex; gap: 14px; padding: 18px 22px 15px; border-bottom: 1px solid var(--border); } .uaec-dash-root .pf-sec__n { flex: none; font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--text-muted); padding-top: 4px; } .uaec-dash-root .pf-sec__h h3 { font-size: 19px; font-weight: var(--fw-bold); letter-spacing: -0.018em; color: var(--text-strong); margin: 0; } .uaec-dash-root .pf-sec__h p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; margin: 4px 0 0; max-width: 68ch; } .uaec-dash-root .pf-sec__b { padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; } .uaec-dash-root .pf-sec--lead { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); } .uaec-dash-root .pf-sec--lead .pf-sec__h { background: var(--accent-soft); border-bottom-color: color-mix(in srgb, var(--accent) 22%, transparent); } .uaec-dash-root .pf-sec--lead .pf-sec__n { color: var(--accent-hover); } /* --- Fields --- */ .uaec-dash-root .pf-grid { display: grid; gap: 18px; } .uaec-dash-root .pf-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .uaec-dash-root .pf-grid--311 { grid-template-columns: 3fr 1fr 1fr; } .uaec-dash-root .pf-f { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .uaec-dash-root .pf-f__l { display: flex; align-items: baseline; gap: 9px; font-size: 12.5px; font-weight: 700; letter-spacing: .005em; color: var(--text-strong); } .uaec-dash-root .pf-f__req { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); } .uaec-dash-root .pf-f__h { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; margin: 0; } .uaec-dash-root .pf-i { width: 100%; font-family: inherit; font-size: var(--fs-sm); font-weight: 400; color: var(--text-strong); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0 15px; height: 46px; transition: border-color .15s, box-shadow .15s; } .uaec-dash-root .pf-i::placeholder { color: var(--gray-400, #94a3b8); } .uaec-dash-root .pf-i:hover { border-color: var(--gray-400, #94a3b8); } .uaec-dash-root .pf-i:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .uaec-dash-root .pf-i--ta { height: auto; padding: 13px 15px; line-height: 1.6; resize: vertical; } .uaec-dash-root .pf-i--sel { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .uaec-dash-root .pf-suffix { position: relative; display: flex; align-items: center; } .uaec-dash-root .pf-suffix .pf-i { padding-right: 62px; } .uaec-dash-root .pf-suffix span { position: absolute; right: 14px; font-size: var(--fs-xs); color: var(--text-muted); pointer-events: none; } .uaec-dash-root .pf-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-xs); color: var(--text-secondary); cursor: pointer; } .uaec-dash-root .pf-check input { flex: none; } /* The pair block is gone from the profile screen - the phone is required on its own now and WhatsApp is an extra. The rules stay because .pf-pair is generic markup any later screen can reuse; nothing on the profile emits it today. */ .uaec-dash-root .pf-pair { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; background: var(--surface-alt); display: flex; flex-direction: column; gap: 12px; } .uaec-dash-root .pf-pair.is-missing { border-color: color-mix(in srgb, var(--warning-700) 34%, var(--border)); background: var(--warning-50); } .uaec-dash-root .pf-pair__h { display: flex; align-items: baseline; gap: 9px; } .uaec-dash-root .pf-pair__l { font-size: 12.5px; font-weight: 700; color: var(--text-strong); } /* --- Word / line meter under a required free-text box --- The number is the SERVER's rule rendered live (see the counter note in template-parts/dashboard/provider-profile.php): grey while short, green once the box passes. It sits beside the hint rather than under it, so a long hint never pushes the number out of sight on a phone. */ .uaec-dash-root .pf-meter { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .uaec-dash-root .pf-meter__n { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--warning-700); font-variant-numeric: tabular-nums; white-space: nowrap; } .uaec-dash-root .pf-meter__n.is-ok { color: var(--success-700); } .uaec-dash-root .pf-meter .pf-f__h { flex: 1 1 220px; } /* A refusal from the server, under the field that carried it. */ .uaec-dash-root .pf-f__h--err { color: var(--error-500); font-weight: var(--fw-bold); } /* --- Capability chips --- */ /* `.pf-caps`, not `.pf-cap` - contact-fields.css owns `.pf-cap` for the caption * under the phone field. Nothing on the dashboard uses that caption today, so * this was latent rather than broken, but the two names are one keystroke apart * and the plural is the more accurate word for a capability group anyway. */ .uaec-dash-root .pf-caps { display: flex; flex-direction: column; gap: 9px; } .uaec-dash-root .pf-caps + .pf-caps { padding-top: 18px; border-top: 1px solid var(--border); } .uaec-dash-root .pf-caps__h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .uaec-dash-root .pf-caps__l { font-size: 12.5px; font-weight: 700; color: var(--text-strong); } .uaec-dash-root .pf-cnt { font-size: 11px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; } .uaec-dash-root .pf-bulk { display: flex; gap: 10px; margin-left: auto; } .uaec-dash-root .pf-bulk button { appearance: none; border: none; background: none; padding: 0; font-family: inherit; font-size: 11px; font-weight: 700; color: var(--accent); cursor: pointer; } .uaec-dash-root .pf-bulk button:hover { color: var(--accent-hover); text-decoration: underline; } .uaec-dash-root .pf-chips { display: flex; flex-wrap: wrap; gap: 8px; } /* A real