/*
 * WOOLLY CRM application theme
 * ----------------------------
 * Loaded last by every application shell. This file is the single colour
 * authority for the product. Legacy token names such as "blue", "navy" and
 * "orange" remain because existing screens consume them; they resolve to the
 * selected theme palette. Classic uses off-white, pale blue, blue and navy;
 * neutral shades and permanent semantic colours support readable states.
 */

:root {
  color-scheme: light;

  /* Core brand */
  --crm-brand-navy: #1d3557;
  --crm-brand-navy-deep: #14253c;
  --crm-brand-blue: #284b73;
  --crm-brand-blue-soft: #eef2f6;
  --crm-brand-orange: #b59670;
  --crm-brand-orange-soft: #fbf7ee;

  /* Application chrome */
  --crm-sidebar-bg: #1d3557;
  --crm-sidebar-bg-strong: #252525;
  --crm-sidebar-text: #ffffff;
  --crm-sidebar-muted: #d6c2a7;
  --crm-sidebar-active: #d6c2a7;
  --crm-border: #dde1e5;
  --crm-content-bg: #f4f6f8;
  --crm-surface: #ffffff;
  --crm-text: #252525;
  --crm-muted: #667085;

  /* Informational styling follows the brand; semantic success and warning
     tokens stay green/amber so users can still understand state instantly. */
  --crm-status-info: #284b73;
  --crm-status-info-bg: #eef2f6;
  --crm-status-info-border: #c7d1dc;
  --crm-status-critical: #9f1520;
  --crm-status-critical-bg: #fff0f1;
  --crm-status-critical-border: #efb7bd;

  /* Unread counts stay bright red in every theme, not a brand/warning accent.
     White on this red has at least 4.5:1 contrast for the small count text. */
  --crm-notification-badge-bg: #e60000;
  --crm-notification-badge-text: #ffffff;

  /* Bootstrap */
  --bs-primary: #284b73;
  --bs-primary-rgb: 40, 75, 115;
  --bs-link-color: #284b73;
  --bs-link-color-rgb: 40, 75, 115;
  --bs-link-hover-color: #1d3557;
  --bs-link-hover-color-rgb: 29, 53, 87;

  /* Shared Woolly design system */
  --wds-border: #dde1e5;
  --wds-border-soft: #eceff1;
  --wds-surface: #ffffff;
  --wds-surface-muted: #f4f5f6;
  --wds-surface-hover: #fbf7ee;
  --wds-text: #3d3d3d;
  --wds-text-muted: #667085;
  --wds-heading: #1d3557;
  --wds-link: #284b73;
  --wds-accent: #9c7f5d;
  --wds-shadow: 0 4px 14px rgba(37, 37, 37, .06);

  /* Authentication and standalone error shells */
  --auth-navy: #1d3557;
  --auth-blue: #284b73;
  --auth-orange: #b59670;
  --auth-ink: #252525;
  --auth-muted: #667085;
  --auth-line: #dde1e5;
  --error-navy: #252525;
  --error-blue: #284b73;
  --error-orange: #9c7f5d;
  --error-border: #dde1e5;
  --error-muted: #667085;
}

html.crm-scroll-active {
  scrollbar-color: rgba(40, 75, 115, .58) transparent;
}

html.crm-scroll-active::-webkit-scrollbar-thumb {
  background: rgba(40, 75, 115, .58);
}

::selection {
  color: #fff;
  background: #284b73;
}

/* Navigation and shell */
.crm-sidebar {
  background: linear-gradient(180deg, #252525 0%, #1d3557 52%, #284b73 100%);
  box-shadow: 12px 0 30px rgba(37, 37, 37, .16);
}

.crm-sidebar-brand {
  border-bottom-color: rgba(214, 194, 167, .42);
  background: rgba(37, 37, 37, .95);
}

.crm-nav-link.active {
  background: linear-gradient(90deg, rgba(214, 194, 167, .22), rgba(40, 75, 115, .24));
}

.crm-nav-link.active i {
  color: #f0dfc8;
}

.crm-topbar {
  border-bottom-color: #dde1e5;
  box-shadow: 0 5px 18px rgba(37, 37, 37, .06);
}

.crm-body a:not(.btn):focus-visible,
.auth-body a:not(.btn):focus-visible,
.error-page a:not(.btn):focus-visible {
  border-radius: 4px;
  outline: 2px solid rgba(40, 75, 115, .32);
  outline-offset: 2px;
}

/* Controls and Bootstrap states */
.crm-body .form-control:focus,
.crm-body .form-select:focus,
.auth-body .form-control:focus,
.auth-body .form-select:focus {
  border-color: #8097af;
  box-shadow: 0 0 0 .2rem rgba(40, 75, 115, .13);
}

.form-check-input:checked {
  border-color: #284b73;
  background-color: #284b73;
}

.form-check-input:focus {
  border-color: #8097af;
  box-shadow: 0 0 0 .2rem rgba(40, 75, 115, .13);
}

.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active {
  border-color: #284b73;
  background-color: #284b73;
}

.crm-body .btn-primary,
.auth-body .btn-primary,
.error-page .btn-primary,
body:not(.crm-body) .no-print.btn-primary {
  --bs-btn-bg: #284b73;
  --bs-btn-border-color: #284b73;
  --bs-btn-hover-bg: #1d3557;
  --bs-btn-hover-border-color: #1d3557;
  --bs-btn-active-bg: #14253c;
  --bs-btn-active-border-color: #14253c;
  --bs-btn-focus-shadow-rgb: 40, 75, 115;
}

.crm-body .btn-outline-primary,
.auth-body .btn-outline-primary,
.error-page .btn-outline-primary,
body:not(.crm-body) .no-print.btn-outline-primary {
  --bs-btn-color: #284b73;
  --bs-btn-border-color: #284b73;
  --bs-btn-hover-bg: #284b73;
  --bs-btn-hover-border-color: #284b73;
  --bs-btn-active-bg: #1d3557;
  --bs-btn-active-border-color: #1d3557;
  --bs-btn-focus-shadow-rgb: 40, 75, 115;
}

.crm-body .text-primary,
.auth-body .text-primary,
.error-page .text-primary {
  color: #284b73 !important;
}

.crm-body .bg-primary-subtle,
.auth-body .bg-primary-subtle {
  background-color: #eef2f6 !important;
}

.crm-body .text-bg-primary,
.auth-body .text-bg-primary {
  color: #fff !important;
  background-color: #284b73 !important;
}

.crm-body .page-link {
  color: #284b73;
}

.crm-body .active > .page-link,
.crm-body .page-link.active,
.crm-body .nav-pills .nav-link.active {
  border-color: #284b73;
  background-color: #284b73;
}

/* Shared page components */
.dashboard-page-actions .btn-primary,
.lead-form-action-buttons .btn-primary,
.quotation-create-action-buttons .btn-primary,
.lead-detail-primary-form .btn,
.quotation-builder-primary-action {
  border-color: #284b73;
  background: linear-gradient(115deg, #1d3557 0%, #284b73 100%);
  box-shadow: inset 0 -2px 0 #b59670, 0 5px 14px rgba(29, 53, 87, .16);
}

.dashboard-page-actions .btn-primary:hover,
.dashboard-page-actions .btn-primary:focus-visible,
.lead-form-action-buttons .btn-primary:hover,
.lead-form-action-buttons .btn-primary:focus-visible,
.quotation-create-action-buttons .btn-primary:hover,
.quotation-create-action-buttons .btn-primary:focus-visible {
  border-color: #14253c;
  background: linear-gradient(115deg, #252525 0%, #1d3557 100%);
  box-shadow: inset 0 -2px 0 #d6c2a7, 0 7px 18px rgba(37, 37, 37, .22);
}

.dashboard-page-actions .btn-primary .bi {
  color: #f0dfc8;
}

.dashboard-page-actions .btn-outline-primary:hover,
.dashboard-page-actions .btn-outline-primary:focus-visible,
.crm-icon-button:hover,
.crm-icon-button:focus {
  border-color: rgba(40, 75, 115, .42);
  color: #1d3557;
  background: #eef2f6;
}

.lead-form-section-icon--blue {
  color: #284b73;
  background: #eef2f6;
}

.management-summary-card--blue {
  --management-summary-accent: #284b73;
  --management-summary-soft: #eef2f6;
  color: inherit;
  background: var(--crm-surface);
}

/* Loading feedback */
.crm-page-loader-bar {
  background: linear-gradient(90deg, #252525 0%, #284b73 72%, #b59670 100%);
  box-shadow: 0 0 9px rgba(40, 75, 115, .42);
}

/* Authentication */
.auth-body {
  background:
    radial-gradient(circle at 8% 8%, rgba(40, 75, 115, .14), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(214, 194, 167, .22), transparent 25%),
    #fbf7ee;
}

.login-brand-panel {
  background:
    radial-gradient(circle at 88% 6%, rgba(214, 194, 167, .3), transparent 23%),
    linear-gradient(145deg, #284b73 0%, #1d3557 46%, #252525 100%);
}

.login-brand-glow-one {
  background: rgba(214, 194, 167, .24);
}

.login-brand-glow-two {
  background: rgba(255, 248, 231, .14);
}

.login-control:focus {
  border-color: #8097af;
  box-shadow: 0 0 0 4px rgba(40, 75, 115, .11);
}

.login-submit-button {
  height: 52px;
  min-height: 52px;
  background: linear-gradient(120deg, #252525, #1d3557 48%, #284b73);
  box-shadow: inset 0 -3px 0 rgba(181, 150, 112, .9), 0 14px 28px rgba(37, 37, 37, .22);
}

.login-submit-button:hover,
.login-submit-button:focus-visible {
  box-shadow: inset 0 -3px 0 #d6c2a7, 0 17px 34px rgba(37, 37, 37, .27);
}

/* Standalone error page */
body.error-page {
  background:
    radial-gradient(circle at 12% 12%, rgba(40, 75, 115, .12), transparent 32rem),
    radial-gradient(circle at 90% 88%, rgba(214, 194, 167, .2), transparent 28rem),
    #fbf7ee;
}

.error-icon {
  color: #284b73;
  background: #eef2f6;
}

.error-actions .btn-primary {
  border-color: #284b73;
  background: #284b73;
}

@media print {
  :root {
    --bs-primary: #284b73;
    --bs-primary-rgb: 40, 75, 115;
  }
}

/* Theme picker */
.crm-language-picker .dropdown-menu {
  width: 224px;
  padding: 8px;
  border-color: var(--crm-border);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(36, 20, 24, .14);
}

.crm-language-trigger {
  width: auto;
  min-width: 54px;
  gap: 5px;
  padding-inline: 9px;
}

.crm-language-code {
  min-width: 18px;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
}

.crm-language-menu-heading {
  display: block;
  padding: 5px 8px 8px;
  color: var(--crm-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.crm-language-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--crm-text);
  background: transparent;
  text-align: left;
}

.crm-language-option:hover,
.crm-language-option:focus-visible {
  border-color: var(--crm-border);
  background: var(--crm-brand-blue-soft);
  outline: none;
}

.crm-language-option[aria-current="true"] {
  border-color: var(--crm-status-info-border);
  background: var(--crm-brand-blue-soft);
}

.crm-language-option .bi-check-lg {
  color: var(--crm-brand-blue);
  opacity: 0;
}

.crm-language-option[aria-current="true"] .bi-check-lg {
  opacity: 1;
}

.crm-language-native {
  font-size: .76rem;
  font-weight: 700;
}

.crm-language-region {
  color: var(--crm-muted);
  font-size: .65rem;
}

:lang(hi) body,
:lang(hi) button,
:lang(hi) input,
:lang(hi) select,
:lang(hi) textarea {
  font-family: "Noto Sans Devanagari", Montserrat, sans-serif;
}

:lang(bn) body,
:lang(bn) button,
:lang(bn) input,
:lang(bn) select,
:lang(bn) textarea {
  font-family: "Noto Sans Bengali", Montserrat, sans-serif;
}

/* Docked organisation chat — LinkedIn/Facebook-style persistent messenger. */
.crm-chat-trigger {
  overflow: visible;
}

.crm-chat-unread-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--crm-surface);
  border-radius: 999px;
  color: #fff;
  background: #ef4444;
  font-size: .6rem;
  font-weight: 800;
  line-height: 1;
}

.crm-chat-unread-badge[hidden],
.crm-chat-window[hidden] {
  display: none !important;
}

.crm-chat-window {
  position: fixed;
  right: 22px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 44px));
  height: min(570px, calc(100vh - 92px));
  overflow: hidden;
  border: 1px solid var(--crm-border);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  color: var(--crm-text);
  background: var(--crm-surface);
  box-shadow: 0 -4px 36px rgba(20, 37, 60, .2);
  z-index: 1085;
  transition: height 180ms ease, width 180ms ease;
}

.crm-chat-window.is-minimized {
  width: 330px;
  height: 58px;
}

.crm-chat-window.is-minimized .crm-chat-window-body {
  display: none;
}

.crm-chat-window-header {
  display: flex;
  flex: 0 0 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--crm-border);
  color: #fff;
  background: linear-gradient(115deg, var(--crm-brand-navy-deep), var(--crm-brand-blue));
}

.crm-chat-window-heading,
.crm-chat-window-heading > span:last-child {
  display: flex;
  align-items: center;
  min-width: 0;
}

.crm-chat-window-heading {
  gap: 10px;
}

.crm-chat-window-heading > span:last-child {
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.crm-chat-window-heading strong {
  font-size: .8rem;
  font-weight: 750;
}

.crm-chat-window-heading small {
  color: rgba(255, 255, 255, .72);
  font-size: .61rem;
}

.crm-chat-window-heading small.is-online {
  color: #bbf7d0;
}

.crm-chat-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .14);
}

.crm-chat-window-controls {
  display: flex;
  gap: 2px;
}

.crm-chat-window-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: transparent;
}

.crm-chat-window-controls button:hover,
.crm-chat-window-controls button:focus-visible {
  background: rgba(255, 255, 255, .14);
  outline: none;
}

.crm-chat-window-body {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 0;
}

.crm-chat-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 12px 9px;
  border-right: 1px solid var(--crm-border);
  background: color-mix(in srgb, var(--crm-content-bg) 48%, var(--crm-surface));
}

.crm-chat-search {
  position: relative;
}

.crm-chat-search i {
  position: absolute;
  top: 50%;
  left: 11px;
  color: var(--crm-muted);
  font-size: .73rem;
  transform: translateY(-50%);
}

.crm-chat-search input {
  width: 100%;
  height: 36px;
  padding: 7px 10px 7px 31px;
  border: 1px solid var(--crm-border);
  border-radius: 10px;
  color: var(--crm-text);
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--crm-brand-blue-soft) 50%, transparent), transparent 18rem),
    var(--crm-surface);
  font-size: .7rem;
  outline: none;
}

.crm-chat-search input:focus {
  border-color: var(--crm-brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--crm-brand-blue) 14%, transparent);
}

.crm-chat-new-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--crm-brand-blue) 48%, var(--crm-border));
  border-radius: 9px;
  color: var(--crm-brand-blue);
  background: var(--crm-surface);
  font-size: .7rem;
  font-weight: 700;
}

.crm-chat-new-button:hover,
.crm-chat-new-button:focus-visible {
  color: #fff;
  background: var(--crm-brand-blue);
  outline: none;
}

.crm-chat-people,
.crm-chat-conversations {
  min-height: 0;
  overflow-y: auto;
}

.crm-chat-people {
  flex: 0 1 44%;
  margin-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--crm-border);
}

.crm-chat-conversations {
  flex: 1 1 auto;
}

.crm-chat-list-label {
  padding: 12px 7px 6px;
  color: var(--crm-muted);
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.crm-chat-conversation-item,
.crm-chat-user-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 7px;
  border: 0;
  border-radius: 10px;
  color: var(--crm-text);
  background: transparent;
  text-align: left;
}

.crm-chat-conversation-item:hover,
.crm-chat-conversation-item:focus-visible,
.crm-chat-user-item:hover,
.crm-chat-user-item:focus-visible {
  background: color-mix(in srgb, var(--crm-brand-blue-soft) 75%, var(--crm-surface));
  outline: none;
}

.crm-chat-conversation-item.is-active {
  background: var(--crm-brand-blue-soft);
  box-shadow: inset 3px 0 var(--crm-brand-blue);
}

.crm-chat-avatar {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--crm-brand-blue) 26%, var(--crm-border));
  border-radius: 50%;
  color: var(--crm-brand-blue);
  background: var(--crm-brand-blue-soft);
  font-size: .72rem;
  font-weight: 800;
}

.crm-chat-presence-dot {
  position: absolute;
  right: -1px;
  bottom: 0;
  width: 10px;
  height: 10px;
  border: 2px solid var(--crm-surface);
  border-radius: 50%;
  background: #22c55e;
}

.crm-chat-conversation-copy,
.crm-chat-user-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.crm-chat-conversation-copy strong,
.crm-chat-user-copy strong {
  overflow: hidden;
  font-size: .69rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-chat-conversation-copy small,
.crm-chat-user-copy small {
  overflow: hidden;
  color: var(--crm-muted);
  font-size: .59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-chat-conversation-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  color: #fff;
  background: #ef4444;
  font-size: .58rem;
  font-weight: 800;
}

.crm-chat-conversation-time {
  align-self: start;
  padding-top: 3px;
  color: var(--crm-muted);
  font-size: .55rem;
}

.crm-chat-list-empty,
.crm-chat-no-messages,
.crm-chat-loading {
  padding: 22px 10px;
  color: var(--crm-muted);
  font-size: .66rem;
  text-align: center;
}

.crm-chat-thread {
  min-width: 0;
  min-height: 0;
  background: var(--crm-surface);
}

.crm-chat-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  padding: 28px;
  color: var(--crm-muted);
  text-align: center;
}

.crm-chat-empty > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  border-radius: 20px;
  color: var(--crm-brand-blue);
  background: var(--crm-brand-blue-soft);
  font-size: 1.6rem;
}

.crm-chat-empty strong {
  color: var(--crm-text);
  font-size: .82rem;
}

.crm-chat-empty p {
  max-width: 280px;
  margin: 7px 0 0;
  font-size: .66rem;
  line-height: 1.5;
}

.crm-chat-thread-active {
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr) auto auto auto;
  height: 100%;
  min-height: 0;
}

.crm-chat-thread-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--crm-border);
}

.crm-chat-thread-person {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.crm-chat-thread-person strong {
  overflow: hidden;
  color: var(--crm-text);
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-chat-thread-person small {
  color: var(--crm-muted);
  font-size: .6rem;
}

.crm-chat-thread-person small.is-online {
  color: #15803d;
}

.crm-chat-message-list {
  min-height: 0;
  padding: 18px 15px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--crm-surface);
}

.crm-chat-message {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin-bottom: 11px;
}

.crm-chat-message.is-own {
  justify-content: flex-end;
}

.crm-chat-message-avatar {
  display: inline-flex;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--crm-brand-blue);
  background: var(--crm-brand-blue-soft);
  font-size: .56rem;
  font-weight: 800;
}

.crm-chat-message-content {
  display: flex;
  flex-direction: column;
  max-width: min(78%, 430px);
}

.crm-chat-message.is-own .crm-chat-message-content {
  align-items: flex-end;
}

.crm-chat-message-sender {
  margin: 0 0 3px 8px;
  color: var(--crm-muted);
  font-size: .56rem;
  font-weight: 650;
}

.crm-chat-message-bubble {
  min-width: 52px;
  padding: 9px 11px;
  border: 1px solid var(--crm-border);
  border-radius: 14px 14px 14px 4px;
  color: var(--crm-text);
  background: color-mix(in srgb, var(--crm-brand-blue-soft) 58%, var(--crm-surface));
  font-size: .7rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.crm-chat-message.is-own .crm-chat-message-bubble {
  border-color: var(--crm-brand-blue);
  border-radius: 14px 14px 4px 14px;
  color: #fff;
  background: var(--crm-brand-blue);
}

.crm-chat-message-text {
  white-space: pre-wrap;
}

.crm-chat-message-quote {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 7px;
  padding: 6px 8px;
  border-left: 3px solid color-mix(in srgb, currentColor 52%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, currentColor 9%, transparent);
  font-size: .61rem;
  opacity: .9;
}

.crm-chat-message-quote span {
  overflow: hidden;
  max-width: 260px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-chat-message-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  padding: 2px 5px 0;
  color: var(--crm-muted);
  font-size: .54rem;
}

.crm-chat-reply-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: var(--crm-muted);
  background: transparent;
  opacity: .35;
}

.crm-chat-message:hover .crm-chat-reply-button,
.crm-chat-reply-button:focus-visible {
  color: var(--crm-brand-blue);
  background: var(--crm-brand-blue-soft);
  opacity: 1;
  outline: none;
}

.crm-chat-typing {
  padding: 3px 17px 6px;
  color: var(--crm-muted);
  font-size: .59rem;
  font-style: italic;
}

.crm-chat-reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border-top: 1px solid var(--crm-border);
  border-left: 3px solid var(--crm-brand-blue);
  background: var(--crm-brand-blue-soft);
}

.crm-chat-reply-preview > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.crm-chat-reply-preview small,
.crm-chat-reply-preview > span > span {
  overflow: hidden;
  font-size: .59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-chat-reply-preview button {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--crm-muted);
  background: transparent;
}

.crm-chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--crm-border);
  background: var(--crm-surface);
}

.crm-chat-composer textarea {
  flex: 1 1 auto;
  min-height: 40px;
  max-height: 112px;
  padding: 10px 12px;
  resize: none;
  overflow-y: auto;
  border: 1px solid var(--crm-border);
  border-radius: 12px;
  color: var(--crm-text);
  background: color-mix(in srgb, var(--crm-content-bg) 42%, var(--crm-surface));
  font-size: .7rem;
  line-height: 1.4;
  outline: none;
}

.crm-chat-composer textarea:focus {
  border-color: var(--crm-brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--crm-brand-blue) 13%, transparent);
}

.crm-chat-composer button {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--crm-brand-blue);
  border-radius: 12px;
  color: #fff;
  background: var(--crm-brand-blue);
}

.crm-chat-composer button:hover,
.crm-chat-composer button:focus-visible {
  filter: brightness(1.12);
  outline: none;
}

.crm-chat-composer button:disabled {
  cursor: wait;
  opacity: .55;
}

:root[data-crm-theme="dark"] .crm-chat-window,
:root[data-crm-theme="dark"] .crm-chat-thread,
:root[data-crm-theme="dark"] .crm-chat-message-list,
:root[data-crm-theme="dark"] .crm-chat-composer,
:root[data-crm-theme="dark"] .crm-chat-search input,
:root[data-crm-theme="dark"] .crm-chat-new-button {
  color: var(--crm-text);
  background-color: var(--crm-surface);
}

:root[data-crm-theme="dark"] .crm-chat-message.is-other .crm-chat-message-bubble {
  background: #202d3d;
}

@media (max-width: 767.98px) {
  .crm-chat-window {
    right: 8px;
    width: calc(100vw - 16px);
    height: min(620px, calc(100vh - 76px));
  }

  .crm-chat-window.is-minimized {
    width: min(330px, calc(100vw - 16px));
  }

  .crm-chat-window-body {
    grid-template-columns: 176px minmax(0, 1fr);
  }

  .crm-chat-message-content {
    max-width: 88%;
  }
}

@media (max-width: 520px) {
  .crm-chat-window-body {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .crm-chat-sidebar {
    padding-inline: 6px;
  }

  .crm-chat-conversation-item,
  .crm-chat-user-item {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px;
    padding-inline: 4px;
  }

  .crm-chat-sidebar .crm-chat-avatar {
    width: 31px;
    height: 31px;
  }

  .crm-chat-conversation-badge,
  .crm-chat-conversation-time {
    display: none;
  }
}

/* Action-column headings are centered consistently across every list/grid. */
.crm-content-container .dashboard-table thead th.table-action-heading,
.crm-content-container table thead th.lead-action-column-heading {
  text-align: center;
}

.crm-theme-picker .dropdown-menu {
  width: 268px;
  max-width: calc(100vw - 24px);
  max-height: min(640px, calc(100dvh - 92px));
  overflow-y: auto;
  padding: 8px;
  border-color: var(--crm-border);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(36, 20, 24, .14);
}

.crm-theme-menu-heading {
  display: block;
  padding: 5px 8px 8px;
  color: var(--crm-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.crm-theme-option {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--crm-text);
  background: transparent;
  text-align: left;
}

.crm-theme-option:hover,
.crm-theme-option:focus-visible {
  border-color: var(--crm-border);
  background: var(--crm-brand-blue-soft);
  outline: none;
}

.crm-theme-option[aria-pressed="true"] {
  border-color: var(--crm-status-info-border);
  background: var(--crm-brand-blue-soft);
}

.crm-theme-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.crm-theme-option-copy strong {
  font-size: .76rem;
  font-weight: 700;
}

.crm-theme-option-copy small {
  overflow: hidden;
  color: var(--crm-muted);
  font-size: .65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-theme-option-check {
  color: var(--crm-brand-blue);
  opacity: 0;
}

.crm-theme-option[aria-pressed="true"] .crm-theme-option-check {
  opacity: 1;
}

.crm-theme-swatch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 34px;
  height: 28px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 8px;
}

.crm-theme-swatch span {
  display: block;
}

.crm-theme-swatch--classic span:nth-child(1) { background: #f9f7f7; }
.crm-theme-swatch--classic span:nth-child(2) { background: #dbe2ef; }
.crm-theme-swatch--classic span:nth-child(3) { background: #3f72af; }
.crm-theme-swatch--classic span:nth-child(4) { background: #112d4e; }
.crm-theme-swatch--light span:nth-child(1) { background: #ffffff; }
.crm-theme-swatch--light span:nth-child(2) { background: #edf2f7; }
.crm-theme-swatch--light span:nth-child(3) { background: #315f8d; }
.crm-theme-swatch--light span:nth-child(4) { background: #d6c2a7; }
.crm-theme-swatch--dark span:nth-child(1) { background: #0d1420; }
.crm-theme-swatch--dark span:nth-child(2) { background: #172130; }
.crm-theme-swatch--dark span:nth-child(3) { background: #315f8d; }
.crm-theme-swatch--dark span:nth-child(4) { background: #d6b28a; }

/* Permanent Lead workflow colours
 * -------------------------------
 * These tokens intentionally sit outside the selectable application themes.
 * A Lead status or priority therefore keeps exactly the same meaning and
 * colour in lists, cards, drawers, dashboards, WhatsApp and follow-ups.
 */
:root {
  --lead-status-new-fg: #075985;
  --lead-status-new-bg: #e0f2fe;
  --lead-status-new-border: #38bdf8;
  --lead-status-assigned-fg: #5b21b6;
  --lead-status-assigned-bg: #ede9fe;
  --lead-status-assigned-border: #a78bfa;
  --lead-status-contacted-fg: #0e7490;
  --lead-status-contacted-bg: #cffafe;
  --lead-status-contacted-border: #22d3ee;
  --lead-status-qualified-fg: #047857;
  --lead-status-qualified-bg: #d1fae5;
  --lead-status-qualified-border: #34d399;
  --lead-status-prepared-fg: #6b21a8;
  --lead-status-prepared-bg: #f3e8ff;
  --lead-status-prepared-border: #c084fc;
  --lead-status-sent-fg: #1d4ed8;
  --lead-status-sent-bg: #dbeafe;
  --lead-status-sent-border: #60a5fa;
  --lead-status-negotiation-fg: #92400e;
  --lead-status-negotiation-bg: #fef3c7;
  --lead-status-negotiation-border: #fbbf24;
  --lead-status-followup-fg: #9a3412;
  --lead-status-followup-bg: #ffedd5;
  --lead-status-followup-border: #fb923c;
  --lead-status-won-fg: #047857;
  --lead-status-won-bg: #d1fae5;
  --lead-status-won-border: #34d399;
  --lead-status-lost-fg: #b91c1c;
  --lead-status-lost-bg: #fee2e2;
  --lead-status-lost-border: #f87171;
  --lead-status-closed-fg: #334155;
  --lead-status-closed-bg: #e2e8f0;
  --lead-status-closed-border: #94a3b8;
  --lead-priority-low-fg: #475569;
  --lead-priority-low-bg: #f1f5f9;
  --lead-priority-low-border: #94a3b8;
  --lead-priority-normal-fg: #1e40af;
  --lead-priority-normal-bg: #dbeafe;
  --lead-priority-normal-border: #60a5fa;
  --lead-priority-high-fg: #92400e;
  --lead-priority-high-bg: #fef3c7;
  --lead-priority-high-border: #f59e0b;
  --lead-priority-urgent-fg: #b91c1c;
  --lead-priority-urgent-bg: #fee2e2;
  --lead-priority-urgent-border: #ef4444;
}

.status-badge:is(
  .status-badge--value-new,
  .status-badge--value-assigned,
  .status-badge--value-contacted,
  .status-badge--value-qualified,
  .status-badge--value-quotationprepared,
  .status-badge--value-quotationsent,
  .status-badge--value-negotiation,
  .status-badge--value-followup,
  .status-badge--value-won,
  .status-badge--value-lost,
  .status-badge--value-closed,
  .status-badge--value-low,
  .status-badge--value-normal,
  .status-badge--value-high,
  .status-badge--value-urgent
) {
  border-color: var(--lead-semantic-border, inherit) !important;
  color: var(--lead-semantic-fg, inherit) !important;
  background-color: var(--lead-semantic-bg, inherit) !important;
}

.status-badge--value-new {
  --lead-semantic-fg: var(--lead-status-new-fg);
  --lead-semantic-bg: var(--lead-status-new-bg);
  --lead-semantic-border: var(--lead-status-new-border);
}

.status-badge--value-assigned {
  --lead-semantic-fg: var(--lead-status-assigned-fg);
  --lead-semantic-bg: var(--lead-status-assigned-bg);
  --lead-semantic-border: var(--lead-status-assigned-border);
}

.status-badge--value-contacted {
  --lead-semantic-fg: var(--lead-status-contacted-fg);
  --lead-semantic-bg: var(--lead-status-contacted-bg);
  --lead-semantic-border: var(--lead-status-contacted-border);
}

.status-badge--value-qualified {
  --lead-semantic-fg: var(--lead-status-qualified-fg);
  --lead-semantic-bg: var(--lead-status-qualified-bg);
  --lead-semantic-border: var(--lead-status-qualified-border);
}

.status-badge--value-quotationprepared {
  --lead-semantic-fg: var(--lead-status-prepared-fg);
  --lead-semantic-bg: var(--lead-status-prepared-bg);
  --lead-semantic-border: var(--lead-status-prepared-border);
}

.status-badge--value-quotationsent {
  --lead-semantic-fg: var(--lead-status-sent-fg);
  --lead-semantic-bg: var(--lead-status-sent-bg);
  --lead-semantic-border: var(--lead-status-sent-border);
}

.status-badge--value-negotiation {
  --lead-semantic-fg: var(--lead-status-negotiation-fg);
  --lead-semantic-bg: var(--lead-status-negotiation-bg);
  --lead-semantic-border: var(--lead-status-negotiation-border);
}

.status-badge--value-followup {
  --lead-semantic-fg: var(--lead-status-followup-fg);
  --lead-semantic-bg: var(--lead-status-followup-bg);
  --lead-semantic-border: var(--lead-status-followup-border);
}

.status-badge--value-won {
  --lead-semantic-fg: var(--lead-status-won-fg);
  --lead-semantic-bg: var(--lead-status-won-bg);
  --lead-semantic-border: var(--lead-status-won-border);
}

.status-badge--value-lost {
  --lead-semantic-fg: var(--lead-status-lost-fg);
  --lead-semantic-bg: var(--lead-status-lost-bg);
  --lead-semantic-border: var(--lead-status-lost-border);
}

.status-badge--value-closed {
  --lead-semantic-fg: var(--lead-status-closed-fg);
  --lead-semantic-bg: var(--lead-status-closed-bg);
  --lead-semantic-border: var(--lead-status-closed-border);
}

.status-badge--value-low {
  --lead-semantic-fg: var(--lead-priority-low-fg);
  --lead-semantic-bg: var(--lead-priority-low-bg);
  --lead-semantic-border: var(--lead-priority-low-border);
}

.status-badge--value-normal {
  --lead-semantic-fg: var(--lead-priority-normal-fg);
  --lead-semantic-bg: var(--lead-priority-normal-bg);
  --lead-semantic-border: var(--lead-priority-normal-border);
}

.status-badge--value-high {
  --lead-semantic-fg: var(--lead-priority-high-fg);
  --lead-semantic-bg: var(--lead-priority-high-bg);
  --lead-semantic-border: var(--lead-priority-high-border);
}

.status-badge--value-urgent {
  --lead-semantic-fg: var(--lead-priority-urgent-fg);
  --lead-semantic-bg: var(--lead-priority-urgent-bg);
  --lead-semantic-border: var(--lead-priority-urgent-border);
}

.lead-semantic-select {
  border-left: 4px solid var(--lead-semantic-border, var(--crm-border));
  color: var(--lead-semantic-fg, var(--crm-text));
  background-color: var(--lead-semantic-bg, var(--crm-surface));
  font-weight: 600;
}

.lead-semantic-select[data-semantic-value="new"] { --lead-semantic-fg: var(--lead-status-new-fg); --lead-semantic-bg: var(--lead-status-new-bg); --lead-semantic-border: var(--lead-status-new-border); }
.lead-semantic-select[data-semantic-value="assigned"] { --lead-semantic-fg: var(--lead-status-assigned-fg); --lead-semantic-bg: var(--lead-status-assigned-bg); --lead-semantic-border: var(--lead-status-assigned-border); }
.lead-semantic-select[data-semantic-value="contacted"] { --lead-semantic-fg: var(--lead-status-contacted-fg); --lead-semantic-bg: var(--lead-status-contacted-bg); --lead-semantic-border: var(--lead-status-contacted-border); }
.lead-semantic-select[data-semantic-value="qualified"] { --lead-semantic-fg: var(--lead-status-qualified-fg); --lead-semantic-bg: var(--lead-status-qualified-bg); --lead-semantic-border: var(--lead-status-qualified-border); }
.lead-semantic-select[data-semantic-value="quotationprepared"] { --lead-semantic-fg: var(--lead-status-prepared-fg); --lead-semantic-bg: var(--lead-status-prepared-bg); --lead-semantic-border: var(--lead-status-prepared-border); }
.lead-semantic-select[data-semantic-value="quotationsent"] { --lead-semantic-fg: var(--lead-status-sent-fg); --lead-semantic-bg: var(--lead-status-sent-bg); --lead-semantic-border: var(--lead-status-sent-border); }
.lead-semantic-select[data-semantic-value="negotiation"] { --lead-semantic-fg: var(--lead-status-negotiation-fg); --lead-semantic-bg: var(--lead-status-negotiation-bg); --lead-semantic-border: var(--lead-status-negotiation-border); }
.lead-semantic-select[data-semantic-value="followup"] { --lead-semantic-fg: var(--lead-status-followup-fg); --lead-semantic-bg: var(--lead-status-followup-bg); --lead-semantic-border: var(--lead-status-followup-border); }
.lead-semantic-select[data-semantic-value="won"] { --lead-semantic-fg: var(--lead-status-won-fg); --lead-semantic-bg: var(--lead-status-won-bg); --lead-semantic-border: var(--lead-status-won-border); }
.lead-semantic-select[data-semantic-value="lost"] { --lead-semantic-fg: var(--lead-status-lost-fg); --lead-semantic-bg: var(--lead-status-lost-bg); --lead-semantic-border: var(--lead-status-lost-border); }
.lead-semantic-select[data-semantic-value="closed"] { --lead-semantic-fg: var(--lead-status-closed-fg); --lead-semantic-bg: var(--lead-status-closed-bg); --lead-semantic-border: var(--lead-status-closed-border); }
.lead-semantic-select[data-semantic-value="low"] { --lead-semantic-fg: var(--lead-priority-low-fg); --lead-semantic-bg: var(--lead-priority-low-bg); --lead-semantic-border: var(--lead-priority-low-border); }
.lead-semantic-select[data-semantic-value="normal"] { --lead-semantic-fg: var(--lead-priority-normal-fg); --lead-semantic-bg: var(--lead-priority-normal-bg); --lead-semantic-border: var(--lead-priority-normal-border); }
.lead-semantic-select[data-semantic-value="high"] { --lead-semantic-fg: var(--lead-priority-high-fg); --lead-semantic-bg: var(--lead-priority-high-bg); --lead-semantic-border: var(--lead-priority-high-border); }
.lead-semantic-select[data-semantic-value="urgent"] { --lead-semantic-fg: var(--lead-priority-urgent-fg); --lead-semantic-bg: var(--lead-priority-urgent-bg); --lead-semantic-border: var(--lead-priority-urgent-border); }

/* Informational Cruise and Package duration in Add/Edit Lead */
.lead-service-duration {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 .75rem .75rem;
  padding: .65rem .75rem;
  border: 1px solid #d6c2a7;
  border-radius: .65rem;
  color: #252525;
  background: #fbf7ee;
}

.lead-service-duration[hidden] {
  display: none;
}

.lead-service-duration-icon {
  display: grid;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: .6rem;
  color: #fff;
  background: #284b73;
}

.lead-service-duration-copy {
  display: grid;
  min-width: 0;
  gap: .12rem;
}

.lead-service-duration-copy > span {
  color: #667085;
  font-size: 8pt;
  font-weight: 650;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.lead-service-duration-copy strong {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: #1d3557;
  font-size: 9.5pt;
}

.lead-service-duration-copy small {
  color: #526175;
  font-size: 8.5pt;
}

/* Permanent application button system
 * -----------------------------------
 * Matches the approved compact navy button reference. Page-level styles may
 * arrange buttons, but colour, shape, typography and interaction live here.
 */
:root {
  --app-button-primary: #1d3557;
  --app-button-primary-hover: #14253c;
  --app-button-primary-active: #252525;
  --app-button-accent: #b59670;
  --app-button-text: #ffffff;
  --app-button-height: 36px;
  --app-button-radius: 8px;
  --app-button-shadow: 0 4px 9px rgba(37, 37, 37, .16);
  --app-button-focus: rgba(40, 75, 115, .24);
}

.crm-body .btn,
.auth-body .btn,
.error-page .btn,
body:not(.crm-body) .no-print.btn {
  display: inline-flex;
  min-height: var(--app-button-height);
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--app-button-radius);
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease;
}

.crm-body .btn-sm,
.auth-body .btn-sm,
.error-page .btn-sm {
  min-height: 32px;
  padding: 6px 11px;
  font-size: .7rem;
}

.crm-body .btn-lg,
.auth-body .btn-lg,
.error-page .btn-lg {
  min-height: 42px;
  padding: 10px 17px;
  font-size: .82rem;
}

.crm-body .btn .bi,
.auth-body .btn .bi,
.error-page .btn .bi,
body:not(.crm-body) .no-print.btn .bi {
  margin: 0 !important;
  color: currentColor !important;
  font-size: .82rem;
  font-weight: 400;
  line-height: 1;
}

.crm-body .btn.btn-primary,
.crm-body .dashboard-page-actions .btn.btn-primary,
.crm-body .lead-form-action-buttons .btn.btn-primary,
.crm-body .quotation-create-action-buttons .btn.btn-primary,
.crm-body .lead-detail-primary-form .btn,
.auth-body .btn.btn-primary,
.error-page .btn.btn-primary,
body:not(.crm-body) .no-print.btn.btn-primary {
  border-color: var(--app-button-primary) !important;
  color: var(--app-button-text) !important;
  background: var(--app-button-primary) !important;
  background-image: none !important;
  box-shadow: inset 0 -2px 0 var(--app-button-accent), var(--app-button-shadow) !important;
}

.crm-body .btn.btn-primary:hover,
.crm-body .btn.btn-primary:focus-visible,
.crm-body .dashboard-page-actions .btn.btn-primary:hover,
.crm-body .dashboard-page-actions .btn.btn-primary:focus-visible,
.auth-body .btn.btn-primary:hover,
.auth-body .btn.btn-primary:focus-visible,
.error-page .btn.btn-primary:hover,
.error-page .btn.btn-primary:focus-visible,
body:not(.crm-body) .no-print.btn.btn-primary:hover,
body:not(.crm-body) .no-print.btn.btn-primary:focus-visible {
  border-color: var(--app-button-primary-hover) !important;
  color: var(--app-button-text) !important;
  background: var(--app-button-primary-hover) !important;
  box-shadow: inset 0 -2px 0 var(--app-button-accent), var(--app-button-shadow) !important;
  transform: translateY(-1px);
}

.crm-body .btn.btn-primary:active,
.auth-body .btn.btn-primary:active,
.error-page .btn.btn-primary:active,
body:not(.crm-body) .no-print.btn.btn-primary:active {
  border-color: var(--app-button-primary-active) !important;
  background: var(--app-button-primary-active) !important;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .18), inset 0 -1px 0 var(--app-button-accent) !important;
  transform: translateY(0);
}

.crm-body .btn.btn-outline-primary,
.auth-body .btn.btn-outline-primary,
.error-page .btn.btn-outline-primary,
body:not(.crm-body) .no-print.btn.btn-outline-primary {
  border-color: #8093a8 !important;
  color: var(--app-button-primary) !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: inset 0 -2px 0 #eceff1, 0 2px 6px rgba(37, 37, 37, .08) !important;
}

.crm-body .btn.btn-outline-primary:hover,
.crm-body .btn.btn-outline-primary:focus-visible,
.auth-body .btn.btn-outline-primary:hover,
.auth-body .btn.btn-outline-primary:focus-visible,
.error-page .btn.btn-outline-primary:hover,
.error-page .btn.btn-outline-primary:focus-visible,
body:not(.crm-body) .no-print.btn.btn-outline-primary:hover,
body:not(.crm-body) .no-print.btn.btn-outline-primary:focus-visible {
  border-color: var(--app-button-primary) !important;
  color: #fff !important;
  background: var(--app-button-primary) !important;
  box-shadow: inset 0 -2px 0 var(--app-button-accent), var(--app-button-shadow) !important;
  transform: translateY(-1px);
}

.crm-body .btn.btn-secondary,
.crm-body .btn.btn-outline-secondary,
.auth-body .btn.btn-secondary,
.auth-body .btn.btn-outline-secondary,
.error-page .btn.btn-secondary,
.error-page .btn.btn-outline-secondary {
  border-color: #c8cdd2 !important;
  color: #3d3d3d !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: inset 0 -2px 0 #eceff1, 0 2px 6px rgba(37, 37, 37, .08) !important;
}

.crm-body .btn.btn-secondary:hover,
.crm-body .btn.btn-outline-secondary:hover,
.crm-body .btn.btn-secondary:focus-visible,
.crm-body .btn.btn-outline-secondary:focus-visible,
.auth-body .btn.btn-secondary:hover,
.auth-body .btn.btn-outline-secondary:hover,
.error-page .btn.btn-secondary:hover,
.error-page .btn.btn-outline-secondary:hover {
  border-color: #9da4aa !important;
  color: #252525 !important;
  background: #fbf7ee !important;
  box-shadow: inset 0 -2px 0 #d6c2a7, 0 4px 9px rgba(37, 37, 37, .1) !important;
  transform: translateY(-1px);
}

.crm-body .btn.btn-danger,
.crm-body .btn.btn-outline-danger,
.auth-body .btn.btn-danger,
.auth-body .btn.btn-outline-danger,
.error-page .btn.btn-danger,
.error-page .btn.btn-outline-danger {
  border-color: var(--crm-status-critical) !important;
  color: var(--crm-status-critical) !important;
  background: var(--crm-status-critical-bg) !important;
  background-image: none !important;
  box-shadow: inset 0 -2px 0 var(--crm-status-critical-border), 0 2px 6px rgba(37, 37, 37, .08) !important;
}

.crm-body .btn.btn-danger:hover,
.crm-body .btn.btn-outline-danger:hover,
.crm-body .btn.btn-danger:focus-visible,
.crm-body .btn.btn-outline-danger:focus-visible,
.auth-body .btn.btn-danger:hover,
.auth-body .btn.btn-outline-danger:hover,
.error-page .btn.btn-danger:hover,
.error-page .btn.btn-outline-danger:hover {
  border-color: var(--crm-status-critical) !important;
  color: #fff !important;
  background: var(--crm-status-critical) !important;
  box-shadow: inset 0 -2px 0 #e8a6a1, 0 4px 9px rgba(180, 35, 24, .18) !important;
  transform: translateY(-1px);
}

.crm-body .btn.btn-success,
.crm-body .btn.btn-outline-success {
  border-color: var(--crm-status-positive) !important;
  color: var(--crm-status-positive) !important;
  background: var(--crm-status-positive-bg) !important;
  background-image: none !important;
  box-shadow: inset 0 -2px 0 var(--crm-status-positive-border), 0 2px 6px rgba(37, 37, 37, .08) !important;
}

.crm-body .btn.btn-success:hover,
.crm-body .btn.btn-outline-success:hover,
.crm-body .btn.btn-success:focus-visible,
.crm-body .btn.btn-outline-success:focus-visible {
  color: #fff !important;
  background: var(--crm-status-positive) !important;
  box-shadow: inset 0 -2px 0 #9ed3b7, 0 4px 9px rgba(20, 122, 80, .17) !important;
  transform: translateY(-1px);
}

.crm-body .btn.btn-warning,
.crm-body .btn.btn-outline-warning {
  border-color: var(--crm-status-warning-border) !important;
  color: var(--crm-status-warning) !important;
  background: var(--crm-status-warning-bg) !important;
  background-image: none !important;
  box-shadow: inset 0 -2px 0 var(--crm-status-warning-border), 0 2px 6px rgba(37, 37, 37, .08) !important;
}

.crm-body .btn.btn-link {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 3px;
  color: #284b73;
  background: transparent;
  box-shadow: none !important;
}

.crm-body .btn:focus-visible,
.auth-body .btn:focus-visible,
.error-page .btn:focus-visible,
body:not(.crm-body) .no-print.btn:focus-visible {
  outline: 3px solid var(--app-button-focus);
  outline-offset: 2px;
}

.crm-body .btn:disabled,
.crm-body .btn.disabled,
.auth-body .btn:disabled,
.auth-body .btn.disabled,
.error-page .btn:disabled,
.error-page .btn.disabled {
  box-shadow: none !important;
  transform: none !important;
}

/* Compact icon actions use the same radius, navy/white base and elevation. */
.crm-body .table-action-icon,
.crm-body .crm-icon-button {
  border-color: #d6dbe0;
  border-radius: var(--app-button-radius);
  color: #284b73;
  background: #fff;
  box-shadow: 0 2px 5px rgba(37, 37, 37, .08);
}

.crm-body .table-action-icon:hover,
.crm-body .table-action-icon:focus-visible,
.crm-body .crm-icon-button:hover,
.crm-body .crm-icon-button:focus-visible {
  border-color: #8093a8;
  color: #1d3557;
  background: #eef2f6;
  box-shadow: inset 0 -2px 0 #d6c2a7, 0 3px 7px rgba(37, 37, 37, .1);
  transform: translateY(-1px);
}

.crm-body .table-action-icon--positive {
  color: var(--crm-status-positive);
}

.crm-body .table-action-icon--critical {
  color: var(--crm-status-critical);
}

.crm-body .table-action-icon--neutral {
  color: var(--crm-status-neutral);
}

.crm-body .customer-detail-action,
.crm-body .quotation-add-customer-link,
.crm-body .lead-document-trigger,
.crm-body .crm-page-control {
  border-color: #c8cdd2;
  border-radius: var(--app-button-radius);
  color: #1d3557;
  background: #fff;
  box-shadow: inset 0 -2px 0 #eceff1, 0 2px 6px rgba(37, 37, 37, .08);
}

.crm-body .customer-detail-action:hover,
.crm-body .quotation-add-customer-link:hover,
.crm-body .lead-document-trigger:hover:not(:disabled),
.crm-body .lead-document-trigger:focus-visible:not(:disabled),
.crm-body .crm-page-control:hover {
  border-color: #8093a8;
  color: #1d3557;
  background: #fbf7ee;
  box-shadow: inset 0 -2px 0 #d6c2a7, 0 4px 9px rgba(37, 37, 37, .1);
  transform: translateY(-1px);
}

.crm-body .customer-detail-action--primary,
.crm-body .whatsapp-send-button {
  border-color: var(--app-button-primary);
  color: #fff;
  background: var(--app-button-primary);
  box-shadow: inset 0 -2px 0 var(--app-button-accent), var(--app-button-shadow);
}

.crm-body .customer-detail-action--primary:hover,
.crm-body .whatsapp-send-button:hover,
.crm-body .whatsapp-send-button:focus-visible {
  border-color: var(--app-button-primary-hover);
  color: #fff;
  background: var(--app-button-primary-hover);
  box-shadow: inset 0 -2px 0 #d6c2a7, 0 6px 13px rgba(37, 37, 37, .2);
  transform: translateY(-1px);
}

.crm-body .lead-view-switch-button.active {
  color: #fff;
  background: var(--app-button-primary);
  box-shadow: inset 0 -2px 0 var(--app-button-accent), 0 3px 7px rgba(37, 37, 37, .13);
}

.crm-body .lead-view-switch-button.active .bi {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .crm-body .btn,
  .auth-body .btn,
  .error-page .btn,
  .crm-body .table-action-icon,
  .crm-body .crm-icon-button {
    transition: none;
  }
}

/* Permanent application dropdown system
 * -------------------------------------
 * All native and searchable selection controls share the approved compact
 * white surface, charcoal text, soft border and navy focus treatment.
 */
:root {
  --app-select-height: 2.5rem;
  --app-select-border: #cbd5df;
  --app-select-border-hover: #aebdcb;
  --app-select-border-focus: #7089a3;
  --app-select-bg: #ffffff;
  --app-select-text: #252525;
  --app-select-muted: #667085;
  --app-select-radius: 8px;
  --app-select-focus: rgba(40, 75, 115, .18);
}

.form-select {
  min-height: var(--app-select-height) !important;
  border-color: var(--app-select-border) !important;
  border-radius: var(--app-select-radius) !important;
  color: var(--app-select-text);
  background-color: var(--app-select-bg);
  font-size: 9pt !important;
  font-weight: 550;
  line-height: 1.35;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-select:not([multiple]):not([size]),
.form-select:not([multiple])[size="1"] {
  padding: .48rem 2.25rem .48rem .75rem !important;
  background-position: right .75rem center !important;
  background-size: 16px 12px !important;
}

.form-floating > .form-select:not([multiple]) {
  padding-top: 1.625rem !important;
  padding-bottom: .625rem !important;
}

.form-select:hover:not(:disabled) {
  border-color: var(--app-select-border-hover) !important;
}

.form-select:focus {
  border-color: var(--app-select-border-focus) !important;
  outline: 0;
  box-shadow: 0 0 0 .2rem var(--app-select-focus) !important;
}

.form-select:disabled {
  border-color: var(--crm-border) !important;
  color: var(--app-select-muted) !important;
  background-color: var(--wds-surface-muted) !important;
  opacity: 1;
  cursor: not-allowed;
}

.form-select.is-invalid,
.was-validated .form-select:invalid {
  border-color: var(--crm-status-critical) !important;
}

.form-select.is-invalid:focus,
.was-validated .form-select:invalid:focus {
  box-shadow: 0 0 0 .2rem rgba(159, 21, 32, .14) !important;
}

/* Preserve permanent Lead status/priority meaning within the shared shape. */
.form-select.lead-semantic-select {
  border-left-color: var(--lead-semantic-border, var(--app-select-border)) !important;
  color: var(--lead-semantic-fg, var(--app-select-text));
  background-color: var(--lead-semantic-bg, var(--app-select-bg));
}

.crm-searchable-select-trigger {
  min-height: var(--app-select-height) !important;
  border-color: var(--app-select-border) !important;
  border-radius: var(--app-select-radius) !important;
  color: var(--app-select-text) !important;
  background-color: var(--app-select-bg) !important;
  font-size: 9pt !important;
  font-weight: 550;
  box-shadow: none !important;
}

.crm-searchable-select-trigger:hover {
  border-color: var(--app-select-border-hover) !important;
}

.crm-searchable-select-trigger:focus-visible,
.crm-searchable-select-trigger[aria-expanded="true"] {
  border-color: var(--app-select-border-focus) !important;
  outline: 0;
  box-shadow: 0 0 0 .2rem var(--app-select-focus) !important;
}

.crm-searchable-select-panel {
  border-color: var(--app-select-border) !important;
  border-radius: var(--app-select-radius) !important;
  background: var(--app-select-bg) !important;
  box-shadow: 0 12px 28px rgba(29, 53, 87, .16) !important;
}

.crm-searchable-select-option {
  border-radius: 6px !important;
  color: var(--app-select-text) !important;
  font-size: 9pt !important;
}

.crm-searchable-select-option:hover,
.crm-searchable-select-option:focus,
.crm-searchable-select-option[aria-selected="true"] {
  color: #1d3557 !important;
  background: #eef2f6 !important;
}

/* Additional application themes
 * -----------------------------
 * Light keeps the workspace airy and moves navigation onto a white surface.
 * Dark changes the complete application shell and shared content primitives,
 * while permanent status and priority colours retain their business meaning.
 */
:root[data-crm-theme="light"] {
  color-scheme: light;
  --crm-brand-navy: #183b63;
  --crm-brand-navy-deep: #102a47;
  --crm-brand-blue: #315f8d;
  --crm-brand-blue-soft: #edf4fa;
  --crm-brand-orange: #b58b5d;
  --crm-brand-orange-soft: #fbf6ef;
  --crm-sidebar-bg: #ffffff;
  --crm-sidebar-bg-strong: #f7f9fc;
  --crm-sidebar-text: #31445a;
  --crm-sidebar-muted: #718096;
  --crm-sidebar-active: #315f8d;
  --crm-border: #dce3ea;
  --crm-content-bg: #f3f6f9;
  --crm-surface: #ffffff;
  --crm-text: #202b38;
  --crm-muted: #667085;
  --wds-border: #dce3ea;
  --wds-border-soft: #e9eef3;
  --wds-surface: #ffffff;
  --wds-surface-muted: #f5f7fa;
  --wds-surface-hover: #edf4fa;
  --wds-text: #31445a;
  --wds-text-muted: #667085;
  --wds-heading: #183b63;
  --wds-link: #315f8d;
  --app-button-primary: #183b63;
  --app-button-primary-hover: #102a47;
  --app-button-accent: #b58b5d;
  --app-select-border-focus: #6f8eac;
  --app-select-focus: rgba(49, 95, 141, .18);
}

:root[data-crm-theme="light"] .crm-sidebar {
  border-right: 1px solid #dce3ea;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  box-shadow: 8px 0 24px rgba(24, 59, 99, .07);
}

:root[data-crm-theme="light"] .crm-sidebar-brand {
  border-bottom-color: #dce3ea;
  background: rgba(255, 255, 255, .96);
}

:root[data-crm-theme="light"] .crm-brand-link,
:root[data-crm-theme="light"] .crm-brand-link:hover {
  color: #183b63;
}

:root[data-crm-theme="light"] .crm-brand-subtitle {
  color: #9a6f42;
}

:root[data-crm-theme="light"] .crm-nav-group-toggle {
  color: #718096;
}

:root[data-crm-theme="light"] .crm-nav-group-toggle:hover,
:root[data-crm-theme="light"] .crm-nav-group-toggle:focus {
  color: #183b63;
  background: #edf4fa;
}

:root[data-crm-theme="light"] .crm-nav-section-divider {
  background: #e1e7ed;
}

:root[data-crm-theme="light"] .crm-nav-link:hover,
:root[data-crm-theme="light"] .crm-nav-link:focus {
  color: #183b63;
  background: #edf4fa;
}

:root[data-crm-theme="light"] .crm-nav-link:hover i,
:root[data-crm-theme="light"] .crm-nav-link:focus i {
  color: #315f8d;
}

:root[data-crm-theme="light"] .crm-nav-link.active {
  color: #183b63;
  background: linear-gradient(90deg, #e6f0f8, #f3f7fb);
  box-shadow: inset 3px 0 0 #315f8d;
}

:root[data-crm-theme="light"] .crm-nav-link.active i {
  color: #315f8d;
}

:root[data-crm-theme="light"] .crm-nav-group.has-active-item > .crm-nav-group-toggle,
:root[data-crm-theme="light"] body.crm-sidebar-collapsed .crm-nav-group.has-active-item > .crm-nav-group-toggle {
  color: #183b63;
  background: #e6f0f8;
  box-shadow: inset 3px 0 0 #315f8d;
}

:root[data-crm-theme="light"] .crm-sidebar-settings {
  border-top-color: #dce3ea;
  background: #f5f7fa;
  box-shadow: 0 -5px 14px rgba(24, 59, 99, .04);
}

:root[data-crm-theme="light"] .crm-sidebar-settings .crm-nav-link {
  background: transparent;
}

:root[data-crm-theme="light"] .crm-sidebar-settings .crm-nav-link:hover,
:root[data-crm-theme="light"] .crm-sidebar-settings .crm-nav-link:focus,
:root[data-crm-theme="light"] .crm-sidebar-settings .crm-nav-link.active {
  background: #e8f0f7;
}

:root[data-crm-theme="light"] .crm-topbar {
  border-bottom-color: #dce3ea;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 5px 18px rgba(24, 59, 99, .055);
}

:root[data-crm-theme="dark"] {
  color-scheme: dark;
  --crm-brand-navy: #9ac3e8;
  --crm-brand-navy-deep: #e4eff9;
  --crm-brand-blue: #75a9d8;
  --crm-brand-blue-soft: #1c3145;
  --crm-brand-orange: #d6b28a;
  --crm-brand-orange-soft: #382e24;
  --crm-sidebar-bg: #111827;
  --crm-sidebar-bg-strong: #090e16;
  --crm-sidebar-text: #e7edf5;
  --crm-sidebar-muted: #9ba9bb;
  --crm-sidebar-active: #d6b28a;
  --crm-border: #344356;
  --crm-content-bg: #0d1420;
  --crm-surface: #172130;
  --crm-text: #e7edf5;
  --crm-muted: #9ba9bb;
  --crm-status-info: #8dbce7;
  --crm-status-info-bg: #1a3147;
  --crm-status-info-border: #355d7e;
  --bs-body-bg: #0d1420;
  --bs-body-color: #e7edf5;
  --bs-emphasis-color: #f5f8fc;
  --bs-secondary-color: #a9b5c4;
  --bs-tertiary-color: #8c9aac;
  --bs-border-color: #344356;
  --bs-link-color: #8dbce7;
  --bs-link-hover-color: #b8d5ee;
  --wds-border: #344356;
  --wds-border-soft: #29384a;
  --wds-surface: #172130;
  --wds-surface-muted: #121c29;
  --wds-surface-hover: #1c2b3c;
  --wds-text: #dbe4ee;
  --wds-text-muted: #9ba9bb;
  --wds-heading: #e4eff9;
  --wds-link: #8dbce7;
  --wds-accent: #d6b28a;
  --wds-shadow: 0 5px 18px rgba(0, 0, 0, .2);
  --app-button-primary: #315f8d;
  --app-button-primary-hover: #254c74;
  --app-button-accent: #d6b28a;
  --app-button-shadow: 0 4px 10px rgba(0, 0, 0, .28);
  --app-select-border: #435267;
  --app-select-border-hover: #60738b;
  --app-select-border-focus: #75a9d8;
  --app-select-bg: #131d2a;
  --app-select-text: #e7edf5;
  --app-select-muted: #8796a9;
  --app-select-focus: rgba(117, 169, 216, .2);
  --auth-navy: #9ac3e8;
  --auth-blue: #75a9d8;
  --auth-orange: #d6b28a;
  --auth-ink: #e7edf5;
  --auth-muted: #9ba9bb;
  --auth-line: #344356;
}

:root[data-crm-theme="dark"] .crm-body,
:root[data-crm-theme="dark"] .crm-shell,
:root[data-crm-theme="dark"] .crm-main-panel,
:root[data-crm-theme="dark"] .crm-content,
:root[data-crm-theme="dark"] .crm-content-container {
  color: var(--crm-text);
  background-color: var(--crm-content-bg);
}

:root[data-crm-theme="dark"] .crm-sidebar {
  border-right: 1px solid #29384a;
  background: linear-gradient(180deg, #090e16 0%, #111827 52%, #17283a 100%);
  box-shadow: 12px 0 30px rgba(0, 0, 0, .28);
}

:root[data-crm-theme="dark"] .crm-sidebar-brand {
  border-bottom-color: rgba(214, 178, 138, .28);
  background: rgba(9, 14, 22, .96);
}

:root[data-crm-theme="dark"] .crm-nav-link:hover,
:root[data-crm-theme="dark"] .crm-nav-link:focus {
  color: #fff;
  background: rgba(117, 169, 216, .13);
}

:root[data-crm-theme="dark"] .crm-nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(214, 178, 138, .18), rgba(117, 169, 216, .16));
  box-shadow: inset 3px 0 0 #d6b28a;
}

:root[data-crm-theme="dark"] .crm-nav-link.active i {
  color: #e7c9a6;
}

:root[data-crm-theme="dark"] .crm-topbar {
  border-bottom-color: #344356;
  background: rgba(18, 28, 41, .97);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .22);
}

:root[data-crm-theme="dark"] .crm-topbar-search .form-control,
:root[data-crm-theme="dark"] .crm-topbar-search .form-control:focus {
  border-color: #435267;
  color: #e7edf5;
  background: #131d2a;
}

:root[data-crm-theme="dark"] .crm-icon-button {
  border-color: #435267;
  color: #cbd6e2;
  background: #172130;
}

:root[data-crm-theme="dark"] .crm-icon-button:hover,
:root[data-crm-theme="dark"] .crm-icon-button:focus {
  border-color: #60738b;
  color: #b8d5ee;
  background: #1c3145;
}

:root[data-crm-theme="dark"] .crm-footer {
  border-top-color: #29384a;
  color: #9ba9bb;
  background: #111a27;
}

:root[data-crm-theme="dark"] .card,
:root[data-crm-theme="dark"] .modal-content,
:root[data-crm-theme="dark"] .offcanvas,
:root[data-crm-theme="dark"] .dropdown-menu,
:root[data-crm-theme="dark"] .list-group-item,
:root[data-crm-theme="dark"] .dashboard-section-card,
:root[data-crm-theme="dark"] .dashboard-stat-card,
:root[data-crm-theme="dark"] .lead-form-section,
:root[data-crm-theme="dark"] .lead-service-card,
:root[data-crm-theme="dark"] .quotation-builder-form-section,
:root[data-crm-theme="dark"] .quotation-builder-item-card,
:root[data-crm-theme="dark"] .quotation-builder-empty-state,
:root[data-crm-theme="dark"] .quotation-builder-traveller-stat,
:root[data-crm-theme="dark"] .quotation-itinerary-workspace-panel,
:root[data-crm-theme="dark"] .department-details-field,
:root[data-crm-theme="dark"] .guide-copy-grid > div {
  border-color: #344356 !important;
  color: #e7edf5;
  background-color: #172130 !important;
  background-image: none !important;
}

:root[data-crm-theme="dark"] .dashboard-section-header,
:root[data-crm-theme="dark"] .lead-form-section-header,
:root[data-crm-theme="dark"] .lead-service-card-top,
:root[data-crm-theme="dark"] .quotation-builder-source-header,
:root[data-crm-theme="dark"] .quotation-builder-card-header,
:root[data-crm-theme="dark"] .quotation-builder-form-section-header,
:root[data-crm-theme="dark"] .quotation-builder-costing-heading,
:root[data-crm-theme="dark"] .modal-header,
:root[data-crm-theme="dark"] .modal-footer,
:root[data-crm-theme="dark"] .offcanvas-header {
  border-color: #344356 !important;
  background-color: #131d2a !important;
  background-image: none !important;
}

:root[data-crm-theme="dark"] .lead-filter-panel,
:root[data-crm-theme="dark"] .quotation-builder-hero,
:root[data-crm-theme="dark"] .quotation-builder-add-card > .dashboard-section-body,
:root[data-crm-theme="dark"] .quotation-builder-items-card > .dashboard-section-body {
  border-color: #344356 !important;
  background-color: #121c29 !important;
  background-image: none !important;
}

:root[data-crm-theme="dark"] .form-control,
:root[data-crm-theme="dark"] .form-select,
:root[data-crm-theme="dark"] .input-group-text,
:root[data-crm-theme="dark"] .lead-form-section .form-control,
:root[data-crm-theme="dark"] .lead-form-section .form-select {
  border-color: var(--app-select-border) !important;
  color: var(--app-select-text) !important;
  background-color: var(--app-select-bg) !important;
}

:root[data-crm-theme="dark"] .form-control::placeholder {
  color: #7f8ea1 !important;
}

:root[data-crm-theme="dark"] .form-select:not([multiple]):not([size]),
:root[data-crm-theme="dark"] .form-select:not([multiple])[size="1"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd6e2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

:root[data-crm-theme="dark"] .form-control:disabled,
:root[data-crm-theme="dark"] .form-control[readonly],
:root[data-crm-theme="dark"] .form-select:disabled,
:root[data-crm-theme="dark"] .quotation-builder-locked-input .form-control,
:root[data-crm-theme="dark"] .quotation-builder-locked-value,
:root[data-crm-theme="dark"] .quotation-builder-travellers-total {
  border-color: #344356 !important;
  color: #a9b5c4 !important;
  background-color: #101923 !important;
}

:root[data-crm-theme="dark"] .crm-searchable-select-option:hover,
:root[data-crm-theme="dark"] .crm-searchable-select-option:focus,
:root[data-crm-theme="dark"] .crm-searchable-select-option[aria-selected="true"] {
  color: #eaf3fb !important;
  background: #1c3145 !important;
}

:root[data-crm-theme="dark"] .dropdown-divider,
:root[data-crm-theme="dark"] .table > :not(caption) > * > *,
:root[data-crm-theme="dark"] hr {
  border-color: #344356;
}

:root[data-crm-theme="dark"] .dropdown-item {
  color: #dbe4ee;
}

:root[data-crm-theme="dark"] .dropdown-item:hover,
:root[data-crm-theme="dark"] .dropdown-item:focus {
  color: #f5f8fc;
  background-color: #1c2b3c;
}

:root[data-crm-theme="dark"] .table {
  --bs-table-color: #dbe4ee;
  --bs-table-bg: transparent;
  --bs-table-border-color: #344356;
  --bs-table-striped-color: #dbe4ee;
  --bs-table-striped-bg: rgba(255, 255, 255, .025);
  --bs-table-hover-color: #f5f8fc;
  --bs-table-hover-bg: rgba(117, 169, 216, .08);
}

:root[data-crm-theme="dark"] .table thead th,
:root[data-crm-theme="dark"] .table-light {
  --bs-table-color: #dbe4ee;
  --bs-table-bg: #131d2a;
  --bs-table-border-color: #344356;
  color: #dbe4ee;
  background-color: #131d2a !important;
}

:root[data-crm-theme="dark"] .text-muted,
:root[data-crm-theme="dark"] .form-text,
:root[data-crm-theme="dark"] .small.text-muted {
  color: #9ba9bb !important;
}

:root[data-crm-theme="dark"] .breadcrumb-item,
:root[data-crm-theme="dark"] .breadcrumb-item a,
:root[data-crm-theme="dark"] .page-link {
  color: #9fc6ea;
}

:root[data-crm-theme="dark"] .breadcrumb-item.active {
  color: #a9b5c4;
}

:root[data-crm-theme="dark"] .page-link {
  border-color: #344356;
  background-color: #172130;
}

:root[data-crm-theme="dark"] .page-link:hover {
  border-color: #52657c;
  background-color: #1c2b3c;
}

:root[data-crm-theme="dark"] .crm-body .btn-outline-primary,
:root[data-crm-theme="dark"] .crm-body .btn-outline-secondary,
:root[data-crm-theme="dark"] .crm-body .btn-secondary,
:root[data-crm-theme="dark"] .crm-body .customer-detail-action,
:root[data-crm-theme="dark"] .crm-body .quotation-add-customer-link,
:root[data-crm-theme="dark"] .crm-body .lead-document-trigger,
:root[data-crm-theme="dark"] .crm-body .crm-page-control {
  border-color: #52657c;
  color: #cfe2f3;
  background: #172130;
  box-shadow: inset 0 -2px 0 #26384a, 0 2px 6px rgba(0, 0, 0, .2);
}

:root[data-crm-theme="dark"] .crm-body .btn-outline-primary:hover,
:root[data-crm-theme="dark"] .crm-body .btn-outline-secondary:hover,
:root[data-crm-theme="dark"] .crm-body .btn-secondary:hover,
:root[data-crm-theme="dark"] .crm-body .customer-detail-action:hover,
:root[data-crm-theme="dark"] .crm-body .quotation-add-customer-link:hover,
:root[data-crm-theme="dark"] .crm-body .crm-page-control:hover {
  border-color: #75a9d8;
  color: #f4f8fc;
  background: #1c3145;
  box-shadow: inset 0 -2px 0 #d6b28a, 0 4px 9px rgba(0, 0, 0, .24);
}

:root[data-crm-theme="dark"] .auth-body {
  color: #e7edf5;
  background:
    radial-gradient(circle at 8% 8%, rgba(117, 169, 216, .12), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(214, 178, 138, .1), transparent 25%),
    #0d1420;
}

:root[data-crm-theme="dark"] .login-form-panel,
:root[data-crm-theme="dark"] .login-shell {
  border-color: #344356;
  color: #e7edf5;
  background-color: #172130;
}

:root[data-crm-theme="dark"] .login-brand-panel {
  background:
    radial-gradient(circle at 88% 6%, rgba(214, 178, 138, .18), transparent 23%),
    linear-gradient(145deg, #254c74 0%, #17283a 48%, #090e16 100%);
}

:root[data-crm-theme="dark"] body.error-page {
  color: #e7edf5;
  background:
    radial-gradient(circle at 12% 12%, rgba(117, 169, 216, .12), transparent 32rem),
    radial-gradient(circle at 90% 88%, rgba(214, 178, 138, .1), transparent 28rem),
    #0d1420;
}

:root[data-crm-theme="dark"] .error-card {
  border-color: #344356;
  color: #e7edf5;
  background: #172130;
}


/* Permanent summary-card surface consistency across every management screen.
 * Contextual modifiers colour the icon only; they never tint the full card. */
.dashboard-stat-card.management-summary-card {
  background-color: var(--crm-surface);
  background-image: none;
}

/* The primary sign-in action intentionally remains larger than application
 * toolbar buttons to match the approved authentication-screen reference. */
.auth-body .login-submit-button {
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 10px 18px;
  border-radius: 14px;
  font-size: .84rem;
}

/* Dashboard customer birthdays and anniversaries */
.dashboard-occasion-intro {
  margin-bottom: 12px;
  color: var(--crm-muted);
  font-size: .72rem;
}

.dashboard-occasion-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-occasion-item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--crm-border);
  border-left: 3px solid var(--crm-brand-blue);
  border-radius: 10px;
  background: var(--crm-surface);
  box-shadow: 0 3px 10px rgba(37, 37, 37, .035);
}

.dashboard-occasion-item--anniversary {
  border-left-color: var(--crm-brand-orange);
}

.dashboard-occasion-date,
.dashboard-occasion-person {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dashboard-occasion-date {
  position: relative;
  padding-left: 27px;
  color: var(--crm-text);
  font-size: .7rem;
  font-weight: 750;
}

.dashboard-occasion-date > i {
  position: absolute;
  top: 1px;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 7px;
  color: var(--crm-brand-blue);
  background: var(--crm-brand-blue-soft);
}

.dashboard-occasion-item--anniversary .dashboard-occasion-date > i {
  color: var(--crm-brand-navy-deep);
  background: var(--crm-brand-orange-soft);
}

.dashboard-occasion-date small {
  margin-top: 2px;
  color: var(--crm-muted);
  font-size: .59rem;
  font-weight: 550;
}

.dashboard-occasion-person > a,
.dashboard-occasion-person > strong {
  overflow: hidden;
  color: var(--crm-brand-navy);
  font-size: .74rem;
  font-weight: 780;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-occasion-person > a:hover,
.dashboard-occasion-person > a:focus-visible {
  color: var(--crm-brand-blue);
  text-decoration: underline;
}

.dashboard-occasion-person > span {
  margin-top: 5px;
  overflow: hidden;
  color: var(--crm-muted);
  font-size: .61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-occasion-badge {
  display: inline-flex;
  margin-right: 3px;
  padding: 2px 6px;
  border: 1px solid var(--crm-status-info-border);
  border-radius: 999px;
  color: var(--crm-status-info);
  background: var(--crm-status-info-bg);
  font-size: .55rem;
  font-weight: 750;
}

.dashboard-occasion-badge--anniversary {
  border-color: var(--crm-status-warning-border);
  color: var(--crm-status-warning);
  background: var(--crm-status-warning-bg);
}

.dashboard-occasion-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.dashboard-occasion-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--crm-border);
  border-radius: 8px;
  color: var(--crm-text);
  background: var(--crm-surface);
  font-size: .61rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.dashboard-occasion-action:hover,
.dashboard-occasion-action:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.dashboard-occasion-action--whatsapp {
  border-color: #9dd8b5;
  color: #10753c;
  background: #effbf4;
}

.dashboard-occasion-action--whatsapp:hover,
.dashboard-occasion-action--whatsapp:focus-visible {
  border-color: #25a85b;
  color: #075b2b;
  background: #e1f8e9;
}

.dashboard-occasion-action--email {
  border-color: var(--crm-status-info-border);
  color: var(--crm-status-info);
  background: var(--crm-status-info-bg);
}

.dashboard-occasion-action--email:hover,
.dashboard-occasion-action--email:focus-visible {
  border-color: var(--crm-brand-blue);
}

.dashboard-occasion-action.is-disabled {
  cursor: not-allowed;
  opacity: .45;
}

.dashboard-workspace-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 76px;
  padding: 18px;
  border: 1px dashed var(--crm-border);
  border-radius: 10px;
  color: var(--crm-muted);
  background: var(--wds-surface-muted);
  font-size: .7rem;
  text-align: center;
}

.dashboard-workspace-empty i {
  color: var(--crm-brand-blue);
  font-size: 1.1rem;
}

@media (max-width: 1199.98px) {
  .dashboard-occasion-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .dashboard-occasion-item {
    grid-template-columns: 1fr;
  }

  .dashboard-occasion-actions {
    flex-wrap: wrap;
  }
}

/* Theme controls and list headers
 * -------------------------------
 * Buttons and data-list headers consume these tokens so changing the active
 * theme updates controls consistently without screen-level colour declarations.
 */
:root {
  --app-button-outline-border: #8093a8;
  --app-button-outline-bg: #ffffff;
  --app-button-outline-text: #1d3557;
  --app-button-outline-hover-bg: #eef2f6;
  --app-button-secondary-border: #c8cdd2;
  --app-button-secondary-bg: #ffffff;
  --app-button-secondary-text: #3d3d3d;
  --app-button-secondary-hover-bg: #f4f5f6;
  --app-list-header-bg: #284b73;
  --app-list-header-text: #ffffff;
  --app-list-header-border: #1d3557;
  --app-shell-divider: #dde1e5;
}

:root[data-crm-theme="light"] {
  --app-button-outline-border: #7694b2;
  --app-button-outline-bg: #ffffff;
  --app-button-outline-text: #183b63;
  --app-button-outline-hover-bg: #edf4fa;
  --app-button-secondary-border: #c7d2dc;
  --app-button-secondary-bg: #ffffff;
  --app-button-secondary-text: #31445a;
  --app-button-secondary-hover-bg: #edf4fa;
  --app-list-header-bg: #315f8d;
  --app-list-header-text: #ffffff;
  --app-list-header-border: #183b63;
  --app-shell-divider: #dce3ea;
}

:root[data-crm-theme="dark"] {
  --app-button-outline-border: #60738b;
  --app-button-outline-bg: #172130;
  --app-button-outline-text: #b8d5ee;
  --app-button-outline-hover-bg: #1c3145;
  --app-button-secondary-border: #52657c;
  --app-button-secondary-bg: #172130;
  --app-button-secondary-text: #dbe4ee;
  --app-button-secondary-hover-bg: #1c2b3c;
  --app-list-header-bg: #254c74;
  --app-list-header-text: #f5f8fc;
  --app-list-header-border: #75a9d8;
  --app-shell-divider: #344356;
}


.crm-sidebar {
  border-right: 1px solid var(--crm-border);
}

.crm-sidebar-brand,
.crm-topbar {
  border-bottom-color: var(--app-shell-divider) !important;
}

.crm-body .btn.btn-outline-primary,
.auth-body .btn.btn-outline-primary,
.error-page .btn.btn-outline-primary,
body:not(.crm-body) .no-print.btn.btn-outline-primary {
  border-color: var(--app-button-outline-border) !important;
  color: var(--app-button-outline-text) !important;
  background-color: var(--app-button-outline-bg) !important;
}

.crm-body .btn.btn-outline-primary:hover,
.crm-body .btn.btn-outline-primary:focus-visible,
.auth-body .btn.btn-outline-primary:hover,
.auth-body .btn.btn-outline-primary:focus-visible,
.error-page .btn.btn-outline-primary:hover,
.error-page .btn.btn-outline-primary:focus-visible,
body:not(.crm-body) .no-print.btn.btn-outline-primary:hover,
body:not(.crm-body) .no-print.btn.btn-outline-primary:focus-visible {
  border-color: var(--app-button-primary) !important;
  color: var(--app-button-text) !important;
  background-color: var(--app-button-primary) !important;
}

.crm-body .btn.btn-secondary,
.crm-body .btn.btn-outline-secondary,
.auth-body .btn.btn-secondary,
.auth-body .btn.btn-outline-secondary,
.error-page .btn.btn-secondary,
.error-page .btn.btn-outline-secondary {
  border-color: var(--app-button-secondary-border) !important;
  color: var(--app-button-secondary-text) !important;
  background-color: var(--app-button-secondary-bg) !important;
}

.crm-body .btn.btn-secondary:hover,
.crm-body .btn.btn-outline-secondary:hover,
.crm-body .btn.btn-secondary:focus-visible,
.crm-body .btn.btn-outline-secondary:focus-visible,
.auth-body .btn.btn-secondary:hover,
.auth-body .btn.btn-outline-secondary:hover,
.error-page .btn.btn-secondary:hover,
.error-page .btn.btn-outline-secondary:hover {
  border-color: var(--app-button-outline-border) !important;
  color: var(--app-button-outline-text) !important;
  background-color: var(--app-button-secondary-hover-bg) !important;
}

.crm-body .table-action-icon,
.crm-body .crm-icon-button {
  border-color: var(--app-button-secondary-border);
  color: var(--app-button-outline-text);
  background-color: var(--app-button-secondary-bg);
  background-image: none !important;
}

.crm-body .table-action-icon:hover,
.crm-body .table-action-icon:focus-visible,
.crm-body .crm-icon-button:hover,
.crm-body .crm-icon-button:focus-visible {
  border-color: var(--app-button-outline-border);
  color: var(--app-button-outline-text);
  background-color: var(--app-button-outline-hover-bg);
}

.crm-content-container table thead th,
.modal-content table thead th {
  --bs-table-bg: var(--app-list-header-bg);
  --bs-table-color: var(--app-list-header-text);
  --bs-table-border-color: var(--app-list-header-border);
  border-color: var(--app-list-header-border) !important;
  color: var(--app-list-header-text) !important;
  background-color: var(--app-list-header-bg) !important;
  background-image: none !important;
}

.crm-content-container table thead th a,
.crm-content-container table thead th button,
.crm-content-container table thead th .bi,
.modal-content table thead th a,
.modal-content table thead th button,
.modal-content table thead th .bi {
  color: var(--app-list-header-text) !important;
}

/* Dashboard snapshot tables use a quieter theme tint so their headers do not
   compete with the analytics cards around them. */
.crm-content-container .dashboard-recent-leads-card table thead th,
.crm-content-container .dashboard-recent-bookings-card table thead th {
  --dashboard-list-header-bg: color-mix(in srgb, var(--app-list-header-bg) 14%, var(--wds-surface));
  --dashboard-list-header-border: color-mix(in srgb, var(--app-list-header-bg) 24%, var(--wds-border));
  --bs-table-bg: var(--dashboard-list-header-bg);
  --bs-table-color: var(--wds-heading);
  --bs-table-border-color: var(--dashboard-list-header-border);
  border-color: var(--dashboard-list-header-border) !important;
  color: var(--wds-heading) !important;
  background-color: var(--dashboard-list-header-bg) !important;
}

.crm-content-container .dashboard-recent-leads-card table thead th a,
.crm-content-container .dashboard-recent-leads-card table thead th button,
.crm-content-container .dashboard-recent-leads-card table thead th .bi,
.crm-content-container .dashboard-recent-bookings-card table thead th a,
.crm-content-container .dashboard-recent-bookings-card table thead th button,
.crm-content-container .dashboard-recent-bookings-card table thead th .bi {
  color: var(--wds-heading) !important;
}

/* Shared information/read-only notices. Keep this contract in the final theme
   sheet so application, drawer, modal and authentication shells agree. The
   alert-info fallback also covers new plain-text informational alerts without
   forcing their inline text or links into separate flex items. */
:root .crm-info-banner,
:root .alert.alert-info {
  --crm-info-banner-text: var(--crm-status-info);
  --bs-alert-color: var(--crm-info-banner-text);
  --bs-alert-bg: var(--crm-status-info-bg);
  --bs-alert-border-color: var(--crm-status-info-border);
  --bs-alert-link-color: var(--crm-info-banner-text);
  position: relative;
  min-width: 0;
  padding: .625rem .875rem;
  border: 1px solid var(--crm-status-info-border);
  border-radius: .5rem;
  color: var(--crm-info-banner-text);
  background: var(--crm-status-info-bg);
  box-shadow: none;
  font-family: inherit;
  font-size: 9pt;
  font-weight: 700;
  line-height: 1.5;
  text-align: start;
  overflow-wrap: anywhere;
}

:root .crm-info-banner {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
}

:root .crm-info-banner[hidden] {
  display: none;
}

:root .crm-info-banner > .crm-info-banner__icon {
  flex: 0 0 1rem;
  width: 1rem;
  height: auto;
  margin: .0625rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: none;
  font-size: 1rem;
  line-height: 1.125;
  text-align: center;
}

:root .crm-info-banner > .crm-info-banner__content {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

:root .crm-info-banner .crm-info-banner__content :where(p, span, small, strong, b, ul, ol, li),
:root .alert.alert-info :where(p, small, strong, b) {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

:root .crm-info-banner .crm-info-banner__content p {
  margin: 0;
}

:root .crm-info-banner .crm-info-banner__content p + p,
:root .crm-info-banner .crm-info-banner__content ul,
:root .crm-info-banner .crm-info-banner__content ol {
  margin-top: .25rem;
  margin-bottom: 0;
}

:root .crm-info-banner a:not(.btn),
:root .alert.alert-info a:not(.btn) {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: .15em;
}

:root .alert.alert-info.alert-dismissible {
  padding-inline-end: 3rem;
}

:root .alert.alert-info.alert-dismissible > .btn-close {
  top: .6875rem;
  right: .875rem;
  padding: .25rem;
}

:root[dir="rtl"] .alert.alert-info.alert-dismissible > .btn-close {
  right: auto;
  left: .875rem;
}

:root[data-crm-theme="dark"] .alert.alert-info > .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Payment milestones share the application's existing typography and theme tokens. */
.quotation-payment-schedule {
  margin-block: 0 1rem;
  border: 1px solid var(--wds-border);
  border-radius: .65rem;
  background: var(--wds-surface);
  color: var(--wds-text);
  padding: 1rem;
  font-family: inherit;
  font-size: 9pt;
}
.quotation-payment-schedule__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.quotation-payment-schedule__header h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; font-size: 9pt; font-weight: 700; color: var(--wds-heading); }
.quotation-payment-schedule__header p { margin: 0; color: var(--wds-text-muted); font-size: 9pt; line-height: 1.5; }
.quotation-payment-schedule__header > .btn { flex-shrink: 0; }
.quotation-payment-schedule__head,
.quotation-payment-schedule__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7rem, 9rem) minmax(9rem, 12rem) auto; gap: .75rem; align-items: center; }
.quotation-payment-schedule[data-editable="false"] .quotation-payment-schedule__head,
.quotation-payment-schedule[data-editable="false"] .quotation-payment-schedule__row { grid-template-columns: minmax(0, 1fr) minmax(7rem, 9rem) minmax(9rem, 12rem); }
.quotation-payment-schedule__head { background: var(--wds-surface-muted); border-radius: .4rem; padding: .65rem .75rem; font-weight: 700; color: var(--wds-heading); }
.quotation-payment-schedule__row { padding: .75rem; border-bottom: 1px solid var(--wds-border-soft); }
.quotation-payment-schedule__row > div { min-width: 0; }
.quotation-payment-schedule .form-control, .quotation-payment-schedule .input-group-text, .quotation-payment-schedule .btn { font-family: inherit; font-size: 9pt; }
.quotation-payment-schedule__amount { text-align: end; font-weight: 700; color: var(--wds-heading); }
.quotation-payment-schedule__description { white-space: pre-wrap; overflow-wrap: anywhere; }
.quotation-payment-schedule__footer { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding-top: .8rem; font-size: 9pt; }
.quotation-payment-schedule__footer strong { color: var(--wds-heading); }
.quotation-payment-schedule__validation { padding-top: .65rem; color: var(--crm-status-critical); font-size: 9pt; font-weight: 700; }
.quotation-payment-schedule__validation:empty { display: none; }
.quotation-payment-schedule__legacy { white-space: pre-wrap; overflow-wrap: anywhere; padding: .75rem; border: 1px solid var(--wds-border); border-radius: .4rem; background: var(--wds-surface-muted); font-size: 9pt; }
.booking-instalment-list { display: grid; gap: .75rem; margin-top: 1rem; }
.booking-instalment-card { padding: .8rem; border: 1px solid var(--wds-border); border-radius: .5rem; background: var(--wds-surface); font-size: 9pt; }
.booking-instalment-card__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.booking-instalment-card p { margin: .45rem 0; color: var(--wds-text-muted); overflow-wrap: anywhere; }
.booking-instalment-card dl { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .65rem 0; }
.booking-instalment-card dt { color: var(--wds-text-muted); font-weight: 500; }
.booking-instalment-card dd { margin: 0; color: var(--wds-heading); font-weight: 700; }
/* Keep the invoice action row separate from the sequence notice, including wrapped buttons. */
.booking-instalment-card > .booking-detail-actions + .crm-info-banner {
  margin-top: .75rem;
}
@media (max-width: 767.98px) {
  .quotation-payment-schedule { padding: .75rem; }
  .quotation-payment-schedule__header { flex-wrap: wrap; }
  .quotation-payment-schedule__head { display: none; }
  .quotation-payment-schedule__row,
  .quotation-payment-schedule[data-editable="false"] .quotation-payment-schedule__row { grid-template-columns: minmax(0, 1fr) auto; }
  .quotation-payment-schedule__row > div:first-of-type,
  .quotation-payment-schedule__description { grid-column: 1 / -1; }
  .quotation-payment-schedule__row [data-term-label] { position: static !important; width: auto !important; height: auto !important; margin: 0 0 .3rem !important; clip: auto !important; white-space: normal !important; display: block; color: var(--wds-text-muted); }
  .quotation-payment-schedule__row > .btn { grid-column: 1 / -1; justify-self: end; }
}
@media print { .quotation-payment-schedule { break-inside: auto; box-shadow: none; } .quotation-payment-schedule__row { break-inside: avoid; } }

/* Quotation Builder payment milestones: presentation only. Keep the shared
   partial, editable bindings, allocation script and customer preview unchanged. */
.quotation-builder-commercial-block .quotation-payment-schedule {
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
}
.quotation-builder-commercial-block .quotation-payment-schedule__header {
  gap: 1rem;
  margin: 0;
  padding: 16px;
  border-bottom: 1px solid var(--wds-border);
  background: var(--wds-surface-muted);
}
.quotation-builder-commercial-block .quotation-payment-schedule__header > div { min-width: 0; }
.quotation-builder-commercial-block .quotation-payment-schedule__header h3 {
  gap: 10px;
  margin: 0;
  font-size: 10pt;
  line-height: 1.4;
}
.quotation-builder-commercial-block .quotation-payment-schedule__header h3 > .bi {
  display: inline-grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--wds-border);
  border-radius: 8px;
  background: var(--wds-surface);
  color: var(--wds-link);
  font-size: 14px;
}
.quotation-builder-commercial-block .quotation-payment-schedule__header p {
  max-width: 92ch;
  margin-top: 5px;
  padding-inline-start: 44px;
  line-height: 1.6;
}
.quotation-builder-commercial-block .quotation-payment-schedule__header > .badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  margin-top: 3px;
  padding: 6px 9px;
  border: 1px solid var(--wds-border);
  border-radius: 999px;
  background: var(--wds-surface) !important;
  color: var(--wds-text) !important;
  font-size: 8pt;
  font-weight: 600;
}
.quotation-builder-commercial-block .quotation-payment-schedule__head {
  gap: 14px;
  margin: 12px 16px 0;
  padding: 8px 12px 8px 56px;
  border-radius: 0;
  background: transparent;
  color: var(--wds-text-muted);
  font-size: 8pt;
  font-weight: 600;
  line-height: 1.4;
}
.quotation-builder-commercial-block .quotation-payment-schedule__head > span:nth-child(3) { text-align: end; }
.quotation-builder-commercial-block [data-payment-term-rows] {
  counter-reset: quotation-milestone;
  padding-inline: 16px;
}
.quotation-builder-commercial-block .quotation-payment-schedule__row {
  position: relative;
  counter-increment: quotation-milestone;
  gap: 14px;
  min-height: 64px;
  margin-bottom: 8px;
  padding: 12px 12px 12px 56px;
  border: 1px solid var(--wds-border);
  border-radius: 8px;
  background: var(--wds-surface);
}
.quotation-builder-commercial-block .quotation-payment-schedule__row::before {
  position: absolute;
  top: 16px;
  inset-inline-start: 12px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--wds-border);
  border-radius: 8px;
  background: var(--wds-surface-muted);
  color: var(--wds-heading);
  content: counter(quotation-milestone, decimal-leading-zero);
  font-size: 8pt;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.quotation-builder-commercial-block .quotation-payment-schedule__description {
  min-width: 0;
  color: var(--wds-heading);
  font-weight: 600;
  line-height: 1.6;
}
.quotation-builder-commercial-block .quotation-payment-schedule__row > strong {
  justify-self: start;
  min-width: 58px;
  padding: 5px 10px;
  border: 1px solid var(--wds-border);
  border-radius: 999px;
  background: var(--wds-surface-muted);
  color: var(--wds-heading);
  text-align: center;
  font-size: 9pt;
  font-variant-numeric: tabular-nums;
}
.quotation-builder-commercial-block .quotation-payment-schedule__amount {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 10pt;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.quotation-builder-commercial-block .quotation-payment-schedule__footer {
  align-items: center;
  gap: 12px 24px;
  margin-top: 16px;
  padding: 14px 16px;
  border-top: 1px solid var(--wds-border);
  background: var(--wds-surface-muted);
  color: var(--wds-text-muted);
}
.quotation-builder-commercial-block .quotation-payment-schedule__footer > span:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.quotation-builder-commercial-block [data-payment-term-total] {
  padding: 4px 8px;
  border: 1px solid var(--wds-border);
  border-radius: 6px;
  background: var(--wds-surface);
  font-variant-numeric: tabular-nums;
}
.quotation-builder-commercial-block .quotation-payment-schedule__footer > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
  margin-inline-start: auto;
  text-align: end;
}
.quotation-builder-commercial-block [data-payment-schedule-net-sale] {
  overflow-wrap: anywhere;
  font-size: 11pt;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.quotation-builder-commercial-block .quotation-payment-schedule__validation { padding: 0 16px 14px; }
.quotation-builder-commercial-block .quotation-payment-schedule > p:not(.quotation-payment-schedule__validation) { margin: 14px 16px; }
@media (max-width: 767.98px) {
  .quotation-builder-commercial-block .quotation-payment-schedule__header { padding: 12px; }
  .quotation-builder-commercial-block .quotation-payment-schedule__header p { padding-inline-start: 0; }
  .quotation-builder-commercial-block .quotation-payment-schedule__head { display: none; }
  .quotation-builder-commercial-block [data-payment-term-rows] { padding: 12px 12px 0; }
  .quotation-builder-commercial-block .quotation-payment-schedule__row,
  .quotation-builder-commercial-block .quotation-payment-schedule[data-editable="false"] .quotation-payment-schedule__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .quotation-builder-commercial-block .quotation-payment-schedule__row::before { top: 12px; transform: none; }
  .quotation-builder-commercial-block .quotation-payment-schedule__description,
  .quotation-builder-commercial-block .quotation-payment-schedule__row > div:first-of-type {
    min-height: 30px;
    padding-inline-start: 44px;
  }
  .quotation-builder-commercial-block .quotation-payment-schedule__row > strong { align-self: end; }
  .quotation-builder-commercial-block .quotation-payment-schedule__amount { align-self: end; font-size: 9pt; }
  .quotation-builder-commercial-block .quotation-payment-schedule__amount::before {
    display: block;
    margin-bottom: 4px;
    color: var(--wds-text-muted);
    content: "Amount before tax";
    font-size: 8pt;
    font-weight: 500;
  }
  .quotation-builder-commercial-block .quotation-payment-schedule__footer { margin-top: 12px; padding: 12px; }
}

/* Final shared surface contract. Keep component layout and typography intact;
   fixed light surfaces must not leak into another palette or a lazy fragment. */
:root[data-crm-theme] .crm-user-menu,
:root[data-crm-theme] .crm-notification-menu,
:root[data-crm-theme] .organization-config-tabs,
:root[data-crm-theme] .organization-config-body,
:root[data-crm-theme] .organization-config-content,
:root[data-crm-theme] .customer-detail-tabs,
:root[data-crm-theme] .customer-detail-panel,
:root[data-crm-theme] .customer-detail-tab-panel,
:root[data-crm-theme] .lead-detail-tabs .nav-tabs {
  border-color: var(--crm-border) !important;
  color: var(--crm-text);
  background-color: var(--crm-surface);
}

:root[data-crm-theme] .crm-user-avatar,
:root[data-crm-theme] .crm-notification-priority {
  border-color: var(--crm-status-info-border);
  color: var(--wds-heading);
  background: var(--crm-brand-blue-soft);
}

:root[data-crm-theme] .crm-user-menu:is(:hover, :focus-visible, [aria-expanded="true"]) {
  border-color: var(--app-button-outline-border);
  background: var(--wds-surface-hover);
}

:root[data-crm-theme] .lead-form-section .form-label,
:root[data-crm-theme] .quotation-builder-side-card > .dashboard-section-body {
  color: var(--crm-text);
}

:root[data-crm-theme] .crm-notification-menu-header {
  border-color: var(--wds-border-soft);
  background: var(--wds-surface-muted);
}

:root[data-crm-theme] .crm-notification-item {
  border-color: var(--wds-border-soft);
}

:root[data-crm-theme] .crm-notification-item:hover,
:root[data-crm-theme] .crm-notification-item:focus-visible {
  color: var(--crm-text);
  background: var(--wds-surface-hover);
}

:root[data-crm-theme] .crm-notification-meta {
  color: var(--crm-muted);
}

:root[data-crm-theme] .crm-notification-item:is(:hover, :focus-visible) :is(.crm-notification-message, .crm-notification-meta) {
  color: var(--crm-text);
}

:root[data-crm-theme] .crm-notification-item.is-overdue::before {
  background: var(--crm-status-warning);
}

:root[data-crm-theme] .crm-notification-item.is-overdue .crm-notification-icon {
  color: var(--crm-status-warning);
  background: var(--crm-status-warning-bg);
}

:root[data-crm-theme] .crm-notification-title-row time.is-overdue {
  color: var(--crm-status-warning);
}

:root[data-crm-theme] .crm-notification-error button {
  border-color: var(--app-button-outline-border);
  color: var(--app-button-outline-text);
  background: var(--app-button-outline-bg);
}

:root[data-crm-theme] .quotation-builder-gom-row--primary {
  background: var(--app-button-primary);
}

:root[data-crm-theme] .quotation-builder-gom-row {
  border-bottom-color: var(--wds-border-soft);
}

:root[data-crm-theme] .quotation-builder-gom-stage > span,
:root[data-crm-theme] .lead-form-hero-icon,
:root[data-crm-theme] .lead-service-add,
:root[data-crm-theme] .crm-chat-message.is-own .crm-chat-message-bubble,
:root[data-crm-theme] .crm-chat-composer button,
:root[data-crm-theme] .crm-chat-window-header {
  border-color: var(--app-button-primary);
  color: var(--app-button-text);
  background: var(--app-button-primary);
}

:root[data-crm-theme] .lead-service-add:is(:hover, :focus-visible) {
  border-color: var(--app-button-primary-hover);
  color: var(--app-button-text);
  background: var(--app-button-primary-hover);
}

:root[data-crm-theme] .quotation-builder-gom-row--primary > span,
:root[data-crm-theme] .quotation-builder-gom-row--primary > strong,
:root[data-crm-theme] .quotation-builder-gom-row--primary .quotation-builder-gom-label > small {
  color: var(--app-button-text);
}

:root[data-crm-theme] .quotation-builder-gom-row--rate {
  border-color: var(--crm-status-positive-border);
  background: var(--crm-status-positive-bg);
}

:root[data-crm-theme] .quotation-builder-gom-row--rate > strong,
:root[data-crm-theme] .quotation-builder-gom-row--rate .quotation-builder-gom-label > small {
  color: var(--crm-status-positive);
}

/* Content tab states are centrally theme-mapped in workspace-tabs.css. */

:root[data-crm-theme] .crm-body .lead-form-section .form-control,
:root[data-crm-theme] .crm-body .lead-form-section .form-select {
  border-color: var(--app-select-border) !important;
  color: var(--app-select-text) !important;
  background-color: var(--app-select-bg) !important;
}

:root[data-crm-theme] .crm-body .lead-form-section :is(.form-control:disabled, .form-control[readonly], .form-select:disabled) {
  border-color: var(--crm-border) !important;
  color: var(--crm-muted) !important;
  background-color: var(--wds-surface-muted) !important;
}

:root[data-crm-theme] .crm-body .lead-form-section .form-control:hover:not(:disabled):not([readonly]),
:root[data-crm-theme] .crm-body .lead-form-section .form-select:hover:not(:disabled) {
  border-color: var(--app-select-border-hover) !important;
}

:root[data-crm-theme] .crm-body .form-control:focus,
:root[data-crm-theme] .crm-body .lead-form-section .form-control:focus,
:root[data-crm-theme] .auth-body .form-control:focus,
:root[data-crm-theme] .login-control:focus {
  border-color: var(--app-select-border-focus) !important;
  box-shadow: 0 0 0 .2rem var(--app-select-focus) !important;
}

/* Validation is semantic, not a theme accent. Keep its border when focused. */
:root[data-crm-theme] .crm-body .form-control.is-invalid,
:root[data-crm-theme] .crm-body .lead-form-section .form-control.is-invalid {
  border-color: var(--crm-status-critical) !important;
}

/* Dark mode needs readable disabled values and dismiss controls. */
:root[data-crm-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

:root[data-crm-theme="dark"] .quotation-builder-gom-row--rate .quotation-builder-gom-label {
  color: var(--crm-status-positive);
}

/* Inline validation needs a lighter red on dark surfaces; destructive button
   fills and the permanent Lead status palette keep their existing semantics. */
:root[data-crm-theme="dark"] :is(.crm-body, .auth-body) :is(.field-validation-error, .validation-summary-errors, .text-danger, .login-field-error) {
  color: #fca5a5 !important;
}

:root[data-crm-theme] .auth-body .login-field .form-label {
  color: var(--auth-ink);
}

:root[data-crm-theme] .auth-body .login-help-text {
  color: var(--auth-muted);
}

:root[data-crm-theme="dark"] .login-control {
  border-color: var(--app-select-border) !important;
  color: var(--app-select-text) !important;
  background-color: var(--app-select-bg) !important;
}

:root[data-crm-theme] .crm-body .lead-form-section .form-select.lead-semantic-select {
  border-left-color: var(--lead-semantic-border, var(--app-select-border)) !important;
  color: var(--lead-semantic-fg, var(--app-select-text)) !important;
  background-color: var(--lead-semantic-bg, var(--app-select-bg)) !important;
}

/* Status/priority selects retain their light semantic surfaces in dark mode,
   so their native chevron must stay dark instead of inheriting a pale arrow. */
:root[data-crm-theme="dark"] .form-select.lead-semantic-select:not([multiple]):not([size]),
:root[data-crm-theme="dark"] .form-select.lead-semantic-select:not([multiple])[size="1"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231d3557' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Classic: off-white workspaces, pale blue secondary surfaces, blue actions
   and navy text/navigation. Keep this scoped: the other themes and permanent
   Lead status/priority colours do not inherit the Classic palette change.
   Legacy "orange" aliases resolve to navy, not a separate gold/beige accent.
   Navy text on pale blue stays readable at the application's compact sizes. */
:root[data-crm-theme="classic"] {
  color-scheme: light;
  --crm-brand-navy: #112d4e;
  --crm-brand-navy-deep: #112d4e;
  --crm-brand-blue: #3f72af;
  --crm-brand-blue-soft: #dbe2ef;
  --crm-brand-orange: #112d4e;
  --crm-brand-orange-soft: #dbe2ef;
  --crm-sidebar-bg: #112d4e;
  --crm-sidebar-bg-strong: #112d4e;
  --crm-sidebar-text: #f9f7f7;
  --crm-sidebar-muted: #f9f7f7;
  --crm-sidebar-active: #dbe2ef;
  --crm-border: #dbe2ef;
  --crm-content-bg: #f9f7f7;
  --crm-surface: #f9f7f7;
  --crm-text: #112d4e;
  --crm-muted: #112d4e;
  --crm-text-muted: #112d4e;
  --crm-status-info: #112d4e;
  --crm-status-info-bg: #dbe2ef;
  --crm-status-info-border: #dbe2ef;
  --bs-primary: #3f72af;
  --bs-primary-rgb: 63, 114, 175;
  --bs-primary-text-emphasis: #112d4e;
  --bs-primary-bg-subtle: #dbe2ef;
  --bs-primary-border-subtle: #dbe2ef;
  --bs-body-bg: #f9f7f7;
  --bs-body-color: #112d4e;
  --bs-emphasis-color: #112d4e;
  --bs-secondary-color: #112d4e;
  --bs-border-color: #dbe2ef;
  --bs-link-color: #112d4e;
  --bs-link-color-rgb: 17, 45, 78;
  --bs-link-hover-color: #112d4e;
  --bs-link-hover-color-rgb: 17, 45, 78;
  --wds-border: #dbe2ef;
  --wds-border-soft: #dbe2ef;
  --wds-surface: #f9f7f7;
  --wds-surface-muted: #dbe2ef;
  --wds-surface-hover: #dbe2ef;
  --wds-text: #112d4e;
  --wds-text-muted: #112d4e;
  --wds-heading: #112d4e;
  --wds-link: #112d4e;
  --wds-accent: #3f72af;
  --app-button-primary: #3f72af;
  --app-button-primary-hover: #112d4e;
  --app-button-primary-active: #112d4e;
  --app-button-accent: #112d4e;
  --app-button-text: #f9f7f7;
  --app-button-focus: rgba(17, 45, 78, .24);
  --app-button-outline-border: #3f72af;
  --app-button-outline-bg: #f9f7f7;
  --app-button-outline-text: #112d4e;
  --app-button-outline-hover-bg: #dbe2ef;
  --app-button-secondary-border: #3f72af;
  --app-button-secondary-bg: #f9f7f7;
  --app-button-secondary-text: #112d4e;
  --app-button-secondary-hover-bg: #dbe2ef;
  --app-select-border: #3f72af;
  --app-select-border-hover: #112d4e;
  --app-select-border-focus: #112d4e;
  --app-select-bg: #f9f7f7;
  --app-select-text: #112d4e;
  --app-select-muted: #112d4e;
  --app-select-focus: rgba(17, 45, 78, .18);
  --app-list-header-bg: #3f72af;
  --app-list-header-text: #f9f7f7;
  --app-list-header-border: #112d4e;
  --app-shell-divider: #dbe2ef;
  --auth-navy: #112d4e;
  --auth-blue: #3f72af;
  --auth-orange: #112d4e;
  --auth-ink: #112d4e;
  --auth-muted: #112d4e;
  --auth-line: #dbe2ef;
  --error-navy: #112d4e;
  --error-blue: #3f72af;
  --error-orange: #112d4e;
  --error-surface: #f9f7f7;
  --error-border: #dbe2ef;
  --error-muted: #112d4e;
}

:root[data-crm-theme="classic"] .crm-sidebar {
  background: linear-gradient(180deg, #112d4e 0%, #3f72af 100%);
}

:root[data-crm-theme="classic"] .crm-sidebar-brand {
  border-bottom-color: #3f72af;
  background: #112d4e;
}

:root[data-crm-theme="classic"] .crm-brand-subtitle {
  color: #f9f7f7;
}

:root[data-crm-theme="classic"] .crm-nav-link.active {
  color: #112d4e;
  background: #dbe2ef;
  box-shadow: inset 3px 0 0 #f9f7f7;
}

:root[data-crm-theme="classic"] .crm-nav-link.active i {
  color: #112d4e;
}

:root[data-crm-theme="classic"] .crm-sidebar-settings .crm-nav-link.active {
  background: #dbe2ef;
}

:root[data-crm-theme="classic"] ::selection {
  color: #f9f7f7;
  background: #3f72af;
}

:root[data-crm-theme="classic"].crm-scroll-active {
  scrollbar-color: rgba(63, 114, 175, .58) transparent;
}

:root[data-crm-theme="classic"].crm-scroll-active::-webkit-scrollbar-thumb {
  background: rgba(63, 114, 175, .58);
}

/* Shared base rules predate palette tokens for these controls. Override only
   Classic colours; validation states and document-paper controls stay intact. */
:root[data-crm-theme="classic"] :is(.crm-body, .auth-body) .form-check-input:checked:not(.is-invalid):not(.is-valid):not(.quotation-preview-document):not(.quotation-preview-document *):not(.itinerary-preview-document):not(.itinerary-preview-document *) {
  border-color: #3f72af;
  background-color: #3f72af;
}

:root[data-crm-theme="classic"] :is(.crm-body, .auth-body) .form-check-input:focus:not(.is-invalid):not(.is-valid):not(.quotation-preview-document):not(.quotation-preview-document *):not(.itinerary-preview-document):not(.itinerary-preview-document *) {
  border-color: #112d4e;
  box-shadow: 0 0 0 .2rem rgba(17, 45, 78, .18);
}

:root[data-crm-theme="classic"] .crm-body :is(.dropdown-item.active, .dropdown-item:active, .list-group-item.active) {
  border-color: #3f72af;
  color: #f9f7f7;
  background-color: #3f72af;
}

:root[data-crm-theme="classic"] .crm-body .page-link {
  border-color: #dbe2ef;
  color: #112d4e;
  background-color: #f9f7f7;
}

:root[data-crm-theme="classic"] .crm-body .page-link:is(:hover, :focus) {
  color: #112d4e;
  background-color: #dbe2ef;
}

:root[data-crm-theme="classic"] .crm-body .page-link:focus {
  box-shadow: 0 0 0 .2rem rgba(17, 45, 78, .18);
}

:root[data-crm-theme="classic"] .crm-body :is(.active > .page-link, .page-link.active, .nav-pills .nav-link.active) {
  border-color: #3f72af;
  color: #f9f7f7;
  background-color: #3f72af;
}

:root[data-crm-theme="classic"] :is(.crm-body, .auth-body, .error-page) a:not(.btn):focus-visible {
  outline-color: #112d4e;
}

:root[data-crm-theme="classic"] .dashboard-page-actions .btn-primary .bi {
  color: #f9f7f7;
}

:root[data-crm-theme="classic"] .crm-body :is(.dashboard-section-card, .lead-form-section, .lead-detail-card, .quotation-builder-side-card):not(.lead-detail-danger-card):not(.lead-form-section--danger):not(.quotation-preview-document):not(.quotation-preview-document *):not(.itinerary-preview-document):not(.itinerary-preview-document *) {
  background-color: #f9f7f7;
}

:root[data-crm-theme="classic"] :is(.crm-body, .auth-body) .form-control:not(:disabled):not([readonly]):not(.quotation-preview-document):not(.quotation-preview-document *):not(.itinerary-preview-document):not(.itinerary-preview-document *) {
  color: #112d4e;
  background-color: #f9f7f7;
}

:root[data-crm-theme="classic"] :is(.crm-body, .auth-body, .error-page) .text-primary:not(.quotation-preview-document):not(.quotation-preview-document *):not(.itinerary-preview-document):not(.itinerary-preview-document *) {
  color: #112d4e !important;
}

:root[data-crm-theme="classic"] .lead-detail-eyebrow {
  color: #112d4e;
}

:root[data-crm-theme="classic"] .crm-notification-menu-header a,
:root[data-crm-theme="classic"] .crm-notification-title-row time:not(.is-overdue) {
  color: #112d4e;
}

:root[data-crm-theme="classic"] :is(.crm-body, .auth-body) .bg-primary-subtle {
  background-color: var(--crm-brand-blue-soft) !important;
}

:root[data-crm-theme="classic"] :is(.crm-body, .auth-body) .text-bg-primary {
  background-color: var(--crm-brand-blue) !important;
}

:root[data-crm-theme="classic"] .management-summary-card--blue {
  --management-summary-accent: #3f72af;
  --management-summary-soft: #dbe2ef;
}

:root[data-crm-theme="classic"] .crm-page-loader-bar {
  background: linear-gradient(90deg, #112d4e, #3f72af);
  box-shadow: 0 0 9px rgba(63, 114, 175, .42);
}

/* These legacy compact actions have fixed gold inset shadows. Use a navy
   rule only in Classic instead of changing another theme's button treatment. */
:root[data-crm-theme="classic"] :is(.crm-body, .auth-body, .error-page) :is(.btn-secondary, .btn-outline-secondary):is(:hover, :focus-visible) {
  box-shadow: inset 0 -2px 0 #112d4e, 0 4px 9px rgba(17, 45, 78, .1) !important;
}

:root[data-crm-theme="classic"] .crm-body :is(.table-action-icon, .crm-icon-button):is(:hover, :focus-visible) {
  box-shadow: inset 0 -2px 0 #112d4e, 0 3px 7px rgba(17, 45, 78, .1);
}

:root[data-crm-theme="classic"] .crm-body :is(.customer-detail-action, .quotation-add-customer-link, .lead-document-trigger, .crm-page-control):is(:hover, :focus-visible):not(:disabled) {
  box-shadow: inset 0 -2px 0 #112d4e, 0 4px 9px rgba(17, 45, 78, .1);
}

:root[data-crm-theme="classic"] .crm-body :is(.customer-detail-action--primary, .whatsapp-send-button):is(:hover, :focus-visible) {
  box-shadow: inset 0 -2px 0 #112d4e, 0 6px 13px rgba(17, 45, 78, .2);
}

:root[data-crm-theme="classic"] .lead-service-duration {
  border-color: #dbe2ef;
}

:root[data-crm-theme="classic"] .lead-service-duration-icon,
:root[data-crm-theme="classic"] .lead-form-section-icon--blue {
  background: #3f72af;
  color: #f9f7f7;
}

:root[data-crm-theme="classic"] :is(.auth-body, body.error-page) {
  background: radial-gradient(circle at 92% 90%, #dbe2ef, transparent 36%), #f9f7f7;
}

:root[data-crm-theme="classic"] .login-brand-panel {
  background: linear-gradient(145deg, #3f72af 0%, #112d4e 100%);
}

:root[data-crm-theme="classic"] .login-brand-glow-one {
  background: rgba(219, 226, 239, .16);
}

:root[data-crm-theme="classic"] .login-brand-glow-two {
  background: rgba(249, 247, 247, .10);
}

:root[data-crm-theme="classic"] .login-kicker,
:root[data-crm-theme="classic"] .login-kicker i {
  color: #f9f7f7;
}

:root[data-crm-theme="classic"] .login-form-panel {
  background: #f9f7f7;
}

:root[data-crm-theme="classic"] .login-submit-button {
  color: #f9f7f7;
  background: #3f72af;
  box-shadow: inset 0 -3px 0 #112d4e, 0 14px 28px rgba(17, 45, 78, .22);
}

:root[data-crm-theme="classic"] .login-submit-button:is(:hover, :focus-visible) {
  background: #112d4e;
  box-shadow: inset 0 -3px 0 #3f72af, 0 17px 34px rgba(17, 45, 78, .27);
}

:root[data-crm-theme="classic"] .error-icon {
  color: #112d4e;
  background: #dbe2ef;
}

:root[data-crm-theme="classic"] .error-icon--critical {
  color: var(--crm-status-critical);
  background: var(--crm-status-critical-bg);
}

/* Booking document preview is a button: it opens the shared dialog rather
   than navigating or creating a new browser tab. Downloads remain links. */
.booking-document-actions .booking-document-preview-button {
  display: inline-flex;
  width: 1.85rem;
  height: 1.85rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--wds-border);
  border-radius: .45rem;
  color: var(--wds-link);
  background: var(--wds-surface);
  font: inherit;
  cursor: pointer;
}

.booking-document-actions .booking-document-preview-button:is(:hover, :focus-visible) {
  border-color: var(--wds-link);
  background: var(--wds-surface-hover);
}

.booking-document-actions .booking-document-preview-button:focus-visible {
  outline: 2px solid var(--wds-link);
  outline-offset: 2px;
}

/* The shared mobile preview toolbar is icon-only. Theme button typography
   must not restore a text label inside its existing 34px download control. */
@media (max-width: 767.98px) {
  .itinerary-preview-modal-actions .btn {
    font-size: 0 !important;
  }
}

/* Booking view-mode drawer: shared Lead drawer styles contain fixed light
   surfaces. Keep the correction local to Booking, including its AJAX loading
   shell, so Lead View and customer-facing documents retain their appearance. */
:root .booking-edit-drawer {
  color: var(--wds-text);
  background: var(--wds-surface);
}

:root .booking-edit-drawer > .dashboard-section-card {
  border-color: var(--wds-border) !important;
  color: var(--wds-text);
  background: var(--wds-surface-muted) !important;
}

:root .booking-edit-drawer > .dashboard-section-card > .lead-detail-drawer-header {
  border-bottom-color: var(--wds-border) !important;
  background: var(--wds-surface-muted) !important;
}

:root .booking-edit-drawer > .dashboard-section-card > .lead-detail-drawer-body {
  background: var(--wds-surface-muted);
}

:root .booking-edit-drawer .lead-detail-loading-card {
  border-color: var(--wds-border);
  background: var(--wds-surface);
}

:root .booking-edit-drawer .lead-detail-loading-progress {
  background: var(--wds-border);
}

:root .booking-edit-drawer :is(.lead-detail-loading-line, .lead-detail-loading-grid span) {
  background-image: linear-gradient(100deg, var(--wds-surface-muted) 20%, var(--wds-surface-hover) 42%, var(--wds-surface-muted) 64%);
}

:root .booking-edit-drawer .lead-detail-drawer-close {
  border-color: var(--wds-border);
  color: var(--wds-text-muted);
  background: var(--wds-surface);
}

:root .booking-edit-drawer .lead-detail-drawer-close:is(:hover, :focus-visible) {
  border-color: var(--wds-link);
  color: var(--wds-link);
  background: var(--wds-surface-hover);
}

:root .booking-workspace :is(.booking-payment-grid, .booking-financial-grid) > div {
  background: var(--wds-surface-muted);
}

:root .booking-workspace .booking-payment-progress {
  background: var(--wds-border);
}

:root .booking-workspace .booking-service-lineage-row {
  border-color: var(--wds-border);
  color: var(--wds-text);
  background: var(--wds-surface);
}

:root .booking-workspace :is(.booking-service-lineage-row > div span, .booking-service-lineage-row small) {
  color: var(--wds-text-muted);
}

:root .booking-workspace :is(.booking-service-lineage-meta strong, .lead-document-copy strong) {
  color: var(--wds-heading);
}

:root .booking-workspace :is(.lead-document-copy small, .lead-document-copy > span) {
  color: var(--wds-text-muted);
}

:root .booking-workspace .lead-document-icon {
  color: var(--wds-accent);
  background: var(--wds-surface-muted);
}

:root .booking-workspace .lead-document-row:has(input:checked) {
  border-color: var(--wds-link);
  background: var(--wds-surface-hover);
}

:root .booking-workspace .booking-document-actions a {
  border-color: var(--wds-border);
  color: var(--wds-link);
  background: var(--wds-surface);
}

:root .booking-workspace .booking-document-actions a:is(:hover, :focus-visible) {
  border-color: var(--wds-link);
  background: var(--wds-surface-hover);
}


/* Customer-facing paper stays light in every application palette. PDF export
   continues to use its existing document generator and organisation branding. */
:root[data-crm-theme] :is(.quotation-preview-document, .itinerary-preview-document) {
  color-scheme: light;
  --crm-brand-navy: #1d3557;
  --crm-brand-navy-deep: #14253c;
  --crm-brand-blue: #284b73;
  --crm-brand-blue-soft: #eef2f6;
  --crm-brand-orange: #b59670;
  --crm-brand-orange-soft: #fbf7ee;
  --crm-border: #dde1e5;
  --crm-surface: #ffffff;
  --crm-text: #252525;
  --crm-muted: #667085;
  --wds-border: #dde1e5;
  --wds-border-soft: #eceff1;
  --wds-surface: #ffffff;
  --wds-surface-muted: #f4f5f6;
  --wds-text: #3d3d3d;
  --wds-text-muted: #667085;
  --wds-heading: #1d3557;
  --app-list-header-bg: #284b73;
  --app-list-header-text: #ffffff;
  --app-list-header-border: #1d3557;
  color: var(--crm-text);
}

:root[data-crm-theme] :is(.quotation-preview-document, .itinerary-preview-document) .text-muted {
  color: var(--crm-muted) !important;
}

:root[data-crm-theme] :is(.quotation-preview-document, .itinerary-preview-document) .text-danger {
  color: #9f1520 !important;
}

:root[data-crm-theme] .quotation-preview-document .quotation-preview-table {
  --bs-table-color: #4c5b6f;
  --bs-table-bg: #ffffff;
  --bs-table-border-color: #eceff1;
}

:root[data-crm-theme] .quotation-preview-document .quotation-preview-table thead th {
  --bs-table-color: var(--app-list-header-text);
  --bs-table-bg: var(--app-list-header-bg);
  color: var(--app-list-header-text) !important;
  background-color: var(--app-list-header-bg) !important;
}

/* Google-inspired multicolour: flat white surfaces and four discrete accents.
   This opt-in palette does not change other themes, permanent Lead status/priority colours
   or customer-facing document branding. Never use gradient decorations here.
   Saturated swatches are decorative; compact text uses darker accessible hues. */
.crm-theme-swatch--google span:nth-child(1) { background: #4285f4; }
.crm-theme-swatch--google span:nth-child(2) { background: #e60000; }
.crm-theme-swatch--google span:nth-child(3) { background: #fbbc04; }
.crm-theme-swatch--google span:nth-child(4) { background: #34a853; }

:root[data-crm-theme="google"] {
  color-scheme: light;
  --google-blue: #4285f4;
  --google-red: #e60000;
  --google-yellow: #fbbc04;
  --google-green: #34a853;
  --crm-brand-navy: #202124;
  --crm-brand-navy-deep: #174ea6;
  --crm-brand-blue: #1967d2;
  --crm-brand-blue-soft: #e8f0fe;
  --crm-brand-orange: #8c5000;
  --crm-brand-orange-soft: #fef7e0;
  --crm-sidebar-bg: #ffffff;
  --crm-sidebar-bg-strong: #ffffff;
  --crm-sidebar-text: #3c4043;
  --crm-sidebar-muted: #5f6368;
  --crm-sidebar-active: #1967d2;
  --crm-border: #dadce0;
  --crm-content-bg: #f8f9fa;
  --crm-surface: #ffffff;
  --crm-text: #202124;
  --crm-muted: #5f6368;
  --crm-text-muted: #5f6368;
  --crm-status-info: #174ea6;
  --crm-status-info-bg: #e8f0fe;
  --crm-status-info-border: #aecbfa;
  --crm-status-critical: var(--google-red);
  --crm-status-critical-bg: #fff7f7;
  --crm-status-critical-border: #ffb3b3;
  --bs-danger: var(--google-red);
  --bs-danger-rgb: 230, 0, 0;
  --bs-danger-text-emphasis: var(--google-red);
  --bs-danger-bg-subtle: #fff7f7;
  --bs-danger-border-subtle: #ffb3b3;
  --bs-gradient: none;
  --bs-primary: #1967d2;
  --bs-primary-rgb: 25, 103, 210;
  --bs-primary-text-emphasis: #174ea6;
  --bs-primary-bg-subtle: #e8f0fe;
  --bs-primary-border-subtle: #aecbfa;
  --bs-body-bg: #f8f9fa;
  --bs-body-color: #202124;
  --bs-emphasis-color: #202124;
  --bs-secondary-color: #5f6368;
  --bs-border-color: #dadce0;
  --bs-link-color: #1967d2;
  --bs-link-color-rgb: 25, 103, 210;
  --bs-link-hover-color: #174ea6;
  --bs-link-hover-color-rgb: 23, 78, 166;
  --wds-border: #dadce0;
  --wds-border-soft: #e8eaed;
  --wds-surface: #ffffff;
  --wds-surface-muted: #f8f9fa;
  --wds-surface-hover: #e8f0fe;
  --wds-text: #3c4043;
  --wds-text-muted: #5f6368;
  --wds-heading: #202124;
  --wds-link: #1967d2;
  --wds-accent: #1967d2;
  --wds-shadow: 0 2px 8px rgba(60, 64, 67, .08);
  --app-button-primary: #1967d2;
  --app-button-primary-hover: #185abc;
  --app-button-primary-active: #174ea6;
  --app-button-accent: #1967d2;
  --app-button-text: #ffffff;
  --app-button-shadow: 0 1px 3px rgba(60, 64, 67, .16);
  --app-button-focus: #d2e3fc;
  --app-button-outline-border: #dadce0;
  --app-button-outline-bg: #ffffff;
  --app-button-outline-text: #1967d2;
  --app-button-outline-hover-bg: #e8f0fe;
  --app-button-secondary-border: #dadce0;
  --app-button-secondary-bg: #ffffff;
  --app-button-secondary-text: #3c4043;
  --app-button-secondary-hover-bg: #f1f3f4;
  --app-select-border: #dadce0;
  --app-select-border-hover: #80868b;
  --app-select-border-focus: #1967d2;
  --app-select-bg: #ffffff;
  --app-select-text: #202124;
  --app-select-muted: #5f6368;
  --app-select-focus: #d2e3fc;
  --app-list-header-bg: #e8f0fe;
  --app-list-header-text: #174ea6;
  --app-list-header-border: #dadce0;
  --app-shell-divider: #dadce0;
  --auth-navy: #202124;
  --auth-blue: #1967d2;
  --auth-orange: #8c5000;
  --auth-ink: #202124;
  --auth-muted: #5f6368;
  --auth-line: #dadce0;
  --error-navy: #202124;
  --error-blue: #1967d2;
  --error-orange: #1967d2;
  --error-surface: #ffffff;
  --error-border: #dadce0;
  --error-muted: #5f6368;
}

:root[data-crm-theme="google"] ::selection { color: #174ea6; background: #d2e3fc; }
:root[data-crm-theme="google"].crm-scroll-active { scrollbar-color: #80868b transparent; }
:root[data-crm-theme="google"].crm-scroll-active::-webkit-scrollbar-thumb { background: #80868b; }

/* Chrome stays white; colour appears in discrete icons and selected states. */
:root[data-crm-theme="google"] :is(.crm-sidebar, .crm-sidebar-brand, .crm-sidebar-settings, .crm-topbar) {
  border-color: var(--crm-border);
  background: #ffffff;
  border-image: none;
  box-shadow: none;
}
:root[data-crm-theme="google"] :is(.crm-brand-link, .crm-brand-link:hover) { color: #202124; }
:root[data-crm-theme="google"] :is(.crm-brand-subtitle, .crm-nav-group-toggle) { color: #5f6368; }
:root[data-crm-theme="google"] .crm-nav-section-divider { background: #dadce0; }
:root[data-crm-theme="google"] :is(.crm-nav-link, .crm-nav-group-toggle):is(:hover, :focus-visible) {
  color: #202124;
  background: #f1f3f4;
}
:root[data-crm-theme="google"] :is(.crm-nav-link.active, .crm-nav-group.has-active-item > .crm-nav-group-toggle),
:root[data-crm-theme="google"] body.crm-sidebar-collapsed .crm-nav-group.has-active-item > .crm-nav-group-toggle {
  color: #174ea6;
  background: #e8f0fe;
  box-shadow: inset 3px 0 0 #4285f4;
}
:root[data-crm-theme="google"] .crm-nav-link:is(.active, :hover, :focus-visible) i { color: #1967d2; }
:root[data-crm-theme="google"] .crm-sidebar-nav > :nth-child(4n + 1) :is(.crm-nav-group-icon, .crm-nav-link > i),
:root[data-crm-theme="google"] .crm-sidebar-nav > .crm-nav-link:nth-child(4n + 1) > i { color: #1967d2; }
:root[data-crm-theme="google"] .crm-sidebar-nav > :nth-child(4n + 2) :is(.crm-nav-group-icon, .crm-nav-link > i),
:root[data-crm-theme="google"] .crm-sidebar-nav > .crm-nav-link:nth-child(4n + 2) > i { color: var(--google-red); }
:root[data-crm-theme="google"] .crm-sidebar-nav > :nth-child(4n + 3) :is(.crm-nav-group-icon, .crm-nav-link > i),
:root[data-crm-theme="google"] .crm-sidebar-nav > .crm-nav-link:nth-child(4n + 3) > i { color: #a05a00; }
:root[data-crm-theme="google"] .crm-sidebar-nav > :nth-child(4n) :is(.crm-nav-group-icon, .crm-nav-link > i),
:root[data-crm-theme="google"] .crm-sidebar-nav > .crm-nav-link:nth-child(4n) > i { color: #137333; }
:root[data-crm-theme="google"] .crm-theme-trigger .bi { color: #1967d2; }
:root[data-crm-theme="google"] :is(.form-check-input:checked, .dropdown-item.active, .dropdown-item:active, .list-group-item.active) {
  border-color: #1967d2;
  background-color: #1967d2;
}
:root[data-crm-theme="google"] :is(.crm-body, .auth-body, .error-page) .text-primary:not(:where(.quotation-preview-document, .quotation-preview-document *, .itinerary-preview-document, .itinerary-preview-document *)) { color: #1967d2 !important; }
:root[data-crm-theme="google"] :is(.crm-body, .auth-body) .bg-primary-subtle:not(:where(.quotation-preview-document, .quotation-preview-document *, .itinerary-preview-document, .itinerary-preview-document *)) { background-color: #e8f0fe !important; }
:root[data-crm-theme="google"] :is(.crm-body, .auth-body) .text-bg-primary:not(:where(.quotation-preview-document, .quotation-preview-document *, .itinerary-preview-document, .itinerary-preview-document *)) { color: #ffffff !important; background-color: #1967d2 !important; }
:root[data-crm-theme="google"] .crm-body .page-link { color: #1967d2; }
:root[data-crm-theme="google"] .crm-body :is(.active > .page-link, .page-link.active, .nav-pills .nav-link.active) { color: #ffffff; border-color: #1967d2; background: #1967d2; }
:root[data-crm-theme="google"] .crm-body .page-link:is(:hover, :focus) { color: #174ea6; background-color: #e8f0fe; }

/* Surface overrides cover legacy gradients without stripping real photos,
   logos, select chevrons, checkbox ticks or validation icons. */
:root[data-crm-theme="google"] :is(
  .invoice-summary-grid .management-summary-card, .invoice-details-hero,
  .crm-notification-menu-header, .lead-form-hero,
  .lead-traveller-required-header, .lead-filter-panel, .quotation-builder-hero,
  .quotation-builder-source-header, .quotation-builder-itinerary-strip--required,
  .role-menu-permission-card .dashboard-section-header, .quotation-builder-costing-heading,
  .package-day-tab-shell, .package-day-editor-header, .cruise-tenant-context,
  .organization-config-header, .itinerary-builder-hero, .itinerary-service-request-header,
  .itinerary-inline-form, .itinerary-day-header, .customer-profile-completion,
  .customer-form-section-heading, .whatsapp-ai-card, .itinerary-preview-modal-header,
  .lead-document-modal-header, .crm-chat-search input, .whatsapp-thread
) {
  background-color: #ffffff !important;
  background-image: none !important;
}
:root[data-crm-theme="google"] .account-data-card-danger { background: var(--crm-status-critical-bg); }
:root[data-crm-theme="google"] :is(
  .lead-form-hero-icon, .lead-service-add, .quotation-builder-add-actions .btn,
  .quotation-builder-gom-row--primary, .quotation-new-button, .lead-edit-save,
  .organization-config-save, .itinerary-builder-hero-icon, .customer-detail-avatar,
  .user-management-avatar, .quotation-builder-primary-action, .crm-chat-window-header
) {
  border-color: #1967d2;
  color: #ffffff;
  background: #1967d2;
}
:root[data-crm-theme="google"] :is(.lead-service-add, .organization-config-save):is(:hover, :focus-visible) { background: #185abc; }
:root[data-crm-theme="google"] .lead-service-duration { color: #202124; border-color: #fbbc04; background: #fef7e0; }
:root[data-crm-theme="google"] :is(.lead-service-duration-icon, .lead-form-section-icon--blue) { color: #174ea6; background: #e8f0fe; }

/* Summary icons provide all four accents without colouring entire cards. */
:root[data-crm-theme="google"] .management-summary-card--blue { --management-summary-accent: #1967d2; --management-summary-soft: #e8f0fe; }
:root[data-crm-theme="google"] :is(.management-summary-card--red, .management-summary-card--rose) { --management-summary-accent: var(--google-red); --management-summary-soft: #fff7f7; }
:root[data-crm-theme="google"] :is(.management-summary-card--orange, .management-summary-card--amber) { --management-summary-accent: #8c5000; --management-summary-soft: #fef7e0; }
:root[data-crm-theme="google"] .management-summary-card--green { --management-summary-accent: #137333; --management-summary-soft: #e6f4ea; }

/* Solid progress bars: no animated colour blending or shimmer gradients. */
:root[data-crm-theme="google"] :is(
  .crm-page-loader-bar, .lead-detail-loading-progress span, .package-build-progress .progress-bar,
  .customer-completion-list__track span, .customer-profile-completion__track span,
  .booking-detail-progress > span, .booking-payment-progress > span
) { background: #4285f4 !important; }
:root[data-crm-theme="google"] .crm-content-container.is-ajax-refreshing::before { background: #4285f4; }
:root[data-crm-theme="google"] .quotation-builder-hero::before { background: #4285f4; }
:root[data-crm-theme="google"] .package-day-tab-item.active::before { background: #34a853; }
:root[data-crm-theme="google"] :is(
  .lead-detail-loading-line, .lead-detail-loading-grid span,
  .dashboard-loading-value, .dashboard-loading-copy, .dashboard-loading-rows > span
) { background: #e8eaed !important; animation: none; }
:root[data-crm-theme="google"] .settings-branding-preview { background: #f1f3f4; }
:root[data-crm-theme="google"] .progress-bar-striped { background-image: none !important; }
:root[data-crm-theme="google"] .placeholder-wave { -webkit-mask-image: none; mask-image: none; }

/* Authentication and error screens share the same flat palette. */
:root[data-crm-theme="google"] :is(.auth-body, body.error-page) { background: #f8f9fa; }
:root[data-crm-theme="google"] .login-brand-panel { color: #202124; background: #e8f0fe; }
:root[data-crm-theme="google"] :is(.login-brand-glow-one, .login-brand-glow-two) { display: none; }
:root[data-crm-theme="google"] .login-form-panel { background: #ffffff; }
:root[data-crm-theme="google"] .login-form-panel::before { background: #4285f4; }
:root[data-crm-theme="google"] .login-submit-button { color: #ffffff; border-color: #1967d2; background: #1967d2; box-shadow: var(--app-button-shadow); }
:root[data-crm-theme="google"] .login-submit-button:is(:hover, :focus-visible) { border-color: #185abc; background: #185abc; }
:root[data-crm-theme="google"] :is(.login-kicker, .login-kicker i) { color: #174ea6; }
:root[data-crm-theme="google"] :is(.login-brand-copy p, .login-feature-item small) { color: #5f6368; }
:root[data-crm-theme="google"] .login-feature-item { color: #202124; border-color: #dadce0; background: #ffffff; }
:root[data-crm-theme="google"] .login-feature-icon { color: #1967d2; border-color: #dadce0; background: #ffffff; }
:root[data-crm-theme="google"] .login-brand-panel::before { display: none; }


/* Multicolor Vibrant: an additive, opt-in palette with solid surfaces only.
   Existing themes, semantic status colours and customer-document branding are preserved. */
.crm-theme-swatch--vibrant span:nth-child(1) { background: #EC5B38; }
.crm-theme-swatch--vibrant span:nth-child(2) { background: #e60000; }
.crm-theme-swatch--vibrant span:nth-child(3) { background: #EC5B38; }
.crm-theme-swatch--vibrant span:nth-child(4) { background: #142B49; }

html:root[data-crm-theme="vibrant"] {
  color-scheme: light;
  --vibrant-blue: #EC5B38;
  --vibrant-red: #e60000;
  --vibrant-yellow: #EC5B38;
  --vibrant-green: #142B49;
  --crm-brand-navy: #142B49;
  --crm-brand-navy-deep: #193B66;
  --crm-brand-blue: #193B66;
  --crm-brand-blue-soft: #FFE6D9;
  --crm-brand-orange: #193B66;
  --crm-brand-orange-soft: #F8FAFC;
  --crm-sidebar-bg: #FAFCFF;
  --crm-sidebar-bg-strong: #FAFCFF;
  --crm-sidebar-text: #142B49;
  --crm-sidebar-muted: #536175;
  --crm-sidebar-active: #EC5B38;
  --crm-border: #9AAABD;
  --crm-content-bg: #F8FAFC;
  --crm-surface: #FAFCFF;
  --crm-text: #142B49;
  --crm-muted: #536175;
  --crm-text-muted: #536175;
  --crm-status-info: #193B66;
  --crm-status-info-bg: #FFE6D9;
  --crm-status-info-border: #CF6748;
  --crm-status-critical: var(--vibrant-red);
  --crm-status-critical-bg: #fff7f9;
  --crm-status-critical-border: #ffb3c2;
  --bs-danger: var(--vibrant-red);
  --bs-danger-rgb: 230, 0, 0;
  --bs-danger-text-emphasis: var(--vibrant-red);
  --bs-danger-bg-subtle: #fff7f9;
  --bs-danger-border-subtle: #ffb3c2;
  --bs-gradient: none;
  --bs-primary: #EC5B38;
  --bs-primary-rgb: 236, 91, 56;
  --bs-primary-text-emphasis: #142B49;
  --bs-primary-bg-subtle: #FFE6D9;
  --bs-primary-border-subtle: #CF6748;
  --bs-body-bg: #F8FAFC;
  --bs-body-color: #142B49;
  --bs-emphasis-color: #142B49;
  --bs-secondary-color: #536175;
  --bs-border-color: #9AAABD;
  --bs-link-color: #193B66;
  --bs-link-color-rgb: 25, 59, 102;
  --bs-link-hover-color: #193B66;
  --bs-link-hover-color-rgb: 25, 59, 102;
  --wds-border: #9AAABD;
  --wds-border-soft: #EAF0F7;
  --wds-surface: #FAFCFF;
  --wds-surface-muted: #F8FAFC;
  --wds-surface-hover: #FFE6D9;
  --wds-text: #142B49;
  --wds-text-muted: #536175;
  --wds-heading: #142B49;
  --wds-link: #193B66;
  --wds-accent: #EC5B38;
  --wds-shadow: 0 2px 8px rgba(236, 91, 56, .08);
  --app-button-primary: #EC5B38;
  --app-button-primary-hover: #F36B49;
  --app-button-primary-active: #E6502E;
  --app-button-accent: #193B66;
  --app-button-text: #0B1728;
  --app-button-shadow: 0 1px 3px rgba(236, 91, 56, .16);
  --app-button-focus: #F9B49E;
  --app-button-outline-border: #9AAABD;
  --app-button-outline-bg: #FAFCFF;
  --app-button-outline-text: #193B66;
  --app-button-outline-hover-bg: #FFE6D9;
  --app-button-secondary-border: #9AAABD;
  --app-button-secondary-bg: #FAFCFF;
  --app-button-secondary-text: #142B49;
  --app-button-secondary-hover-bg: #EFF3F8;
  --app-select-border: #66788F;
  --app-select-border-hover: #66788F;
  --app-select-border-focus: #EC5B38;
  --app-select-bg: #FAFCFF;
  --app-select-text: #142B49;
  --app-select-muted: #536175;
  --app-select-focus: #F9B49E;
  --app-list-header-bg: #FFE6D9;
  --app-list-header-text: #193B66;
  --app-list-header-border: #9AAABD;
  --app-shell-divider: #9AAABD;
  --auth-navy: #142B49;
  --auth-blue: #193B66;
  --auth-orange: #193B66;
  --auth-ink: #142B49;
  --auth-muted: #536175;
  --auth-line: #9AAABD;
  --error-navy: #142B49;
  --error-blue: #193B66;
  --error-orange: #EC5B38;
  --error-surface: #FAFCFF;
  --error-border: #9AAABD;
  --error-muted: #536175;
}

html:root[data-crm-theme="vibrant"] ::selection { color: #193B66; background: #F9B49E; }
html:root[data-crm-theme="vibrant"].crm-scroll-active { scrollbar-color: #66788F transparent; }
html:root[data-crm-theme="vibrant"].crm-scroll-active::-webkit-scrollbar-thumb { background: #66788F; }

/* Chrome stays white; colour appears in discrete icons and selected states. */
html:root[data-crm-theme="vibrant"] :is(.crm-sidebar, .crm-sidebar-brand, .crm-sidebar-settings, .crm-topbar) {
  border-color: var(--crm-border);
  background: #FAFCFF;
  border-image: none;
  box-shadow: none;
}
html:root[data-crm-theme="vibrant"] :is(.crm-brand-link, .crm-brand-link:hover) { color: #142B49; }
html:root[data-crm-theme="vibrant"] :is(.crm-brand-subtitle, .crm-nav-group-toggle) { color: #536175; }
html:root[data-crm-theme="vibrant"] .crm-nav-section-divider { background: #9AAABD; }
html:root[data-crm-theme="vibrant"] :is(.crm-nav-link, .crm-nav-group-toggle):is(:hover, :focus-visible) {
  color: #142B49;
  background: #EFF3F8;
}
html:root[data-crm-theme="vibrant"] :is(.crm-nav-link.active, .crm-nav-group.has-active-item > .crm-nav-group-toggle),
html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-group.has-active-item > .crm-nav-group-toggle {
  color: #193B66;
  background: #FFE6D9;
  box-shadow: inset 3px 0 0 #EC5B38;
}
html:root[data-crm-theme="vibrant"] .crm-nav-link:is(.active, :hover, :focus-visible) i { color: #EC5B38; }
html:root[data-crm-theme="vibrant"] .crm-sidebar-nav > :nth-child(4n + 1) :is(.crm-nav-group-icon, .crm-nav-link > i),
html:root[data-crm-theme="vibrant"] .crm-sidebar-nav > .crm-nav-link:nth-child(4n + 1) > i { color: #EC5B38; }
html:root[data-crm-theme="vibrant"] .crm-sidebar-nav > :nth-child(4n + 2) :is(.crm-nav-group-icon, .crm-nav-link > i),
html:root[data-crm-theme="vibrant"] .crm-sidebar-nav > .crm-nav-link:nth-child(4n + 2) > i { color: var(--vibrant-red); }
html:root[data-crm-theme="vibrant"] .crm-sidebar-nav > :nth-child(4n + 3) :is(.crm-nav-group-icon, .crm-nav-link > i),
html:root[data-crm-theme="vibrant"] .crm-sidebar-nav > .crm-nav-link:nth-child(4n + 3) > i { color: #193B66; }
html:root[data-crm-theme="vibrant"] .crm-sidebar-nav > :nth-child(4n) :is(.crm-nav-group-icon, .crm-nav-link > i),
html:root[data-crm-theme="vibrant"] .crm-sidebar-nav > .crm-nav-link:nth-child(4n) > i { color: #087346; }
html:root[data-crm-theme="vibrant"] .crm-theme-trigger .bi { color: #EC5B38; }
html:root[data-crm-theme="vibrant"] :is(.form-check-input:checked, .dropdown-item.active, .dropdown-item:active, .list-group-item.active) {
  border-color: #EC5B38;
  background-color: #EC5B38;
}
html:root[data-crm-theme="vibrant"] :is(.crm-body, .auth-body, .error-page) .text-primary:not(:where(.quotation-preview-document, .quotation-preview-document *, .itinerary-preview-document, .itinerary-preview-document *)) { color: #EC5B38 !important; }
html:root[data-crm-theme="vibrant"] :is(.crm-body, .auth-body) .bg-primary-subtle:not(:where(.quotation-preview-document, .quotation-preview-document *, .itinerary-preview-document, .itinerary-preview-document *)) { background-color: #FFE6D9 !important; }
html:root[data-crm-theme="vibrant"] :is(.crm-body, .auth-body) .text-bg-primary:not(:where(.quotation-preview-document, .quotation-preview-document *, .itinerary-preview-document, .itinerary-preview-document *)) { color: #0B1728 !important; background-color: #EC5B38 !important; }
html:root[data-crm-theme="vibrant"] .crm-body .page-link { color: #EC5B38; }
html:root[data-crm-theme="vibrant"] .crm-body :is(.active > .page-link, .page-link.active, .nav-pills .nav-link.active) { color: #0B1728; border-color: #EC5B38; background: #EC5B38; }
html:root[data-crm-theme="vibrant"] .crm-body .page-link:is(:hover, :focus) { color: #193B66; background-color: #FFE6D9; }

/* Surface overrides cover legacy gradients without stripping real photos,
   logos, select chevrons, checkbox ticks or validation icons. */
html:root[data-crm-theme="vibrant"] :is(
  .invoice-summary-grid .management-summary-card, .invoice-details-hero,
  .crm-notification-menu-header, .lead-form-hero,
  .lead-traveller-required-header, .lead-filter-panel, .quotation-builder-hero,
  .quotation-builder-source-header, .quotation-builder-itinerary-strip--required,
  .role-menu-permission-card .dashboard-section-header, .quotation-builder-costing-heading,
  .package-day-tab-shell, .package-day-editor-header, .cruise-tenant-context,
  .organization-config-header, .itinerary-builder-hero, .itinerary-service-request-header,
  .itinerary-inline-form, .itinerary-day-header, .customer-profile-completion,
  .customer-form-section-heading, .whatsapp-ai-card, .itinerary-preview-modal-header,
  .lead-document-modal-header, .crm-chat-search input, .whatsapp-thread
) {
  background-color: #FAFCFF !important;
  background-image: none !important;
}
html:root[data-crm-theme="vibrant"] .account-data-card-danger { background: var(--crm-status-critical-bg); }
html:root[data-crm-theme="vibrant"] :is(
  .lead-form-hero-icon, .lead-service-add, .quotation-builder-add-actions .btn,
  .quotation-builder-gom-row--primary, .quotation-new-button, .lead-edit-save,
  .organization-config-save, .itinerary-builder-hero-icon, .customer-detail-avatar,
  .user-management-avatar, .quotation-builder-primary-action, .crm-chat-window-header
) {
  border-color: #EC5B38;
  color: #0B1728;
  background: #EC5B38;
}
html:root[data-crm-theme="vibrant"] :is(.lead-service-add, .organization-config-save):is(:hover, :focus-visible) { background: #F36B49; }
html:root[data-crm-theme="vibrant"] .lead-service-duration { color: #142B49; border-color: #EC5B38; background: #F8FAFC; }
html:root[data-crm-theme="vibrant"] :is(.lead-service-duration-icon, .lead-form-section-icon--blue) { color: #193B66; background: #FFE6D9; }

/* Semantic summaries remain distinct from the warm decorative palette. */
html:root[data-crm-theme="vibrant"] .management-summary-card--blue { --management-summary-accent: #EC5B38; --management-summary-soft: #FFE6D9; }
html:root[data-crm-theme="vibrant"] :is(.management-summary-card--red, .management-summary-card--rose) { --management-summary-accent: var(--vibrant-red); --management-summary-soft: #fff7f9; }
html:root[data-crm-theme="vibrant"] :is(.management-summary-card--orange, .management-summary-card--amber) { --management-summary-accent: #193B66; --management-summary-soft: #F8FAFC; }
html:root[data-crm-theme="vibrant"] .management-summary-card--green { --management-summary-accent: #087346; --management-summary-soft: #e4f8ee; }

/* Solid progress bars: no animated colour blending or shimmer gradients. */
html:root[data-crm-theme="vibrant"] :is(
  .crm-page-loader-bar, .lead-detail-loading-progress span, .package-build-progress .progress-bar,
  .customer-completion-list__track span, .customer-profile-completion__track span,
  .booking-detail-progress > span, .booking-payment-progress > span
) { background: #EC5B38 !important; }
html:root[data-crm-theme="vibrant"] .crm-content-container.is-ajax-refreshing::before { background: #EC5B38; }
html:root[data-crm-theme="vibrant"] .quotation-builder-hero::before { background: #EC5B38; }
html:root[data-crm-theme="vibrant"] .package-day-tab-item.active::before { background: #142B49; }
html:root[data-crm-theme="vibrant"] :is(
  .lead-detail-loading-line, .lead-detail-loading-grid span,
  .dashboard-loading-value, .dashboard-loading-copy, .dashboard-loading-rows > span
) { background: #EAF0F7 !important; animation: none; }
html:root[data-crm-theme="vibrant"] .settings-branding-preview { background: #EFF3F8; }
html:root[data-crm-theme="vibrant"] .progress-bar-striped { background-image: none !important; }
html:root[data-crm-theme="vibrant"] .placeholder-wave { -webkit-mask-image: none; mask-image: none; }

/* Authentication and error screens share the same flat palette. */
html:root[data-crm-theme="vibrant"] :is(.auth-body, body.error-page) { background: #F8FAFC; }
html:root[data-crm-theme="vibrant"] .login-brand-panel { color: #142B49; background: #FFE6D9; }
html:root[data-crm-theme="vibrant"] :is(.login-brand-glow-one, .login-brand-glow-two) { display: none; }
html:root[data-crm-theme="vibrant"] .login-form-panel { background: #FAFCFF; }
html:root[data-crm-theme="vibrant"] .login-form-panel::before { background: #EC5B38; }
html:root[data-crm-theme="vibrant"] .login-submit-button { color: #0B1728; border-color: #EC5B38; background: #EC5B38; box-shadow: var(--app-button-shadow); }
html:root[data-crm-theme="vibrant"] .login-submit-button:is(:hover, :focus-visible) { border-color: #F36B49; background: #F36B49; }
html:root[data-crm-theme="vibrant"] :is(.login-kicker, .login-kicker i) { color: #193B66; }
html:root[data-crm-theme="vibrant"] :is(.login-brand-copy p, .login-feature-item small) { color: #536175; }
html:root[data-crm-theme="vibrant"] .login-feature-item { color: #142B49; border-color: #9AAABD; background: #FAFCFF; }
html:root[data-crm-theme="vibrant"] .login-feature-icon { color: #EC5B38; border-color: #9AAABD; background: #FAFCFF; }
html:root[data-crm-theme="vibrant"] .login-brand-panel::before { display: none; }

/* Dual-colour palette: deep navy and vivid orange, supported by light neutral surfaces. */
.crm-theme-swatch--vibrant span:nth-child(1) { background: #EC5B38; }
.crm-theme-swatch--vibrant span:nth-child(2) { background: #193B66; }
.crm-theme-swatch--vibrant span:nth-child(3) { background: #142B49; }
.crm-theme-swatch--vibrant span:nth-child(4) { background: #EC5B38; }
html:root[data-crm-theme="vibrant"] {
  --vibrant-secondary: #193B66;
  --vibrant-secondary-ink: #142B49;
  --vibrant-secondary-soft: #EAF0F7;
  --vibrant-neutral: #142B49;
  --vibrant-neutral-soft: #EAF0F7;
  --vibrant-navy-ink: #193B66;
  --crm-brand-orange: #193B66;
  --wds-heading: #142B49;
  --wds-accent: #193B66;
  --wds-surface-hover: #EAF0F7;
  --wds-shadow: 0 4px 16px rgba(236, 91, 56, .08);
  --wds-tab-rail-bg: #EDF2F8;
  --wds-tab-inactive-bg: #EDF2F8;
  --wds-tab-active-bg: #FAFCFF;
  --wds-tab-hover-bg: #EAF0F7;
  --wds-tab-label-color: #536175;
  --wds-tab-active-color: #142B49;
  --app-list-header-bg: #EAF0F7;
  --app-list-header-text: #142B49;
  --app-list-header-border: #CBD5E1;
}
html:root[data-crm-theme="vibrant"] :is(.crm-topbar, .woolly-platform-header) {
  border-bottom-color: #9AAABD;
  background: #FAFCFF;
  box-shadow: 0 3px 14px rgba(236, 91, 56, .07);
}
html:root[data-crm-theme="vibrant"] .crm-sidebar {
  border-inline-end-color: #9AAABD;
  box-shadow: 4px 0 20px rgba(236, 91, 56, .06);
}
html:root[data-crm-theme="vibrant"] .crm-sidebar-nav > :nth-child(4n + 2) :is(.crm-nav-group-icon, .crm-nav-link > i),
html:root[data-crm-theme="vibrant"] .crm-sidebar-nav > .crm-nav-link:nth-child(4n + 2) > i { color: #193B66; }
html:root[data-crm-theme="vibrant"] .crm-sidebar-nav > :nth-child(4n) :is(.crm-nav-group-icon, .crm-nav-link > i),
html:root[data-crm-theme="vibrant"] .crm-sidebar-nav > .crm-nav-link:nth-child(4n) > i { color: #142B49; }
html:root[data-crm-theme="vibrant"] :is(.crm-nav-link.active, .crm-nav-group.has-active-item > .crm-nav-group-toggle) {
  color: #142B49;
  background: #EAF0F7;
  box-shadow: inset 3px 0 0 #193B66;
}
html:root[data-crm-theme="vibrant"] .woolly-platform-header-actions > .woolly-platform-apps-link:nth-of-type(2),
html:root[data-crm-theme="vibrant"] .woolly-platform-management-nav a[aria-current="page"] {
  color: #142B49;
  border-color: #CBD5E1;
  background: #EAF0F7;
}
html:root[data-crm-theme="vibrant"] .woolly-platform-management-link {
  --vibrant-card-accent: #EC5B38;
  --vibrant-card-soft: #FFE6D9;
  border-inline-start: 3px solid var(--vibrant-card-accent);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
html:root[data-crm-theme="vibrant"] .woolly-platform-management-link:nth-child(4n + 2) {
  --vibrant-card-accent: #193B66; --vibrant-card-soft: #EAF0F7;
}
html:root[data-crm-theme="vibrant"] .woolly-platform-management-link:nth-child(4n + 3) {
  --vibrant-card-accent: #142B49; --vibrant-card-soft: #EAF0F7;
}
html:root[data-crm-theme="vibrant"] .woolly-platform-management-link:nth-child(4n) {
  --vibrant-card-accent: #193B66; --vibrant-card-soft: #F8FAFC;
}
html:root[data-crm-theme="vibrant"] .woolly-platform-management-icon {
  color: var(--vibrant-card-accent);
  background: var(--vibrant-card-soft);
}
html:root[data-crm-theme="vibrant"] .woolly-platform-application-icon {
  color: #142B49; border-color: #9AAABD; background: #EAF0F7;
}
html:root[data-crm-theme="vibrant"] .woolly-platform-application { border-top: 3px solid #142B49; }
html:root[data-crm-theme="vibrant"] .crm-body .management-summary-card--blue {
  --management-summary-accent: #EC5B38; --management-summary-soft: #FFE6D9;
}
html:root[data-crm-theme="vibrant"] .crm-body .management-summary-card--purple {
  --management-summary-accent: #193B66; --management-summary-soft: #EAF0F7;
}
html:root[data-crm-theme="vibrant"] .crm-body :is(.btn-primary, .dashboard-page-actions .btn-primary, .lead-form-action-buttons .btn-primary, .quotation-create-action-buttons .btn-primary, .lead-detail-primary-form .btn) {
  color: #0B1728;
  border-color: #EC5B38;
  background: #EC5B38 !important;
}
html:root[data-crm-theme="vibrant"] .crm-body :is(.btn-primary, .dashboard-page-actions .btn-primary, .lead-form-action-buttons .btn-primary, .quotation-create-action-buttons .btn-primary, .lead-detail-primary-form .btn):is(:hover, :focus-visible) {
  border-color: #F36B49; background: #F36B49 !important;
}
html:root[data-crm-theme="vibrant"] .crm-body :is(.quotation-filter-panel--compact.lead-filter-panel, .customer-form-section-heading) {
  background-color: #FFE6D9 !important; background-image: none !important;
}
html:root[data-crm-theme="vibrant"] .crm-body .organization-config-header {
  background-color: #EAF0F7 !important; background-image: none !important;
}
html:root[data-crm-theme="vibrant"] .crm-body .package-preview-hero {
  color: #0B1728; background: #142B49 !important;
}
html:root[data-crm-theme="vibrant"] .crm-body .whatsapp-conversation-item.active {
  background: #EAF0F7 !important; box-shadow: inset 3px 0 0 #142B49;
}
html:root[data-crm-theme="vibrant"] .crm-body .booking-calendar {
  --calendar-blue: #193B66; --calendar-blue-soft: #FFE6D9;
  --calendar-green: #087346; --calendar-green-soft: #e4f8ee;
  --calendar-amber: #193B66; --calendar-amber-soft: #F8FAFC;
  --calendar-red: #b3261e; --calendar-red-soft: #fff7f9;
}
/* A one-pixel solid SVG line tile preserves the 72px schedule grid without colour blending. */
html:root[data-crm-theme="vibrant"] .crm-body .calendar-schedule-owner-track {
  background-color: #FAFCFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='72' viewBox='0 0 1 72'%3E%3Cpath d='M0 71.5H1' stroke='%23cbd6ed'/%3E%3C/svg%3E") !important;
  background-size: 1px 72px;
  background-repeat: repeat;
}
html:root[data-crm-theme="vibrant"] .crm-body :is(input, select, textarea, button, a):focus-visible {
  outline: 2px solid #EC5B38; outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  html:root[data-crm-theme="vibrant"] .woolly-platform-management-link:hover {
    transform: translateY(-2px);
    border-color: var(--vibrant-card-accent);
    box-shadow: 0 6px 18px rgba(236, 91, 56, .12);
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root[data-crm-theme="vibrant"] .woolly-platform-management-link {
    transition: none; transform: none;
  }
}

/* Accessible foregrounds: orange is decorative or paired with deep navy ink.
   Slate remains a supporting colour, not small text or the sole control boundary. */
html:root[data-crm-theme="vibrant"] {
  --vibrant-navy: #142B49;
  --vibrant-slate: #9AAABD;
  --vibrant-light: #F8FAFC;
  --vibrant-orange: #EC5B38;
  --crm-sidebar-active: #193B66;
}
.crm-theme-swatch--vibrant span:nth-child(1) { background: #142B49; }
.crm-theme-swatch--vibrant span:nth-child(2) { background: #9AAABD; }
.crm-theme-swatch--vibrant span:nth-child(3) { background: #F8FAFC; }
.crm-theme-swatch--vibrant span:nth-child(4) { background: #EC5B38; }
html:root[data-crm-theme="vibrant"] .crm-body .text-primary:not(:where(.quotation-preview-document, .quotation-preview-document *, .itinerary-preview-document, .itinerary-preview-document *)) { color: #193B66 !important; }
html:root[data-crm-theme="vibrant"] :is(.auth-body, .error-page) .text-primary { color: #193B66 !important; }
html:root[data-crm-theme="vibrant"] .crm-body .badge.bg-primary:not(:where(.quotation-preview-document, .quotation-preview-document *, .itinerary-preview-document, .itinerary-preview-document *)) { color: #0B1728; }
html:root[data-crm-theme="vibrant"] .crm-body :is(.form-control, .form-select) { border-color: #66788F; }
html:root[data-crm-theme="vibrant"] :is(.dropdown-item.active, .dropdown-item:active, .list-group-item.active) { color: #0B1728; }
html:root[data-crm-theme="vibrant"] .crm-body :is(.page-link, .page-link:hover, .page-link:focus) { color: #193B66; }
html:root[data-crm-theme="vibrant"] .crm-body :is(.active > .page-link, .page-link.active, .nav-pills .nav-link.active) { color: #0B1728; }
html:root[data-crm-theme="vibrant"] .crm-body .package-preview-hero { color: #FAFCFF; }
html:root[data-crm-theme="vibrant"] .crm-chat-window-header :is(.crm-chat-window-heading small, .crm-chat-window-heading small.is-online, .crm-chat-window-controls button) { color: #0B1728; }
html:root[data-crm-theme="vibrant"] .crm-body :is(input, select, textarea, button, a):focus-visible { outline-color: #142B49; }

/* Light workspace, solid navy chrome. These overrides affect this theme only. */
html:root[data-crm-theme="vibrant"] {
  --crm-content-bg: #FAFCFF;
  --bs-body-bg: #FAFCFF;
  --crm-surface: #ffffff;
  --wds-surface: #ffffff;
  --wds-surface-muted: #FAFCFF;
  --app-select-bg: #ffffff;
  --app-button-outline-bg: #ffffff;
  --app-button-secondary-bg: #ffffff;
  --crm-sidebar-bg: #142B49;
  --crm-sidebar-bg-strong: #142B49;
  --crm-sidebar-text: #F8FAFC;
  --crm-sidebar-muted: #D3DCE7;
  --crm-sidebar-active: #EC5B38;
}
html:root[data-crm-theme="vibrant"] :is(.crm-topbar, .woolly-platform-header, .crm-sidebar, .crm-sidebar-brand, .crm-sidebar-settings) {
  color: #F8FAFC;
  border-color: #60738A;
  background: #142B49;
  background-image: none;
  box-shadow: none;
}
html:root[data-crm-theme="vibrant"] :is(.crm-topbar, .woolly-platform-header) { border-bottom: 3px solid #EC5B38; }
html:root[data-crm-theme="vibrant"] :is(.crm-brand-link, .crm-brand-link:hover, .crm-brand-title, .woolly-platform-brand, .woolly-platform-brand:hover) { color: #F8FAFC; }
html:root[data-crm-theme="vibrant"] :is(.crm-brand-subtitle, .woolly-platform-brand small) { color: #D3DCE7; }
html:root[data-crm-theme="vibrant"] .crm-sidebar :is(.crm-nav-link, .crm-nav-group-toggle) { color: #F8FAFC; }
html:root[data-crm-theme="vibrant"] .crm-sidebar .crm-sidebar-nav :is(.crm-nav-link > i, .crm-nav-group-icon),
html:root[data-crm-theme="vibrant"] .crm-sidebar-settings .crm-nav-link > i { color: #F8FAFC; }
html:root[data-crm-theme="vibrant"] .crm-sidebar :is(.crm-nav-link, .crm-nav-group-toggle):is(:hover, :focus-visible) {
  color: #F8FAFC; background: #213C5A; box-shadow: inset 3px 0 0 #EC5B38;
}
html:root[data-crm-theme="vibrant"] .crm-sidebar .crm-nav-link:is(:hover, :focus-visible) > i { color: #F8FAFC; }
html:root[data-crm-theme="vibrant"] .crm-sidebar :is(.crm-nav-link.active, .crm-nav-group.has-active-item > .crm-nav-group-toggle),
html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-group.has-active-item > .crm-nav-group-toggle {
  color: #0B1728; background: #EC5B38; box-shadow: inset 3px 0 0 #F8FAFC;
}
html:root[data-crm-theme="vibrant"] .crm-sidebar .crm-sidebar-nav .crm-nav-link.active > i,
html:root[data-crm-theme="vibrant"] .crm-sidebar-settings .crm-nav-link.active > i,
html:root[data-crm-theme="vibrant"] .crm-sidebar .crm-nav-group.has-active-item > .crm-nav-group-toggle :is(.crm-nav-group-icon, .crm-nav-group-chevron) { color: #0B1728; }
html:root[data-crm-theme="vibrant"] .crm-sidebar .crm-nav-section-divider { background: #60738A; }
html:root[data-crm-theme="vibrant"] :is(.crm-topbar, .woolly-platform-header) :is(.crm-icon-button, .crm-user-menu),
html:root[data-crm-theme="vibrant"] .woolly-platform-header-actions > .woolly-platform-apps-link,
html:root[data-crm-theme="vibrant"] .woolly-platform-header-actions > .woolly-platform-apps-link:nth-of-type(2) {
  color: #F8FAFC; border-color: #9AAABD; background: #142B49; box-shadow: none;
}
html:root[data-crm-theme="vibrant"] :is(.crm-topbar, .woolly-platform-header) :is(.crm-icon-button, .crm-user-menu):is(:hover, :focus-visible, [aria-expanded="true"]),
html:root[data-crm-theme="vibrant"] .woolly-platform-header-actions > .woolly-platform-apps-link:hover {
  color: #F8FAFC; border-color: #F8FAFC; background: #213C5A;
}
html:root[data-crm-theme="vibrant"] .woolly-platform-header-actions > .woolly-platform-apps-link[aria-current="page"] {
  color: #0B1728; border-color: #EC5B38; background: #EC5B38;
}
html:root[data-crm-theme="vibrant"] :is(.crm-topbar, .woolly-platform-header) :is(.crm-icon-button > .bi, .crm-language-code, .crm-user-menu > .bi, .crm-user-greeting, .crm-user-display-name, .crm-user-name-line) { color: #F8FAFC; }
html:root[data-crm-theme="vibrant"] :is(.crm-topbar, .woolly-platform-header) :is(.crm-user-role, .crm-organization-copy small, .woolly-platform-account-copy small) { color: #D3DCE7; }
html:root[data-crm-theme="vibrant"] :is(.crm-topbar, .woolly-platform-header) .crm-organization-copy strong { color: #F8FAFC; }
html:root[data-crm-theme="vibrant"] :is(.crm-topbar, .woolly-platform-header) .crm-user-avatar { color: #142B49; border-color: #9AAABD; background: #F8FAFC; }
html:root[data-crm-theme="vibrant"] :is(.crm-topbar, .woolly-platform-header) .crm-organization-logo-surface { color: #142B49; background: #ffffff; }
html:root[data-crm-theme="vibrant"] .crm-topbar-search .form-control { color: #142B49; background: #ffffff; }
html:root[data-crm-theme="vibrant"] .crm-topbar-search i,
html:root[data-crm-theme="vibrant"] .crm-topbar-search .form-control::placeholder { color: #536175; }
html:root[data-crm-theme="vibrant"] :is(.crm-topbar, .woolly-platform-header) :is(.crm-icon-button, .crm-user-menu, .woolly-platform-apps-link, .woolly-platform-brand):focus-visible,
html:root[data-crm-theme="vibrant"] .crm-sidebar :is(button, a):focus-visible { outline: 2px solid #F8FAFC; outline-offset: 2px; }
/* Flyouts remain dark when the desktop sidebar is collapsed; menus and documents do not inherit dark panel tokens. */
@media (min-width: 1200px) {
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-group-items { color: #F8FAFC; border-color: #9AAABD; background: #142B49; }
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-flyout-title { color: #F8FAFC; border-color: #60738A; background: #0E223B; }
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-flyout-title i { color: #F8FAFC; }
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-group-items .crm-nav-link { color: #F8FAFC; }
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-group-items .crm-nav-link i { color: #F8FAFC; }
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-group-items .crm-nav-link:is(:hover, :focus) { color: #F8FAFC; background: #213C5A; }
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-group-items .crm-nav-link.active { color: #0B1728; background: #EC5B38; }
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-group-items .crm-nav-link.active i { color: #0B1728; }
}

/* Complementary navigation surfaces: navy header, coral-orange left menu. */
html:root[data-crm-theme="vibrant"] {
  --crm-sidebar-bg: #EC5B38;
  --crm-sidebar-bg-strong: #EC5B38;
  --crm-sidebar-text: #0B1728;
  --crm-sidebar-muted: #0B1728;
  --crm-sidebar-active: #142B49;
}
html:root[data-crm-theme="vibrant"] :is(.crm-sidebar, .crm-sidebar-brand, .crm-sidebar-settings) {
  color: #0B1728; border-color: #142B49; background: #EC5B38; background-image: none;
}
html:root[data-crm-theme="vibrant"] .crm-sidebar :is(.crm-brand-link, .crm-brand-link:hover, .crm-brand-title, .crm-brand-subtitle, .crm-nav-link, .crm-nav-group-toggle) { color: #0B1728; }
html:root[data-crm-theme="vibrant"] .crm-sidebar .crm-sidebar-nav :is(.crm-nav-link > i, .crm-nav-group-icon),
html:root[data-crm-theme="vibrant"] .crm-sidebar-settings .crm-nav-link > i { color: #0B1728; }
html:root[data-crm-theme="vibrant"] .crm-sidebar :is(.crm-nav-link, .crm-nav-group-toggle):is(:hover, :focus-visible) {
  color: #0B1728; background: #F36B49; box-shadow: inset 3px 0 0 #142B49;
}
html:root[data-crm-theme="vibrant"] .crm-sidebar .crm-nav-link:is(:hover, :focus-visible) > i { color: #0B1728; }
html:root[data-crm-theme="vibrant"] .crm-sidebar :is(.crm-nav-link.active, .crm-nav-group.has-active-item > .crm-nav-group-toggle),
html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-group.has-active-item > .crm-nav-group-toggle {
  color: #0B1728; background: #F8FAFC; box-shadow: inset 3px 0 0 #142B49;
}
html:root[data-crm-theme="vibrant"] .crm-sidebar .crm-sidebar-nav .crm-nav-link.active > i,
html:root[data-crm-theme="vibrant"] .crm-sidebar-settings .crm-nav-link.active > i,
html:root[data-crm-theme="vibrant"] .crm-sidebar .crm-nav-group.has-active-item > .crm-nav-group-toggle :is(.crm-nav-group-icon, .crm-nav-group-chevron) { color: #0B1728; }
html:root[data-crm-theme="vibrant"] .crm-sidebar .crm-nav-section-divider { background: #142B49; }
html:root[data-crm-theme="vibrant"] .crm-sidebar :is(button, a):focus-visible { outline-color: #142B49; }
@media (min-width: 1200px) {
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-group-items { color: #0B1728; border-color: #142B49; background: #EC5B38; }
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-flyout-title { color: #0B1728; border-color: #142B49; background: #F36B49; }
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-flyout-title i,
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-group-items .crm-nav-link,
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-group-items .crm-nav-link i { color: #0B1728; }
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-group-items .crm-nav-link:is(:hover, :focus) { color: #0B1728; background: #F36B49; }
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-group-items .crm-nav-link.active { color: #0B1728; background: #F8FAFC; }
  html:root[data-crm-theme="vibrant"] body.crm-sidebar-collapsed .crm-nav-group-items .crm-nav-link.active i { color: #0B1728; }
}

/* Continue the navy top bar through the logo; navigation below stays coral. */
html:root[data-crm-theme="vibrant"] .crm-sidebar .crm-sidebar-brand {
  color: #F8FAFC;
  background: #142B49;
  background-image: none;
}
html:root[data-crm-theme="vibrant"] :is(.crm-sidebar-brand, .crm-topbar) {
  border-bottom: 3px solid #EC5B38 !important;
}
html:root[data-crm-theme="vibrant"] .crm-sidebar .crm-sidebar-brand :is(.crm-brand-link, .crm-brand-link:hover, .crm-brand-title) { color: #F8FAFC; }
html:root[data-crm-theme="vibrant"] .crm-sidebar .crm-sidebar-brand .crm-brand-subtitle { color: #D3DCE7; }
html:root[data-crm-theme="vibrant"] .crm-sidebar .crm-sidebar-brand .crm-brand-link:focus-visible { outline-color: #F8FAFC; }