/* ========================================================================== CrewSheet styles: pages/home.css ========================================================================== Home dashboard: header, year-to-date card, KPI units, tips. Part of the CrewSheet stylesheet set, loaded in this order by Views/Shared/_Layout.cshtml: base.css > components.css > pages/home.css > pages/jobs.css > pages/zones.css > pages/documents.css > pages/worklist.css > pages/reports.css > pages/settings.css Section numbers are the same as in the old single site.css, so view comments like "components.css 23" still point at the right place. New sections: next free number, in the file for that area. SECTIONS IN THIS FILE 13 HOME DASHBOARD (scoped to .cs-home so other pages are unaffected) 19 HOME FINISHING TOUCHES 20 HOME: SCALE-UP, HEADER & YEAR-TO-DATE CARD 21 HOME: SECOND SCALE-UP + NEW JOB BUTTON BESIDE THE FIRST KPI CARD 30 HOME HEADER AT MEDIUM WIDTHS 44 HOME "NEEDS YOUR ATTENTION" TIPS (Views/Home/_Snapshot, Services/HomeTipsService) 45 HOME: TOOLBAR UNDER THE BANNER + COUNTS IN THE TABLE TITLE BARS 46 HOME BANNER THAT WRAPS INSTEAD OF SQUEEZING (any width 768px+) 47 HOME: ATTENTION LINE IN THE TOOLBAR (between Working in and + New Job) 68 HOME: ATTENTION LINE IN THE BANNER (right of the company name) 70 HOME: EACH BOX'S TABLE IN ITS OWN COLOR (blue jobs, gold quotes, red invoices, green work lists) 72 HOME: "GET STARTED" CHECKLIST (new companies, until the first quote goes out) ========================================================================== */ /* ========================================================================== 13. HOME DASHBOARD (scoped to .cs-home so other pages are unaffected) Order on the page: header bar -> 2x2 grid of units (KPI card + panel) ========================================================================== */ /* ---------- 13a. Page wrapper (keeps tables narrow on big screens) ---------- */ .cs-home { max-width: var(--cs-home-max-width); margin: 0 auto; } /* ---------- 13b. Header bar ---------- */ .cs-home .cs-dash-bar { margin-bottom: var(--cs-gap); padding: 0.8rem 1.25rem; background: linear-gradient(180deg, var(--cs-surface) 0%, var(--cs-blue-50) 100%); border-color: var(--cs-blue-200); border-bottom: 3px solid var(--cs-gold); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-md); } .cs-home .cs-dash-header { gap: 0 1rem; } .cs-home .cs-dash-header > * { min-width: 0; } .cs-home .cs-dash-logo { max-height: 48px; max-width: 110px; border-radius: var(--cs-radius-md); } .cs-home .cs-dash-titles { text-align: center; } .cs-home .cs-dash-title { margin: 0; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; } .cs-home .cs-dash-sub { margin-top: 0.15rem; font-size: 0.8rem; color: var(--cs-muted); } /* ---------- 13c. 2x2 grid (stacks on phones, see 13i) ---------- */ .cs-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cs-gap); /* space between left and right units */ row-gap: var(--cs-gap-lg); /* larger space between the top and bottom rows */ align-items: start; } /* cs-section-card sets margin-bottom with !important, so the grid needs the same */ .cs-home-grid .cs-section-card { margin-bottom: 0 !important; } /* ---------- 13d. KPI card base (compact; colors come from 13h) ---------- */ .cs-home .cs-kpi-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; min-height: 4rem; padding: 0.5rem 0.75rem; background: var(--cs-gray-200); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-sm); transition: transform var(--cs-transition), box-shadow var(--cs-transition), background var(--cs-transition); } .cs-home .cs-kpi-link:hover { transform: translateY(-2px); box-shadow: var(--cs-shadow-lg); } .cs-home .cs-kpi-label { margin: 0; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; color: var(--cs-muted); } .cs-home .cs-kpi-value { font-size: 1.35rem; font-weight: 800; line-height: 1.1; color: var(--cs-heading); } .cs-home .cs-kpi-sub { min-height: 1rem; /* keeps all four cards the same height */ font-size: 0.75rem; } /* ---------- 13e. Panels ---------- */ .cs-home .cs-section-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-color: var(--cs-blue-200); border-radius: var(--cs-radius-lg); } .cs-home .cs-section-card .card-body { display: flex; flex-direction: column; flex: 1 1 auto; } /* Section header: title + count badge grouped left, action pinned right */ .cs-home .cs-table-header-bar { flex-wrap: nowrap; justify-content: flex-start; gap: 0.6rem; min-height: 2.5rem; padding: 0.5rem 0.85rem !important; background: var(--cs-blue-100); border-bottom: 1px solid var(--cs-blue-200); } .cs-home .cs-table-header-bar .btn { margin-left: auto; } .cs-home .cs-section-title { flex: 0 0 auto; font-size: 0.9rem; font-style: normal; } /* ---------- 13f. Panel tables ---------- */ .cs-home .table { margin-bottom: 0; font-size: 0.8rem; } .cs-home .table th, .cs-home .table td { text-align: left; padding-top: 0.45rem; padding-bottom: 0.45rem; } .cs-home .table td { border-bottom-color: var(--cs-blue-100); } .cs-home .table thead th { font-size: 0.65rem; } .cs-home .table .text-end { text-align: right !important; } .cs-home .table tbody tr:last-child td { border-bottom: 0; } .cs-home .table-hover tbody tr:hover { background: var(--cs-row-hover); /* the site's medium-dark slate (base.css 1b) */ } /* ---------- 13g. Panel empty states ---------- */ .cs-home .cs-panel-empty { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; padding: 1.5rem 1rem; font-size: 0.85rem; } /* ---------- 13h. KPI + panel units (KPI card on top, its table below) ---------- */ .cs-home .cs-home-unit { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; /* lets wide tables scroll instead of stretching the grid */ /* Default KPI colors (gray). Each unit below overrides these three variables. */ --kpi-accent: var(--cs-navy); --kpi-tint: var(--cs-gray-200); --kpi-border: var(--cs-gray-300); } /* Per-card colors, by position: 1 Active Projects, 2 Open Quotes, 3 Unpaid Invoices, 4 Work Lists. If you reorder the units in _Snapshot.cshtml, reorder these too. */ .cs-home .cs-home-unit:nth-child(1) { --kpi-accent: var(--cs-info); --kpi-tint: var(--cs-info-bg); --kpi-border: var(--cs-info-border); } .cs-home .cs-home-unit:nth-child(2) { --kpi-accent: var(--cs-warning); --kpi-tint: var(--cs-warning-bg); --kpi-border: var(--cs-gold-soft); } .cs-home .cs-home-unit:nth-child(3) { --kpi-accent: var(--cs-danger); --kpi-tint: var(--cs-danger-bg); --kpi-border: var(--cs-danger-border); } .cs-home .cs-home-unit:nth-child(4) { --kpi-accent: var(--cs-success); --kpi-tint: var(--cs-success-bg); --kpi-border: var(--cs-success-border); } /* Small KPI card: centered above its table, about 30% of the table width */ .cs-home .cs-home-unit .cs-kpi-card { align-self: center; width: var(--cs-kpi-width); min-width: 9rem; /* keeps the label and value from wrapping on narrow units */ background: linear-gradient(180deg, var(--kpi-tint) 0%, var(--cs-surface) 100%); border: 1px solid var(--kpi-border); border-left: 4px solid var(--kpi-accent); box-shadow: var(--cs-shadow-md); } /* Big number picks up the card's accent color */ .cs-home .cs-home-unit .cs-kpi-value { color: var(--kpi-accent); } .cs-home .cs-home-unit .cs-kpi-link:hover { background: linear-gradient(180deg, var(--kpi-border) 0%, var(--kpi-tint) 100%); border-color: var(--kpi-accent); } /* Panel fills the rest of the unit */ .cs-home .cs-home-unit .cs-section-card { flex: 1 1 auto; height: auto; /* overrides height: 100% from 13e */ } /* ---------- 13i. Responsive: stack only on phones ---------- */ @media (max-width: 767.98px) { .cs-home-grid { grid-template-columns: 1fr; } .cs-home .cs-home-unit .cs-kpi-card { width: 50%; } .cs-home .cs-dash-header { grid-template-columns: auto 1fr; row-gap: 0.75rem; } .cs-home .cs-dash-titles { text-align: left; } .cs-home .cs-dash-action { grid-column: 1 / -1; justify-self: stretch; } .cs-home .cs-dash-action .btn { width: 100%; } } /* ---------- 13h. Accent pairing: each KPI card and its panel header share a color ---------- */ /* Modifier classes only set three variables on the .cs-home-unit wrapper */ .cs-home .cs-accent-projects { --cs-accent: var(--cs-accent-projects); --cs-accent-bg: var(--cs-accent-projects-bg); --cs-accent-border: var(--cs-accent-projects-border); } .cs-home .cs-accent-quotes { --cs-accent: var(--cs-accent-quotes); --cs-accent-bg: var(--cs-accent-quotes-bg); --cs-accent-border: var(--cs-accent-quotes-border); } .cs-home .cs-accent-invoices { --cs-accent: var(--cs-accent-invoices); --cs-accent-bg: var(--cs-accent-invoices-bg); --cs-accent-border: var(--cs-accent-invoices-border); } .cs-home .cs-accent-worklists { --cs-accent: var(--cs-accent-worklists); --cs-accent-bg: var(--cs-accent-worklists-bg); --cs-accent-border: var(--cs-accent-worklists-border); } /* KPI card (border-left-color is repeated after border-color because the shorthand resets it) */ .cs-home .cs-home-unit.cs-accent .cs-kpi-card { background: linear-gradient(180deg, var(--cs-accent-bg) 0%, var(--cs-surface) 100%); border-color: var(--cs-accent-border); border-left-color: var(--cs-accent); } .cs-home .cs-home-unit.cs-accent .cs-kpi-value { color: var(--cs-accent); } /* Linked cards keep their accent on hover (lift/shadow still come from 13b) */ .cs-home .cs-home-unit.cs-accent .cs-kpi-link:hover { background: var(--cs-accent-bg); border-color: var(--cs-accent); border-left-color: var(--cs-accent); } /* Panel fills the rest of the unit */ .cs-home .cs-home-unit .cs-section-card { flex: 1 1 auto; height: auto; /* overrides height: 100% from 13e */ /* Left edge + outline pick up the same colors as the KPI card above */ border-color: var(--kpi-border); border-left-color: var(--kpi-accent); } /* Panel header bar uses the card's tint, so each header matches its KPI card */ .cs-home .cs-home-unit .cs-table-header-bar { background: var(--kpi-tint); border-bottom: 1px solid var(--kpi-border); } /* Column-label rows use the site's one table-header color (components.css 7), like every other page */ /* Panel: left edge + header bar match the card above it */ /*.cs-home .cs-home-unit.cs-accent .cs-section-card { border-color: var(--cs-accent-border); border-left-color: var(--cs-accent); } */ /*.cs-home .cs-home-unit.cs-accent .cs-table-header-bar { background: var(--cs-accent-bg); border-bottom: 1px solid var(--cs-accent-border); } */ /* ========================================================================== 19. HOME FINISHING TOUCHES Overrides for section 13. Keep at the END of the file (same specificity, later wins). ========================================================================== */ /* ---------- 19a. Equal-height panels across each row of the 2x2 grid ---------- */ .cs-home-grid { align-items: stretch; /* was "start"; each unit's panel now grows to match its neighbor */ } /* ---------- 19b. Same header height with or without a "View all" button ---------- */ .cs-home .cs-table-header-bar { min-height: 2.9rem; } /* ---------- 19c. KPI cards: slightly larger number, muted sub-line ---------- */ .cs-home .cs-home-unit .cs-kpi-card { min-height: 4.75rem; } .cs-home .cs-home-unit .cs-kpi-value { font-size: 1.6rem; } .cs-home .cs-kpi-sub { color: var(--cs-muted); } /* Numbers line up vertically down every column */ .cs-home .table td, .cs-home .cs-kpi-value { font-variant-numeric: tabular-nums; } /* ---------- 19d. Job description under the client name: one line, ellipsis ---------- */ .cs-home .cs-row-sub { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; color: var(--cs-muted); } /* ---------- 19e. Empty states: bold title + muted hint ---------- */ .cs-home .cs-panel-empty { gap: 0.2rem; min-height: 6rem; } .cs-home .cs-panel-empty-title { font-weight: 600; color: var(--cs-text); } .cs-home .cs-panel-empty-hint { font-size: 0.75rem; } /* ---------- 19f. Phones: tighter stack, slightly wider KPI cards ---------- */ @media (max-width: 767.98px) { .cs-home-grid { row-gap: var(--cs-gap); /* was the larger --cs-gap-lg; less scrolling between units */ } .cs-home .cs-home-unit .cs-kpi-card { width: 60%; } .cs-home .cs-row-sub { max-width: 11rem; } } /* ========================================================================== 20. HOME: SCALE-UP, HEADER & YEAR-TO-DATE CARD Overrides for sections 13 and 19. Keep at the END of the file. Desktop (768px+) is scaled up; phones keep their compact sizes. ========================================================================== */ /* ---------- 20a. Tokens ---------- */ :root { --cs-home-max-width: 82rem; /* was 70rem; wider page on big screens (phones are unaffected) */ --cs-bar-mix: 14%; /* how much accent color is mixed into panel title bars; raise = darker */ /* Neutral navy version of the same recipe, used by the page header bar */ --cs-home-header-bg: color-mix(in srgb, var(--cs-navy) var(--cs-bar-mix), var(--cs-blue-100)); } /* ---------- 20b. Panel title bar: a shade or two darker than the column-header row ---------- */ .cs-home .cs-home-unit .cs-table-header-bar { background: color-mix(in srgb, var(--kpi-accent) var(--cs-bar-mix), var(--kpi-tint)); border-bottom: 1px solid var(--kpi-border); } /* ---------- 20c. Page header bar: new tint, larger logo and company name ---------- */ .cs-home .cs-dash-bar { background: var(--cs-home-header-bg); border-color: var(--cs-blue-300); border-bottom-color: var(--cs-gold); } .cs-home .cs-dash-logo { max-height: 56px; max-width: 120px; } .cs-home .cs-dash-title { font-size: 1.7rem; } /* ---------- 20d. Toolbar row (New Project): sits above the grid, flush left with the tables ---------- */ .cs-home-toolbar { display: flex; justify-content: flex-start; margin-bottom: var(--cs-gap); } /* ---------- 20e. Year-to-date card (lives in the header bar) ---------- */ .cs-home .cs-ytd { padding: 0.6rem 1rem 0.7rem; background: var(--cs-surface); border: 1px solid var(--cs-blue-200); border-left: 4px solid var(--cs-gold); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-sm); } .cs-home .cs-ytd-title { margin-bottom: 0.4rem; padding-bottom: 0.3rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; color: var(--cs-muted); border-bottom: 1px solid var(--cs-blue-100); } .cs-home .cs-ytd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* phones: 2 x 2 */ gap: 0.5rem 1.25rem; } .cs-home .cs-ytd-stat { min-width: 0; text-align: center; } .cs-home .cs-ytd-value { font-size: 1.15rem; font-weight: 800; line-height: 1.15; color: var(--cs-heading); font-variant-numeric: tabular-nums; } .cs-home .cs-ytd-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cs-muted); } /* ---------- 20f. Phones: year-to-date card drops below the logo and name, full width ---------- */ @media (max-width: 767.98px) { .cs-home .cs-ytd { grid-column: 1 / -1; } .cs-home-toolbar .btn { width: 100%; } } /* ---------- 20g. Desktop and tablet (768px+): everything a step larger ---------- */ @media (min-width: 768px) { /* Header: logo | name (left, beside the logo) | year-to-date card */ .cs-home .cs-dash-bar { padding: 1.1rem 1.5rem; } .cs-home .cs-dash-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 1.5rem; } .cs-home .cs-dash-titles { text-align: left; } .cs-home .cs-dash-logo { max-height: 76px; max-width: 160px; } .cs-home .cs-dash-title { font-size: 2.1rem; } .cs-home .cs-dash-sub { font-size: 0.9rem; } /* Year-to-date card: stats in one row with thin dividers */ .cs-home .cs-ytd-grid { grid-template-columns: none; grid-auto-flow: column; /* any number of stats lines up in one row */ grid-auto-columns: auto; gap: 0; } .cs-home .cs-ytd-stat { padding: 0 1.25rem; } .cs-home .cs-ytd-stat + .cs-ytd-stat { border-left: 1px solid var(--cs-blue-100); } .cs-home .cs-ytd-value { font-size: 1.45rem; } .cs-home .cs-ytd-label { font-size: 0.68rem; } .cs-home .cs-ytd-title { font-size: 0.72rem; } /* Grid spacing */ .cs-home-grid { column-gap: 1.5rem; } /* KPI cards */ .cs-home .cs-home-unit .cs-kpi-card { min-width: 11rem; min-height: 5.5rem; } .cs-home .cs-kpi-label { font-size: 0.68rem; } .cs-home .cs-home-unit .cs-kpi-value { font-size: 2rem; } .cs-home .cs-kpi-sub { font-size: 0.85rem; } /* Panels and tables */ .cs-home .cs-table-header-bar { min-height: 3.2rem; } .cs-home .cs-section-title { font-size: 1.05rem; } .cs-home .table { font-size: 0.9rem; } .cs-home .table th, .cs-home .table td { padding-top: 0.6rem; padding-bottom: 0.6rem; } .cs-home .table thead th { font-size: 0.72rem; } .cs-home .cs-row-sub { max-width: 20rem; font-size: 0.78rem; } .cs-home .cs-status-badge { font-size: 0.78rem; } .cs-home .cs-trade-badge { font-size: 0.76rem; } .cs-home .cs-panel-empty { min-height: 7rem; font-size: 0.95rem; } .cs-home .cs-panel-empty-hint { font-size: 0.82rem; } } /* ========================================================================== 21. HOME: SECOND SCALE-UP + NEW JOB BUTTON BESIDE THE FIRST KPI CARD Overrides for section 20. Keep at the END of the file. ========================================================================== */ :root { --cs-home-max-width: 90rem; /* was 82rem */ } /* ---------- 21a. KPI row: button left, card centered (button stacks above below 1200px) ---------- */ .cs-kpi-row { display: flex; justify-content: center; align-items: center; } .cs-kpi-row .cs-kpi-action { white-space: nowrap; } @media (max-width: 1199.98px) { .cs-kpi-row { flex-direction: column; gap: 0.6rem; } .cs-kpi-row .cs-kpi-action { align-self: stretch; } } @media (min-width: 1200px) { .cs-kpi-row { position: relative; } /* Pinned to the bottom of the KPI row, so it sits just above the table, flush with the table's left edge */ .cs-kpi-row .cs-kpi-action { position: absolute; left: 0; bottom: 0; } } /* ---------- 21b. Desktop and tablet (768px+): one more step up ---------- */ @media (min-width: 768px) { /* Header */ .cs-home .cs-dash-bar { padding: 1.25rem 1.75rem; } .cs-home .cs-dash-logo { max-height: 88px; max-width: 180px; } .cs-home .cs-dash-title { font-size: 2.4rem; } .cs-home .cs-dash-sub { font-size: 1rem; } /* Year-to-date card */ .cs-home .cs-ytd-stat { padding: 0 1.5rem; } .cs-home .cs-ytd-value { font-size: 1.65rem; } .cs-home .cs-ytd-label { font-size: 0.74rem; } .cs-home .cs-ytd-title { font-size: 0.78rem; } /* Grid spacing */ .cs-home-grid { column-gap: 1.75rem; row-gap: 2.5rem; } /* KPI cards */ .cs-home .cs-home-unit .cs-kpi-card { min-width: 12.5rem; min-height: 6.25rem; } .cs-home .cs-kpi-label { font-size: 0.74rem; } .cs-home .cs-home-unit .cs-kpi-value { font-size: 2.3rem; } .cs-home .cs-kpi-sub { font-size: 0.92rem; } /* Buttons on the Home page */ .cs-home .btn { font-size: 1rem; padding: 0.5rem 1rem; } .cs-home .btn-sm { font-size: 0.9rem; padding: 0.3rem 0.65rem; } /* Panels and tables */ .cs-home .cs-table-header-bar { min-height: 3.5rem; } .cs-home .cs-section-title { font-size: 1.15rem; } .cs-home .table { font-size: 0.98rem; } .cs-home .table th, .cs-home .table td { padding-top: 0.7rem; padding-bottom: 0.7rem; } .cs-home .table thead th { font-size: 0.78rem; } .cs-home .cs-row-sub { max-width: 24rem; font-size: 0.84rem; } .cs-home .cs-status-badge { font-size: 0.84rem; } .cs-home .cs-trade-badge { font-size: 0.82rem; } .cs-home .cs-panel-empty { min-height: 8rem; font-size: 1.05rem; } .cs-home .cs-panel-empty-hint { font-size: 0.9rem; } } /* ========================================================================== 30. HOME HEADER AT MEDIUM WIDTHS Overrides sections 20-21. Between 768px and 1399px the year-to-date card (now up to 7 stats) is too wide to share a row with the logo and company name, which squeezed the name to one letter per line. Here the card gets its own row and its stats wrap instead of squeezing. ========================================================================== */ /* Numbers never break in the middle ("$2,8" / "12") */ .cs-home .cs-ytd-value { white-space: nowrap; } @media (min-width: 768px) and (max-width: 1399.98px) { /* Row 1: logo | company name. Row 2: year-to-date card, full width */ .cs-home .cs-dash-header { grid-template-columns: auto minmax(0, 1fr); row-gap: 1rem; } .cs-home .cs-ytd { grid-column: 1 / -1; } /* Stats fill the row and wrap to a second line when there isn't room */ .cs-home .cs-ytd-grid { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); row-gap: 0.75rem; } .cs-home .cs-ytd-stat { padding: 0 0.75rem; } } /* ---------- 28f. Money boxes: "$" sits inside the left edge of the price box ---------- */ .cs-money-input { position: relative; } .cs-money-sign { position: absolute; top: 50%; left: 0.55rem; transform: translateY(-50%); font-size: 0.85rem; color: var(--cs-muted); pointer-events: none; } .cs-money-input .cs-money-field { padding-left: 1.3rem; text-align: right; font-variant-numeric: tabular-nums; } /* ========================================================================== 44. HOME "NEEDS YOUR ATTENTION" TIPS (Views/Home/_Snapshot, Services/HomeTipsService) ========================================================================== */ .cs-home-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.6rem; margin-bottom: var(--cs-gap); } .cs-home-tip { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.65rem 0.85rem; font-size: 0.9rem; color: var(--cs-text); text-decoration: none; background: var(--cs-surface); border: 1px solid var(--cs-border); border-left: 4px solid var(--cs-navy); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-sm); } a.cs-home-tip:hover { color: var(--cs-text); background: var(--cs-blue-50); } .cs-home-tip-icon { flex: 0 0 1.4rem; height: 1.4rem; font-size: 0.8rem; font-weight: 700; line-height: 1.4rem; text-align: center; color: var(--cs-surface); background: var(--cs-navy); border-radius: 50%; } /* Tone: red = overdue / lost money, gold = needs a look, green = all caught up */ .cs-home-tip-bad { border-left-color: var(--cs-danger); } .cs-home-tip-bad .cs-home-tip-icon { background: var(--cs-danger); } .cs-home-tip-warn { border-left-color: var(--cs-gold); } .cs-home-tip-warn .cs-home-tip-icon { color: var(--cs-navy); background: var(--cs-gold); } .cs-home-tip-good { border-left-color: var(--cs-success); } .cs-home-tip-good .cs-home-tip-icon { background: var(--cs-success); } /* ---------- 44b. Tips folded into one slim line: "4 things need your attention ▾" (click to open) ---------- */ .cs-home-attn { margin-bottom: var(--cs-gap); background: var(--cs-surface); border: 1px solid var(--cs-border); border-left: 4px solid var(--cs-navy); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-sm); } /* Problems tint the whole line (same size and spot, just easier to spot) */ .cs-home-attn-bad { background: var(--cs-danger-bg); border-color: var(--cs-danger-border); border-left-color: var(--cs-danger); } .cs-home-attn-warn { background: var(--cs-warning-bg); border-color: var(--cs-gold-soft); border-left-color: var(--cs-gold); } .cs-home-attn-bad summary { color: var(--cs-danger); } .cs-home-attn-bad summary:hover, .cs-home-attn-warn summary:hover { background: transparent; text-decoration: underline; } /* The list that drops down stays white so the tips are easy to read */ .cs-home-attn-bad .cs-home-attn-list, .cs-home-attn-warn .cs-home-attn-list { background: var(--cs-surface); } .cs-home-attn summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.85rem; font-size: 0.92rem; font-weight: 600; color: var(--cs-heading); cursor: pointer; list-style: none; /* hide the browser's own triangle */ } .cs-home-attn summary::-webkit-details-marker { display: none; } .cs-home-attn summary:hover { background: var(--cs-blue-50); } /* The headline icon takes the worst tip's color */ .cs-home-attn-bad summary .cs-home-tip-icon { background: var(--cs-danger); } .cs-home-attn-warn summary .cs-home-tip-icon { color: var(--cs-navy); background: var(--cs-gold); } /* "Show" / "Hide" on the right */ .cs-home-attn-toggle { margin-left: auto; font-size: 0.8rem; font-weight: 600; color: var(--cs-muted); } .cs-home-attn-toggle::after { content: "Show ▾"; } .cs-home-attn[open] .cs-home-attn-toggle::after { content: "Hide ▴"; } /* The list: one line per tip, each a link to where it gets fixed */ .cs-home-attn-list { margin: 0; padding: 0.35rem 0.85rem 0.6rem; list-style: none; border-top: 1px solid var(--cs-border); } .cs-home-attn-list li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.35rem 0; font-size: 0.9rem; } .cs-home-attn-list li + li { border-top: 1px dashed var(--cs-border); } .cs-home-attn-list li a { color: var(--cs-text); text-decoration: none; } .cs-home-attn-list li a:hover { color: var(--cs-heading); text-decoration: underline; } /* ========================================================================== 45. HOME: TOOLBAR UNDER THE BANNER + COUNTS IN THE TABLE TITLE BARS Replaces the four KPI cards above the tables (less busy). Keep at the END of the file. ========================================================================== */ /* "Working in" on the left, + New Job on the right (New Job alone stays right) */ .cs-home-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: var(--cs-gap); } .cs-home-toolbar .cs-trade-picker { margin: 0; } /* The trade box stands out: light gold fill, gold edge (background-color only, so the arrow stays) */ .cs-home-toolbar .cs-trade-picker-select { background-color: var(--cs-gold-tint); border-color: var(--cs-gold); font-weight: 600; color: var(--cs-heading); } .cs-home-new-job { margin-left: auto; white-space: nowrap; } /* The KPI cards are gone; hide any leftovers so old markup can't come back */ .cs-home .cs-home-unit .cs-kpi-card, .cs-home .cs-kpi-row { display: none; } /* Count in the title bar: a pill in the unit's color, then the money / sq ft beside it */ .cs-home-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.45rem; font-size: 0.85rem; font-weight: 800; color: #ffffff; background: var(--kpi-accent); border-radius: 999px; } .cs-home-count-sub { font-size: 0.85rem; font-weight: 600; color: var(--cs-muted); white-space: nowrap; } /* Phones: New Job goes full width under the trade box, easy to tap */ @media (max-width: 575.98px) { .cs-home-new-job { flex: 1 1 100%; margin-left: 0; } .cs-home-count-sub { font-size: 0.78rem; } } /* ========================================================================== 46. HOME BANNER THAT WRAPS INSTEAD OF SQUEEZING (any width 768px+) Overrides 20g and 30. The banner used a grid row (logo | name | year-to-date card); at some widths the card took the room and the company name was squeezed to one letter per line. Now it's a wrapping row: the name always keeps at least 14rem, and when the card doesn't fit beside it, the card drops to its own full-width line. The card's numbers wrap too, so nothing squeezes. Keep at the END of the file. ========================================================================== */ @media (min-width: 768px) { .cs-home .cs-dash-header { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; } .cs-home .cs-dash-logo-col { flex: 0 0 auto; } .cs-home .cs-dash-titles { flex: 1 1 14rem; min-width: 14rem; } /* Beside the name when it fits; its own full-width line when it doesn't */ .cs-home .cs-ytd { flex: 1 1 auto; grid-column: auto; } /* Numbers: one row when there's room, otherwise they wrap evenly (never squeeze) */ .cs-home .cs-ytd-grid { display: flex; flex-wrap: wrap; justify-content: space-around; row-gap: 0.6rem; } .cs-home .cs-ytd-stat { flex: 1 0 auto; } } /* ========================================================================== 47. HOME: ATTENTION LINE IN THE TOOLBAR (between Working in and + New Job) Overrides 44b. The line fills the middle of the toolbar; Show opens the tips as a drop-down that floats over the tables instead of pushing them down. Keep at the END of the file. ========================================================================== */ /* The warnings line sits at the right margin ("Working in", if shown, stays on the left) */ .cs-home-toolbar .cs-home-attn { position: relative; flex: 0 1 28rem; min-width: 0; margin: 0 0 0 auto; } /* Nothing to show (Lite, one trade): no empty row */ .cs-home-toolbar:not(:has(*)) { display: none; } /* Active Jobs title bar: + New Job and View all together on the right */ .cs-home-unit-actions { display: inline-flex; gap: 0.4rem; margin-left: auto; white-space: nowrap; } .cs-home-toolbar .cs-home-attn summary { min-height: 2.6rem; } /* The list floats under the line, as wide as it (at least 22rem), above everything */ .cs-home-toolbar .cs-home-attn-list { position: absolute; top: calc(100% + 0.35rem); left: -4px; right: 0; min-width: 22rem; z-index: 20; background: var(--cs-surface); border: 1px solid var(--cs-border); border-left: 4px solid var(--cs-navy); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-lg); } .cs-home-toolbar .cs-home-attn-bad .cs-home-attn-list { border-left-color: var(--cs-danger); } .cs-home-toolbar .cs-home-attn-warn .cs-home-attn-list { border-left-color: var(--cs-gold); } /* + New Job keeps its spot on the right (the line now takes the space in between) */ /* Job / quote / invoice / work list numbers never break ("J-" / "2612") */ .cs-home .cs-client-link { white-space: nowrap; } /* Phones: trade box, then the line, then New Job, each full width; the list fills the width */ @media (max-width: 575.98px) { .cs-home-toolbar .cs-home-attn { flex: 1 1 100%; } .cs-home-toolbar .cs-home-attn-list { min-width: 0; } } /* ========================================================================== 68. HOME: ATTENTION LINE IN THE BANNER (right of the company name) Overrides 46 and 47. "4 things need your attention" sits at the right end of the name's line; the year-to-date card always takes the full line under them. Show still opens the tips as a drop-down that floats over the page. Keep at the END of the file. ========================================================================== */ .cs-dash-header .cs-home-attn { position: relative; min-width: 0; margin: 0; } .cs-dash-header .cs-home-attn summary { min-height: 2.6rem; } /* The list floats under the line, right-aligned, at least 22rem wide, above everything */ .cs-dash-header .cs-home-attn-list { position: absolute; top: calc(100% + 0.35rem); right: 0; width: max(100%, 22rem); z-index: 20; text-align: left; background: var(--cs-surface); border: 1px solid var(--cs-border); border-left: 4px solid var(--cs-navy); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-lg); } .cs-dash-header .cs-home-attn-bad .cs-home-attn-list { border-left-color: var(--cs-danger); } .cs-dash-header .cs-home-attn-warn .cs-home-attn-list { border-left-color: var(--cs-gold); } /* Nothing to look at: a plain green "✓ All caught up" line (no drop-down) */ .cs-home-attn-good { display: flex; align-items: center; gap: 0.6rem; min-height: 2.6rem; padding: 0.5rem 0.85rem; font-size: 0.92rem; font-weight: 600; color: var(--cs-success); background: var(--cs-success-bg); border-color: var(--cs-success-border); border-left-color: var(--cs-success); } .cs-home-attn-good .cs-home-tip-icon { background: var(--cs-success); } /* PC and tablet: logo | name | warnings on the right; the year-to-date card on its own line below */ @media (min-width: 768px) { .cs-home .cs-dash-header .cs-home-attn { flex: 0 1 24rem; margin-left: auto; } .cs-home .cs-ytd { flex-basis: 100%; } } /* Phones: logo + name, then the warnings line full width, then the card */ @media (max-width: 767.98px) { .cs-home .cs-dash-header .cs-home-attn { grid-column: 1 / -1; } .cs-dash-header .cs-home-attn-list { width: 100%; } } /* ========================================================================== 70. HOME: EACH BOX'S TABLE IN ITS OWN COLOR Every other page's tables use the slate ladder (components.css 7, base.css 1b). On Home, each box keeps its color all the way down, darkest at the top: the title bar ("Unpaid Invoices 1 ... View all") in the box's color (--kpi-accent, set by position in 13h) with white text, the column headings a lighter shade, every other row a light tint, and the row under the mouse/finger a deeper tint. Keep at the END of the file. "White" is var(--cs-surface): white in light mode, dark in dark mode (where the accents are light). ========================================================================== */ .cs-home .cs-home-unit .cs-table-header-bar { background: var(--kpi-accent); border-bottom: none; } .cs-home .cs-home-unit .cs-table-header-bar .cs-section-title { color: var(--cs-surface); } .cs-home .cs-home-unit .cs-table-header-bar .cs-home-count-sub { color: var(--cs-surface); opacity: 0.85; } /* The count bubble flips: white with the box's color */ .cs-home .cs-home-unit .cs-table-header-bar .cs-home-count { color: var(--kpi-accent); background: var(--cs-surface); } /* View all: outlined in white. + New Job: the gold button, so it still stands out */ .cs-home .cs-home-unit .cs-table-header-bar .btn-outline-primary { color: var(--cs-surface) !important; background: transparent !important; border-color: var(--cs-surface) !important; } .cs-home .cs-home-unit .cs-table-header-bar .btn-outline-primary:hover { color: var(--kpi-accent) !important; background: var(--cs-surface) !important; } .cs-home .cs-home-unit .cs-table-header-bar .btn-primary { color: var(--cs-navy) !important; background: var(--cs-gold) !important; border-color: var(--cs-gold) !important; } .cs-home .cs-home-unit .table thead th { color: var(--kpi-accent) !important; background: color-mix(in srgb, var(--kpi-accent) 28%, var(--cs-surface)) !important; border-bottom: 2px solid var(--kpi-accent); } .cs-home .cs-home-unit .table > tbody > tr:nth-child(even) { --bs-table-bg: color-mix(in srgb, var(--kpi-tint) 70%, var(--cs-surface)); background: color-mix(in srgb, var(--kpi-tint) 70%, var(--cs-surface)); } .cs-home .cs-home-unit .table { --bs-table-hover-bg: color-mix(in srgb, var(--kpi-accent) 22%, var(--kpi-tint)); } .cs-home .cs-home-unit .table-hover > tbody > tr:hover, .cs-home .cs-home-unit .table-hover > tbody > tr:nth-child(even):hover { --bs-table-bg: color-mix(in srgb, var(--kpi-accent) 22%, var(--kpi-tint)); background: color-mix(in srgb, var(--kpi-accent) 22%, var(--kpi-tint)); } /* ========================================================================== 72. HOME: "GET STARTED" CHECKLIST (Views/Home/_GettingStarted) New companies, until the first quote goes out: three steps, done ones green ✓, the next one with its button. ========================================================================== */ .cs-getting-started { margin-bottom: var(--cs-gap); padding: 1rem 1.25rem; background: var(--cs-warning-bg); border: 1px solid var(--cs-gold-soft); border-left: 5px solid var(--cs-gold); border-radius: var(--cs-radius-lg); } .cs-getting-started-title { margin: 0 0 0.75rem; font-size: 1.15rem; font-weight: 800; color: var(--cs-heading); } .cs-getting-started-steps { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; } .cs-getting-started-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; padding: 0.6rem 0.8rem; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); opacity: 0.65; } .cs-getting-started-steps li.is-now, .cs-getting-started-steps li.is-done { opacity: 1; } .cs-getting-started-steps li.is-now { border-color: var(--cs-gold); box-shadow: var(--cs-shadow-sm); } .cs-getting-started-steps li > div { flex: 1 1 14rem; display: flex; flex-direction: column; } .cs-getting-started-steps li span:not(.cs-getting-started-mark) { font-size: 0.88rem; color: var(--cs-muted); } .cs-getting-started-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2rem; height: 2rem; font-weight: 800; color: var(--cs-muted); background: var(--cs-gray-100); border-radius: 50%; } .cs-getting-started-steps li.is-now .cs-getting-started-mark { color: var(--cs-navy); background: var(--cs-gold); } .cs-getting-started-steps li.is-done .cs-getting-started-mark { color: var(--cs-surface); background: var(--cs-success); } /* Phones: the button goes full width under its step */ @media (max-width: 575.98px) { .cs-getting-started-steps li .btn { flex: 1 1 100%; } }