/* ========================================================================== Asign Portal — Components -------------------------------------------------------------------------- Reusable UI primitives shared across screens: buttons, status pills, avatars, and the search field. Requires tokens.css. ========================================================================== */ /* -------------------------------------------------------------------------- Button -------------------------------------------------------------------------- */ .btn { /* DS button — Figma Button (Action/Button, Quicksand) */ display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: 48px; padding: 14px 20px; border-radius: var(--radius-md); font-family: var(--font-action); font-weight: var(--weight-semibold); font-size: 15px; line-height: 20px; letter-spacing: 0.2px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .btn__icon { width: 18px; height: 18px; } /* Compact variant — top-bar / header actions (Manrope, shorter) */ .btn--compact { min-height: 0; padding: 11px 18px; font-family: var(--font-sans); font-size: 14px; letter-spacing: 0; } /* Lock text colour across states — beats base a:hover/a:active colour rules */ .btn--primary, .btn--primary:hover, .btn--primary:active { color: var(--color-on-primary); } .btn--primary { background: var(--color-primary); } .btn--primary:hover { background: var(--color-primary-hover); } .btn--primary:active { background: var(--color-primary-dark); } /* Secondary — white fill, primary outline + text */ .btn--secondary, .btn--secondary:hover, .btn--secondary:active { color: var(--color-primary); } .btn--secondary { background: var(--color-surface); border: 1.5px solid var(--color-primary); } .btn--secondary:hover { background: var(--color-tint-blue); } /* Danger — white fill, danger outline + text */ .btn--danger, .btn--danger:hover, .btn--danger:active { color: var(--color-danger); } .btn--danger { background: var(--color-surface); border: 1.5px solid var(--color-danger); } .btn--danger:hover { background: rgba(220, 53, 69, 0.08); } /* -------------------------------------------------------------------------- Avatar — colored letter tile (table rows, lists) -------------------------------------------------------------------------- */ .avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 14px; line-height: 16px; } .avatar--accent { background: var(--color-accent); } .avatar--navy { background: var(--color-navy); } /* --color-navy is lightened for dark mode (heading legibility — see tokens.css) but this one background use should stay the original navy regardless of theme, like the other brand-coloured avatars. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avatar--navy { background: #21325c; } } :root[data-theme="dark"] .avatar--navy { background: #21325c; } .avatar--primary-hover { background: var(--color-primary-hover); } /* -------------------------------------------------------------------------- Status pill -------------------------------------------------------------------------- */ .status { display: inline-flex; align-items: center; gap: var(--space-8); padding: 4px 11px 4px 9px; border-radius: var(--radius-pill); font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 12px; line-height: 16px; white-space: nowrap; } .status__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); flex: none; } /* Active / Live — green */ .status--active, .status--live { background: rgba(46, 125, 50, 0.12); color: var(--color-success); } .status--active .status__dot, .status--live .status__dot { background: var(--color-success); } /* Prospect / Archived / Draft / Invited — neutral outline */ .status--prospect, .status--archived, .status--draft, .status--invited { background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-text-muted); } .status--prospect .status__dot, .status--archived .status__dot, .status--draft .status__dot, .status--invited .status__dot { background: var(--color-border-strong); } /* -------------------------------------------------------------------------- Search field -------------------------------------------------------------------------- */ .search-field { display: flex; align-items: center; gap: var(--space-12); width: 380px; max-width: 100%; padding: 8px 15px; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); } .search-field__icon { width: 24px; height: 24px; flex: none; } .search-field input { flex: 1 1 0; min-width: 0; border: none; background: transparent; outline: none; font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--color-text); } .search-field input::placeholder { color: var(--color-text-muted); } .search-field:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); } .search-field__hint { flex: none; padding: 2px 6px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 11px; color: var(--color-text-muted); } /* -------------------------------------------------------------------------- Client identity meta (avatar sits beside this) — used in tables/lists -------------------------------------------------------------------------- */ .client-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .client-meta__name { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 14px; line-height: 18px; color: var(--color-navy); text-decoration: none; } a.client-meta__name:hover { color: var(--color-primary); text-decoration: underline; } .client-meta__url { font-family: var(--font-sans); font-size: 12px; line-height: 16px; color: var(--color-text-muted); } /* -------------------------------------------------------------------------- Masked icons — recolour an exported SVG glyph via currentColor. Use for stateful icons (nav active/hover, action buttons). Paths are relative to this file (portal/css/). Geometry comes from the real asset; only the alpha channel is used, so the baked stroke colour is irrelevant. -------------------------------------------------------------------------- */ .icon-mask { display: inline-block; flex: none; width: 24px; height: 24px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .icon-dashboard { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M8.5%203H4.5C3.67157%203%203%203.67157%203%204.5V9.5C3%2010.3284%203.67157%2011%204.5%2011H8.5C9.32843%2011%2010%2010.3284%2010%209.5V4.5C10%203.67157%209.32843%203%208.5%203Z%22%20stroke%3D%22%23004C86%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M19.5%203H15.5C14.6716%203%2014%203.67157%2014%204.5V6.5C14%207.32843%2014.6716%208%2015.5%208H19.5C20.3284%208%2021%207.32843%2021%206.5V4.5C21%203.67157%2020.3284%203%2019.5%203Z%22%20stroke%3D%22%23004C86%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M19.5%2011H15.5C14.6716%2011%2014%2011.6716%2014%2012.5V19.5C14%2020.3284%2014.6716%2021%2015.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V12.5C21%2011.6716%2020.3284%2011%2019.5%2011Z%22%20stroke%3D%22%23004C86%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M8.5%2014H4.5C3.67157%2014%203%2014.6716%203%2015.5V19.5C3%2020.3284%203.67157%2021%204.5%2021H8.5C9.32843%2021%2010%2020.3284%2010%2019.5V15.5C10%2014.6716%209.32843%2014%208.5%2014Z%22%20stroke%3D%22%23004C86%22%20stroke-width%3D%221.8%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M8.5%203H4.5C3.67157%203%203%203.67157%203%204.5V9.5C3%2010.3284%203.67157%2011%204.5%2011H8.5C9.32843%2011%2010%2010.3284%2010%209.5V4.5C10%203.67157%209.32843%203%208.5%203Z%22%20stroke%3D%22%23004C86%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M19.5%203H15.5C14.6716%203%2014%203.67157%2014%204.5V6.5C14%207.32843%2014.6716%208%2015.5%208H19.5C20.3284%208%2021%207.32843%2021%206.5V4.5C21%203.67157%2020.3284%203%2019.5%203Z%22%20stroke%3D%22%23004C86%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M19.5%2011H15.5C14.6716%2011%2014%2011.6716%2014%2012.5V19.5C14%2020.3284%2014.6716%2021%2015.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V12.5C21%2011.6716%2020.3284%2011%2019.5%2011Z%22%20stroke%3D%22%23004C86%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M8.5%2014H4.5C3.67157%2014%203%2014.6716%203%2015.5V19.5C3%2020.3284%203.67157%2021%204.5%2021H8.5C9.32843%2021%2010%2020.3284%2010%2019.5V15.5C10%2014.6716%209.32843%2014%208.5%2014Z%22%20stroke%3D%22%23004C86%22%20stroke-width%3D%221.8%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } .icon-clients { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M9%2011.3C10.8225%2011.3%2012.3%209.82254%2012.3%208C12.3%206.17746%2010.8225%204.7%209%204.7C7.17746%204.7%205.7%206.17746%205.7%208C5.7%209.82254%207.17746%2011.3%209%2011.3Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M3.5%2019.5C3.5%2016.2%206%2014.2%209%2014.2C12%2014.2%2014.5%2016.2%2014.5%2019.5%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M15.5%205.2C16.1037%205.4494%2016.6199%205.87236%2016.983%206.41532C17.3462%206.95827%2017.54%207.59679%2017.54%208.25C17.54%208.90321%2017.3462%209.54173%2016.983%2010.0847C16.6199%2010.6276%2016.1037%2011.0506%2015.5%2011.3%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M16.5%2014.4C18.9%2014.9%2020.5%2016.7%2020.5%2019.5%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M9%2011.3C10.8225%2011.3%2012.3%209.82254%2012.3%208C12.3%206.17746%2010.8225%204.7%209%204.7C7.17746%204.7%205.7%206.17746%205.7%208C5.7%209.82254%207.17746%2011.3%209%2011.3Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M3.5%2019.5C3.5%2016.2%206%2014.2%209%2014.2C12%2014.2%2014.5%2016.2%2014.5%2019.5%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M15.5%205.2C16.1037%205.4494%2016.6199%205.87236%2016.983%206.41532C17.3462%206.95827%2017.54%207.59679%2017.54%208.25C17.54%208.90321%2017.3462%209.54173%2016.983%2010.0847C16.6199%2010.6276%2016.1037%2011.0506%2015.5%2011.3%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M16.5%2014.4C18.9%2014.9%2020.5%2016.7%2020.5%2019.5%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } .icon-projects { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M18.5%203H5.5C4.11929%203%203%204.11929%203%205.5V18.5C3%2019.8807%204.11929%2021%205.5%2021H18.5C19.8807%2021%2021%2019.8807%2021%2018.5V5.5C21%204.11929%2019.8807%203%2018.5%203Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M3%209H21M9%2021V9%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M18.5%203H5.5C4.11929%203%203%204.11929%203%205.5V18.5C3%2019.8807%204.11929%2021%205.5%2021H18.5C19.8807%2021%2021%2019.8807%2021%2018.5V5.5C21%204.11929%2019.8807%203%2018.5%203Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M3%209H21M9%2021V9%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } .icon-accounts { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M19%205H5C3.61929%205%202.5%206.11929%202.5%207.5V16.5C2.5%2017.8807%203.61929%2019%205%2019H19C20.3807%2019%2021.5%2017.8807%2021.5%2016.5V7.5C21.5%206.11929%2020.3807%205%2019%205Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M8.5%2013.3C9.77026%2013.3%2010.8%2012.2703%2010.8%2011C10.8%209.72975%209.77026%208.7%208.5%208.7C7.22975%208.7%206.2%209.72975%206.2%2011C6.2%2012.2703%207.22975%2013.3%208.5%2013.3Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M5.2%2016C5.7%2014.5%207%2013.7%208.5%2013.7C10%2013.7%2011.3%2014.5%2011.8%2016%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M15%2010H19M15%2013.5H19%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M19%205H5C3.61929%205%202.5%206.11929%202.5%207.5V16.5C2.5%2017.8807%203.61929%2019%205%2019H19C20.3807%2019%2021.5%2017.8807%2021.5%2016.5V7.5C21.5%206.11929%2020.3807%205%2019%205Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M8.5%2013.3C9.77026%2013.3%2010.8%2012.2703%2010.8%2011C10.8%209.72975%209.77026%208.7%208.5%208.7C7.22975%208.7%206.2%209.72975%206.2%2011C6.2%2012.2703%207.22975%2013.3%208.5%2013.3Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M5.2%2016C5.7%2014.5%207%2013.7%208.5%2013.7C10%2013.7%2011.3%2014.5%2011.8%2016%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M15%2010H19M15%2013.5H19%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } .icon-settings { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M4%208H13M17%208H20M4%2016H7M11%2016H20%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M15%2010.4C16.3255%2010.4%2017.4%209.32548%2017.4%208C17.4%206.67452%2016.3255%205.6%2015%205.6C13.6745%205.6%2012.6%206.67452%2012.6%208C12.6%209.32548%2013.6745%2010.4%2015%2010.4Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M9%2018.4C10.3255%2018.4%2011.4%2017.3255%2011.4%2016C11.4%2014.6745%2010.3255%2013.6%209%2013.6C7.67452%2013.6%206.6%2014.6745%206.6%2016C6.6%2017.3255%207.67452%2018.4%209%2018.4Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M4%208H13M17%208H20M4%2016H7M11%2016H20%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M15%2010.4C16.3255%2010.4%2017.4%209.32548%2017.4%208C17.4%206.67452%2016.3255%205.6%2015%205.6C13.6745%205.6%2012.6%206.67452%2012.6%208C12.6%209.32548%2013.6745%2010.4%2015%2010.4Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M9%2018.4C10.3255%2018.4%2011.4%2017.3255%2011.4%2016C11.4%2014.6745%2010.3255%2013.6%209%2013.6C7.67452%2013.6%206.6%2014.6745%206.6%2016C6.6%2017.3255%207.67452%2018.4%209%2018.4Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } .icon-help { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M10%2017.5C14.1421%2017.5%2017.5%2014.1421%2017.5%2010C17.5%205.85786%2014.1421%202.5%2010%202.5C5.85786%202.5%202.5%205.85786%202.5%2010C2.5%2014.1421%205.85786%2017.5%2010%2017.5Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.5%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M7.66667%207.83333C7.87043%207.31267%208.24843%206.87876%208.73626%206.60555C9.22408%206.33235%209.79155%206.23674%2010.342%206.33503C10.8924%206.43332%2011.3917%206.71942%2011.7548%207.14458C12.1179%207.56974%2012.3224%208.10765%2012.3333%208.66667C12.3333%2010.25%2010%2010.6667%2010%2011.8333%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M10%2014.6667C10.2761%2014.6667%2010.5%2014.4428%2010.5%2014.1667C10.5%2013.8905%2010.2761%2013.6667%2010%2013.6667C9.72386%2013.6667%209.5%2013.8905%209.5%2014.1667C9.5%2014.4428%209.72386%2014.6667%2010%2014.6667Z%22%20fill%3D%22%236C757D%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M10%2017.5C14.1421%2017.5%2017.5%2014.1421%2017.5%2010C17.5%205.85786%2014.1421%202.5%2010%202.5C5.85786%202.5%202.5%205.85786%202.5%2010C2.5%2014.1421%205.85786%2017.5%2010%2017.5Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.5%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M7.66667%207.83333C7.87043%207.31267%208.24843%206.87876%208.73626%206.60555C9.22408%206.33235%209.79155%206.23674%2010.342%206.33503C10.8924%206.43332%2011.3917%206.71942%2011.7548%207.14458C12.1179%207.56974%2012.3224%208.10765%2012.3333%208.66667C12.3333%2010.25%2010%2010.6667%2010%2011.8333%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M10%2014.6667C10.2761%2014.6667%2010.5%2014.4428%2010.5%2014.1667C10.5%2013.8905%2010.2761%2013.6667%2010%2013.6667C9.72386%2013.6667%209.5%2013.8905%209.5%2014.1667C9.5%2014.4428%209.72386%2014.6667%2010%2014.6667Z%22%20fill%3D%22%236C757D%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } .icon-trace { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M12%2021C16.9706%2021%2021%2016.9706%2021%2012C21%207.02944%2016.9706%203%2012%203C7.02944%203%203%207.02944%203%2012C3%2016.9706%207.02944%2021%2012%2021Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M12%207.5V12L15.5%2014%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M12%2021C16.9706%2021%2021%2016.9706%2021%2012C21%207.02944%2016.9706%203%2012%203C7.02944%203%203%207.02944%203%2012C3%2016.9706%207.02944%2021%2012%2021Z%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M12%207.5V12L15.5%2014%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } .icon-edit { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M4%2020H8L19%209C19.3978%208.60218%2019.6213%208.06261%2019.6213%207.5C19.6213%206.93739%2019.3978%206.39782%2019%206C18.6022%205.60218%2018.0626%205.37868%2017.5%205.37868C16.9374%205.37868%2016.3978%205.60218%2016%206L5%2017V20H4Z%22%20stroke%3D%22%23212529%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M14%207L17%2010%22%20stroke%3D%22%23212529%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M4%2020H8L19%209C19.3978%208.60218%2019.6213%208.06261%2019.6213%207.5C19.6213%206.93739%2019.3978%206.39782%2019%206C18.6022%205.60218%2018.0626%205.37868%2017.5%205.37868C16.9374%205.37868%2016.3978%205.60218%2016%206L5%2017V20H4Z%22%20stroke%3D%22%23212529%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M14%207L17%2010%22%20stroke%3D%22%23212529%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } .icon-menu { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M4%206H20M4%2012H20M4%2018H20%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M4%206H20M4%2012H20M4%2018H20%22%20stroke%3D%22%236C757D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } .icon-trash { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M4%207H20M9%207V5C9%204.60218%209.15804%204.22064%209.43934%203.93934C9.72064%203.65804%2010.1022%203.5%2010.5%203.5H13.5C13.8978%203.5%2014.2794%203.65804%2014.5607%203.93934C14.842%204.22064%2015%204.60218%2015%205V7M18%207V19C18%2019.3978%2017.842%2019.7794%2017.5607%2020.0607C17.2794%2020.342%2016.8978%2020.5%2016.5%2020.5H7.5C7.10218%2020.5%206.72064%2020.342%206.43934%2020.0607C6.15804%2019.7794%206%2019.3978%206%2019V7%22%20stroke%3D%22%23212529%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M10%2011V17M14%2011V17%22%20stroke%3D%22%23212529%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Frame%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M4%207H20M9%207V5C9%204.60218%209.15804%204.22064%209.43934%203.93934C9.72064%203.65804%2010.1022%203.5%2010.5%203.5H13.5C13.8978%203.5%2014.2794%203.65804%2014.5607%203.93934C14.842%204.22064%2015%204.60218%2015%205V7M18%207V19C18%2019.3978%2017.842%2019.7794%2017.5607%2020.0607C17.2794%2020.342%2016.8978%2020.5%2016.5%2020.5H7.5C7.10218%2020.5%206.72064%2020.342%206.43934%2020.0607C6.15804%2019.7794%206%2019.3978%206%2019V7%22%20stroke%3D%22%23212529%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M10%2011V17M14%2011V17%22%20stroke%3D%22%23212529%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } /* -------------------------------------------------------------------------- Icon button — bare icon control (table row actions) -------------------------------------------------------------------------- */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border: none; background: none; border-radius: var(--radius-sm); color: var(--color-text); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .icon-btn:hover { background: var(--color-surface-alt); } .icon-btn--edit:hover { color: var(--color-primary); } .icon-btn--danger:hover { color: var(--color-danger); } /* -------------------------------------------------------------------------- Form field — label + control (used by Settings, and later auth screens) -------------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 7px; } .field__label { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 13px; line-height: 16px; letter-spacing: 0.2px; color: var(--color-navy); } .field__control { width: 100%; padding: 13px 15px; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--color-text); } .field__control::placeholder { color: var(--color-text-muted); } .field__control:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); } /* Native select: replace the OS arrow with a brand chevron so every dropdown reads as droppable. Applies on every page (loaded before overlays.css / project.css). */ select.field__control { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } /* -------------------------------------------------------------------------- Detail page header — breadcrumb + identity + actions (shared by the Client detail and Project builder screens) -------------------------------------------------------------------------- */ .client-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); width: 100%; } .client-head__titleblock { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; } .breadcrumb { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 13px; line-height: 1; color: var(--color-primary); text-decoration: none; } .breadcrumb:hover { text-decoration: underline; } .client-identity { display: flex; align-items: center; gap: var(--space-16); } .client-identity__avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 54px; height: 54px; border-radius: 14px; background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 24px; } .client-identity__namecol { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } .client-identity__namerow { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; } .client-identity__name { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 30px; line-height: 1.2; color: var(--color-text); } .client-identity__meta { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; color: var(--color-text-muted); } .client-head__actions { display: flex; align-items: center; gap: var(--space-12); flex: none; } @media (max-width: 700px) { .client-head { flex-direction: column; align-items: flex-start; } } /* -------------------------------------------------------------------------- Toggle switch -------------------------------------------------------------------------- */ .toggle { position: relative; display: inline-flex; align-items: center; flex: none; } .toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; } .toggle__track { width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--color-border-strong); transition: background var(--duration-fast) var(--ease-standard); } .toggle__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: var(--radius-pill); background: #fff; box-shadow: 0 1px 2px rgba(33, 50, 92, 0.25); transition: transform var(--duration-fast) var(--ease-standard); } .toggle input:checked + .toggle__track { background: var(--color-primary); } .toggle input:checked + .toggle__track::after { transform: translateX(18px); } .toggle input:focus-visible + .toggle__track { box-shadow: var(--focus-ring); } /* -------------------------------------------------------------------------- Multi-select — checkbox-list popover behind a field__control-styled trigger (status filters, and anywhere else picking several of a small fixed set beats a native