/* ============================================================ octa-sales — app-level styles. COMPLEMENTS the Octacer design system (octacer-theme.css owns .oc-card / .btn / .field-* / .badge / .oc-table / .oc-empty / .oc-stat / .oc-hero / .oc-tabs). This file adds only the app SHELL + layout helpers and never redefines a theme class. Uses the theme's CSS variables (--brand-*, --ink-*, --line, --surface). ============================================================ */ /* Set by portal.js the moment a portal page enters the browser's back/forward cache, so the snapshot it keeps has nothing readable in it. Without this, pressing Back after signing out paints the old page — dashboard, flash messages and all — for the frame or two before the forced reload lands. */ .oc-brand-badge { width: 2.1rem; height: 2.1rem; border-radius: .65rem; display: grid; place-items: center; color: var(--primary-foreground); background: linear-gradient(180deg, var(--brand-500), var(--brand-700)); box-shadow: 0 2px 6px -1px rgba(79,70,229,.5); } .oc-brand-badge i { width: 18px; height: 18px; } .oc-nav-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-400); font-weight: 700; padding: .8rem .6rem .3rem; } .oc-side-user { flex: 1; min-width: 0; } .oc-side-user .n { font-size: .82rem; font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-side-user .r { font-size: .7rem; color: var(--ink-400); } /* Guest top bar (unauthenticated) */ /* ---------- Spacing utilities (no inline styles allowed in .cshtml) ---------- */ .oc-mt { margin-top: 1.25rem; } .oc-mb { margin-bottom: 1.25rem; } .oc-mb-lg { margin-bottom: 1.5rem; } .oc-mb-sm { margin-bottom: .6rem; } /* Fuses two adjacent .oc-card elements into what reads as one continuous card — used where a fixed-price proposal's single pricing item and its totals card sit flush against each other instead of as two visibly separate boxes. */ /* One priced line's fields (_PricingItemFields.cshtml), spaced by the wrapper itself rather than by `.field`'s own margin — which only exists inside an `.oc-form` ancestor (see `.oc-form .field` above). This partial renders both inside one (the Builder's inline section, whose form carries `oc-form`) and outside one (the dedicated Pricing page's save form, which does not) — without its own spacing, a field sitting directly outside a grid had NO gap at all from the field above it on that second page, and two adjacent 1px borders with nothing between them read as one missing border, not two present ones. The nested `.oc-form-grid` rows keep their own margin too; cancelled here so gaps stay one size, not two. */ .oc-pricing-item-fields { display: flex; flex-direction: column; gap: 1rem; } .oc-pricing-item-fields .oc-form-grid { margin-bottom: 0; } /* Same reason: the gap above already spaces it from the field before it, so its own margin-top would stack on top of that gap (flex gap does not collapse with margins) and open a visibly wider gap here than everywhere else on the same card. The divider line (padding/border) still stands. */ .oc-pricing-item-fields > .oc-price-item-total { margin-top: 0; } /* ---------- Page header ---------- */ .oc-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .oc-page-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink-900); } .oc-page-sub { color: var(--ink-500); font-size: .9rem; margin-top: .25rem; max-width: 60ch; } .oc-head-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } /* Dummy Data for Testing + its Delete sit LAST in the markup (so a crowded row wraps them, not Send — see the comment beside them in Builder.cshtml) but read FIRST, to the left of Preview/Send: visual order via flex `order`, independent of the DOM order the wrap behaviour depends on. */ .oc-head-actions [data-oc-confirm="#dummy_data_modal"] { order: -2; } .oc-head-actions [data-oc-confirm="#delete_dummy_data_modal"] { order: -1; } /* The proposal / agreement Builder's header: Send / Send update is always the LAST button, on the same line right after Duplicate (by request). The button row takes all the width the title leaves (flex: 1) rather than shrinking to its own narrowest size — which is what wrapped Send onto a line of its own while the header still had room — and stays right-aligned, so on a genuinely narrow screen Send still wraps to the right edge. */ .oc-page-head .oc-head-actions:has([data-testid="proposal__send"]) { justify-content: flex-end; flex: 1 1 auto; min-width: 0; } .oc-head-actions [data-testid="proposal__send"] { order: 99; } /* Agreement: Save Agreement right before Send — and, once sent (no Send any more), the last button: View · Download · Save Agreement (by request). */ .oc-head-actions [data-testid="agreement__save"] { order: 98; } /* All of the Builder's header buttons on ONE line (by request). Beside the title they need more width than a laptop window leaves (~830px with full labels), so: the header may wrap, and the button row asks for ~42rem — when the title leaves less than that, the whole row moves under the title and spans the full width, right-aligned, instead of wrapping Send onto a line of its own. Below 100rem the testing chip "Dummy Data for Testing" shows its flask icon only (its name stays in aria-label / the tooltip), as it already does on a phone — that is what lets the row fit in one line. Desktop only: ≤60rem keeps its own two-line phone layout below. */ @media (min-width: 60.0625rem) { .oc-page-head:has([data-testid="proposal__send"]) { flex-wrap: wrap; } .oc-page-head .oc-head-actions:has([data-testid="proposal__send"]) { flex: 1 1 42rem; } } @media (min-width: 60.0625rem) and (max-width: 100rem) { .oc-page-head .oc-head-actions [data-oc-confirm="#dummy_data_modal"] .oc-btn-label { display: none; } } /* ---------- Card body (theme .oc-card intentionally has no padding) ---------- */ .oc-card-body { padding: 1.25rem; } /* The Deliverables billing-type strip and the submit form directly under it (_TabDeliverables.cshtml) are two separate .oc-card-body blocks in one card, so stacking their padding as-is would double the gap between the tab strip and the File/Link toggle beneath it. The strip's own .oc-mb on its tabs already sets that one gap deliberately, so each side gives up the padding facing the other. */ .oc-tab-strip-billing { padding-bottom: 0; } .oc-tab-strip-billing + .oc-card-body { padding-top: 0; } /* Auto-pad bare content dropped straight into a card so nothing sits flush to the edge. */ .oc-card > .oc-dl, .oc-card > .oc-list, .oc-card > .oc-funnel, .oc-card > .oc-assist-links, .oc-card > .oc-checklist, .oc-card > .oc-niche-stats, .oc-card > .oc-empty, .oc-card > textarea { padding: 1.15rem 1.25rem 1.25rem; margin: 0; } .oc-card > p { padding: .3rem 1.25rem; margin: 0; color: var(--ink-600); font-size: .9rem; line-height: 1.55; } .oc-card > p:first-of-type { padding-top: 1.15rem; } .oc-card > p:last-of-type { padding-bottom: 1.25rem; } .oc-card > .badge { margin: 0 1.25rem 1.25rem; } .oc-card > .oc-alert { margin: 0 1.25rem 1.25rem; } /* action bar placed directly in a card (e.g. the cockpit plan approve row) */ .oc-card > .oc-form-actions { padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 1.25rem; } /* ---------- Engagement card: the pre-project narrative (Parts 14-20) ---------- The client's own words for where things stand, one clear action or one reassurance, and a checklist — deliberately not a percentage or a database status name. Sits above everything else on the dashboard because it answers the question the client actually opened the page to ask. */ .oc-engagement { display: flex; flex-direction: column; gap: 1.5rem; } .oc-engagement-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink-900); margin-top: .25rem; } .oc-engagement-detail { color: var(--ink-600); font-size: .95rem; max-width: 62ch; margin-top: .4rem; line-height: 1.55; } .oc-engagement-note { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-500); font-size: .875rem; font-weight: 600; } .oc-engagement-note.is-brand { color: var(--brand-700); } .oc-engagement-steps { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; list-style: none; margin: 0; padding: 0; padding-top: 1.25rem; border-top: 1px solid var(--line-2); } .oc-engagement-steps li { display: flex; align-items: center; gap: .6rem; font-size: .875rem; color: var(--ink-400); } .oc-engagement-steps li.is-done { color: var(--ink-700); } .oc-engagement-steps li.is-current { color: var(--brand-700); font-weight: 700; } .oc-engagement-dot { width: 1.35rem; height: 1.35rem; border-radius: 999px; flex-shrink: 0; border: 2px solid var(--line); display: grid; place-items: center; color: #fff; } .oc-engagement-steps li.is-done .oc-engagement-dot { background: var(--brand-600); border-color: var(--brand-600); } .oc-engagement-steps li.is-current .oc-engagement-dot { border-color: var(--brand-600); border-width: 2px; } @media (max-width: 640px) { .oc-engagement-steps { gap: .85rem 1.5rem; } } /* ---------- Prospect card: the pre-DECISION narrative (§7.2, PP-001 to PP-009) ---------- Reuses .oc-engagement's card shell; adds a plain numbered "what happens next" explainer (not a progress tracker — nothing here is done/current, it's instructions) and an inline contact block so "who do I ask" (§40) doesn't send a first-time prospect hunting through a separate page. */ .oc-next-steps, .oc-next-help { padding-top: 1.25rem; border-top: 1px solid var(--line-2); } .oc-next-steps ol { list-style: none; counter-reset: step; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .oc-next-steps ol li { counter-increment: step; display: flex; align-items: center; gap: .65rem; font-size: .9rem; color: var(--ink-700); } .oc-next-steps ol li::before { content: counter(step); width: 1.35rem; height: 1.35rem; flex-shrink: 0; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-weight: 700; font-size: .78rem; display: grid; place-items: center; } /* ---------- Hero banner (theme .oc-hero provides the gradient; we add padding/content) ---------- */ .oc-hero-body { padding: 1.6rem 1.85rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .oc-hero-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; } .oc-hero-sub { color: rgba(255, 255, 255, .8); font-size: .9rem; margin-top: .3rem; max-width: 52ch; } .oc-hero-metrics { display: flex; gap: 2rem; } .oc-hero-metric .v { font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; } .oc-hero-metric .l { font-size: .74rem; color: rgba(255, 255, 255, .75); margin-top: .3rem; text-transform: uppercase; letter-spacing: .04em; } /* ---------- Stat / KPI cards ---------- */ .oc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .oc-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.15rem 1.25rem; transition: box-shadow .2s, transform .2s, border-color .2s; } .oc-kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--line-strong); } .oc-kpi-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); font-weight: 600; } .oc-kpi-value { font-size: 1.9rem; font-weight: 800; color: var(--ink-900); margin-top: .3rem; letter-spacing: -.02em; line-height: 1; } .oc-kpi-foot { font-size: .78rem; color: var(--ink-400); margin-top: .3rem; } /* ── Client proposal cards (PORTAL-UI-011/012) ─────────────────────────────────────────────────────── A client has one or two proposals and one question about each; the admin table this replaced was built to scan dozens. Cards, not rows, so the status and the action are the two things the eye lands on. */ .oc-proposal-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } /* minmax(0,1fr), not the implicit auto column: an auto grid track will not shrink below its content, so one nowrap row of buttons pushed the whole card past the right edge of the screen and off-centre. */ .oc-proposal-cards > li { min-width: 0; } .oc-proposal-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; } .oc-proposal-card-title { font-size: 1.05rem; font-weight: 700; color: var(--ink-900); margin: 0; line-height: 1.3; } /* A declined proposal stays listed (the client's own decision, and why a later copy of the same title exists) but must not read as a second open proposal beside the live one: quieter by opacity only, so the badge, date and buttons keep their contrast for anyone who does need to read it. */ .oc-proposal-card.is-closed { opacity: .72; } .oc-proposal-card.is-closed:hover, .oc-proposal-card.is-closed:focus-within { opacity: 1; } .oc-proposal-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); } /* BROWSER AUTOFILL / SUGGESTION HOVER (by request, everywhere). Hovering a remembered suggestion makes the browser paint the INPUT only — inside a .field-group (search icon + input, dialling code + number) that left the group's padding and the code segment unpainted, so the highlight covered part of the field. The browser's own paint is covered with one tint (inset shadow — the only thing that beats its !important background) and the SAME tint fills the whole group, so the highlight is the full field. A plain .field-input gets the same tint, so every field reads alike. */ :root { --oc-autofill: color-mix(in srgb, var(--brand-500, #a3dc2f) 9%, var(--surface, #fff)); } .field-input:-webkit-autofill, .field-input:-webkit-autofill:hover, .field-input:-webkit-autofill:focus, .field-group > input:-webkit-autofill, .field-group > input:-webkit-autofill:hover, .field-group > input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--oc-autofill) inset; box-shadow: 0 0 0 1000px var(--oc-autofill) inset; -webkit-text-fill-color: var(--ink-900); caret-color: var(--ink-900); } /* The theme's focus ring is a box-shadow too — keep it alongside the tint. */ .field-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--oc-autofill) inset, var(--ring); box-shadow: 0 0 0 1000px var(--oc-autofill) inset, var(--ring); } .field-group:has(> input:-webkit-autofill) { background: var(--oc-autofill); } .field-group:has(> input:-webkit-autofill) > .oc-searchable .oc-searchable-trigger { background: transparent; } /* Invoice view, Billing card (by request): its items table scrolls sideways, and the scrollbar ran past the card's rounded corners at either end. Clipping the card to its own shape keeps it inside. */ /* Specificity matters: ".oc-card:has(.oc-table-scroll) { overflow: visible }" (narrow-viewport layer, for card menus) is 0,2,0 and sits later in this file, so a bare class here lost to it and the scrollbar ran past the corners. */ .oc-card.oc-inv-view-billing:has(.oc-table-scroll) { overflow: hidden; } .oc-inv-view-billing > .oc-table-scroll { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* A "no data" dash alone in a table cell sits in the middle of its box, both ways (by request) — oc-empty-cell.js tags those cells. !important: column rules (text-right on amounts, etc.) would otherwise push the dash to one side. */ td.is-empty-cell { text-align: center !important; vertical-align: middle !important; } /* THE CLIENT PORTAL WORDMARK — wwwroot/FINAL_LOGO.png (by request): white "CTACER" and the lime ring on a SOLID BLACK ground. That black is made to disappear rather than boxed: on a dark surface `lighten` keeps only what is brighter than the surface (the ring and the letters); on a light surface the image is inverted (dark letters; hue-rotate keeps the ring green) and `multiply` drops its now-white ground. */ .oc-brand-logo, .oc-auth-mini-wordmark { display: block; width: auto; max-width: 100%; filter: invert(1) hue-rotate(180deg); mix-blend-mode: multiply; } .dark .oc-brand-logo, .dark .oc-auth-mini-wordmark { filter: none; mix-blend-mode: lighten; } .oc-brand-logo { height: 2.1rem; margin-left: -.45rem; } /* a touch larger now that "Client Portal" no longer sits under it (by request) */ .oc-auth-mini-wordmark { height: 3.4rem; margin-left: -.5rem; } /* larger so it reads over the background video (by request) */ /* The sign-in brand panel is always dark. */ .oc-auth-wordmark { display: block; height: 3.2rem; width: auto; margin-left: -.65rem; mix-blend-mode: lighten; position: relative; top: -1rem; } /* larger, "Client Portal" removed (by request) */ .oc-brand-name-logo { display: flex; flex-direction: column; justify-content: center; gap: .15rem; min-width: 0; } .oc-brand-name-logo small { padding-left: .05rem; } /* The Octacer mark (_OctacerRing, an ) shares its class name with the progress ring (div.oc-ring), whose conic-gradient background and 50% radius painted a FILLED circle behind the logo — the "filled green circle" beside "Octacer / Client support" on Home (by request). The SVG mark draws itself; it never takes the progress ring's disc. */ svg.oc-ring { background: none; border-radius: 0; } /* The ring badge only stands in when the sidebar is collapsed and the wordmark has no room. */ .oc-brand-badge-collapsed { display: none !important; } .oc-sidebar.is-collapsed .oc-brand-badge-collapsed { display: grid !important; } /* Portal Payment receipts: the "Send proof of a payment you've made" line under Upload receipt is hidden on a phone (by request). */ @media (max-width: 40rem) { .oc-upload-summary .oc-upload-summary-hint { display: none !important; } } /* Portal Help & Contact: email, phone and website one per line, aligned on the same left edge; a long address wraps inside its own button on a phone instead of running off it. */ .oc-help-contacts { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; } .oc-help-contacts .btn { max-width: 100%; justify-content: flex-start; text-align: left; white-space: normal; overflow-wrap: anywhere; } /* Desktop only (by request): email, phone and website sit in ONE line instead of stacking. The stacked layout above stays for tablets and phones, where three buttons side by side would not fit. */ @media (min-width: 64rem) { .oc-help-contacts { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: .75rem; } .oc-help-contacts .btn { flex: 0 0 auto; white-space: nowrap; } } /* Portal pages with nothing on them yet, on a phone (by request): the empty states kept their desktop padding and icon size and crowded a 375px screen. Tighter, and long words wrap. */ @media (max-width: 40rem) { .oc-brand-octacer .oc-blank { padding: 2rem 1.1rem; } .oc-brand-octacer .oc-blank-icon { width: 3.75rem; height: 3.75rem; margin-bottom: 1rem; font-size: 1.4rem; } .oc-brand-octacer .oc-blank-text { font-size: .875rem; } .oc-brand-octacer [role="status"].py-14 { padding-block: 2.25rem; padding-inline: 1rem; } .oc-brand-octacer [role="status"] :is(h3, p) { overflow-wrap: anywhere; } } /* Client page tab row: no "→" on the Proposals tab (by request). The arrow is printed by the octa-core _TabbedView primitive, which is not edited here — hidden for this one tab row only. */ #client_tabs .oc-tab-link > span[aria-hidden="true"] { display: none; } /* Agreements list (portal): Add Signature · View Agreement · Download (icon) on ONE line (by request). */ .oc-agreement-actions { flex-wrap: nowrap; } .oc-agreement-actions .btn { white-space: nowrap; } .oc-agreement-actions .oc-icon-btn { flex: none; } @media (max-width: 40rem) { .oc-agreement-actions { gap: .4rem; } .oc-agreement-actions .btn:not(.oc-icon-btn) { flex: 1 1 auto; min-width: 0; padding-inline: .6rem; font-size: .8rem; justify-content: center; } /* "Standalone agreement — not tied to a proposal" on one line beside its icon (by request). */ /* Icon and text on ONE line: the row is flex-wrap, so the text (one item) dropped under the icon when it did not fit. No wrap and a smaller size, so the whole line fits beside its icon. */ .oc-agreement-standalone { flex-wrap: nowrap; gap: .25rem; font-size: .66rem; white-space: nowrap; min-width: 0; } /* The document icon is dropped on a phone (by request): the text is clear without it and gets the full width. */ .oc-agreement-standalone svg, .oc-agreement-standalone i { display: none; } } /* Accept / Request changes / Decline on an open proposal card, each confirmed in its own small panel. */ .oc-proposal-decide { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .oc-proposal-decide .oc-btn-decline { color: var(--danger-600, #dc2626); border-color: currentColor; } .oc-proposal-decide-panel { margin-top: .75rem; padding: .85rem 1rem; display: grid; gap: .6rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); } .oc-proposal-decide-panel .field { margin: 0; } .oc-proposal-decide-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; } @media (max-width: 40rem) { /* One line on a phone: three equal buttons rather than a wrapped stack. */ .oc-proposal-decide { flex-wrap: nowrap; } .oc-proposal-decide .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: .4rem; font-size: .8rem; white-space: normal; text-align: center; line-height: 1.2; } .oc-proposal-decide .btn i { display: none; } } /* Quoted Octacer reply on the prospect card — the answer itself, not a link to go and find it. */ .oc-quote { margin: 0; padding: .5rem .75rem; border-left: 3px solid var(--brand-500, var(--ink-400)); background: var(--surface-muted); border-radius: var(--radius-sm, .375rem); font-size: .88rem; color: var(--ink-700); font-style: italic; } /* ---------- Funnel row ---------- */ .oc-funnel { display: flex; flex-wrap: wrap; gap: .6rem; } .oc-funnel-step { flex: 1; min-width: 108px; background: var(--line-2); border: 1px solid var(--line); border-radius: .75rem; padding: .85rem .6rem; text-align: center; } .oc-funnel-step .n { font-size: 1.35rem; font-weight: 800; color: var(--brand-700); line-height: 1; } .oc-funnel-step .s { font-size: .72rem; color: var(--ink-500); margin-top: .3rem; } /* ---------- Grids ---------- */ .oc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; } .oc-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; } .oc-cockpit { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.15rem; } .oc-card-wide { grid-column: 1 / -1; } /* ---------- Definition list / plain list inside cards ---------- */ .oc-dl { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: .5rem 1rem; margin: 0; } .oc-dl dt { color: var(--ink-500); font-size: .82rem; } .oc-dl dd { margin: 0; color: var(--ink-900); font-size: .875rem; font-weight: 500; } .oc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; } .oc-list li { font-size: .875rem; color: var(--ink-700); } .oc-checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; font-size: .875rem; color: var(--ink-700); } .oc-niche-stats { display: flex; gap: 1.25rem; font-size: .82rem; color: var(--ink-600); } .oc-add-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .oc-assist-links { display: flex; flex-wrap: wrap; gap: .45rem; } .oc-muted { color: var(--ink-400); font-size: .85rem; } .oc-link { color: var(--brand-700); font-weight: 600; text-decoration: none; } .oc-link:hover { text-decoration: underline; } /* .oc-link on a cannot be its own scroll container. */ .oc-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .oc-card .oc-table { background: transparent; border: none; border-radius: 0; box-shadow: none; } /* ---------- Toolbar / forms ---------- */ .oc-toolbar { display: flex; gap: .6rem; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; } .oc-toolbar .field-group { flex: 1 1 16rem; max-width: 20rem; } /* ── FILTER BAR ─────────────────────────────────────────────────────────────────────────────────────── .oc-toolbar is a flex row, which is right for a list with a search box and one dropdown and wrong the moment there are six: controls of different natural widths wrap wherever they happen to run out of room, so nothing lines up column to column, a date range stretches across a whole row on its own, and there is no way to tell which control is which without reading every placeholder. .oc-filterbar is the answer for the grids that genuinely filter on many columns. A GRID, not a flex row: every control gets the same track width, so they align down the page however many there are and however the bar wraps. Each carries a real
, so without this the buttons stack at the left of the column while the header label stays at the far right — a gap that grows with the column's width (.oc-table-fixed gives it 34%, so it grows a lot). Every markup use of .oc-row-actions inside a is an .oc-col-actions cell; the one standalone use (a contract's detail toolbar) is not, and correctly keeps starting at the left. */ .oc-col-actions .oc-row-actions { justify-content: flex-end; } /* …EXCEPT on the dense admin grids, where the header and the buttons line up on the LEFT instead. The column is shrink-to-fit (width: 1%), so its width is set by whichever is wider — and "ACTIONS" is wider than three icon buttons. Right-aligning the buttons under a header that starts at the left of that same cell left the two visibly out of line, the icons sitting in from the word above them. Agreeing on one edge is what fixes it, and left is the edge the rest of the row is read from. Vertical alignment comes from the dense table's own `vertical-align: middle`. */ .oc-table-dense th.oc-col-actions, .oc-table-dense td.oc-col-actions { text-align: left; } .oc-table-dense .oc-col-actions .oc-row-actions { justify-content: flex-start; } /* Vertically the theme's own direction is kept — the bubble opens UPWARD, and the table header leaves room above the first row. (There is no fixing the vertical axis with overflow anyway: once overflow-x is auto, a `visible` overflow-y computes to auto, so the two axes clip together whatever you write.) */ /* Classic "shrink to fit" table trick: width:1% forces auto-layout to size the column to its content's natural (single-line) width instead of splitting leftover space with it — without this, an Actions column with only a couple of short buttons still gets handed a wide, arbitrary share of the row, which is exactly what starves it back down until the buttons wrap onto their own line. */ /* ---------- Table footers ---------- The theme styles thead th and tbody td and stops there, so a tfoot cell inherits NO padding: the total sat flush against the card and the rounded corner clipped the last digits off it. Mirrors the body's metrics, with a rule above it because a total is a different kind of row from the ones it sums. */ .oc-table tfoot td, .oc-table tfoot th { padding: .75rem .875rem; border-top: 1px solid var(--line); color: var(--ink-900); font-weight: 600; background: var(--surface); } .oc-table tfoot td:first-child, .oc-table tfoot th:first-child { padding-left: 1.25rem; } .oc-table tfoot td:last-child, .oc-table tfoot th:last-child { padding-right: 1.25rem; } /* The last row of a card needs the corner's radius as clearance, or its text tucks under the curve. */ .oc-card > .oc-table-scroll:last-child .oc-table tfoot tr:last-child td, .oc-card > .oc-table-scroll:last-child .oc-table tfoot tr:last-child th { padding-bottom: 1rem; } .oc-col-actions { width: 1%; white-space: nowrap; } /* Compound with the cell, not bare .is-danger/.is-warning — those already mean something specific on .oc-tile-facts dd and .oc-tile-amount-sub, and a bare rule would leak into every future table cell that reuses the name for something else. Same tone/weight as those, for a table cell reading the same fact (money overdue, an invoice not yet published to the portal). */ .oc-table td.is-danger { color: var(--danger); font-weight: 600; } .oc-table td.is-warning { color: var(--warning); font-weight: 600; } /* A column that earns its place on a wide screen and not on a phone. Hidden rather than shrunk: eight columns squeezed into 375px is a table nobody can read, and side-scrolling to reach Status is worse than not showing Paid. The figures dropped here are all on the invoice's own page. */ @media (max-width: 767px) { .oc-table th.oc-col-optional, .oc-table td.oc-col-optional { display: none; } } /* ---------- Record list: the table's mobile form ---------- portal-ux's table/list contract: a table is for comparing columns, a list is for scanning records, and a list reflows before forcing horizontal overflow. Both are rendered and CSS picks one, so there is no toggle to remember and no script to run — a phone gets cards, a laptop keeps the sortable table. */ .oc-record-list { display: none; list-style: none; margin: 0; padding: 0; } /* Portal Projects shows cards at every width by request, not just below the mobile breakpoint — scoped to its own class so the shared table/list toggle above stays untouched everywhere else that uses it (Invoices, Receipts, ...). Same specificity as the rule it overrides (one class each); this one wins by coming later in the file. */ .oc-record-list-always { display: block; } .oc-record { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: .75rem; } .oc-record:last-child { border-bottom: 0; } .oc-record-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .oc-record-title { font-weight: 700; color: var(--ink-900); } /* Combined selector, not source order: a mobile card whose title is a real link (Contracts, Projects) still needs to look clickable — .oc-record-title alone would otherwise repaint .oc-link's brand colour back to plain ink, the same same-specificity/source-order trap as .oc-check-inline vs .oc-delete-scope. */ .oc-record-title.oc-link { color: var(--brand-700); } /* Two columns of label-over-value: four facts fit a 320px screen without a figure wrapping mid-number. */ .oc-record-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; margin: 0; } .oc-record-facts dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); } .oc-record-facts dd { margin: 0; font-size: .9rem; color: var(--ink-900); } .oc-record-facts dd.is-due { font-weight: 700; } /* A fact whose value is a phrase rather than a figure — it needs the row to itself. */ .oc-record-facts .oc-record-wide { grid-column: 1 / -1; } /* The one-line relationship under a card title ("For proposal …" / "Agreement …"): the proposal an agreement belongs to, or the agreement that followed a proposal. Quiet, one row, inline badge — it answers "is this the same deal?" without becoming a second title. */ .oc-record-link { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .25rem 0 0; font-size: .8rem; color: var(--ink-500); } .oc-record-link i, .oc-record-link svg { color: var(--ink-400); } .oc-record-facts dd .badge { vertical-align: middle; } .oc-ml-xs { margin-left: .4rem; } .oc-record-foot { display: flex; justify-content: flex-end; } /* §167: ~44px, measured on the container. */ .oc-record-foot .btn { min-height: 2.75rem; } /* A block that earns its place on a wide screen and not on a phone. Used for the KPI strips: two tall tiles above a list push the records themselves off the first screen, and the same figures are in the rows underneath. */ .oc-hide-sm { display: revert; } /* Opt-in by class. A blanket rule would hide every portal table below 768px, including the pages with no card list to fall back to — they would show nothing at all. */ @media (max-width: 767px) { .oc-table-swap, .oc-hide-sm { display: none; } .oc-record-list { display: block; } } /* color-mix off the token rather than a fixed tint: #fef2f2 is a near-white wash that stays near-white on a dark card, so the icon lost its contrast the moment the theme flipped (accessibility.md, theme axis). */ .oc-icon-danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); } .oc-icon-warning { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); } .oc-icon-success { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); } .oc-icon-muted { background: var(--line-2); color: var(--ink-600); } .oc-icon-brand { background: var(--brand-50); color: var(--brand-700); } .dark .oc-icon-brand { background: color-mix(in srgb, var(--brand-500) 20%, transparent); color: var(--brand-100); } /* ---------- Kanban ---------- */ .oc-kanban { display: flex; gap: .9rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; } .oc-kcol { flex: 0 0 268px; background: var(--line-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: .7rem; } .oc-kcol-head { font-size: .8rem; font-weight: 700; color: var(--ink-700); display: flex; align-items: center; justify-content: space-between; padding: .25rem .35rem .6rem; } .oc-kcol-body { display: flex; flex-direction: column; gap: .55rem; min-height: 60px; } .oc-kcard { background: var(--surface); border: 1px solid var(--line); border-radius: .7rem; padding: .7rem .8rem; cursor: grab; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .1s; } .oc-kcard:hover { box-shadow: var(--shadow-md); } .oc-kcard:active { cursor: grabbing; } .oc-kcard-sub { font-size: .75rem; color: var(--ink-400); margin-top: .4rem; display: flex; gap: .3rem; flex-wrap: wrap; } .oc-dragging { opacity: .5; } .oc-col-over { outline: 2px dashed var(--brand-400, #818cf8); outline-offset: 2px; border-radius: var(--radius-lg); } /* ---------- Get-started tiles (empty dashboard) ---------- */ .oc-start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; } .oc-start { display: block; padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; transition: box-shadow .2s, transform .1s, border-color .2s; } .oc-start:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--brand-200, #c7d2fe); } .oc-start-ic { width: 2.4rem; height: 2.4rem; border-radius: .7rem; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-700); margin-bottom: .6rem; } .oc-start-ic i { width: 20px; height: 20px; } .oc-start-t { display: block; font-weight: 700; color: var(--ink-900); font-size: .92rem; } .oc-start-d { display: block; color: var(--ink-500); font-size: .82rem; margin-top: .25rem; line-height: 1.45; } /* ---------- Guide / help page ---------- */ .oc-obj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem; margin-bottom: 1.75rem; } .oc-obj { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem; } .oc-obj-name { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--ink-900); font-size: .95rem; } .oc-obj-name i { width: 17px; height: 17px; color: var(--brand-600); } .oc-obj-desc { color: var(--ink-500); font-size: .84rem; margin-top: .4rem; line-height: 1.5; } .oc-obj-arrow { display: flex; align-items: center; color: var(--ink-300, #cbd5e1); } .oc-steps { display: flex; flex-direction: column; gap: 0; margin: 0 0 1.75rem; } .oc-step { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; padding-bottom: 1.4rem; position: relative; } .oc-step:not(:last-child)::before { content: ""; position: absolute; left: 1.2rem; top: 2.4rem; bottom: 0; width: 2px; background: var(--line); } .oc-step-num { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: linear-gradient(180deg, var(--brand-500), var(--brand-700)); color: var(--primary-foreground); display: grid; place-items: center; font-weight: 800; font-size: .9rem; z-index: 1; box-shadow: 0 2px 6px -1px rgba(79,70,229,.5); } .oc-step-body { padding-top: .25rem; } .oc-step-title { font-weight: 700; color: var(--ink-900); font-size: .98rem; } .oc-step-text { color: var(--ink-600); font-size: .88rem; line-height: 1.55; margin-top: .3rem; } .oc-step-text code { background: var(--line-2); padding: .05rem .35rem; border-radius: .3rem; font-size: .82em; color: var(--ink-700); } .oc-step-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; } .oc-guide-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; } .oc-checkline { display: flex; gap: .55rem; align-items: flex-start; font-size: .875rem; color: var(--ink-700); padding: .3rem 0; } .oc-checkline i { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .15rem; } .oc-checkline.ok i { color: var(--success); } .oc-checkline.wire i { color: var(--warning); } /* ============================================================ PREMIUM LAYER — data-viz + richer components (theme untouched) ============================================================ */ /* ...but never on a block that hosts a modal. This animation keeps a transform in effect (fill: both), and a transformed element becomes the containing block AND stacking context for its position:fixed descendants. A modal inside one is then sized to that block instead of the viewport, and its z-index is trapped in the block's context, so it paints behind whatever the page puts above it. :has() exempts such blocks automatically, so a modal dropped into any card keeps working without anyone remembering this rule. */ /* Section header (icon + title + sub + optional action) */ .oc-section { display: flex; align-items: center; gap: .75rem; margin: 1.75rem 0 1rem; } .oc-section-ic { width: 2rem; height: 2rem; border-radius: .6rem; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-700); flex: 0 0 auto; } /* The glyph is sized to its 17px box and centred in it — it used to inherit an 18px+ font size and spill down-right, so the icon sat off-centre in its tile. */ .oc-section-ic i { width: 17px; height: 17px; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .oc-section-t { font-weight: 800; letter-spacing: -.01em; color: var(--ink-900); font-size: 1.02rem; } .oc-section-s { color: var(--ink-400); font-size: .82rem; } /* New agreement's "Fields shared across these agreements" card (Create.cshtml) — Option C from the empty-state UI options: a thin muted strip until #shared_agreement_fields actually has fields, then the full card. Driven by :has() reading is-empty/is-filled, which _SharedAgreementFields.cshtml restamps on its own root every time the htmx swap runs, so this reacts live to every tick/untick, not just on page load. */ .oc-shared-s-filled { display: none; } .oc-shared-body { display: none; } .oc-shared-header { background: var(--surface-muted); border: 1px solid var(--line-2); border-radius: .75rem; padding: .7rem 1rem; margin: 1.75rem 0 1rem; } .oc-shared-header .oc-section-ic { background: var(--line-2); color: var(--ink-400); } .oc-shared-info-card:has(#shared_agreement_fields.is-filled) .oc-shared-header { background: transparent; border: none; border-radius: 0; padding: 0; } .oc-shared-info-card:has(#shared_agreement_fields.is-filled) .oc-shared-header .oc-section-ic { background: var(--brand-50); color: var(--brand-700); } .oc-shared-info-card:has(#shared_agreement_fields.is-filled) .oc-shared-s-empty { display: none; } .oc-shared-info-card:has(#shared_agreement_fields.is-filled) .oc-shared-s-filled { display: block; } .oc-shared-info-card:has(#shared_agreement_fields.is-filled) .oc-shared-body { display: block; } /* New agreement, desktop: ONE main card under the client — templates stacked and compact on the left, the shared-sections box on the right with the rest of the width (Create.cshtml, .oc-agreement-main). Layout only; the panels are unchanged. Below 60rem the wrapper is a plain block and each panel is its own screen as before (the tab rule for it is in the 60rem block further down). */ @media (min-width: 60.0625rem) { .oc-agreement-main { display: grid; grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line-2); border-radius: 1rem; background: var(--surface); } .oc-agreement-main > [data-oc-tab-panel="picker"] { grid-column: 1; grid-row: 1; min-width: 0; } .oc-agreement-main > [data-oc-tab-panel="shared"] { grid-column: 2; grid-row: 1; min-width: 0; } .oc-agreement-main .oc-section { margin-top: 0; flex-wrap: wrap; } .oc-agreement-main .oc-shared-header { margin-top: 0; } .oc-agreement-main .oc-template-grid { grid-template-columns: 1fr; gap: .75rem; } .oc-agreement-main .oc-template-card { padding: .85rem 1rem; } /* By request: no thumbnail and no "N sections · N required" line on the agreement cards — name, "When to use", the checkbox and "All N sections" are what is left (as on a phone, minus the list). */ .oc-agreement-main .oc-thumb, .oc-agreement-main .oc-template-meta { display: none; } /* Nothing shared yet (none or one type ticked): no empty right-hand column, by request. The shared box is hidden and the templates use the whole card, three across; ticking a second type fills #shared_agreement_fields (is-filled) and the two-column layout returns. */ .oc-agreement-main:has(#shared_agreement_fields.is-empty) { grid-template-columns: minmax(0, 1fr); } .oc-agreement-main:has(#shared_agreement_fields.is-empty) > [data-oc-tab-panel="shared"] { display: none; } /* auto-FIT, not auto-fill, by request: the three cards stretch to fill the whole box instead of leaving an empty fourth track on the right. */ .oc-agreement-main:has(#shared_agreement_fields.is-empty) .oc-template-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } /* Each card's title on ONE line, and the "When to use" box as wide as the card (the body kept a 1.75rem right gutter from the proposal card's corner badge, which agreement cards do not have). */ .oc-agreement-main .oc-template-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-agreement-main .oc-template-body { padding-right: 0; } /* "Start drafting" lives at the bottom beside Cancel on desktop (Create.cshtml, .oc-batch-start-foot), so the copy beside the Template heading is hidden here. */ .oc-agreement-main [data-oc-tab-panel="picker"] .oc-section > .oc-head-actions:has([data-oc-batch-start]) { display: none; } /* ...and that bottom row is a STICKY bar, by request: at the very end of a long page Cancel and Start drafting were easy to never scroll to. It rides the bottom edge of the window the whole time, the same place the phone keeps its own button, and settles into its normal spot at the end. */ .oc-form-actions:has(> .oc-batch-start-foot) { position: sticky; bottom: 0; z-index: 20; margin-top: 1rem; padding: .75rem 1.25rem; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--line-2); border-radius: .9rem .9rem 0 0; box-shadow: 0 -6px 18px rgba(15, 23, 42, .06); } } /* Numbered, collapsible groups inside that card (_SharedAgreementFields.cshtml). Native
like .oc-more — opens with no script; shared-fields-card.js only toggles is-complete and the counts. */ .oc-sharedgroup { border: 1px solid var(--line-2); border-radius: .75rem; margin-bottom: .75rem; background: var(--surface); } .oc-sharedgroup-summary { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; cursor: pointer; list-style: none; } .oc-sharedgroup-summary::-webkit-details-marker { display: none; } .oc-sharedgroup-summary:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; border-radius: .75rem; } .oc-sharedgroup[open] > .oc-sharedgroup-summary { border-bottom: 1px solid var(--line-2); } .oc-sharedgroup-num { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--brand-50); color: var(--brand-700); font-weight: 800; font-size: .9rem; } .oc-sharedgroup-titles { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .oc-sharedgroup-t { font-weight: 700; color: var(--ink-900); font-size: .95rem; } .oc-sharedgroup-s { color: var(--ink-400); font-size: .8rem; } .oc-sharedgroup-count { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--ink-500); white-space: nowrap; font-variant-numeric: tabular-nums; } .oc-sharedgroup-count .oc-sharedgroup-todo { color: var(--ink-300, #cbd5e1); } .oc-sharedgroup-count .oc-sharedgroup-done { display: none; color: var(--success); } .oc-sharedgroup.is-complete .oc-sharedgroup-done { display: inline-flex; } .oc-sharedgroup.is-complete .oc-sharedgroup-todo { display: none; } .oc-sharedgroup-chev { color: var(--ink-400); transition: transform .15s ease; display: inline-flex; } .oc-sharedgroup[open] .oc-sharedgroup-chev { transform: rotate(180deg); } .oc-sharedgroup-body { padding: 1rem; margin-bottom: 0; } .oc-sharedgroup-foot { display: flex; align-items: center; gap: .6rem; padding-top: 1rem; margin-top: .25rem; border-top: 1px solid var(--line-2); } .oc-sharedgroup-note { display: inline-flex; align-items: center; gap: .45rem; margin-right: auto; font-size: .8rem; color: var(--ink-500); } .oc-sharedgroup-note i { color: var(--brand-600); } @media (max-width: 40rem) { .oc-sharedgroup-s { display: none; } .oc-sharedgroup-foot { flex-wrap: wrap; } .oc-sharedgroup-note { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { .oc-sharedgroup-chev { transition: none; } } .oc-section .oc-head-actions { margin-left: auto; } /* Company / contact square avatar (initials) */ .oc-sq { width: 2.1rem; height: 2.1rem; border-radius: .55rem; display: grid; place-items: center; font-weight: 800; font-size: .78rem; color: var(--primary-foreground); flex: 0 0 auto; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); box-shadow: 0 2px 5px -1px rgba(79,70,229,.4); } .oc-sq-lg { width: 3rem; height: 3rem; border-radius: .7rem; font-size: 1rem; } .oc-idcell { display: flex; align-items: center; gap: .65rem; } .oc-idcell .sub { color: var(--ink-400); font-size: .78rem; } /* Score ring (conic-gradient) — set --v: 0..100 and --c: color */ .oc-ring { --v: 0; --c: var(--brand-600); width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--line-2) 0); position: relative; } .oc-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 1px 2px rgba(15,23,42,.05); } .oc-ring-in { position: relative; text-align: center; line-height: 1; } .oc-ring-v { font-size: 1.25rem; font-weight: 800; color: var(--ink-900); } .oc-ring-l { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-400); font-weight: 700; margin-top: .15rem; } .oc-ring-sm { width: 60px; height: 60px; } .oc-ring-sm .oc-ring-v { font-size: 1rem; } /* Horizontal meter */ /* Capped: the meter stretched to whatever the Progress column happened to be, so space-between threw "0/0" and "0%" to opposite ends of it and they stopped reading as one figure. */ .oc-meter { display: flex; flex-direction: column; gap: .3rem; max-width: 11rem; } .oc-meter-top { display: flex; justify-content: space-between; font-size: .78rem; color: var(--ink-500); } .oc-meter-top b { color: var(--ink-900); font-weight: 700; } .oc-meter-bar { height: .5rem; border-radius: 999px; background: var(--line-2); overflow: hidden; } .oc-meter-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); } .oc-meter-fill.warn { background: linear-gradient(90deg, #f59e0b, var(--warning)); } .oc-meter-fill.ok { background: linear-gradient(90deg, #10b981, var(--success)); } /* Progress-meter widths. The width of a progress bar is DATA, and .cshtml may not carry inline styles (CLAUDE.md §4) — so the percentage is rounded to the nearest 5 and rendered as a class. A Tailwind arbitrary value (w-[47%]) cannot work here either: the theme ships COMPILED Tailwind, so a class nobody wrote at build time does not exist in the stylesheet. Twenty-one real classes do. */ .oc-meter-fill.p-0 { width: 0%; } .oc-meter-fill.p-5 { width: 5%; } .oc-meter-fill.p-10 { width: 10%; } .oc-meter-fill.p-15 { width: 15%; } .oc-meter-fill.p-20 { width: 20%; } .oc-meter-fill.p-25 { width: 25%; } .oc-meter-fill.p-30 { width: 30%; } .oc-meter-fill.p-35 { width: 35%; } .oc-meter-fill.p-40 { width: 40%; } .oc-meter-fill.p-45 { width: 45%; } .oc-meter-fill.p-50 { width: 50%; } .oc-meter-fill.p-55 { width: 55%; } .oc-meter-fill.p-60 { width: 60%; } .oc-meter-fill.p-65 { width: 65%; } .oc-meter-fill.p-70 { width: 70%; } .oc-meter-fill.p-75 { width: 75%; } .oc-meter-fill.p-80 { width: 80%; } .oc-meter-fill.p-85 { width: 85%; } .oc-meter-fill.p-90 { width: 90%; } .oc-meter-fill.p-95 { width: 95%; } .oc-meter-fill.p-100 { width: 100%; } /* Legacy KPI stat tile (icon + big value + label). Named .oc-ktile because the record card further down owns .oc-tile — two different components cannot share one class. */ .oc-ktiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .oc-ktile { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.2rem 1.25rem; overflow: hidden; transition: box-shadow .2s, transform .15s, border-color .2s; } .oc-ktile:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--line-strong); } .oc-ktile::after { content: ""; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(79,70,229,.09), transparent 70%); } .oc-ktile-ic { width: 2.5rem; height: 2.5rem; border-radius: .7rem; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-700); margin-bottom: .85rem; } .oc-ktile-ic i { width: 19px; height: 19px; } .oc-ktile-v { font-size: 1.95rem; font-weight: 800; color: var(--ink-900); letter-spacing: -.02em; line-height: 1; } /* A tile whose value is WORDS rather than a figure — a client name, a status, a date. 1.95rem is sized for "USD 4,567,890.00"; a company name at that size wraps to three lines and stops being scannable, which is the opposite of what a tile is for. */ .oc-ktile-v-text { font-size: 1.05rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A tile whose "value" is genuinely absent — no price set, no date agreed. Nothing is wrong; there is simply nothing yet. The dash/"Not set" fallback used to render through .oc-ktile-v at full 800-weight size, which put the LEAST meaningful content in the tile at the LOUDEST possible size — a reader's eye lands on the empty tiles first, not the ones that actually say something. This keeps the layout (same slot, same tile) but drops the weight/size/color to read as absence rather than as a headline. */ .oc-ktile-v-muted { font-size: 1.05rem; font-weight: 600; color: var(--ink-400); letter-spacing: -.01em; line-height: 1.3; } .oc-ktile-l { font-size: .8rem; color: var(--ink-500); margin-top: .35rem; font-weight: 500; } /* A second, quieter figure under the label — the count is the headline, the currency total is context (e.g. "3 · USD 6,000.00 paid"), so it stays visually secondary rather than competing with oc-ktile-v. */ .oc-ktile-sub { font-size: .78rem; color: var(--ink-500); margin-top: .2rem; font-weight: 600; } /* Compact variant — a couple of small counts (e.g. paid/unpaid) don't need the full-size tile: capped column width keeps two equal cards from stretching edge-to-edge, and the smaller icon/type scale reads as one deliberate size rather than the same big KPI tile with a short number in it. */ .oc-ktiles-compact { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .oc-ktiles-compact .oc-ktile { padding: .85rem 1rem; } .oc-ktiles-compact .oc-ktile-ic { width: 2rem; height: 2rem; margin-bottom: .55rem; } .oc-ktiles-compact .oc-ktile-ic i { width: 15px; height: 15px; } .oc-ktiles-compact .oc-ktile-v { font-size: 1.4rem; } .oc-ktiles-compact .oc-ktile-l { font-size: .75rem; margin-top: .2rem; } .oc-ktiles-compact .oc-ktile-sub { font-size: .72rem; margin-top: .15rem; } /* Accent card — colored top bar (tier / service) */ .oc-acard { position: relative; } .oc-acard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--acc, var(--brand-600)); } /* Tier + service colors */ .tier-A { --acc: var(--success); } .tier-B { --acc: var(--info); } .tier-C { --acc: var(--warning); } .tier-D { --acc: var(--ink-400); } .badge-tier-A { color:#047857; background:#ecfdf5; } .badge-tier-B { color:#1d4ed8; background:#eff6ff; } .badge-tier-C { color:#b45309; background:#fffbeb; } .badge-tier-D { color:var(--ink-600); background:var(--line-2); } .oc-svc-dot { width:.5rem;height:.5rem;border-radius:50%;display:inline-block;margin-right:.35rem;background:var(--brand-500); } /* Funnel as proportional bars */ .oc-fbars { display: flex; flex-direction: column; gap: .55rem; } .oc-fbar { display: grid; grid-template-columns: 130px 1fr 2.5rem; align-items: center; gap: .75rem; } .oc-fbar-l { font-size: .82rem; color: var(--ink-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-fbar-track { height: 1.4rem; background: var(--line-2); border-radius: .5rem; overflow: hidden; } .oc-fbar-fill { height: 100%; width: 0; border-radius: .5rem; background: linear-gradient(90deg, var(--brand-400,#818cf8), var(--brand-600)); min-width: 3px; transition: width .6s cubic-bezier(.22,1,.36,1); } .oc-fbar-fill.acc { background: var(--acc); } .oc-fbar.tier-A .oc-fbar-fill.acc { background: linear-gradient(90deg,#34d399,var(--success)); } .oc-fbar.tier-B .oc-fbar-fill.acc { background: linear-gradient(90deg,#60a5fa,var(--info)); } .oc-fbar.tier-C .oc-fbar-fill.acc { background: linear-gradient(90deg,#fbbf24,var(--warning)); } .oc-fbar.tier-D .oc-fbar-fill.acc { background: linear-gradient(90deg,#cbd5e1,var(--ink-400)); } .oc-fbar-n { font-size: .85rem; font-weight: 700; color: var(--ink-900); text-align: right; } /* Two-column deal header */ .oc-deal-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .oc-rings-row { display: flex; gap: 1.1rem; justify-content: space-around; flex-wrap: wrap; } /* Cockpit block state chip */ .oc-block-done { color: var(--success); } .oc-block-todo { color: var(--ink-300, #cbd5e1); } /* ---------- Responsive: collapse the sidebar to a top bar ---------- */ /* ---------- octa-clients: size inline SVG icons the same as the lucide the shell was built for ---------- */ .oc-brand-badge svg { width: 18px; height: 18px; } .oc-ktile-ic svg { width: 19px; height: 19px; } .oc-start-ic svg { width: 20px; height: 20px; } .oc-section-ic svg { width: 17px; height: 17px; } .oc-card-title svg { width: 16px; height: 16px; } /* ============================================================ Font Awesome glyph sizing for shell chrome. The theme pivoted icons from Lucide inline-SVG to Font Awesome font glyphs (rendered as ), which size by FONT-SIZE, not width/height. Size the glyphs where the shell expects a specific icon size. ============================================================ */ .oc-brand-badge i { font-size: 1.05rem; } .oc-nav-link i, .oc-side-foot i, .oc-icon-btn i, .oc-card-title i, .oc-checkline i, .oc-obj-name i { font-size: 1rem; } .oc-ktile-ic i, .oc-start-ic i, .oc-section-ic i { font-size: 1.15rem; } .oc-empty-icon i, .oc-icon-box i { font-size: 1.25rem; } /* Centre the glyph in its box. Html.Icon's default w-4 h-4 pins the to a 1rem square while the glyph renders at 1.25rem, so it spilled out to the right — a wide icon (the scales on "No pricing yet") sat visibly off-centre. Sized to its own glyph instead, the box's flex centring does the rest. */ .oc-empty-icon i, .oc-icon-box i { width: auto; height: auto; line-height: 1; } /* The same fix for three more icon boxes that were never given it (by request): the admin dashboard's Welcome icon, the portal Home's "Nothing is waiting" icon, and the empty-state primitive's round badge (e.g. Receipts' "Nothing sent yet") — glyph sized to itself, so the box's own centring works. */ .oc-welcome-icon i, .oc-brand-octacer .oc-blank-icon i, [role="status"] > .rounded-full > i { width: auto; height: auto; line-height: 1; } [role="status"] > .rounded-full.size-16 > i { font-size: 1.6rem; } [role="status"] > .rounded-full.size-12 > i { font-size: 1.15rem; } .oc-land-badge i { font-size: .9rem; } /* ============================================================ Tailwind utility supplement. Written when the theme shipped a COMPILED Tailwind build that only carried the utilities Metronic itself used; octa-core a13f714 moved the theme to the Tailwind browser CDN, which generates every utility on demand, so these are now duplicates rather than the only definition. Kept because they also serve the two pages that must render with no external request (proposal + PDF), and because dropping them would change nothing except the risk of a silent regress. Do not add to this list — author Tailwind utilities directly. ============================================================ */ .m-0 { margin: 0; } .mt-8 { margin-top: 2rem; } .p-6 { padding: 1.5rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .pl-3 { padding-left: .75rem; } .max-w-3xl { max-width: 48rem; } .min-h-screen { min-height: 100vh; } .space-y-1 > * + * { margin-top: .25rem; } .font-mono { font-family: var(--font-sans); } .text-gray-400 { color: var(--ink-400); } .text-gray-900 { color: var(--ink-900); } .text-brand-600 { color: var(--brand-600); } .bg-gray-100 { background-color: var(--line-2); } .empty\:hidden:empty { display: none; } .hover\:underline:hover { text-decoration: underline; } @media (min-width: 1024px) { .lg\:grid-cols-\[1fr_320px\] { grid-template-columns: 1fr 320px; } } /* ============================================================ Auth split-screen (anonymous portal auth pages). Replaces the Tailwind gradient/arbitrary-value markup + inline