/*
 * LINKFLOW Premium visual trial — 22 October 2026
 * VISUAL ONLY: no changes to page structure, positions, navigation, data or forms.
 * Rollback: remove the single premium-visuals.css <link> from index.html.
 * Applies only inside authenticated customer UI (lf-customer-shell).
 * Preserve custom dashboard background images and opt-in business logo colours.
 */
body.lf-customer-shell {
  --lf-premium-accent: #37bee2;
  --lf-premium-line: rgba(89, 160, 198, .38);
  --lf-premium-shadow: 0 16px 36px rgba(0, 7, 20, .30), 0 2px 8px rgba(0, 7, 20, .16);
  --lf-premium-shadow-soft: 0 10px 26px rgba(0, 8, 24, .23), inset 0 1px rgba(227, 249, 255, .055);
  background:
    radial-gradient(ellipse 70% 44% at 73% 0%, rgba(28, 106, 159, .25), transparent 73%),
    radial-gradient(ellipse 48% 40% at 17% 46%, rgba(13, 91, 127, .16), transparent 77%),
    linear-gradient(145deg, #061523 4%, #081c2d 45%, #061321 100%) !important;
  background-attachment: fixed;
}
body.lf-customer-shell.lf-use-logo-colours {
  /* Keep LINKFLOW's approved blue visual identity visible. Business logo
     colours remain an optional secondary accent rather than replacing blue. */
  --lf-premium-accent: #3acff0;
  --lf-premium-logo-accent: var(--lf-brand-primary, #3acff0);
}

/* Softer dimensional panels, while retaining original sizes and placement. */
body.lf-customer-shell .page.active .surface:not(.lf-finance-import),
body.lf-customer-shell #workspace-content .surface {
  background:
    linear-gradient(145deg, rgba(24, 63, 88, .29) 0%, transparent 46%),
    linear-gradient(173deg, rgba(12, 39, 60, .96), rgba(6, 24, 41, .97));
  border-color: var(--lf-premium-line);
  box-shadow: var(--lf-premium-shadow-soft);
  border-radius: 18px;
}

/* Keep the customer's selected dashboard artwork completely intact. */
body.lf-customer-shell #lf-customer-home:not(.lf-has-custom-background) {
  background:
    radial-gradient(ellipse at 87% 3%, rgba(31, 130, 174, .20), transparent 53%),
    linear-gradient(140deg, rgba(10, 44, 68, .94), rgba(6, 25, 44, .97)) !important;
}
body.lf-customer-shell #lf-customer-home {
  border: 1px solid color-mix(in srgb, var(--lf-premium-accent) 32%, #265676);
  border-radius: 22px;
  box-shadow: 0 21px 52px rgba(0, 10, 25, .37), inset 0 1px rgba(203, 243, 255, .08);
}
/* Transparent card surfaces allow the custom photo to stay visible, as before. */
body.lf-customer-shell #lf-customer-home.lf-has-custom-background .lf-home-lower section,
body.lf-customer-shell #lf-customer-home.lf-has-custom-background .lf-home-stat {
  background: rgba(8, 29, 48, .78);
  backdrop-filter: blur(3px);
}

body.lf-customer-shell .lf-home-stat {
  background:
    radial-gradient(ellipse at 94% 0%, rgba(64, 188, 226, .19), transparent 65%),
    linear-gradient(152deg, rgba(18, 65, 90, .94), rgba(7, 33, 54, .96));
  border: 1px solid color-mix(in srgb, var(--lf-premium-accent) 32%, #305d7a);
  border-radius: 17px;
  box-shadow: var(--lf-premium-shadow-soft), inset 0 1px rgba(222, 250, 255, .075);
}
body.lf-customer-shell .lf-home-stat:nth-child(2) {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(71, 144, 227, .18), transparent 65%),
    linear-gradient(152deg, rgba(15, 55, 86, .94), rgba(7, 30, 51, .96));
}
body.lf-customer-shell .lf-home-stat:nth-child(3) {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(42, 179, 184, .17), transparent 65%),
    linear-gradient(152deg, rgba(14, 63, 74, .94), rgba(7, 31, 48, .96));
}
body.lf-customer-shell .lf-home-stat span {
  color: #c0dfed;
  font-weight: 600;
}
body.lf-customer-shell .lf-home-stat strong {
  color: #f7fdff;
  font-weight: 800;
  letter-spacing: -.035em;
  text-shadow: 0 2px 14px rgba(6, 20, 31, .24);
  font-variant-numeric: tabular-nums;
}
body.lf-customer-shell .lf-home-stat-action:hover,
body.lf-customer-shell .lf-home-stat-action:focus-visible {
  border-color: var(--lf-premium-accent);
  box-shadow: 0 15px 33px rgba(0, 11, 28, .40), 0 0 0 1px color-mix(in srgb, var(--lf-premium-accent) 20%, transparent);
}

/* Give working-day cards and calendar the same premium visual depth. */
body.lf-customer-shell .lf-home-lower section,
body.lf-customer-shell .lf-month-calendar {
  background:
    linear-gradient(157deg, rgba(24, 62, 83, .31), transparent 64%),
    linear-gradient(180deg, rgba(10, 38, 57, .96), rgba(6, 23, 39, .96));
  border: 1px solid var(--lf-premium-line);
  border-radius: 18px;
  box-shadow: var(--lf-premium-shadow-soft);
}
body.lf-customer-shell .lf-home-lower h3,
body.lf-customer-shell .lf-calendar-toolbar h3 {
  color: #effaff;
  letter-spacing: -.015em;
}
body.lf-customer-shell .lf-home-row {
  background: linear-gradient(100deg, rgba(20, 66, 92, .91), rgba(11, 43, 66, .78));
  border-left-color: var(--lf-premium-accent);
  border-radius: 10px;
}
body.lf-customer-shell .record-item {
  background: linear-gradient(114deg, rgba(12, 39, 59, .90), rgba(7, 28, 45, .94));
  border-color: rgba(85, 151, 184, .35);
  box-shadow: inset 0 1px rgba(209, 244, 255, .035);
}

/* OVERVIEW: financial cards get gentle accent variations, not changed meanings. */
body.lf-customer-shell #page-overview .lf-finance-hero {
  background:
    radial-gradient(ellipse at 92% 3%, rgba(39, 171, 207, .24), transparent 45%),
    linear-gradient(117deg, #0a3855 0%, #102e4b 59%, #142b44 100%);
  border-color: rgba(89, 181, 218, .56);
  box-shadow: 0 22px 52px rgba(0, 10, 28, .35), inset 0 1px rgba(231, 251, 255, .10);
}
body.lf-customer-shell #page-overview .lf-finance-import {
  background:
    linear-gradient(145deg, rgba(28, 79, 104, .19), transparent 56%),
    linear-gradient(173deg, rgba(9, 40, 59, .97), rgba(7, 25, 43, .97));
  border-color: var(--lf-premium-line);
  box-shadow: var(--lf-premium-shadow-soft);
}
body.lf-customer-shell #page-overview .lf-finance-kpi {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(49, 164, 213, .16), transparent 59%),
    linear-gradient(160deg, rgba(16, 51, 76, .98), rgba(7, 28, 46, .98));
  border-color: rgba(75, 149, 188, .43);
  border-radius: 19px;
  box-shadow: var(--lf-premium-shadow), inset 0 1px rgba(219, 247, 255, .075), inset 0 3px rgba(44, 190, 220, .25);
}
body.lf-customer-shell #page-overview .lf-finance-kpi:nth-child(2) {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(231, 163, 87, .15), transparent 61%),
    linear-gradient(160deg, rgba(42, 48, 63, .98), rgba(9, 29, 44, .98));
  border-color: rgba(215, 159, 101, .43);
  box-shadow: var(--lf-premium-shadow), inset 0 1px rgba(255, 244, 221, .06), inset 0 3px rgba(236, 166, 93, .23);
}
body.lf-customer-shell #page-overview .lf-finance-kpi:nth-child(4) {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(118, 143, 230, .18), transparent 60%),
    linear-gradient(160deg, rgba(23, 47, 80, .97), rgba(9, 29, 47, .98));
}
body.lf-customer-shell #page-overview .lf-finance-kpi strong {
  color: #ffffff;
  font-size: clamp(21px, 2.35vw, 33px);
  font-weight: 820;
  letter-spacing: -.035em;
  text-shadow: 0 2px 14px rgba(0, 11, 28, .22);
}
body.lf-customer-shell #page-overview .lf-finance-kpi-name {
  color: #c8e3ef;
}
body.lf-customer-shell #page-overview #lf-finance-net-tile.lf-finance-negative {
  background: linear-gradient(155deg, rgba(102, 42, 34, .67), rgba(20, 32, 48, .97));
  border-color: rgba(231, 143, 114, .72);
}
body.lf-customer-shell #page-overview #lf-finance-net-tile.lf-finance-positive {
  background: linear-gradient(155deg, rgba(18, 83, 81, .72), rgba(8, 35, 52, .96));
  border-color: rgba(76, 194, 174, .58);
}

/* OVERVIEW: refined graph surfaces, bars, visual grouping and numeric table. */
body.lf-customer-shell #page-overview .lf-finance-panel {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(35, 104, 142, .15), transparent 65%),
    linear-gradient(165deg, rgba(9, 36, 57, .97), rgba(5, 23, 39, .98));
  border-color: var(--lf-premium-line);
  border-radius: 19px;
  box-shadow: var(--lf-premium-shadow-soft);
}
body.lf-customer-shell #page-overview .lf-finance-panel-heading h2 {
  color: #f2fbff;
  letter-spacing: -.02em;
}
body.lf-customer-shell #page-overview .lf-finance-monthly-chart,
body.lf-customer-shell #page-overview .lf-finance-trend-chart {
  background:
    repeating-linear-gradient(to top, transparent 0, transparent 50px, rgba(105, 165, 193, .085) 51px, transparent 52px),
    linear-gradient(155deg, rgba(7, 25, 43, .49), rgba(12, 43, 64, .24));
  border-radius: 11px;
  box-shadow: inset 0 1px 14px rgba(0, 11, 27, .14);
  padding: 6px 4px 5px;
}
body.lf-customer-shell #page-overview .lf-finance-bar {
  border-radius: 7px 7px 0 0;
  box-shadow: 0 0 12px rgba(27, 171, 217, .19);
}
body.lf-customer-shell #page-overview .lf-finance-bar.income {
  background: linear-gradient(0deg, #127da6, #36d5e6);
}
body.lf-customer-shell #page-overview .lf-finance-bar.expense {
  background: linear-gradient(0deg, #cb874a, #fbc37d);
  box-shadow: 0 0 12px rgba(242, 173, 107, .15);
}
body.lf-customer-shell #page-overview .lf-finance-trend-bar.positive {
  background: linear-gradient(0deg, #168b9d, #42e2cf);
  box-shadow: 0 0 14px rgba(41, 190, 185, .16);
}
body.lf-customer-shell #page-overview .lf-finance-trend-bar.negative {
  background: linear-gradient(0deg, #d68b53, #ffc18a);
}
body.lf-customer-shell #page-overview .lf-finance-cat-track {
  background: rgba(14, 45, 65, .95);
  box-shadow: inset 0 2px 5px rgba(0, 10, 21, .36);
}
body.lf-customer-shell #page-overview .lf-finance-cat-fill {
  background: linear-gradient(90deg, #188cb7, #38d8dc);
  box-shadow: 0 0 13px rgba(43, 178, 221, .23);
}
body.lf-customer-shell #page-overview .lf-finance-month-table thead {
  background: #0b2d44;
}
body.lf-customer-shell #page-overview .lf-finance-month-table tbody tr:hover {
  background: rgba(45, 126, 158, .16);
}
body.lf-customer-shell #page-overview .lf-finance-legend,
body.lf-customer-shell #page-overview .lf-finance-cat-head {
  color: #d2eaf2;
}
/* Honour custom-logo colours without touching income/expense semantic colours. */
body.lf-customer-shell.lf-use-logo-colours #lf-customer-home,
body.lf-customer-shell.lf-use-logo-colours #page-overview .lf-finance-panel,
body.lf-customer-shell.lf-use-logo-colours #page-overview .lf-finance-kpi {
  border-color: color-mix(in srgb, var(--lf-brand-primary) 39%, #315d76);
}

/* No resizing, repositioning or layout change on mobile. */
@media (max-width: 680px) {
  body.lf-customer-shell #lf-customer-home,
  body.lf-customer-shell #page-overview .lf-finance-kpi,
  body.lf-customer-shell #page-overview .lf-finance-panel {
    box-shadow: 0 9px 24px rgba(0, 7, 22, .29), inset 0 1px rgba(219, 247, 255, .06);
  }
}


/* All customer pages — Premium skin continuation, without layout changes.
   The financial charts and dashboard remain the stronger visual focal points.
   Applies to every signed-in LINKFLOW customer page; excludes Owner/Admin. */
body.lf-customer-shell .page.active:not(#page-home) .page-title h1 {
  color: #f4fcff;
  letter-spacing: -.034em;
  text-shadow: 0 3px 21px rgba(3, 15, 33, .30);
}
body.lf-customer-shell .page.active:not(#page-home) .page-title .eyebrow,
body.lf-customer-shell #workspace-content .card-head .eyebrow {
  color: color-mix(in srgb, var(--lf-premium-accent) 74%, #d3faff);
}
body.lf-customer-shell .page.active .card-head h2,
body.lf-customer-shell .page.active .section-head h2,
body.lf-customer-shell #workspace-content .card-head h2 {
  color: #f1faff;
  letter-spacing: -.018em;
}

/* Forms, saved client and job records, invoice/quote panels, and Settings.
   Keep every control's size, position, behaviour and accessible focus intact. */
body.lf-customer-shell #workspace-content .workspace-form,
body.lf-customer-shell #workspace-content .workspace-records > .surface,
body.lf-customer-shell #workspace-content #commercial-documents,
body.lf-customer-shell #workspace-content #lf-business-logo-settings,
body.lf-customer-shell #workspace-content #lf-client-import,
body.lf-customer-shell #workspace-content #lf-dashboard-customise {
  border-color: var(--lf-premium-line);
  box-shadow: var(--lf-premium-shadow-soft);
}
body.lf-customer-shell #workspace-content .record-list .record-item,
body.lf-customer-shell #workspace-content #commercial-documents .document-line,
body.lf-customer-shell #workspace-content .enquiry-card,
body.lf-customer-shell #workspace-content .lf-client-row {
  border-color: rgba(85, 155, 187, .39);
  border-radius: 13px;
}
body.lf-customer-shell #workspace-content #commercial-documents .document-line,
body.lf-customer-shell #workspace-content .enquiry-card {
  background: linear-gradient(120deg, rgba(19, 55, 75, .36), rgba(7, 31, 49, .15));
}
body.lf-customer-shell #workspace-content .record-item:hover,
body.lf-customer-shell #workspace-content .enquiry-card:hover {
  border-color: color-mix(in srgb, var(--lf-premium-accent) 54%, #345974);
}

/* Consistent dimensional tiles across To Do, My money and Results.
   Retain all existing financial amounts, statuses and semantic colours. */
body.lf-customer-shell .page.active .summary-card,
body.lf-customer-shell .page.active .result-card,
body.lf-customer-shell .page.active .exception-card,
body.lf-customer-shell .page.active .money-stage {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(40, 159, 193, .12), transparent 62%),
    linear-gradient(150deg, rgba(14, 48, 69, .96), rgba(7, 27, 45, .97));
  border: 1px solid var(--lf-premium-line);
  border-radius: 17px;
  box-shadow: var(--lf-premium-shadow-soft);
}
body.lf-customer-shell .page.active .summary-card strong,
body.lf-customer-shell .page.active .result-card .value,
body.lf-customer-shell .page.active .exception-card > strong,
body.lf-customer-shell .page.active .money-stage strong {
  color: #f4fcff;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
body.lf-customer-shell .page.active .summary-card span,
body.lf-customer-shell .page.active .result-card .label,
body.lf-customer-shell .page.active .money-stage span {
  color: #badbea;
}
body.lf-customer-shell .page.active .summary-card:nth-child(3n + 2),
body.lf-customer-shell .page.active .result-card:nth-child(3n + 2) {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(57, 131, 187, .14), transparent 61%),
    linear-gradient(155deg, rgba(15, 45, 73, .97), rgba(8, 29, 48, .97));
}
body.lf-customer-shell .page.active .money-stage:focus-visible,
body.lf-customer-shell .page.active .summary-card:focus-visible,
body.lf-customer-shell .page.active .result-card:focus-visible {
  outline: 2px solid var(--lf-premium-accent);
  outline-offset: 2px;
}

/* Other pages: Connected accounts, system health, feedback and task panels. */
body.lf-customer-shell .page.active .connection-card,
body.lf-customer-shell .page.active .connection-control,
body.lf-customer-shell .page.active .feedback-item,
body.lf-customer-shell .page.active .page-next-step,
body.lf-customer-shell .page.active .next-step-card,
body.lf-customer-shell .page.active .lf-feedback-entry {
  background:
    linear-gradient(143deg, rgba(21, 61, 84, .39), rgba(7, 29, 47, .94));
  border-color: var(--lf-premium-line);
  border-radius: 17px;
  box-shadow: var(--lf-premium-shadow-soft);
}
body.lf-customer-shell .page.active .evidence-guide {
  background:
    linear-gradient(115deg, rgba(21, 61, 84, .64), rgba(6, 26, 44, .9));
  border-color: rgba(87, 153, 184, .38);
  box-shadow: 0 6px 17px rgba(0, 10, 24, .16);
}
body.lf-customer-shell .page.active .evidence-guide > span {
  background: rgba(8, 36, 56, .78);
  border-color: rgba(73, 138, 176, .43);
}
body.lf-customer-shell .page.active .feedback-item {
  border: 1px solid var(--lf-premium-line);
}

/* Table-like information inherits the premium border palette, not new layout. */
body.lf-customer-shell .page.active .table-wrap,
body.lf-customer-shell .page.active .lf-finance-table-wrap {
  border-color: var(--lf-premium-line);
}
body.lf-customer-shell .page.active .table-wrap thead,
body.lf-customer-shell .page.active .lf-finance-month-table thead {
  color: #e8f7fc;
}
body.lf-customer-shell .page.active .table-wrap td,
body.lf-customer-shell .page.active .table-wrap th {
  border-color: rgba(78, 134, 164, .23);
}

/* Give all data-entry pages the same restrained dark field surfaces.
   Never restyle file, date-toggle, radio, checkbox or security UI controls. */
body.lf-customer-shell .page.active input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
body.lf-customer-shell .page.active select,
body.lf-customer-shell .page.active textarea {
  background-color: #0b273d;
  border-color: rgba(84, 145, 179, .52);
  color: #edfaff;
}
body.lf-customer-shell .page.active input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):focus-visible,
body.lf-customer-shell .page.active select:focus-visible,
body.lf-customer-shell .page.active textarea:focus-visible {
  outline-color: var(--lf-premium-accent);
  border-color: var(--lf-premium-accent);
}
body.lf-customer-shell .page.active input::placeholder,
body.lf-customer-shell .page.active textarea::placeholder {
  color: #9dbccc;
}

/* The customer's chosen accent theme also carries through secondary pages.
   Do not replace profit/loss or warning status colours with brand colours. */
body.lf-customer-shell.lf-use-logo-colours .page.active .summary-card,
body.lf-customer-shell.lf-use-logo-colours .page.active .money-stage,
body.lf-customer-shell.lf-use-logo-colours .page.active .result-card,
body.lf-customer-shell.lf-use-logo-colours #workspace-content .record-item {
  border-color: color-mix(in srgb, var(--lf-brand-primary) 34%, #315b76);
}



/* LINKFLOW Premium 2 — visibly differentiated blue/cyan customer visual treatment.
 * Fixes the excessively subtle v1 dark-on-dark panels and logo-tone dominance.
 * Same layout/markup; only colours, borders, background gradients and shadows.
 * Remove premium-visuals.css from index.html to restore the original design.
 */

/* A clear, modern navy blue background instead of nearly-black flat navy. */
body.lf-customer-shell {
  background:
    radial-gradient(ellipse 72% 52% at 80% 10%, rgba(20, 111, 175, .36), transparent 72%),
    radial-gradient(ellipse 48% 60% at 8% 86%, rgba(12, 115, 167, .23), transparent 78%),
    linear-gradient(135deg, #061725 2%, #0a263e 58%, #061b30 100%) !important;
}

/* Main customer business title: stronger contrast and blue atmospheric glow. */
body.lf-customer-shell #lf-customer-home:not(.lf-has-custom-background) {
  background:
    radial-gradient(ellipse 70% 98% at 100% 0%, rgba(54, 139, 209, .26), transparent 72%),
    radial-gradient(ellipse 60% 85% at 0% 100%, rgba(22, 150, 177, .21), transparent 72%),
    linear-gradient(126deg, #103b57 0%, #112c49 53%, #152f5b 100%) !important;
  border-color: rgba(78, 201, 234, .70);
  box-shadow:
    0 25px 56px rgba(0, 7, 25, .44),
    inset 0 3px rgba(72, 214, 238, .66),
    inset 0 0 0 1px rgba(177, 231, 255, .075);
}

/* Deliberately never replace user-selected dashboard photos. */
body.lf-customer-shell #lf-customer-home.lf-has-custom-background {
  border-color: rgba(78, 201, 234, .61);
  box-shadow: 0 22px 50px rgba(0, 9, 26, .35), inset 0 3px rgba(66, 208, 236, .57);
}

/* Overview/Dashboard: distinct, visible KPI cards, not just shadow changes. */
body.lf-customer-shell #lf-customer-home .lf-home-stat {
  background:
    radial-gradient(ellipse at 95% 0%, rgba(37, 192, 229, .24), transparent 74%),
    linear-gradient(148deg, #114463 0%, #092940 94%);
  border: 1px solid rgba(73, 201, 232, .69);
  border-radius: 17px;
  box-shadow:
    0 12px 28px rgba(2, 12, 31, .33),
    inset 0 3px rgba(63, 217, 240, .79),
    inset 0 1px rgba(227, 251, 255, .11);
}
body.lf-customer-shell #lf-customer-home .lf-home-stat:nth-child(2) {
  background:
    radial-gradient(ellipse at 95% 0%, rgba(74, 134, 225, .25), transparent 74%),
    linear-gradient(148deg, #173f68 0%, #0a2a47 94%);
  border-color: rgba(93, 167, 232, .72);
  box-shadow: 0 12px 28px rgba(2, 12, 31, .33), inset 0 3px rgba(93, 164, 237, .88);
}
body.lf-customer-shell #lf-customer-home .lf-home-stat:nth-child(3) {
  background:
    radial-gradient(ellipse at 95% 0%, rgba(51, 205, 180, .19), transparent 74%),
    linear-gradient(148deg, #10515c 0%, #092d43 94%);
  border-color: rgba(70, 197, 191, .72);
  box-shadow: 0 12px 28px rgba(2, 12, 31, .33), inset 0 3px rgba(52, 204, 190, .84);
}
body.lf-customer-shell #lf-customer-home .lf-home-stat span {
  color: #d5edf7;
}
body.lf-customer-shell #lf-customer-home .lf-home-stat strong {
  font-size: clamp(32px, 3.35vw, 47px);
  font-weight: 850;
  color: #ffffff;
}

/* Retain custom logo-brand influence while improving blue button legibility.
   All action buttons stay exactly where they currently are. */
body.lf-customer-shell #lf-customer-home .lf-cockpit-actions button {
  background: linear-gradient(125deg, #17698e 0%, #0e4e77 80%) !important;
  border: 1px solid rgba(100, 218, 239, .75) !important;
  color: #f5fbff;
  box-shadow: 0 7px 20px rgba(1, 14, 34, .28), inset 0 2px rgba(175, 239, 255, .14);
  text-shadow: 0 1px 2px rgba(0, 10, 25, .25);
}
body.lf-customer-shell.lf-use-logo-colours #lf-customer-home .lf-cockpit-actions button {
  background:
    linear-gradient(130deg, color-mix(in srgb, var(--lf-brand-primary) 22%, #187aa3), #0e476d) !important;
  border-color: color-mix(in srgb, var(--lf-brand-primary) 24%, #65c9e9) !important;
}
body.lf-customer-shell #lf-customer-home .lf-cockpit-actions button:hover,
body.lf-customer-shell #lf-customer-home .lf-cockpit-actions button:focus-visible {
  background: linear-gradient(125deg, #2389aa, #135f8c) !important;
  border-color: #9bebf7 !important;
  box-shadow: 0 10px 27px rgba(2, 31, 51, .33), 0 0 0 2px rgba(73, 206, 238, .13);
}

/* Calendar and recent activity now form part of the same visual family. */
body.lf-customer-shell #lf-customer-home .lf-home-lower section,
body.lf-customer-shell #lf-customer-home .lf-month-calendar {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(28, 142, 198, .20), transparent 70%),
    linear-gradient(155deg, rgba(13, 51, 78, .96), rgba(7, 29, 49, .97));
  border-color: rgba(79, 170, 206, .59);
  box-shadow: 0 11px 28px rgba(0, 11, 29, .32), inset 0 2px rgba(89, 184, 218, .30);
}
body.lf-customer-shell #lf-customer-home .lf-home-lower h3,
body.lf-customer-shell #lf-customer-home .lf-calendar-toolbar h3 {
  color: #f4fcff;
}

/* The same recognisable blue top-border treatment appears across customer
   client/job/invoice/settings cards, money tiles and connection panels. */
body.lf-customer-shell #workspace-content .surface:not(#lf-customer-home),
body.lf-customer-shell .page.active:not(#page-workspace):not(#page-overview) .surface {
  border-color: rgba(83, 170, 208, .52);
  background:
    radial-gradient(ellipse at 90% 0%, rgba(28, 128, 177, .17), transparent 70%),
    linear-gradient(155deg, rgba(15, 50, 73, .96), rgba(6, 25, 43, .98));
  box-shadow: 0 12px 32px rgba(0, 10, 30, .30), inset 0 2px rgba(66, 180, 218, .35);
}

/* Don't flatten the distinct positive/negative state indicators. */
body.lf-customer-shell #page-overview .lf-finance-kpi {
  border-color: rgba(76, 189, 224, .67);
  box-shadow: 0 15px 34px rgba(0, 10, 27, .36), inset 0 3px rgba(57, 201, 231, .69);
}
body.lf-customer-shell #page-overview .lf-finance-panel {
  border-color: rgba(78, 172, 210, .56);
  box-shadow: 0 14px 32px rgba(0, 9, 28, .29), inset 0 2px rgba(77, 190, 225, .27);
}
body.lf-customer-shell #page-overview #lf-finance-net-tile.lf-finance-negative {
  border-color: rgba(246, 151, 111, .78);
  box-shadow: 0 14px 32px rgba(0, 10, 27, .28), inset 0 3px rgba(245, 151, 113, .85);
}
body.lf-customer-shell #page-overview #lf-finance-net-tile.lf-finance-positive {
  border-color: rgba(62, 219, 176, .73);
  box-shadow: 0 14px 32px rgba(0, 10, 27, .28), inset 0 3px rgba(79, 224, 184, .84);
}


/* Opt-in logo palette remains visible, but now as a 20% tint of the
   Premium blue so dark olive logos do not make the whole dashboard grey. */
body.lf-customer-shell.lf-use-logo-colours #lf-customer-home,
body.lf-customer-shell.lf-use-logo-colours #lf-customer-home .lf-home-stat,
body.lf-customer-shell.lf-use-logo-colours #lf-customer-home .lf-home-lower section,
body.lf-customer-shell.lf-use-logo-colours #lf-customer-home .lf-month-calendar {
  border-color: color-mix(in srgb, var(--lf-brand-primary) 20%, #62cbe9);
}


/* Dashboard logo-centred visual trial — reversible in this one stylesheet.
   Replace the prominent name/subtitle with the customer's existing saved logo
   ONLY on Dashboard Home. Preserve other cockpit page headings and all data.
   If a workspace has no logo, keep the name and subtitle visible. */
body.lf-customer-shell #lf-customer-home:not(.lf-cockpit-home-hidden):has(#lf-home-business-logo:not([hidden])) .lf-home-heading {
  justify-content: center;
  align-items: center;
  min-height: 195px;
  margin-bottom: 20px;
}
body.lf-customer-shell #lf-customer-home:not(.lf-cockpit-home-hidden):has(#lf-home-business-logo:not([hidden])) .lf-home-heading > div {
  display: none;
}
body.lf-customer-shell #lf-customer-home:not(.lf-cockpit-home-hidden) #lf-home-business-logo:not([hidden]) {
  display: block;
  flex: 0 1 auto;
  width: clamp(195px, 25vw, 320px);
  max-width: min(90%, 360px);
  height: 175px;
  object-fit: contain;
  object-position: center;
  align-self: center;
}
@media (max-width: 650px) {
  body.lf-customer-shell #lf-customer-home:not(.lf-cockpit-home-hidden):has(#lf-home-business-logo:not([hidden])) .lf-home-heading {
    min-height: 150px;
    margin-bottom: 14px;
  }
  body.lf-customer-shell #lf-customer-home:not(.lf-cockpit-home-hidden) #lf-home-business-logo:not([hidden]) {
    width: min(220px, 86%);
    max-width: 86%;
    height: 135px;
  }
}