/* ========================================================================== 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) ========================================================================== */ /* ========================================================================== 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; background: var(--cs-blue-50) !important; border-bottom: 1px solid var(--cs-blue-200); } .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-blue-50); } /* ---------- 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); } /* Optional: tint the column-label row too (uncomment if "table header" meant this row)*/ .cs-home .cs-home-unit .table thead th { background: var(--kpi-tint) !important; border-bottom-color: var(--kpi-border); } /* 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); } /* 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%; } }