/* Shared navy, teal, and cool-white palette. Independent of the mascot artwork. */
:root {
  --cincy-accent: #087f8c;
  --cincy-accent-hover: #066975;
  --cincy-navy: #17283e;
  --cincy-midnight: #102036;
  --cincy-deep-teal: #145e68;
  --cincy-link: #086b78;
  --cincy-secondary: #567bac;
  --forest: #145e68;
  --deep: #17283e;
  --leaf: #086b78;
  --bright: #087f8c;
  --mint: #e8f5f6;
  --cream: #f5f7fa;
  --paper: #fff;
  --ink: #223247;
  --muted: #607086;
  --line: #dce4ee;
  --green: #145e68;
  --lime: #087f8c;
  --amber: #ac782d;
  --amber-soft: #fff3df;
  --shadow: 0 10px 30px #1020360d;
  accent-color: var(--cincy-link);
}
body, body.operations-layout { background: var(--cream); color: var(--ink); }
body :is(input, select, textarea):focus {
  border-color: var(--cincy-link);
  box-shadow: 0 0 0 3px #087f8c30;
}
body :is(a, button, summary):focus-visible {
  outline: 2px solid var(--cincy-link); outline-offset: 3px;
}
body .primary, body .success {
  background: var(--cincy-accent) !important; border-color: var(--cincy-accent) !important;
  color: #fff !important; box-shadow: none;
}
body .primary:hover, body .success:hover {
  background: var(--cincy-accent-hover) !important; border-color: var(--cincy-accent-hover) !important;
  color: #fff !important;
}
body .secondary:hover { background: var(--mint); border-color: #7eaab3; }
body .pill, body .summary-icon, body .avatar { background: var(--mint); color: var(--forest); }
body .count { background: var(--forest); color: white; }
body .service-group[open], body .service-selection { background: var(--mint); border-color: #7eaab3; }
body .service-option input { accent-color: var(--cincy-link); }
body .service-count { color: var(--cincy-link); }
body .service-group > summary:focus-visible { outline-color: var(--cincy-link); }

/* Staff and customer workspaces share the same navigation and action colors. */
body.operations-layout .topbar {
  background: var(--cincy-navy); scrollbar-color: #63768e var(--cincy-navy);
}
body.operations-layout .topbar .brand { background: var(--cincy-midnight); border-bottom: 1px solid #ffffff20; }
body.operations-layout .topbar .brand strong { color: #fff; }
body.operations-layout .brand strong small { color: #b6c6d9; }
body.operations-layout .sidebar-navigation .nav-group { color: #9bb0c9; }
body.operations-layout .topbar .sidebar-navigation :is(.nav-row, .nav-child) { color: #e1e9f3; }
body.operations-layout .topbar .sidebar-navigation :is(.nav-row, .nav-child):hover { background: #ffffff0b; }
body.operations-layout .topbar .sidebar-navigation :is(.nav-row.current, .nav-row.current-parent, .nav-child.current) {
  background: #087f8c40; color: #9de4e3; border-left-color: var(--cincy-accent);
}
body.operations-layout .nav-children { background: var(--cincy-midnight); }
body.operations-layout .nav-child.current .nav-dot { background: var(--cincy-accent); border-color: var(--cincy-accent); }
body.operations-layout .topbar :is(a, button, summary):focus-visible { outline-color: #a5e8e6; outline-offset: -3px; }
body.operations-layout .setup-badge { background: #354861; color: #e8eef7; }
body.operations-layout .workspace-topline {
  background: #fff; color: var(--ink); border-bottom: 1px solid var(--line);
}
body.operations-layout .workspace-topline a { color: var(--ink); }
body.operations-layout .workspace-topline button { background: var(--cincy-accent); color: #fff; }
body.operations-layout .workspace-topline input { color: var(--ink); }
body.operations-layout .mobile-toolbar { background: var(--cincy-navy); border-bottom-color: var(--cincy-accent); }
body.operations-layout .mobile-toolbar :is(a, button) { color: #edf3fc; }
body.operations-layout .mobile-toolbar button { background: #283f5a; border-color: #536c89; }
body.operations-layout .mobile-menu-close { background: #283f5a; color: #fff; border-color: #536c89; }
body.operations-layout .section-heading { background: #f5f7fa; color: var(--ink); border-bottom: 1px solid var(--line); }
body.operations-layout .section-heading a { color: var(--cincy-link); }
body.operations-layout .metrics a { border-left-color: #087f8c; }
body.operations-layout .metrics a:nth-child(2) { border-left-color: var(--cincy-secondary); }
body.operations-layout .metrics a:nth-child(3) { border-left-color: #567bac; }
body.operations-layout .metrics a:nth-child(4) { border-left-color: #6b829e; }
body.operations-layout .jobs-toolbar { background: var(--cincy-navy); }
body.operations-layout .jobs-toolbar a.selected { background: var(--cincy-accent); color: #fff; }
body.operations-layout .quick-add summary { background: var(--cincy-accent); color: #fff; }
body.operations-layout .quick-add a { color: var(--cincy-link); }
body.operations-layout .quick-add a:hover { background: var(--mint); }
body.operations-layout :is(.record-tabs a.selected, .customer-tabs a.active, .customer-tabs a.selected, .customer-tabs a[aria-current]) {
  color: var(--cincy-link); border-color: var(--cincy-link);
}
body.operations-layout .directory-name { color: var(--cincy-link); }
body.operations-layout .directory-table tbody tr:hover { background: #f4f9fc; }
body.operations-layout .customer-inline-notes button { color: var(--cincy-link); }
body.operations-layout .customer-main .section-heading { background: transparent; color: var(--ink); }
body.operations-layout .customer-main .section-heading a { color: var(--cincy-link); }
body.operations-layout .calendar-job { background: var(--mint); border-left-color: #087f8c; color: var(--forest); }
body.operations-layout .calendar-job :is(span, small) { color: #536e7d; }
body.operations-layout .calendar-job.complete { background: #edf1f6; border-left-color: #8293a8; }
body.operations-layout .calendar-job.cancelled { background: var(--danger-soft); border-left-color: var(--danger); }
body.operations-layout .calendar-job.delayed { background: var(--amber-soft); border-left-color: var(--amber); }
body.operations-layout .is-today .day-number { background: var(--forest); color: white; }
body.operations-layout .connection-note { background: var(--mint); border-color: var(--line); }
body.operations-layout .thread-row.selected,
body.operations-layout :is(.message-bubble.reply_sent, .message-bubble.reply_draft) { background: var(--mint); }
body.operations-layout .hero { background: linear-gradient(120deg, var(--cincy-navy), var(--forest)); }
body.operations-layout .hero .eyebrow { color: #a5e8e6; }
body.operations-layout .hero .primary { background: var(--cincy-accent); color: #fff; border-color: var(--cincy-accent); }

/* Public website: navy frame, teal accents, quiet content areas. */
body.public-layout > .topline { background: var(--cincy-midnight); color: #dce7f5; }
body.public-layout > header { background: var(--cincy-navy); color: white; border-bottom: 3px solid var(--cincy-accent); }
body.public-layout > header .brand { color: #fff; }
body.public-layout > header .brand small { color: #e4edf9; }
body.public-layout .nav-account { border-color: #628696; color: #c3eff1; }
body.public-layout nav a:hover { color: #a5e8e6; }
body.public-layout .hero { margin-top: 16px; }
body.public-layout .hero-copy { max-width: 64%; padding-top: 70px; padding-bottom: 110px; }
body.public-layout .hero h1 { font-size: clamp(48px, 5.4vw, 80px); }
body.public-layout .hero-photo { object-position: 50% 50%; }
@media(max-width:760px) {
  body.public-layout .hero { background: var(--cincy-navy); min-height: 0; padding-bottom: 64px; }
  body.public-layout .hero-photo { position: relative; display: block; height: auto; width: 100%; object-fit: contain; }
  body.public-layout .hero-shade { display: none; }
  body.public-layout .hero-copy { max-width: none; padding: 24px 7% 25px; }
  body.public-layout .hero h1 { font-size: clamp(42px,8vw,60px); }
}
body.public-layout .hero-shade { background: linear-gradient(90deg,#102036e8,#102036aa 48%,#10203618); }
body.public-layout .hero .eyebrow { color: #a5e8e6; }
body.public-layout :is(.button, button) { background: var(--cincy-accent); color: #fff; }
body.public-layout :is(.button, button):hover { background: var(--cincy-accent-hover); filter: none; }
body.public-layout .hero-link { color: #fff; }
body.public-layout .service-strip { background: var(--cincy-navy); color: #e8eff8; border-bottom-color: #304760; margin-top: 16px; }
body.public-layout .service-strip i { color: #a5e8e6; }
body.public-layout .landscape-tile { background: #edf3fa; }
body.public-layout .seasonal-tile { background: var(--cincy-accent); color: #fff; }
body.public-layout .photo-tile:before { background: linear-gradient(0deg,#102036ed,#10203612); }
body.public-layout .about-band { background: #fff; border-block: 1px solid var(--line); }
body.public-layout .portal-band { background: var(--cincy-navy); color: #f3f7fc; }
body.public-layout .portal-footnote { color: #bccbdd; }
body.public-layout .season-card { background: var(--cincy-accent); color: #fff; }
body.public-layout .season-card .eyebrow { color: #fff; }
body.public-layout .season-card a { border-top-color: #ffffff55; }
body.public-layout .contact-band { background: #fff; }
body.public-layout > footer { background: var(--cincy-midnight); color: #c6d3e5; border-top: 3px solid var(--cincy-accent); }
body.public-layout .footer-brand { color: #a5e8e6; }
body.public-layout .footer-bottom { border-top-color: #344b68; color: #afc1d8; }
body.public-layout .form-card { border-top: 4px solid var(--cincy-accent); }
body.public-layout .notice { background: var(--mint); border-left-color: var(--cincy-link); }
body.public-layout :is(input, select, textarea) { color: var(--ink); }
body.public-layout > header :is(a, button):focus-visible,
body.public-layout .hero a:focus-visible,
body.public-layout .portal-band a:focus-visible,
body.public-layout > footer a:focus-visible { outline-color: #a5e8e6; }

/* Preserve the familiar login layout with the shared navy and teal palette. */
body.login-page {
  background: radial-gradient(ellipse at 15% 10%,#087f8c12,transparent 45%),var(--cincy-navy);
}
body.login-page .login-card { background: #fff; border: 1px solid #dce4ee; border-top: 5px solid var(--cincy-accent); box-shadow: 0 24px 70px #0005; }
body.login-page .login-mascot { display: block; width: 110px; height: 142px; object-fit: contain; margin: 0 auto 16px; }
body.login-page .login-card .eyebrow { color: var(--cincy-link); font-size: 10px; letter-spacing: .12em; }
body.login-page .login-card h1 { margin-top: 12px; }
.login-help { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-top: 20px; }
.login-back { font-size: 12px; margin-top: 24px !important; }
body.login-page .login-card .flash { margin-top: 16px; text-align: left; }
@media(max-width:480px) { body.login-page { padding: 20px 16px; } body.login-page .login-mascot { height: 112px; width: 86px; } }
@media print {
  body.operations-layout { background: white; }
  body.operations-layout .section-heading { background: white; color: black; }
}

body.public-layout .portal-band .eyebrow { color: #a5e8e6; }
body.public-layout .season-card .eyebrow { color: #fff; }
body.operations-layout .metrics a:after { background: #e8f5f6; color: #086b78; }

.signup-card { width: min(100%, 520px); }
.signup-options { display: grid; gap: 12px; margin-top: 28px; }
.signup-options a { display: grid; grid-template-columns: 34px 1fr 20px; gap: 5px 12px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); background: #f7fafc; }
.signup-options a:hover { border-color: var(--cincy-accent); background: var(--mint); }
.signup-options strong { font-size: 16px; }
.signup-options a > span:not(.signup-symbol) { grid-column: 2; color: var(--muted); font-size: 13px; }
.signup-options .signup-symbol { grid-row: 1 / 3; font-size: 27px; color: var(--cincy-link); }
.signup-options b { grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--cincy-link); }
.signup-note { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 0; }
.customer-account-type { font-size: 12px; color: var(--muted); margin: 0 0 14px; }

body.tenant-layout { background: var(--cream); color: var(--ink); margin: 0; }
body.tenant-layout .topbar { position: static; width: auto; height: auto; background: var(--cincy-navy); color: white; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 5%; }
body.tenant-layout .topbar nav { display: flex; gap: 18px; }
body.tenant-layout .topbar form { margin: 0; }
body.tenant-layout .topbar a { color: white; }
body.tenant-layout .shell { margin: 0 auto; width: auto; max-width: 1100px; padding: 30px 5%; }
body.tenant-layout .panel { margin-bottom: 24px; }
body.tenant-layout .notice input { width: 100%; }
@media(max-width:760px) { body.tenant-layout .topbar { flex-wrap: wrap; gap: 12px; } body.tenant-layout .topbar .brand { width: 100%; } body.tenant-layout .topbar nav { flex: 1; } }

/* One selected property, rather than repeated full-size cards. */
.property-workspace{max-width:900px;width:100%;box-sizing:border-box}
.property-picker{margin:0 0 18px!important}.property-picker label{font-size:1rem;font-weight:700;margin:0 0 8px;display:block}.property-picker select{width:100%;min-width:0;margin:0}
.property-workspace details{border-top:1px solid #dce5eb;padding:14px 0;margin:0}
.property-workspace summary{font-weight:600;cursor:pointer}.property-workspace details form{margin-top:14px}
.tenant-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.tenant-fields label{min-width:0}
@media(max-width:600px){.tenant-fields{grid-template-columns:1fr;gap:0}.property-workspace{padding:18px}.property-picker select{font-size:16px}}