/* SEYLAC COBALT OCEAN SYSTEM V2
   One final brand authority for public, user and admin surfaces.
   Primary brand: #124E96. Semantic success, warning, danger and
   financial chart colours intentionally remain distinct. */
:root {
  --sy-font: "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --sy-primary: #124e96 !important;
  --sy-primary-hover: #0e427f !important;
  --sy-primary-active: #0a3568 !important;
  --sy-primary-soft: #e0ecf8 !important;
  --sy-background-soft: #f3f7fc !important;
  --sy-focus: #82adda !important;
  --sy-footer: #0a2a55 !important;
  --sy-gold: #f4b942 !important;
  --sy-mint: #2ed3b7 !important;
  --sy-ink: #071d35 !important;
  --sy-primary-strong: var(--sy-primary-active) !important;
  --sy-navy: var(--sy-primary) !important;
  --sy-navy-2: var(--sy-primary-active) !important;
  --blue: var(--sy-primary) !important;
  --blue2: var(--sy-primary-hover) !important;
  --blue-2: var(--sy-primary-hover) !important;
  --blue-3: var(--sy-focus) !important;
  --blue-dark: var(--sy-primary-hover) !important;
  --blue-strong: var(--sy-primary-hover) !important;
  --blue-soft: var(--sy-primary-soft) !important;
  --blue-pale: var(--sy-background-soft) !important;
  --soft-blue: var(--sy-background-soft) !important;
  --navy: var(--sy-primary) !important;
  --navy-2: var(--sy-primary-active) !important;
  --navy-light: var(--sy-primary-hover) !important;
  --sey-brand: var(--sy-primary) !important;
  --sey-ink: var(--sy-ink) !important;
  --shv-dark: var(--sy-primary) !important;
  --syw-brand: var(--sy-primary) !important;
  --syw-navy: var(--sy-primary) !important;
  --pcc-blue: var(--sy-primary) !important;
  --pcc-blue-2: var(--sy-primary-hover) !important;
  --pcc-navy: var(--sy-primary) !important;
  --pcc-navy-2: var(--sy-primary-active) !important;
  --ucc-blue: var(--sy-primary) !important;
  --ucc-navy: var(--sy-primary) !important;
  --legal-blue: var(--sy-primary) !important;
  --legal-blue-dark: var(--sy-primary-hover) !important;
  --legal-navy: var(--sy-primary-active) !important;
  --smart-blue: var(--sy-primary) !important;
  --smart-navy: var(--sy-primary-active) !important;
  --inv-blue: var(--sy-primary) !important;
  --inv-navy: var(--sy-primary-active) !important;
  --wps-blue: var(--sy-primary) !important;
  --wps-blue-dark: var(--sy-primary-hover) !important;
  --mac-primary: var(--sy-primary) !important;
  --seylac-web-accent: var(--sy-primary) !important;
  --seylac-web-sidebar-active-bg: var(--sy-primary-soft) !important;
  --seylac-web-sidebar-active-text: var(--sy-primary) !important;
  --seylac-primary-button-bg: var(--sy-primary) !important;
  --seylac-primary-button-text: #fff !important;
  --sy-v42-brand: var(--sy-primary) !important;
  --sy-v42-brand-hover: var(--sy-primary-hover) !important;
  --seylac-public-font: var(--sy-font) !important;
}

html body,
html body button,
html body input,
html body select,
html body textarea,
html body optgroup,
html body table {
  font-family: var(--sy-font) !important;
}

html body :is(
  .btn-primary,
  .pcc-btn.primary,
  .pcc-mini-btn,
  .sd26 .btn-primary,
  .syf-btn-primary,
  .sy-ai26-button,
  .nav-actions > .btn,
  .seylac-production-nav .nav-cta,
  .mobile-panel .mobile-cta,
  .guest-card button[type="submit"],
  .auth-submit,
  .sey-ai-send,
  .ai-ui-composer button,
  .dashboard-ai-form .btn,
  .shv-button-dark,
  .invoice-button,
  .wps-btn.primary
) {
  background: var(--sy-primary) !important;
  background-image: none !important;
  border-color: var(--sy-primary) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(18, 78, 150, .20) !important;
}

html body :is(
  .btn-primary,
  .pcc-btn.primary,
  .pcc-mini-btn,
  .sd26 .btn-primary,
  .syf-btn-primary,
  .sy-ai26-button,
  .nav-actions > .btn,
  .seylac-production-nav .nav-cta,
  .mobile-panel .mobile-cta,
  .guest-card button[type="submit"],
  .auth-submit,
  .sey-ai-send,
  .ai-ui-composer button,
  .dashboard-ai-form .btn,
  .shv-button-dark,
  .invoice-button,
  .wps-btn.primary
):hover {
  background: var(--sy-primary-hover) !important;
  border-color: var(--sy-primary-hover) !important;
}

html body :is(
  .btn-secondary,
  .btn-outline,
  .shv-button-outline,
  .sd26 .btn-secondary,
  .pcc-btn.secondary
) {
  border-color: color-mix(in srgb, var(--sy-primary) 38%, #fff) !important;
  color: var(--sy-primary) !important;
}

html body :is(
  .nav-links a[aria-current="page"],
  .mobile-panel a[aria-current="page"],
  .side-link.active,
  .side-sublink.active,
  .pcc-nav a.active,
  .sd26-tab.active,
  .legal-nav-links a[aria-current="page"]
) {
  color: var(--sy-primary) !important;
  border-color: var(--sy-primary) !important;
}

html body :is(.side-link.active, .side-sublink.active, .pcc-nav a.active) {
  background: var(--sy-primary-soft) !important;
  box-shadow: inset 4px 0 0 var(--sy-primary) !important;
}

html body :is(.side-link.active, .side-sublink.active, .pcc-nav a.active) :is(svg, .side-icon) {
  color: var(--sy-primary) !important;
}

html body :is(
  .shv-hero,
  .shv-hero-image,
  .guest-panel,
  .sy-auth-panel,
  .pcc-sidebar,
  .mp-hero,
  .features-hero,
  .solutions-hero,
  .features-cta-box,
  .solutions-cta-box,
  .cta-box,
  .ai-panel,
  .sey-ai-launcher,
  .sey-ai-widget-head,
  .dashboard-ai-intro
) {
  background-color: var(--sy-primary) !important;
  background-image: none !important;
}

html body :is(.seylac-shared-footer, .seylac-footer-modern, .seylac-footer-2026, .seylac-footer, footer.site-footer) {
  background-color: var(--sy-footer) !important;
}

html body.route-dashboard .sd26 {
  --brand: var(--sy-primary) !important;
  --teal: var(--sy-primary-hover) !important;
}

html body.route-dashboard :is(.top-action:last-of-type, .sd26-search button, .sd26-tab.active) {
  background: var(--sy-primary) !important;
  background-image: none !important;
  border-color: var(--sy-primary) !important;
  color: #fff !important;
}

html body.route-dashboard :is(.side-link:hover, .top-action:hover) {
  color: var(--sy-primary) !important;
}

html body.route-dashboard .sd26-metric.cash {
  --metric: var(--sy-primary) !important;
  --metric-soft: var(--sy-primary-soft) !important;
}

html body.route-dashboard .sd26-position-bar {
  background: linear-gradient(180deg, var(--sy-primary), var(--sy-focus)) !important;
}

html body :is(.mp-card, .feature-card, .solution-card, .card, .panel, .app-card) a:not(.btn),
html body :is(.mp-link, .text-link, .eyebrow, .features-kicker, .solutions-kicker, .link-button) {
  color: var(--sy-primary);
}

html body :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(130, 173, 218, .55) !important;
  outline-offset: 2px;
}

html body :is(.btn-danger, .danger, .is-danger, .link-danger) {
  background-image: none !important;
}

@media (max-width: 860px) {
  html body .mobile-panel .mobile-cta {
    background: var(--sy-primary) !important;
    border-color: var(--sy-primary) !important;
    color: #fff !important;
  }
}

/* Public navigation and calls to action. */
html body header.seylac-production-nav .nav-cta,
html body .mobile-panel .mobile-cta,
html body .seylac-site-announcement {
  background: var(--sy-primary) !important;
  background-image: none !important;
  border-color: var(--sy-primary) !important;
  color: #fff !important;
}

html body header.seylac-production-nav .nav-cta:hover,
html body .mobile-panel .mobile-cta:hover {
  background: var(--sy-primary-hover) !important;
  border-color: var(--sy-primary-hover) !important;
  color: #fff !important;
}

html body .mobile-panel {
  background: var(--sy-footer) !important;
  background-image: none !important;
}

html body .mobile-panel a[aria-current="page"] {
  color: #b9d4ef !important;
}

/* The current production homepage is the SHV/S4/SX composition. */
html body .shv-home .shv-hero,
html body .shv-home .shv-hero .shv-hero-copy,
html body .shv-home .shv-hero .shv-hero-image {
  background: var(--sy-primary) !important;
  background-color: var(--sy-primary) !important;
  background-image: none !important;
}

html body .shv-home .shv-button-light {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--sy-primary) !important;
}

html body .shv-home .shv-button-ghost {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .72) !important;
  color: #fff !important;
}

html body .shv-home :is(
  .shv-customer-summary,
  .sx-feature-mobile-copy,
  .s4-story-value .s4-story-copy,
  .s4-story-forward,
  .sv351-about-card
) {
  --shv-brand: var(--sy-primary) !important;
  --sey-brand: var(--sy-primary) !important;
}

html body .shv-home :is(.shv-customer-summary, .sx-feature-mobile, .sx-feature-mobile-copy) {
  background: var(--sy-primary) !important;
  background-color: var(--sy-primary) !important;
  background-image: none !important;
}

html body .shv-home .sx-feature-mobile-visual {
  background: linear-gradient(145deg, var(--sy-primary-active), var(--sy-primary)) !important;
}

html body .shv-home :is(.sx-workspace-preview__balance, .s4-live-card) {
  background: var(--sy-primary-active) !important;
  background-image: none !important;
}

html body .shv-home :is(.s4-value-points span, .shv-operations-cards article > span, .shv-operations-side article > span) {
  background: var(--sy-primary) !important;
  color: #fff !important;
}

html body .shv-home .s4-benefit-grid > div:nth-child(1),
html body .shv-home .s4-benefit-grid > div:nth-child(4) {
  background: var(--sy-primary) !important;
  background-image: none !important;
}

html body .shv-home .s4-benefit-grid > div:nth-child(2),
html body .shv-home .s4-benefit-grid > div:nth-child(3),
html body .shv-home .sv351-about-card {
  background: var(--sy-background-soft) !important;
  border-color: #c8daec !important;
}

html body .shv-home :is(.sv351-about-card h2 em, .sx-feature-label, .s4-link) {
  color: var(--sy-primary) !important;
}

/* Homepage assistant and every public-page assistant use brand blue. */
html body :is(
  .sey-ai-launcher,
  .sey-ai-widget-head,
  .sey-ai-widget .ai-ui-avatar,
  .sey-ai-widget .ai-ui-message.user .ai-ui-bubble,
  .sey-ai-widget .ai-composer-2026 button
) {
  background: var(--sy-primary) !important;
  background-image: none !important;
  border-color: var(--sy-primary) !important;
  color: #fff !important;
}

html body .sey-ai-launcher-dot {
  border-color: var(--sy-primary) !important;
}

/* The shared footer is deliberately a deep member of the same cobalt family. */
html body footer.seylac-shared-footer.seylac-footer-modern,
html body footer.seylac-shared-footer,
html body footer.seylac-footer-2026,
html body footer.seylac-footer,
html body footer.legal-footer,
html body footer.site-footer {
  background: var(--sy-footer) !important;
  background-color: var(--sy-footer) !important;
  background-image: none !important;
}

/* Marketing pages: branded surfaces use cobalt, content cards stay neutral. */
html body :is(
  .features-hero,
  .solutions-hero,
  .mp-hero,
  .ai-hero,
  .contact-hero,
  .features-cta-box,
  .solutions-cta-box,
  .cta-box,
  .sr-note
) {
  --blue: var(--sy-primary) !important;
  --brand: var(--sy-primary) !important;
}

html body :is(.sr-note, .ai-panel) {
  background: var(--sy-primary) !important;
  background-image: none !important;
  color: #fff !important;
}

html body :is(.sr-kicker, .sr-card > span, .sr-card > a) {
  color: var(--sy-primary) !important;
}

/* User workspace brand surfaces. Status and accounting colours are untouched. */
html body.seylac-app {
  --seylac-web-accent: var(--sy-primary) !important;
  --seylac-web-sidebar-active-bg: var(--sy-primary-soft) !important;
  --seylac-web-sidebar-active-text: var(--sy-primary) !important;
}

html body.seylac-app :is(.side-link.active, .side-sublink.active) {
  background: var(--sy-primary-soft) !important;
  color: var(--sy-primary) !important;
  box-shadow: inset 4px 0 0 var(--sy-primary) !important;
}

html body.seylac-app :is(.side-link.active .side-icon, .side-nav-cluster[open] > summary) {
  background: #d2e3f4 !important;
  color: var(--sy-primary) !important;
}

html body.seylac-app :is(.top-action:last-of-type, .sd26-search button, .sd26-tab.active) {
  background: var(--sy-primary) !important;
  background-image: none !important;
  border-color: var(--sy-primary) !important;
  color: #fff !important;
}

html body.route-dashboard .sd26 {
  --brand: var(--sy-primary) !important;
  --teal: var(--sy-primary-hover) !important;
  --mint: var(--sy-focus) !important;
}

html body.route-dashboard .sd26 .sd26-ai {
  border-color: var(--sy-primary) !important;
  box-shadow: 0 12px 32px rgba(18, 78, 150, .12) !important;
}

html body.route-dashboard .sd26 .sd26-ai .dashboard-ai-intro {
  background: linear-gradient(135deg, var(--sy-primary-active), var(--sy-primary) 58%, var(--sy-primary-hover)) !important;
  border-color: var(--sy-primary) !important;
}

html body.route-dashboard .sd26 :is(.dashboard-ai-prompts button, .sd26-quick a > span) {
  border-color: #bfd4ea !important;
  background: var(--sy-primary-soft) !important;
  color: var(--sy-primary) !important;
}

/* Admin control centre: brand chrome only; operational severities remain semantic. */
html body.pcc-body {
  --pcc-blue: var(--sy-primary) !important;
  --pcc-blue-2: var(--sy-primary-hover) !important;
  --pcc-navy: var(--sy-primary) !important;
  --pcc-navy-2: var(--sy-primary-active) !important;
}

html body.pcc-body .pcc-sidebar {
  background: var(--sy-footer) !important;
  background-image: none !important;
}

html body.pcc-body :is(.pcc-nav a.active, .pcc-btn.primary, .pcc-mini-btn) {
  background: var(--sy-primary) !important;
  background-image: none !important;
  border-color: var(--sy-primary) !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  html body .shv-home .shv-hero,
  html body .shv-home .shv-hero .shv-hero-copy,
  html body .shv-home .shv-hero .shv-hero-image {
    background: var(--sy-primary) !important;
    background-color: var(--sy-primary) !important;
    background-image: none !important;
  }
}