:root {
  --color-page: #fbfbfb;
  --color-surface: #fdfdfd;
  --color-soft: #f4f3f2;
  --color-evergreen: #04281b;
  --color-green: #1c3d2b;
  --color-sage: #b0b0a3;
  --color-gold: #d49424;
  --color-border: #dedfdc;
  --color-text: #13231c;
  --color-muted: #626a66;
  --color-white: #fbfcfc;
  --font-heading: "DM Serif Display", Georgia, serif;
  --font-body: "Lato", Arial, sans-serif;
  --sidebar-width: 260px;
  --shadow: 0 4px 16px rgba(4, 40, 27, .06);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  color: var(--color-text);
  background: var(--color-page);
  font: 400 16px/1.5 var(--font-body);
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button, input { font: inherit; }

button { color: inherit; }

svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 3px solid #d49424; outline-offset: 3px; }

h1, h2, h3, p { margin-top: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell { width: 100%; flex: 1; display: flex; align-items: stretch; }

.sidebar {
  position: relative;
  z-index: 4;
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  min-height: 100vh;
  padding: 28px 18px 300px;
  overflow: hidden;
  color: var(--color-white);
  background: linear-gradient(150deg, #06382a 0%, #002b21 54%, #001d17 100%);
}

.brand { display: block; width: 215px; margin: 0 auto 42px; }

.sidebar-nav { display: grid; gap: 5px; }

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 46px;
  padding: 10px 13px;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 700;
  transition: background .2s ease;
}

.sidebar-nav a:hover, .sidebar-nav a.active { background: rgba(125, 174, 91, .23); }

.sidebar-nav svg { width: 23px; height: 23px; flex: 0 0 auto; }

.sidebar-insight {
  position: relative;
  z-index: 2;
  margin: 22px 3px 0;
  padding: 20px 17px 17px;
  border: 1px solid rgba(212, 148, 36, .75);
  border-radius: 10px;
  background: rgba(1, 36, 26, .76);
}

.sidebar-insight h2 { margin-bottom: 8px; font: 700 16px/1.3 var(--font-body); }

.sidebar-insight p { margin-bottom: 14px; font-size: 14px; line-height: 1.5; }

.insight-decoration { width: 125px; margin-bottom: 8px; }

.sidebar-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 7px;
  background: rgba(47, 102, 63, .45);
  font-size: 14px;
  font-weight: 700;
}

.sidebar-button svg { width: 17px; height: 17px; }

.sidebar-house {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 290px;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 25%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 25%);
}

.app-content { min-width: 0; flex: 1; background: var(--color-page); }

.topbar {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 14px 28px;
  border-bottom: 1px solid #e6e6e3;
  background: rgba(255, 255, 255, .92);
}

.search {
  width: min(420px, 40vw);
  height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: white;
}

.search svg { width: 20px; flex: 0 0 auto; }

.search input { width: 100%; border: 0; outline: 0; color: var(--color-text); background: transparent; font-size: 15px; }

.topbar-actions { display: flex; align-items: center; gap: 20px; }

.date-button {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: white;
  font-weight: 700;
  cursor: pointer;
}

.date-button svg { width: 19px; height: 19px; }

.notification { position: relative; width: 38px; height: 38px; padding: 7px; border: 0; background: none; cursor: pointer; }

.notification svg { width: 24px; height: 24px; }

.notification span {
  position: absolute;
  top: -4px;
  right: -2px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: white;
  background: #d67e00;
  font-size: 12px;
  font-weight: 900;
}

.profile { display: flex; align-items: center; gap: 11px; min-width: 222px; }

.profile img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; }

.profile div { display: grid; line-height: 1.3; }

.profile strong { font-size: 15px; }

.profile small { margin-top: 3px; color: var(--color-muted); font-size: 13px; }

.profile svg { width: 18px; margin-left: auto; }

main { min-width: 0; }

.page-heading {
  position: relative;
  min-height: 102px;
  display: flex;
  align-items: center;
  padding: 22px 32px 10px;
  overflow: hidden;
}

.page-heading h1 { margin-bottom: 2px; font: 500 38px/1.1 var(--font-heading); }

.page-heading p { margin-bottom: 0; color: #37433d; font-size: 17px; }

.page-heading img { position: absolute; z-index: 0; top: 0; right: 0; width: 245px; max-height: 145px; object-fit: contain; object-position: right top; pointer-events: none; }

.page-heading div { position: relative; z-index: 1; }

.dashboard-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 28px 18px; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }

.metric-card {
  min-width: 0;
  min-height: 147px;
  padding: 16px 18px 11px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .89);
  box-shadow: var(--shadow);
}

.metric-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; }

.metric-heading h2 { margin: 0; font: 700 16px/1.3 var(--font-body); }

.metric-heading span { width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid #67706b; border-radius: 50%; color: #67706b; font-size: 11px; font-weight: 900; }

.metric-card > strong, .renewal-value strong { display: block; font-size: 29px; line-height: 1.15; }

.metric-card p { margin: 6px 0 0; color: #535b57; font-size: 13px; }

.metric-card p span { color: #40805c; font-weight: 900; }

.sparkline { width: 100%; height: 30px; margin-top: 10px; object-fit: fill; }

.renewal-value { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.renewal-value img { width: 78px; height: 78px; object-fit: contain; }

.renewal-card .sparkline { width: 60%; margin-top: -6px; }

.primary-grid { display: grid; grid-template-columns: minmax(630px, 1.7fr) minmax(390px, 1fr); gap: 16px; align-items: start; }

.panel { min-width: 0; border: 1px solid var(--color-border); border-radius: 10px; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow); }

.panel-header { min-height: 60px; display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 13px 16px 9px; }

.panel-header h2 { margin-bottom: 1px; font: 500 20px/1.2 var(--font-heading); }

.panel-header p { margin-bottom: 0; color: var(--color-muted); font-size: 13px; }

.panel-header > a, .panel-footer a, .text-link { display: inline-flex; align-items: center; gap: 7px; color: #063d2c; font-size: 13px; font-weight: 700; white-space: nowrap; }

.panel-header > a { margin-top: 5px; }

.panel-header svg, .panel-footer svg, .text-link svg { width: 16px; height: 16px; }

.table-scroll { overflow-x: auto; scrollbar-width: thin; }

.renewal-table { min-width: 700px; padding: 0 14px; }

.table-head, .table-row { display: grid; grid-template-columns: 1.45fr 1.15fr .85fr 1.3fr 1fr; align-items: center; column-gap: 12px; }

.table-head { min-height: 37px; border-top: 1px solid #ededeb; border-bottom: 1px solid #ededeb; font-size: 12px; font-weight: 900; }

.table-row { min-height: 74px; border-bottom: 1px solid #ededeb; }

.homeowner { display: flex; align-items: center; gap: 10px; min-width: 0; }

.homeowner > img { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }

.homeowner p, .job-date, .status p { display: grid; margin: 0; line-height: 1.35; }

.homeowner strong, .job-date span, .status strong { font-size: 13px; }

.homeowner span, .job-date strong, .status span { color: #3f4743; font-size: 12px; font-weight: 400; }

.house-thumb { width: 105px; height: 52px; border-radius: 5px; object-fit: cover; }

.status { min-height: 47px; display: flex; align-items: center; gap: 9px; padding: 5px 8px; border: 1px solid #dce3dd; border-radius: 8px; background: #f2f6f2; }

.status.warning { border-color: #eddfca; background: #fff8ee; }

.status img { width: 26px; height: 26px; flex: 0 0 auto; object-fit: contain; }

.next-action { display: flex; align-items: center; }

.next-action a, .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 35px;
  padding: 7px 13px;
  border-radius: 6px;
  color: white;
  background: linear-gradient(#07513a, #013526);
  box-shadow: 0 2px 5px rgba(4, 40, 27, .18);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.next-action button { width: 36px; height: 35px; display: grid; place-items: center; margin-left: 3px; border: 1px solid #d9dcd9; border-radius: 6px; background: white; cursor: pointer; }

.next-action svg { width: 17px; }

.panel-footer { min-height: 37px; display: flex; align-items: center; justify-content: space-between; padding: 6px 15px; color: var(--color-muted); font-size: 12px; }

.right-column { display: grid; gap: 16px; }

.workflow-list { position: relative; padding: 0 16px; }

.workflow-list::before { content: ""; position: absolute; top: 30px; bottom: 40px; left: 38px; border-left: 1px dashed #52705f; }

.workflow-list article { position: relative; z-index: 1; min-height: 72px; display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid #e8e9e6; }

.workflow-list h3 { margin-bottom: 3px; font: 700 14px/1.3 var(--font-body); }

.workflow-list p { max-width: 245px; margin-bottom: 0; color: #3f4642; font-size: 12px; line-height: 1.45; }

.workflow-list time { display: grid; text-align: right; font-size: 12px; font-style: normal; }

.workflow-list time small { font-size: 11px; }

.workflow-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #eef3ee; }

.workflow-icon img { width: 29px; height: 29px; object-fit: contain; }

.workflow-icon.complete { background: #e8f2ea; }

.action-needed { align-self: center; padding: 5px 8px; border-radius: 4px; color: #a85e07; background: #fff2dd; font-size: 11px; font-weight: 700; white-space: nowrap; }

.text-link { margin: 11px 16px 13px; }

.inline-heading { display: flex; align-items: baseline; gap: 18px; }

.inline-heading span { color: var(--color-muted); font-size: 12px; }

.experience-content { display: grid; grid-template-columns: 165px 1fr; gap: 24px; padding: 0 16px 14px; }

.phone-preview { overflow: hidden; min-height: 210px; border: 5px solid #07140f; border-radius: 20px; color: white; background: #063a2b; box-shadow: 0 4px 10px rgba(0, 0, 0, .14); }

.phone-brand { padding: 7px 10px; color: #d7ad3c; font: 500 11px var(--font-heading); }

.phone-preview > img { width: 100%; height: 90px; object-fit: cover; object-position: center; }

.phone-preview h3 { margin: 0; padding: 8px 10px 3px; font: 500 16px/1.1 var(--font-heading); }

.phone-preview p { margin: 0; padding: 5px 10px 10px; font-size: 9px; line-height: 1.4; }

.benefits { display: flex; flex-direction: column; align-items: flex-start; }

.benefits h3 { margin: 9px 0 11px; font: 700 14px var(--font-body); }

.benefits ul { display: grid; gap: 10px; margin: 0 0 15px; padding: 0; list-style: none; }

.benefits li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; }

.benefits li img { width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto; object-fit: contain; }

.primary-button { margin-top: auto; }

.primary-button svg { width: 17px; }

.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }

.performance-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0 16px 11px; }

.performance-stats article { display: grid; }

.performance-stats span { font-size: 11px; }

.performance-stats strong { font-size: 20px; line-height: 1.25; }

.performance-stats small { color: #446b54; font-size: 9px; }

.performance-bar { width: calc(100% - 32px); height: 14px; margin: 6px 16px 7px; object-fit: fill; }

.performance-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0 16px 13px; }

.performance-legend span { display: grid; color: #414944; font-size: 11px; }

.performance-legend strong { color: var(--color-text); font-size: 15px; }

.monthly .panel-header button { display: flex; align-items: center; gap: 6px; padding: 5px; border: 0; color: var(--color-muted); background: transparent; font-size: 12px; cursor: pointer; }

.monthly .panel-header button svg { width: 15px; }

.chart { position: relative; height: 155px; margin: 0 16px 12px 42px; }

.chart > svg { width: 100%; height: 125px; overflow: visible; }

.grid-line { stroke: #e1e4e1; stroke-width: 1; }

.chart-area { fill: url(#area); stroke: none; }

.chart-line { fill: none; stroke: #075b3e; stroke-width: 4; }

.chart-dots { fill: #075b3e; stroke: #064d35; stroke-width: 2; }

.chart-y { position: absolute; top: -1px; bottom: 27px; left: -35px; display: flex; flex-direction: column; justify-content: space-between; color: var(--color-muted); font-size: 10px; }

.chart-x { display: flex; justify-content: space-between; padding: 2px 0 0; color: var(--color-muted); font-size: 10px; }

.chart-tooltip { position: absolute; top: -2px; left: 66%; display: grid; padding: 7px 10px; border: 1px solid #dbddda; border-radius: 6px; background: white; box-shadow: 0 3px 8px rgba(0,0,0,.08); font-size: 11px; }

.chart-tooltip strong { font-size: 14px; }

.chart-tooltip small { font-size: 10px; font-weight: 400; }

.automation-note { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 10px 4px 0; }

.automation-note img { width: 18px; height: 18px; object-fit: contain; }

.automation-note p { margin: 0; color: #505854; font-size: 13px; }

footer { flex: 0 0 auto; min-height: 0; background: var(--color-evergreen); }

@media (max-width: 1240px) {
  :root { --sidebar-width: 230px; }
  .sidebar { padding-inline: 14px; }
  .brand { width: 195px; }
  .topbar { padding-inline: 20px; }
  .profile { min-width: 47px; }
  .profile div, .profile > svg { display: none; }
  .dashboard-wrap { padding-inline: 20px; }
  .primary-grid { grid-template-columns: 1fr; }
  .right-column { grid-template-columns: 1fr 1fr; }
  .workflow-list p { max-width: none; }
}

@media (max-width: 980px) {
  .app-shell { display: block; }
  .sidebar { width: 100%; min-height: auto; padding: 14px 18px; overflow: visible; }
  .brand { width: 180px; margin: 0 0 14px; }
  .sidebar-nav { display: flex; overflow-x: auto; padding-bottom: 5px; }
  .sidebar-nav a { min-height: 42px; flex: 0 0 auto; padding: 8px 12px; }
  .sidebar-nav svg { width: 20px; height: 20px; }
  .sidebar-insight, .sidebar-house { display: none; }
  .topbar { min-height: 66px; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .right-column { grid-template-columns: 1fr; }
  .analytics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .search { width: 100%; order: 2; }
  .topbar-actions { width: 100%; justify-content: space-between; gap: 10px; }
  .date-button { padding-inline: 10px; font-size: 13px; }
  .notification { margin-left: auto; }
  .page-heading { min-height: 120px; padding: 24px 18px 16px; }
  .page-heading h1 { font-size: 34px; }
  .page-heading p { max-width: 78%; font-size: 16px; }
  .page-heading img { width: 180px; opacity: .72; }
  .dashboard-wrap { padding-inline: 16px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 140px; }
  .performance-stats, .performance-legend { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .experience-content { grid-template-columns: 145px 1fr; gap: 16px; }
}

@media (max-width: 480px) {
  .sidebar { padding-inline: 12px; }
  .sidebar-nav a span { font-size: 14px; }
  .date-button span { max-width: 152px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-heading p { max-width: 100%; }
  .page-heading img { opacity: .25; }
  .dashboard-wrap { padding-inline: 12px; }
  .panel-header { padding-inline: 13px; }
  .experience-content { grid-template-columns: 1fr; }
  .phone-preview { width: 180px; margin: 0 auto; }
  .benefits { align-items: stretch; }
  .primary-button { align-self: flex-start; }
  .workflow-list article { grid-template-columns: 40px 1fr; }
  .workflow-list time, .action-needed { grid-column: 2; justify-self: start; text-align: left; }
  .performance-stats, .performance-legend { grid-template-columns: 1fr 1fr; }
  .automation-note { align-items: flex-start; }
}

/* ===== app consistency: pinned palette (leads ref) ===== */
:root{--color-evergreen:#04281b;--color-gold:#c99216;--color-muted:#677069;--color-background:#fbfbfb;--font-heading:"DM Serif Display",Georgia,serif;}
.sidebar {position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 22px 16px 0;
  background: linear-gradient(160deg, #043426 0%, var(--color-evergreen) 65%, #003326 100%);
  color: #fff;}
.brand {display: block;
  width: 100%;
  max-width: 205px;
  margin-bottom: 28px;}
.brand img {display: block;
  width: 100%;
  object-fit: contain;}
.primary-nav {display: grid;
  gap: 5px;
  position: relative;
  z-index: 1;}
.primary-nav a {min-height: 43px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: background-color 160ms ease, color 160ms ease;}
.primary-nav a:hover {background: rgba(255, 255, 255, 0.08);}
.primary-nav a.active {background: rgba(88, 135, 61, 0.36);
  color: #f4c32c;}
.primary-nav img {width: 22px;
  height: 22px;
  flex: 0 0 22px;
  object-fit: contain;}
.insights-card {position: relative;
  z-index: 1;
  margin: 28px 4px 22px;
  padding: 16px;
  border: 1px solid rgba(213, 167, 54, 0.7);
  border-radius: var(--radius-md);
  background: rgba(0, 44, 31, 0.72);
  box-shadow: var(--shadow-sm);}
.insights-card h2 {margin: 0 0 7px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;}
.insights-card p {margin: 0 0 13px;
  font-size: 14px;
  line-height: 1.45;}
.insights-card a {width: fit-content;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 6px;
  background: rgba(19, 81, 57, 0.75);
  font-size: 14px;
  font-weight: 600;}
.insights-card svg {width: 16px;
  height: 16px;}
.sidebar-photo {width: calc(100% + 32px);
  max-width: none;
  min-height: 260px;
  margin: auto -16px 0;
  display: block;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%);}
/* ===== app consistency overrides (leads ref) ===== */
.sidebar{width:236px !important;flex:0 0 236px !important;flex-direction:column !important;box-sizing:border-box !important;padding:22px 16px 0 !important;gap:0 !important;height:100vh !important;max-height:100vh !important;min-height:100vh !important;position:sticky !important;top:0 !important;align-self:start !important;overflow-y:auto !important;overflow-x:hidden !important;scrollbar-width:none !important;}
.sidebar::-webkit-scrollbar{display:none !important;}
.sidebar .primary-nav{margin-top:0 !important;padding-top:0 !important;flex:0 0 auto !important;}
.sidebar .brand{margin:0 0 28px !important;padding:0 !important;display:block !important;flex:0 0 auto !important;}
.sidebar .brand img{width:204px !important;height:auto !important;max-width:204px !important;}
.sidebar .insights-card{flex:0 0 auto !important;}
.sidebar-photo{position:static !important;width:236px !important;max-width:none !important;min-width:236px !important;margin:auto -16px 0 -16px !important;height:260px !important;min-height:260px !important;flex:0 0 260px !important;object-fit:cover !important;object-position:center !important;display:block !important;background:none !important;background-image:none !important;}
.sidebar .primary-nav{flex-direction:column !important;}
.sidebar .primary-nav>a{justify-content:flex-start !important;}
.sidebar .primary-nav>a>span{position:static !important;width:auto !important;height:auto !important;margin:0 !important;overflow:visible !important;clip:auto !important;clip-path:none !important;}
.page-heading h1,.main-content>h1,main h1,.workspace>h1{font-size:39px !important;line-height:1.08 !important;font-weight:400 !important;font-family:var(--font-heading) !important;}
.page-heading p,.page-subtitle{font-size:16px !important;}
.topbar{min-height:72px !important;padding-top:14px !important;padding-bottom:14px !important;align-items:center !important;}
footer,.site-footer,.app-footer{background:var(--color-evergreen) !important;}
[class*="card"],.panel{border-radius:10px;}