/* ========================================================================== Dashboard - lane C -------------------------------------------------------------------------- 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-c` Registered in: functions.php -> uaematch_dashboard_scripts() Design source: ui_kits/emirae-dashboard-v2/v2.css, build "Back office v2 - reconciled 27 Jul 2026", read through DesignSync. Only the classes the five applicant screens need and `dashboard.css` did not already carry are here; every selector is scoped to `.uaec-dash-root` the way the rest of the back office is. ICON SIZING. Every component below that prints an inline SVG declares an explicit `svg { width; height }`. `uaematch_dash_icon()` emits no dimensions on purpose, so a component without that rule inflates its icon to the container - the trap recorded in the batch-1 notes. ========================================================================== */ /* ========================================================================== 1. Request submitted - the reference, read before anything else ========================================================================== */ .uaec-dash-root .refcall { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 16px 0; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface-alt); border: 1px solid var(--border); } .uaec-dash-root .refcall > span { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .uaec-dash-root .refcall > b { font-size: 22px; font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text-strong); } /* ========================================================================== 2. My Requests - the work list `worklead`, `tbl--work`, `is-todo`, `ocard`, `tbl__title` already live in dashboard.css; only the phone-card key/value pair needed widening for the longer client labels. ========================================================================== */ .uaec-dash-root .ocard__row .v { text-align: right; min-width: 0; overflow-wrap: anywhere; } /* A row that is waiting on the client carries a bar, not just a tint: the tint alone is easy to read as a hover state. `dashboard.css` already has the tint. */ .uaec-dash-root .tbl tr.is-todo td:first-child { box-shadow: inset 3px 0 0 var(--warning-700); } .uaec-dash-root .ocard.is-todo { box-shadow: inset 3px 0 0 var(--warning-700); } /* The code is a link now, so it must not inherit the generic link underline. */ .uaec-dash-root a.tbl__code { text-decoration: none; } .uaec-dash-root a.tbl__code:hover { text-decoration: underline; } /* ========================================================================== 3. Request detail - lifetime banner ========================================================================== */ .uaec-dash-root .lifebar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--radius-lg); border: 1px solid; font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-bottom: 18px; } .uaec-dash-root .lifebar svg { width: 16px; height: 16px; stroke-width: 2; flex: none; } .uaec-dash-root .lifebar b { font-weight: var(--fw-bold); } .uaec-dash-root .lifebar--ok { color: var(--success-700); background: var(--success-50); border-color: color-mix(in srgb, var(--success-700) 24%, transparent); } .uaec-dash-root .lifebar--soon { color: var(--warning-700); background: var(--warning-50); border-color: color-mix(in srgb, var(--warning-700) 30%, transparent); } .uaec-dash-root .lifebar--out { color: var(--error-500); background: var(--error-50); border-color: color-mix(in srgb, var(--error-500) 26%, transparent); } /* ========================================================================== 4. Request detail - the access block One person, one row. Paid is permanent and open-but-unpaid is reversible: the difference is a colour and a bar, read at a glance rather than by reading the chip. ========================================================================== */ .uaec-dash-root .axrow { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); } .uaec-dash-root .axrow:last-child { border-bottom: none; } .uaec-dash-root .axrow__act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .uaec-dash-root .axrow--paid, .uaec-dash-root .axrow--open { padding-left: 13px; border-radius: var(--radius-md); border-bottom: none; margin-bottom: 8px; } .uaec-dash-root .axrow--paid:last-child, .uaec-dash-root .axrow--open:last-child { margin-bottom: 0; } .uaec-dash-root .axrow--paid { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--success-50) 55%, transparent)); box-shadow: inset 3px 0 0 var(--success-700); } .uaec-dash-root .axrow--open { background: linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 75%, transparent), transparent 82%); box-shadow: inset 3px 0 0 var(--accent); } @media (max-width: 640px) { .uaec-dash-root .axrow { grid-template-columns: auto minmax(0,1fr); } .uaec-dash-root .axrow__act { grid-column: 1 / -1; justify-content: flex-start; } } /* Two groups with different rights are labelled, not merely sorted. */ .uaec-dash-root .axgrp__l { display: flex; align-items: center; gap: 7px; padding: 14px 0 2px; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); } .uaec-dash-root .axgrp__l svg { display: block; width: 12px; height: 12px; stroke-width: 2.4; flex: none; } .uaec-dash-root .axgrp__l--paid { color: var(--success-700); } .uaec-dash-root .axgrp:first-child .axgrp__l { padding-top: 4px; } .uaec-dash-root .axc__body > .field__help:first-child { margin-top: 0; } /* ========================================================================== 5. Forms - the profile field family, reused There is no second set of form styles in this product: the submit form and the request-edit form use `pf-*`, exactly as the kit does. ========================================================================== */ .uaec-dash-root .pf-grid { display: grid; gap: 18px; } .uaec-dash-root .pf-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } @media (max-width: 760px) { .uaec-dash-root .pf-grid--2 { grid-template-columns: 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; flex-wrap: wrap; 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-f__h svg { width: 13px; height: 13px; stroke-width: 1.9; flex: none; display: inline-block; vertical-align: -2px; color: var(--accent); } .uaec-dash-root .pf-i { width: 100%; min-width: 0; 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:disabled, .uaec-dash-root .pf-i[readonly] { background: var(--surface-alt); color: var(--text-muted); cursor: not-allowed; } .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: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 16px 16px; } .uaec-dash-root .pf-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: var(--fs-xs); color: var(--text-secondary); cursor: pointer; line-height: 1.5; } .uaec-dash-root .pf-check input { margin-top: 2px; flex: none; } /* A locked field is an explained rule, not an error. */ .uaec-dash-root .pf-rule { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-alt); padding: 15px; display: flex; flex-direction: column; gap: 15px; } .uaec-dash-root .pf-rule__h { display: flex; align-items: flex-start; gap: 10px; } .uaec-dash-root .pf-rule__h > svg { width: 17px; height: 17px; stroke-width: 1.9; color: var(--text-muted); flex: none; margin-top: 2px; } .uaec-dash-root .pf-rule__h b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); margin-bottom: 4px; } .uaec-dash-root .pf-rule__h span { display: block; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.55; } .uaec-dash-root .pf-rule .pf-i { background: var(--surface); } .uaec-dash-root .pf-lock { display: inline-flex; align-items: center; gap: 4px; } .uaec-dash-root .pf-lock svg { display: block; width: 11px; height: 11px; stroke-width: 2.4; } /* A field-level error inside the pf-* family. */ .uaec-dash-root .pf-f__err { font-size: var(--fs-xs); color: var(--error-500); font-weight: var(--fw-medium); display: flex; align-items: flex-start; gap: 5px; margin: 0; } .uaec-dash-root .pf-f__err svg { width: 13px; height: 13px; stroke-width: 2.2; flex: none; margin-top: 2px; } /* A slot the server has no field for yet: dashed, so it never reads as content. */ .uaec-dash-root .serverslot { display: flex; gap: 11px; align-items: flex-start; margin-top: 12px; padding: 12px 13px; border-radius: var(--radius-md); background: var(--surface-alt); border: 1px dashed var(--border-strong); } .uaec-dash-root .serverslot svg { width: 17px; height: 17px; stroke-width: 1.9; color: var(--text-muted); flex: none; margin-top: 2px; } .uaec-dash-root .serverslot > div > b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); margin-bottom: 3px; } .uaec-dash-root .serverslot > div > span { display: block; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.55; } /* ========================================================================== 6. Offers received - comparable down a column `offcard` itself is in dashboard.css; the comparison grid is not. ========================================================================== */ .uaec-dash-root .offcard--cmp { grid-template-columns: auto minmax(0, 1fr) 132px 138px auto; gap: 16px; } .uaec-dash-root .offcard--cmp .offcard__f { text-align: left; } .uaec-dash-root .offcard--cmp .offcard__f > span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; } .uaec-dash-root .offcard--cmp .offcard__f > b { display: block; font-size: 15.5px; font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.012em; white-space: normal; } .uaec-dash-root .offcard--cmp .offcard__f--soft > b { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); } .uaec-dash-root .offcard--cmp.offcard--accepted { box-shadow: inset 3px 0 0 var(--success-700); } @media (max-width: 900px) { .uaec-dash-root .offcard--cmp { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 12px; } .uaec-dash-root .offcard--cmp .offcard__f { grid-column: 2 / -1; display: flex; align-items: baseline; gap: 10px; } .uaec-dash-root .offcard--cmp .offcard__f > span { margin-bottom: 0; min-width: 66px; } } /* ========================================================================== 7. Offer detail ========================================================================== */ /* Price leads, timeline stands beside it: with no company name to anchor on, the offer itself has to carry the head of the page. */ .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; } .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; } @media (max-width: 620px) { .uaec-dash-root .ofhead__st { justify-content: flex-start; } .uaec-dash-root .ofhead__k > b { font-size: 26px; } } .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 .ofnote { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-alt); padding: 13px 15px; } /* Contacts, once they are open: read instantly, act without copying by hand. */ .uaec-dash-root .contacts { display: grid; gap: 0; } .uaec-dash-root .contacts__row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); } .uaec-dash-root .contacts__row:last-child { border-bottom: none; } .uaec-dash-root .contacts__row svg { width: 17px; height: 17px; stroke-width: 1.8; color: var(--text-muted); flex: none; } .uaec-dash-root .contacts__k { width: 84px; flex: none; color: var(--text-muted); font-size: var(--fs-xs); } .uaec-dash-root .contacts__v { font-weight: var(--fw-medium); color: var(--text-strong); min-width: 0; overflow-wrap: anywhere; } .uaec-dash-root .contacts__v a { color: var(--accent); font-weight: var(--fw-bold); } .uaec-dash-root .contacts__v a:hover { color: var(--accent-hover); } /* The three choices read as a fork, and each one says what it does. */ .uaec-dash-root .fork { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; align-items: stretch; } .uaec-dash-root .forkopt { display: flex; flex-direction: column; gap: 7px; padding: 15px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .uaec-dash-root .forkopt > b { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em; } .uaec-dash-root .forkopt > span { flex: 1; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.55; } .uaec-dash-root .forkopt .uaec-btn { width: 100%; white-space: normal; margin-top: 3px; } .uaec-dash-root .forkopt form { margin: 0; } .uaec-dash-root .forkopt--go { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); background: linear-gradient(160deg, var(--accent-soft), #fff 72%); } .uaec-dash-root .forkopt--go > b { color: var(--accent-hover); } .uaec-dash-root .forkopt--no { background: var(--surface-alt); } /* The confirmation is a block on this page - there is no separate confirm screen. */ .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); } .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; } .uaec-dash-root .inlinepanel__b > p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; margin: 0 0 14px; } .uaec-dash-root .axlist { display: grid; gap: 8px; margin: 4px 0; padding: 0; } .uaec-dash-root .axlist li { list-style: none; display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-sm); color: var(--text); line-height: 1.5; } .uaec-dash-root .axlist svg { width: 15px; height: 15px; stroke-width: 2; color: var(--accent); flex: none; margin-top: 3px; } /* Version history: real snapshots, and it says which fields did NOT move. */ .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; } .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; min-width: 0; } .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; } /* The conversation lives on the offer, not only in the inbox. */ .uaec-dash-root .offerthread { display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow: auto; padding: 6px 2px; } /* ========================================================================== 8. Submit a request - step 2, the last chance to change your mind ========================================================================== */ .uaec-dash-root .review { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-top: 4px; } .uaec-dash-root .review__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 13px 15px; border-bottom: 1px solid var(--border); background: var(--surface); } .uaec-dash-root .review__row:last-child { border-bottom: none; } .uaec-dash-root .review__b { min-width: 0; } .uaec-dash-root .review__k { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .uaec-dash-root .review__v { display: block; margin-top: 3px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-strong); line-height: 1.5; overflow-wrap: anywhere; } .uaec-dash-root .review__row .linklike { flex: none; font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 5px; } .uaec-dash-root .review__row .linklike svg { width: 13px; height: 13px; stroke-width: 2; } /* The rows inside the frame are written by assets/js/dashboard/new-request.js, which is outside this lane, so they arrive as `.dl__row` with inline styles rather than as the kit's `.review__row`. The frame is given here; the rows only get the padding a bordered box needs. Nothing is forced with !important - the script's inline styles stand. */ .uaec-dash-root .review > .dl { gap: 0; } .uaec-dash-root .review .dl__row { padding: 13px 15px; background: var(--surface); } .uaec-dash-root .review .dl__row:last-child { border-bottom: 1px solid var(--border); } .uaec-dash-root .review .dl__k { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); flex: none; } /* The step marker prints a check inside a 30px circle. Without an explicit size the icon fills the circle - the inline-SVG trap this whole file is careful about. */ .uaec-dash-root .wiz-step__n svg { width: 15px; height: 15px; stroke-width: 2.4; } /* ========================================================================== 9. Narrow screens A client button never leaves its container either: the labels are the product's own words and are not shortened, so on a phone the row becomes a stack. Same rule as the kit's, same breakpoint. ========================================================================== */ @media (max-width: 620px) { .uaec-dash-root .editform .form-actions .uaec-btn, .uaec-dash-root .work__side .summary .stack .uaec-btn, .uaec-dash-root .work__side .summary .stack button.uaec-btn, .uaec-dash-root .axc__body .uaec-btn, .uaec-dash-root .notice__b .uaec-btn { width: 100%; white-space: normal; text-align: center; height: auto; min-height: 46px; padding-top: 11px; padding-bottom: 11px; line-height: 1.35; } } /* A control with an intrinsic size (`cols`, `size`) stretches its grid column before `max-width: 100%` can help, because that percentage is measured from the parent the control has already widened. `min-width: 0` is the half that works. Kept here for the pf-* controls this lane introduces. */ .uaec-dash-root .pf-f > textarea, .uaec-dash-root .pf-f > input, .uaec-dash-root .pf-f > select { min-width: 0; max-width: 100%; } /* ============================================================ KIT FIDELITY PASS 2 (2026-07-29) - deltas vs the kit for blocks this lane owns. Tail layer. ============================================================ */ .uaec-dash-root .pf-check { align-items: center;} .uaec-dash-root .pf-i--sel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");} /* ============================================================ KIT FIDELITY PASS 3 (2026-07-29) - the offer list on request-detail is a size container in the kit, so the compare cards collapse by COLUMN width, not by viewport: in the narrow work column they fold even on desktop. ============================================================ */ .uaec-dash-root .offlist { container-type: inline-size;} @container (max-width: 620px) { .uaec-dash-root .offcard--cmp { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 12px;} .uaec-dash-root .offcard--cmp .offcard__f { grid-column: 2 / -1; display: flex; align-items: baseline; gap: 10px;} .uaec-dash-root .offcard--cmp .offcard__f > span { margin-bottom: 0; min-width: 66px;} }