/* =========================================================
   CRM Specific Theme Overrides
   ========================================================= */

/* Unique Background for CRM Login (Grid + Glow) */
.login-page {
  background-color: var(--bg-body) !important;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 60%) !important;
  background-size: 40px 40px, 40px 40px, 100% 100% !important;
  background-position: center center, center center, top center !important;
}

html[data-theme='light'] .login-page {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 60%) !important;
}

/* Distinct Shadows and borders for CRM Cards */
:root {
  --crm-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(99, 102, 241, 0.08);
}

html[data-theme='light'] {
  --crm-shadow: 0 8px 24px rgba(149, 157, 165, 0.15), 0 2px 8px rgba(99, 102, 241, 0.08);
}

.login-card,
.stat-card,
.site-card,
.analytics-kpi-card,
.analytics-stage-card,
.page-item,
.block-card,
.client-auth-card {
  box-shadow: var(--crm-shadow) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
}

.login-card {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(99, 102, 241, 0.3) !important;
}
html[data-theme='light'] .login-card {
  box-shadow: 0 24px 64px rgba(149, 157, 165, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.1) !important;
}

/* CRM Footer Branding */
.crm-footer-branding {
  text-align: center;
  padding: 16px 24px;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-top: auto;
  border-top: 1px solid var(--border);
}
.crm-footer-branding span {
  color: var(--text-primary);
  font-weight: 500;
}


/* =========================================================
   Table & Badge Overrides (Light Theme Fixes)
   ========================================================= */

html[data-theme='light'] .badge.bg-dark,
html[data-theme='light'] .badge.bg-dark-subtle,
html[data-theme='light'] .badge[class*="bg-amber"],
html[data-theme='light'] .badge[class*="bg-tone"] {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

html[data-theme='light'] .contact-status-stack .badge,
html[data-theme='light'] .contact-card .badge,
html[data-theme='light'] .c-contact-row .badge,
html[data-theme='light'] .badge.bg-secondary,
html[data-theme='light'] .badge.bg-white {
  background-color: rgba(59, 130, 246, 0.12) !important;
  color: #1e40af !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
}

/* =========================================================
   CRM access experience — relationship hub
   ========================================================= */
[hidden] { display: none !important; }

.login-page {
  display: block;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: #081123 !important;
  background-image: none !important;
}

.login-page .login-theme-toggle {
  top: 20px;
  right: 20px;
  z-index: 30;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  background: rgba(8, 17, 35, .82);
  color: #fff;
  box-shadow: 0 10px 28px rgba(11, 22, 51, .2);
}

.login-page .login-theme-toggle:hover,
.login-page .login-theme-toggle:focus-visible {
  border-color: #cfc4ff;
  color: #fff;
  outline: 3px solid rgba(255, 255, 255, .18);
  transform: translateY(-1px);
}

.crm-auth-shell {
  display: grid;
  grid-template-columns: minmax(420px, 39vw) minmax(0, 1fr);
  min-height: 100vh;
  background: #081123;
  color: #f5f7fb;
}

.crm-auth-login-pane {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 72px clamp(32px, 5vw, 90px);
  border-right: 1px solid rgba(255, 255, 255, .1);
  background: #081123;
}

.crm-auth-login-inner { width: min(100%, 430px); }

.crm-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(68px, 10vh, 116px);
  color: #f5f7fb;
}

.crm-auth-brand .login-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin: 0;
  border: 1px solid rgba(141, 114, 247, .48) !important;
  border-radius: 10px;
  background: rgba(141, 114, 247, .14);
  color: #a894ff;
  box-shadow: none !important;
}

.crm-auth-brand .login-logo.has-image { background: transparent; }
.crm-auth-brand .login-logo img { width: 100%; height: 100%; object-fit: contain; }
.crm-auth-brand strong,
.crm-auth-brand small { display: block; }
.crm-auth-brand strong { font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.crm-auth-brand small { margin-top: 2px; color: #a9b4ca; font-size: 11px; }

.crm-auth-heading {
  margin: 0 0 36px;
  text-align: left;
}

.crm-auth-kicker,
.crm-auth-story-label {
  display: block;
  margin-bottom: 13px;
  color: #a894ff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.crm-auth-heading h1,
.crm-auth-verify-card h1 {
  max-width: 12ch;
  margin: 0 0 13px;
  color: #f5f7fb;
  font-size: clamp(29px, 2.35vw, 40px);
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.crm-auth-heading p,
.crm-auth-verify-card > p {
  max-width: 43ch;
  margin: 0;
  color: #a9b4ca;
  font-size: 14px;
  line-height: 1.6;
}

.crm-auth-form .form-group { margin-bottom: 22px; }
.login-page .crm-auth-form label {
  margin-bottom: 8px;
  color: #d6dceb;
  font-size: 12px;
  font-weight: 650;
}

.login-page .crm-auth-form .form-input {
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid #354a70;
  border-radius: 8px;
  background: #0e1a33;
  color: #f5f7fb;
  font-size: 14px;
  box-shadow: none;
}

.login-page .crm-auth-form .form-input::placeholder { color: #7c8ba8; }
.login-page .crm-auth-form .form-input:focus {
  border-color: #a894ff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(141, 114, 247, .2);
}

.crm-auth-password-field { position: relative; }
.crm-auth-password-field .form-input { padding-right: 48px !important; }
.crm-auth-password-field button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #a9b4ca;
  cursor: pointer;
}
.crm-auth-password-field button:hover,
.crm-auth-password-field button:focus-visible { color: #cfc4ff; outline: 2px solid rgba(168, 148, 255, .32); }

.login-page .crm-auth-submit {
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 0 17px;
  border: 0;
  border-radius: 8px;
  background: #6e45e2;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 14px 32px rgba(83, 49, 186, .3);
}
.login-page .crm-auth-submit:hover,
.login-page .crm-auth-submit:focus-visible {
  background: #805de8;
  color: #fff;
  outline: 3px solid rgba(168, 148, 255, .25);
  box-shadow: 0 18px 38px rgba(83, 49, 186, .38);
}
.login-page .crm-auth-submit:disabled { cursor: wait; opacity: .7; transform: none; }
.login-page .crm-auth-submit i { margin: 0 !important; }

.login-page .login-error {
  display: none;
  margin: 0 0 18px;
  padding: 11px 13px;
  border: 1px solid rgba(240, 113, 113, .46);
  border-radius: 8px;
  background: rgba(209, 67, 67, .14);
  color: #ffb3b3;
  font-size: 12px;
  line-height: 1.45;
}
.login-page .login-error.show { display: block; }

.crm-auth-security-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 28px 0 0;
  color: #8e9db8;
  font-size: 11px;
  line-height: 1.5;
}
.crm-auth-security-note i { margin-top: 1px; color: #4ac79b; }

.crm-auth-story {
  position: relative;
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(70px, 7vw, 124px);
  background: #6e45e2;
  color: #fff;
}
.crm-auth-story::after {
  content: '';
  position: absolute;
  right: -15%;
  bottom: -40%;
  width: min(62vw, 850px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 72px rgba(255, 255, 255, .035), 0 0 0 144px rgba(11, 22, 51, .035);
}

.crm-auth-story-copy { position: relative; z-index: 2; max-width: 760px; }
.crm-auth-story-label { color: rgba(255, 255, 255, .72); }
.crm-auth-story h2 {
  max-width: 790px;
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(42px, 5vw, 82px);
  font-weight: 780;
  letter-spacing: -.04em;
  line-height: .97;
}
.crm-auth-story-copy p {
  max-width: 57ch;
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.55;
}

.crm-auth-story-status {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .24);
  color: rgba(255, 255, 255, .76);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.crm-auth-story-status span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.crm-auth-story-status i { width: 7px; height: 7px; border-radius: 50%; background: #8cf0c2; }

.crm-auth-shell.is-verifying {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 28px;
  background: #081123;
}
.crm-auth-verify-view { width: 100%; }
.crm-auth-verify-card {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 62px);
  border: 1px solid #354a70;
  border-radius: 16px;
  background: #0e1a33;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .36);
}
.crm-auth-verify-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 32px;
  place-items: center;
  border-radius: 10px;
  background: rgba(141, 114, 247, .16);
  color: #a894ff;
  font-size: 21px;
}
.crm-auth-verify-card > p strong { color: #dce4f3; font-weight: 650; }
.crm-auth-verify-card form { margin-top: 36px; }
.crm-otp-inputs { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 12px; margin-bottom: 22px; }
.crm-otp-inputs input {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1.08;
  border: 1px solid #354a70;
  border-radius: 10px;
  background: #081123;
  color: #fff;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 720;
  text-align: center;
  caret-color: #a894ff;
}
.crm-otp-inputs input:focus { border-color: #a894ff; outline: 3px solid rgba(141, 114, 247, .2); outline-offset: 2px; }
.crm-auth-back {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 26px auto 0;
  border: 0;
  background: transparent;
  color: #a9b4ca;
  font-size: 12px;
  cursor: pointer;
}
.crm-auth-back:hover,
.crm-auth-back:focus-visible { color: #cfc4ff; outline: none; }

html[data-theme='light'] .login-page,
html[data-theme='light'] .crm-auth-shell { background: #f7f8fc !important; background-image: none !important; }
html[data-theme='light'] .crm-auth-login-pane { border-right-color: #dde3ef; background: #fff; }
/* Kicker sits on the white login pane in light theme — #a894ff is only 2.51:1 there. Darken to
   meet WCAG AA (~6.75:1). The story-pane label keeps #a894ff (it stays on the dark #37265c pane). */
html[data-theme='light'] .crm-auth-kicker { color: #5a3fd6; }
html[data-theme='light'] .crm-auth-brand,
html[data-theme='light'] .crm-auth-heading h1,
html[data-theme='light'] .crm-auth-verify-card h1 { color: #0b1633; }
html[data-theme='light'] .crm-auth-brand small,
html[data-theme='light'] .crm-auth-heading p,
html[data-theme='light'] .crm-auth-verify-card > p,
html[data-theme='light'] .crm-auth-security-note { color: #66728a; }
html[data-theme='light'] .login-page .crm-auth-form label { color: #33415f; }
html[data-theme='light'] .login-page .crm-auth-form .form-input { border-color: #c7d0e2; background: #fff; color: #0b1633; }
html[data-theme='light'] .crm-auth-password-field button { color: #66728a; }
html[data-theme='light'] .crm-auth-shell.is-verifying { background: #f7f8fc !important; }
html[data-theme='light'] .crm-auth-verify-card { border-color: #dde3ef; background: #fff; box-shadow: 0 28px 70px rgba(30, 82, 170, .13); }
html[data-theme='light'] .crm-auth-verify-card > p strong { color: #33415f; }
html[data-theme='light'] .crm-otp-inputs input { border-color: #c7d0e2; background: #f7f8fc; color: #0b1633; }

@media (max-width: 1080px) {
  .crm-auth-shell { grid-template-columns: minmax(390px, 45vw) minmax(0, 1fr); }
  .crm-auth-story { padding: 72px 42px 42px; }
  .crm-auth-story h2 { font-size: clamp(38px, 5.5vw, 62px); }
}

@media (max-width: 760px) {
  .login-page .login-theme-toggle { top: 16px; right: 16px; }
  .crm-auth-shell { display: block; }
  .crm-auth-login-pane { min-height: 100vh; padding: 68px 24px 42px; border-right: 0; }
  .crm-auth-login-inner { width: min(100%, 460px); }
  .crm-auth-brand { margin-bottom: 68px; }
  .crm-auth-story { display: none; }
  .crm-auth-shell.is-verifying { display: grid; padding: 18px; }
  .crm-auth-verify-card { padding: 32px 22px; }
  .crm-otp-inputs { gap: 7px; }
  .crm-otp-inputs input { border-radius: 8px; }
}

@media (max-width: 420px) {
  .crm-auth-login-pane { padding-inline: 18px; }
  .crm-auth-brand { margin-bottom: 54px; }
  .crm-auth-heading h1,
  .crm-auth-verify-card h1 { font-size: 28px; }
  .crm-otp-inputs { gap: 5px; }
  .crm-otp-inputs input { min-height: 48px; aspect-ratio: auto; font-size: 22px; }
}

@media (prefers-reduced-motion: no-preference) {
  .crm-auth-verify-card { animation: crmVerifyEnter .42s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes crmVerifyEnter { from { transform: translateY(14px) scale(.985); opacity: .4; filter: blur(5px); } }

/* =========================================================
   CRM UNIFIED DESIGN SYSTEM: BUTTONS & SWITCHES
   ========================================================= */

/* ── 1. UNIFIED FORM SWITCHES & TOGGLES (All 44x24px Pill) ── */
.form-check.form-switch,
.form-switch {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 24px !important;
  padding-left: 0 !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

.form-check.form-switch .form-check-input,
.form-switch .form-check-input,
input.form-check-input[type="checkbox"][data-field],
input.form-check-input[type="checkbox"][data-module-toggle],
input.form-check-input.calendar-provider-toggle,
input.ui-switch[type="checkbox"],
input[type="checkbox"][data-notification-field],
input[type="checkbox"][data-notification-event],
input[type="checkbox"][data-cookie-setting],
input[type="checkbox"][data-store-field],
input[type="checkbox"][data-store-array],
input[type="checkbox"][data-menu-view],
#recurringAutoSend[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  width: 44px !important;
  height: 24px !important;
  min-width: 44px !important;
  min-height: 24px !important;
  max-width: 44px !important;
  max-height: 24px !important;
  border-radius: 9999px !important;
  border: 1.5px solid #cbd5e1 !important;
  background-color: #e2e8f0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23ffffff'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 2px center !important;
  background-size: 18px 18px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  cursor: pointer !important;
  transition: background-position 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

.form-check.form-switch .form-check-input:checked,
.form-switch .form-check-input:checked,
input.form-check-input[type="checkbox"][data-field]:checked,
input.form-check-input[type="checkbox"][data-module-toggle]:checked,
input.form-check-input.calendar-provider-toggle:checked,
input.ui-switch[type="checkbox"]:checked,
input[type="checkbox"][data-notification-field]:checked,
input[type="checkbox"][data-notification-event]:checked,
input[type="checkbox"][data-cookie-setting]:checked,
input[type="checkbox"][data-store-field]:checked,
input[type="checkbox"][data-store-array]:checked,
input[type="checkbox"][data-menu-view]:checked,
#recurringAutoSend[type="checkbox"]:checked {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23ffffff'/%3E%3C/svg%3E") !important;
  background-position: right 2px center !important;
  box-shadow: 0 0 0 0 transparent !important;
}

.form-check.form-switch .form-check-input:focus,
.form-switch .form-check-input:focus,
input.ui-switch[type="checkbox"]:focus-visible,
input[type="checkbox"][data-notification-field]:focus-visible,
input[type="checkbox"][data-notification-event]:focus-visible,
input[type="checkbox"][data-cookie-setting]:focus-visible,
input[type="checkbox"][data-store-field]:focus-visible,
input[type="checkbox"][data-store-array]:focus-visible,
input[type="checkbox"][data-menu-view]:focus-visible,
#recurringAutoSend[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22) !important;
}

.form-switch .form-check-input:disabled,
input.ui-switch[type="checkbox"]:disabled,
input[type="checkbox"][data-notification-field]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Dark Mode Switches */
html[data-theme='dark'] .form-check.form-switch .form-check-input,
html[data-theme='dark'] .form-switch .form-check-input,
[data-theme='dark'] .form-check.form-switch .form-check-input,
[data-theme='dark'] .form-switch .form-check-input,
html[data-theme='dark'] input.ui-switch[type="checkbox"],
[data-theme='dark'] input.ui-switch[type="checkbox"],
html[data-theme='dark'] input[type="checkbox"][data-notification-field],
[data-theme='dark'] input[type="checkbox"][data-notification-field] {
  border-color: #334155 !important;
  background-color: #1e293b !important;
}

html[data-theme='dark'] .form-check.form-switch .form-check-input:checked,
html[data-theme='dark'] .form-switch .form-check-input:checked,
[data-theme='dark'] .form-check.form-switch .form-check-input:checked,
[data-theme='dark'] .form-switch .form-check-input:checked,
html[data-theme='dark'] input.ui-switch[type="checkbox"]:checked,
[data-theme='dark'] input.ui-switch[type="checkbox"]:checked,
html[data-theme='dark'] input[type="checkbox"][data-notification-field]:checked,
[data-theme='dark'] input[type="checkbox"][data-notification-field]:checked {
  border-color: #6366f1 !important;
  background-color: #6366f1 !important;
}

html[data-theme='dark'] .form-check.form-switch .form-check-input:focus,
html[data-theme='dark'] .form-switch .form-check-input:focus,
[data-theme='dark'] .form-check.form-switch .form-check-input:focus,
[data-theme='dark'] .form-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.28) !important;
}

/* Wrapper-based switches (.workspace-switch, .widget-toggle, .ui-switch) */
.workspace-switch,
.widget-toggle,
.ui-switch {
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  gap: 8px !important;
  min-height: 24px !important;
}

.workspace-switch i,
.widget-toggle span:first-of-type,
.ui-switch .ui-switch-track {
  position: relative !important;
  display: inline-block !important;
  width: 44px !important;
  height: 24px !important;
  border-radius: 9999px !important;
  background: #e2e8f0 !important;
  border: 1.5px solid #cbd5e1 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.workspace-switch i::after,
.widget-toggle span:first-of-type::after,
.ui-switch .ui-switch-track::after {
  content: "" !important;
  position: absolute !important;
  top: 1.5px !important;
  left: 1.5px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.workspace-switch input:checked + i,
.widget-toggle input:checked + span,
.ui-switch > input:checked + .ui-switch-track {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

.workspace-switch input:checked + i::after,
.widget-toggle input:checked + span::after,
.ui-switch > input:checked + .ui-switch-track::after {
  transform: translateX(20px) !important;
}

html[data-theme='dark'] .workspace-switch i,
html[data-theme='dark'] .widget-toggle span:first-of-type,
html[data-theme='dark'] .ui-switch .ui-switch-track,
[data-theme='dark'] .workspace-switch i,
[data-theme='dark'] .widget-toggle span:first-of-type,
[data-theme='dark'] .ui-switch .ui-switch-track {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html[data-theme='dark'] .workspace-switch input:checked + i,
html[data-theme='dark'] .widget-toggle input:checked + span,
html[data-theme='dark'] .ui-switch > input:checked + .ui-switch-track,
[data-theme='dark'] .workspace-switch input:checked + i,
[data-theme='dark'] .widget-toggle input:checked + span,
[data-theme='dark'] .ui-switch > input:checked + .ui-switch-track {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
}

/* ── 2. UNIFIED BUTTONS SYSTEM (Consistent Sizes, Heights, Radius & Colors) ── */

.btn,
button.btn,
a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  gap: 6px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  user-select: none !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn i,
.btn .bi {
  font-size: 1.05em !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* Size Variants */
.btn-sm,
button.btn-sm,
a.btn-sm,
.integration-card-actions .btn {
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  gap: 5px !important;
}

.btn-xs,
button.btn-xs,
a.btn-xs {
  height: 26px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 5px !important;
  gap: 4px !important;
}

.btn-lg,
button.btn-lg,
a.btn-lg {
  height: 42px !important;
  padding: 0 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  gap: 8px !important;
}

/* Icon Buttons */
.btn-icon,
button.btn-icon {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.btn-icon.btn-sm {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
}

.btn-icon.btn-xs {
  width: 26px !important;
  height: 26px !important;
  border-radius: 5px !important;
}

.btn-icon.btn-lg {
  width: 42px !important;
  height: 42px !important;
  border-radius: 8px !important;
}

/* Primary Button Palette */
.btn-primary,
.btn-connect-primary,
.btn-accent,
[data-save-roles],
[data-save-group],
#saveWorkspaceSettings {
  background: #4f46e5 !important;
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(79, 70, 229, 0.2) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-connect-primary:hover,
.btn-connect-primary:focus,
.btn-connect-primary:active,
.btn-accent:hover,
[data-save-roles]:hover,
[data-save-group]:hover,
#saveWorkspaceSettings:hover {
  background: #4338ca !important;
  background-color: #4338ca !important;
  border-color: #4338ca !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.32) !important;
}

/* Secondary & Outline-Secondary Palette */
.btn-secondary,
.btn-outline-secondary,
.btn-outline,
.integration-card-actions .btn-outline-secondary {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline:hover,
.integration-card-actions .btn-outline-secondary:hover {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
}

/* Outline Primary */
.btn-outline-primary {
  background: transparent !important;
  border: 1px solid #4f46e5 !important;
  color: #4f46e5 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: #4f46e5 !important;
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.25) !important;
}

/* Danger Button */
.btn-danger {
  background: #ef4444 !important;
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.2) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.32) !important;
}

/* Outline Danger / Disconnect Action */
.btn-outline-danger,
.btn-link.text-danger,
.integration-card-actions .btn-link.text-danger,
[data-action="disconnect"] {
  background: #fff5f5 !important;
  background-color: #fff5f5 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
  text-decoration: none !important;
  border-radius: 6px !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-link.text-danger:hover,
.integration-card-actions .btn-link.text-danger:hover,
[data-action="disconnect"]:hover {
  background: #ef4444 !important;
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25) !important;
}

/* Ghost Button */
.btn-ghost {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-secondary, #64748b) !important;
}

.btn-ghost:hover,
.btn-ghost:focus {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--text-primary, #0f172a) !important;
}

/* Success & Warning Buttons */
.btn-success {
  background: #10b981 !important;
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
}
.btn-success:hover {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}

.btn-warning {
  background: #f59e0b !important;
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
}
.btn-warning:hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
}

/* Focus and Disabled Global Controls */
.btn:focus-visible,
button.btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25) !important;
}

.btn:disabled,
button.btn:disabled,
.btn.disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Dark Mode Button Overrides */
html[data-theme='dark'] .btn-secondary,
html[data-theme='dark'] .btn-outline-secondary,
html[data-theme='dark'] .btn-outline,
html[data-theme='dark'] .integration-card-actions .btn-outline-secondary,
[data-theme='dark'] .btn-secondary,
[data-theme='dark'] .btn-outline-secondary,
[data-theme='dark'] .btn-outline,
[data-theme='dark'] .integration-card-actions .btn-outline-secondary {
  background: #1e293b !important;
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #f1f5f9 !important;
}

html[data-theme='dark'] .btn-secondary:hover,
html[data-theme='dark'] .btn-outline-secondary:hover,
html[data-theme='dark'] .btn-outline:hover,
html[data-theme='dark'] .integration-card-actions .btn-outline-secondary:hover,
[data-theme='dark'] .btn-secondary:hover,
[data-theme='dark'] .btn-outline-secondary:hover,
[data-theme='dark'] .btn-outline:hover,
[data-theme='dark'] .integration-card-actions .btn-outline-secondary:hover {
  background: #334155 !important;
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}

html[data-theme='dark'] .btn-primary,
html[data-theme='dark'] .btn-connect-primary,
html[data-theme='dark'] .btn-accent,
[data-theme='dark'] .btn-primary,
[data-theme='dark'] .btn-connect-primary,
[data-theme='dark'] .btn-accent {
  background: #6366f1 !important;
  background-color: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #ffffff !important;
}

html[data-theme='dark'] .btn-primary:hover,
html[data-theme='dark'] .btn-connect-primary:hover,
html[data-theme='dark'] .btn-accent:hover,
[data-theme='dark'] .btn-primary:hover,
[data-theme='dark'] .btn-connect-primary:hover,
[data-theme='dark'] .btn-accent:hover {
  background: #4f46e5 !important;
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

html[data-theme='dark'] .btn-outline-danger,
html[data-theme='dark'] .btn-link.text-danger,
html[data-theme='dark'] .integration-card-actions .btn-link.text-danger,
[data-theme='dark'] .btn-outline-danger,
[data-theme='dark'] .btn-link.text-danger,
[data-theme='dark'] .integration-card-actions .btn-link.text-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  background-color: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
}

html[data-theme='dark'] .btn-ghost:hover,
[data-theme='dark'] .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

/* ERP shell: warm operational canvas, navy structure, one green selection.
   Legacy admin.css sets shell colors and active children with !important;
   matching declarations below are limited to those verified conflicts. */
:root {
  --crm-shell-canvas: #fffaf5;
  --crm-shell-surface: #ffffff;
  --crm-shell-soft: #f7f3ef;
  --crm-shell-ink: #2d374b;
  --crm-shell-muted: #66758f;
  --crm-shell-border: #dfe4ea;
  --crm-shell-green: #20c764;
  --crm-shell-green-dark: #14994b;
  --crm-shell-blue: #a9d9e8;
  --crm-shell-lavender: #dddff2;
  --crm-shell-shadow: 0 8px 22px rgb(45 55 75 / 8%);
  --crm-shell-offset: 3px 3px 0 #2d374b;
}
html[data-theme='dark'] {
  --crm-shell-canvas: #0e1625;
  --crm-shell-surface: #162133;
  --crm-shell-soft: #202d41;
  --crm-shell-ink: #edf1f7;
  --crm-shell-muted: #a7b5ca;
  --crm-shell-border: #344257;
  --crm-shell-blue: #284858;
  --crm-shell-lavender: #393950;
  --crm-shell-offset: 3px 3px 0 #080e18;
}
.app-layout {
  --sidebar-bg: var(--crm-shell-surface);
  --sidebar-color: var(--crm-shell-ink);
  --sidebar-border: var(--crm-shell-border);
  --sidebar-active-bg: var(--crm-shell-green);
  --sidebar-active-color: #102d20;
  --sidebar-hover-bg: var(--crm-shell-soft);
  --header-bg: var(--crm-shell-surface);
  --header-border: var(--crm-shell-border);
  --header-shadow: none;
  background: var(--crm-shell-canvas);
}
.app-layout .main-content { background: var(--crm-shell-canvas); min-width: 0; }
.app-layout .content-area { padding: 28px; }
.app-layout .sidebar { background-image: none; box-shadow: none; }
.app-layout .sidebar-header, .app-layout .sidebar-footer { background: var(--crm-shell-surface); border-color: var(--crm-shell-border); flex-shrink: 0; }
.app-layout .sidebar-brand { color: var(--crm-shell-ink); }
.app-layout .sidebar-brand small, .app-layout .sidebar-user .user-role { color: var(--crm-shell-muted) !important; }
.app-layout .sidebar-brand span { font-size: 15px; font-weight: 700; }
.app-layout .sidebar-logo { background: var(--crm-shell-lavender); color: var(--crm-shell-ink); box-shadow: none; }
.app-layout .sidebar-nav { min-height: 0; padding: 12px 0 20px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--crm-shell-border) transparent; }
.app-layout .sidebar-nav .nav-section { color: var(--crm-shell-muted) !important; padding: 22px 22px 8px; font-size: 11px; letter-spacing: .065em; font-weight: 650; }
.app-layout .sidebar-nav .nav-section:first-child { padding-top: 4px; }
.app-layout .sidebar-nav > .nav-item {
  display: flex; align-items: center; gap: 10px; width: calc(100% - 28px);
  min-height: 44px; margin: 2px 14px; padding: 8px 10px; border-radius: 10px;
  background: transparent; color: var(--crm-shell-ink); border: 1px solid transparent;
  font-size: 13px; font-weight: 500; line-height: 1.35; box-shadow: none;
  transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.app-layout .sidebar-nav > .nav-item span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.app-layout .sidebar-nav > .nav-item i { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 26px; margin: 0; font-size: 16px; color: inherit; border-radius: 7px; background: var(--crm-shell-soft); }
.app-layout .sidebar-nav > .nav-item:is([data-view='ai-qualification'], [data-view='automation'], [data-view='ai-settings']) i { background: var(--crm-shell-lavender); }
.app-layout .sidebar-nav > .nav-item:is([data-view='email'], [data-view='messenger-inbox'], [data-view='voice-calls'], [data-view='calendar']) i { background: var(--crm-shell-blue); }
.app-layout .sidebar-nav > .nav-item:hover { background: var(--crm-shell-soft); color: var(--crm-shell-ink); }
html .app-layout .sidebar-nav > .nav-item.active { background: var(--crm-shell-green) !important; color: #102d20 !important; border-color: #102d20; box-shadow: var(--crm-shell-offset); font-weight: 650; }
html .app-layout .sidebar-nav > .nav-item.active :is(i,span) { color: #102d20 !important; }
.app-layout .sidebar-nav > .nav-item.active i { background: rgb(255 255 255 / 22%); }
.app-layout .sidebar-nav > .nav-item.active:hover { background: #43d37d !important; }
.app-layout .sidebar-nav > .nav-item::before, .app-layout .sidebar-nav > .nav-item::after { display: none; }
.app-layout .sidebar-user { width: 100%; text-align: left; border: 0; color: var(--crm-shell-ink); background: transparent; }
.app-layout .sidebar-user .user-name { color: var(--crm-shell-ink); }
.app-layout .sidebar-user:hover { background: var(--crm-shell-soft); }
.app-layout .crm-footer-branding { padding: 12px 0 0; font-size: 11px; color: var(--crm-shell-muted); border: 0; }
.app-layout .header-context { color: var(--crm-shell-ink); }
.app-layout .header-logo { display: flex; color: var(--crm-shell-ink); }
.app-layout .header-context { display: flex; }
.app-layout .header-search { display: block; min-width: 160px; margin-inline: 16px; }
.app-layout .header-left { gap: 12px; min-width: 0; }
.app-layout .header-search .search-form { background: var(--crm-shell-soft); border: 1px solid var(--crm-shell-border); border-radius: 10px; box-shadow: none; }
.app-layout .header-search input { color: var(--crm-shell-ink); }
.app-layout .header-search input::placeholder { color: var(--crm-shell-muted); }
.app-layout .search-form { position: relative; }
.workspace-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1040; overflow: hidden; padding: 6px; border: 1px solid var(--crm-shell-border); border-radius: 10px; background: var(--crm-shell-surface); box-shadow: var(--crm-shell-shadow); }
.workspace-search-option { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--crm-shell-ink); text-align: left; font-size: 13px; }
.workspace-search-option i { color: var(--crm-shell-muted); }
.workspace-search-option:hover, .workspace-search-option[aria-selected='true'] { background: var(--crm-shell-soft); }
.workspace-search-option[aria-selected='true'] { box-shadow: inset 2px 0 var(--crm-shell-green-dark); }
.workspace-search-empty { margin: 0; padding: 10px; color: var(--crm-shell-muted); font-size: 12px; }
.app-layout .header-action, .app-layout .sidebar-toggle { color: var(--crm-shell-ink); border-radius: 10px; }
.app-layout :is(button,.btn), .login-page button { transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease; }
@media (hover:hover) {
  .app-layout :is(button,.btn):not(:disabled):not([aria-disabled='true']):hover, .login-page button:not(:disabled):hover { transform: translateY(-1px); }
}
.app-layout :is(button,.btn):not(:disabled):active, .login-page button:not(:disabled):active { transform: translateY(1px); box-shadow: none; }
.app-layout :is(button,.btn):disabled, .login-page button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
html .app-layout :is(button,a,input,select,textarea):focus-visible, html .login-page :is(button,a,input):focus-visible { outline: 3px solid var(--crm-shell-green-dark); outline-offset: 3px; }
.app-layout .btn-primary, .login-page .crm-auth-submit { background: var(--crm-shell-green); border-color: #102d20; color: #102d20; box-shadow: var(--crm-shell-offset); }
.app-layout .btn-primary:hover, .login-page .crm-auth-submit:not(:disabled):hover { background: #43d37d; border-color: #102d20; color: #102d20; }

/* Compact ERP access; the existing violet identity stays in the secondary pane. */
.login-page .crm-auth-shell { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
.login-page .crm-auth-login-pane { padding: 72px 40px 40px; }
.login-page .crm-auth-brand { margin-bottom: 44px; }
.login-page .crm-auth-brand small { font-size: 12px; }
.login-page .crm-auth-heading { margin-bottom: 28px; }
.login-page .crm-auth-heading h1 { font-size: 32px; line-height: 1.15; }
.login-page .crm-auth-story { padding: 80px 48px 36px; background: #37265c; }
.login-page .crm-auth-story::after { display: none; }
.login-page .crm-auth-story h2 { font-size: clamp(36px, 4vw, 56px); line-height: 1.08; }
.login-page .crm-auth-story-copy p { font-size: 16px; line-height: 1.6; }
.erp-auth-capabilities { margin: 44px 0; }
.erp-auth-capabilities > div { padding: 20px 0; border-top: 1px solid rgb(255 255 255 / 20%); }
.erp-auth-capabilities dt { font-weight: 600; }
.erp-auth-capabilities dd { margin: 5px 0 0; color: #d9d1e9; font-size: 14px; }
.login-page .crm-auth-submit { min-height: 50px; }
.login-page .crm-auth-submit[aria-busy='true'] { cursor: progress; }
.login-page .crm-auth-shell.is-verifying { display: grid; grid-template-columns: minmax(0,1fr); }
@media (max-width: 900px) {
  .login-page .crm-auth-shell { display: block; }
  .login-page .crm-auth-story { display: none; }
  .login-page .crm-auth-login-pane { min-height: 100dvh; padding: 64px 24px 28px; }
  .login-page .crm-auth-brand { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-layout *, .login-page * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The final legacy navigation normalization (admin.css:11116 and :14430)
   declares every property important. Scope the ERP replacement to its real sidebar. */
#sidebar { background: var(--crm-shell-surface) !important; border-color: var(--crm-shell-border) !important; }
#sidebar :is(.sidebar-header,.sidebar-footer,.sidebar-nav) { background: var(--crm-shell-surface) !important; border-color: var(--crm-shell-border) !important; }
#sidebar .sidebar-brand, #sidebar .sidebar-user .user-name { color: var(--crm-shell-ink) !important; }
#sidebar .sidebar-logo { background: var(--crm-shell-lavender) !important; color: var(--crm-shell-ink) !important; box-shadow: none !important; }
#sidebar .sidebar-nav > .nav-item { background: transparent !important; color: var(--crm-shell-ink) !important; border: 1px solid transparent !important; border-radius: 10px !important; margin: 2px 14px !important; width: calc(100% - 28px) !important; min-height: 44px !important; padding: 8px 10px !important; box-shadow: none !important; }
#sidebar .sidebar-nav > .nav-item:hover { background: var(--crm-shell-soft) !important; transform: none !important; }
#sidebar .sidebar-nav > .nav-item.active { background: var(--crm-shell-green) !important; color: #102d20 !important; border-color: #102d20 !important; box-shadow: var(--crm-shell-offset) !important; }
#sidebar .sidebar-nav > .nav-item.active:hover { background: #43d37d !important; }
#sidebar .sidebar-nav > .nav-item > i { color: inherit !important; background: var(--crm-shell-soft) !important; border-radius: 7px !important; width: 26px !important; height: 26px !important; }
#sidebar .sidebar-nav > .nav-item > span { white-space: normal !important; }
#sidebar .sidebar-nav > .nav-item.active > :is(i,span) { color: #102d20 !important; }
#sidebar .sidebar-nav > .nav-item.active > i { background: rgb(255 255 255 / 22%) !important; }
#sidebar .sidebar-nav > .nav-section { padding: 22px 22px 8px !important; color: var(--crm-shell-muted) !important; font-size: 11px !important; letter-spacing: .065em !important; }
#sidebar .sidebar-nav > .nav-section:first-child { padding-top: 4px !important; }
html .app-layout .btn.btn-primary, html .login-page .crm-auth-submit { background: var(--crm-shell-green) !important; color: #102d20 !important; border-color: #102d20 !important; box-shadow: var(--crm-shell-offset) !important; }
html .app-layout .btn.btn-primary:hover, html .login-page .crm-auth-submit:not(:disabled):hover { background: #43d37d !important; }
@media (min-width:1200px) {
  body.sidebar-collapsed #sidebar .sidebar-nav > .nav-item { width: 46px !important; padding: 8px 0 !important; margin: 4px auto !important; }
}

/* Collection tools extend the existing filters, never add a parallel data model. */
:root { --crm-motion-fast: 140ms; --crm-motion-base: 180ms; --crm-motion-panel: 240ms; --crm-motion-ease: cubic-bezier(.2,.8,.2,1); }
.erp-collection-toolbar { min-width: 0; }
.contacts-command-center .contact-toolbar { display: block; }
.erp-collection-head { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 14px; }
.erp-collection-count { margin-left: auto; font-size: 13px; color: var(--crm-shell-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.erp-filter-chips { display: flex; flex: 0 0 100%; width: 100%; flex-wrap: wrap; gap: 8px; padding-top: 12px; position: relative; z-index: 1; }
.erp-filter-chip { max-width: 100%; border: 1px solid var(--crm-shell-border); background: var(--crm-shell-soft); color: var(--crm-shell-ink); border-radius: 8px; padding: 6px 10px; font-size: 12px; overflow-wrap: anywhere; animation: erpChipEnter var(--crm-motion-fast) var(--crm-motion-ease); }
.erp-filter-chip:hover { border-color: var(--crm-shell-green-dark); }
.dash-panel-head.erp-collection-toolbar { flex-wrap: wrap; }
.erp-collection-toolbar input::placeholder { font-weight: 400; }
@keyframes erpChipEnter { from { opacity: .4; transform: translateY(3px); } }
@media (max-width: 639px) { .erp-collection-head { gap: 8px; flex-wrap: wrap; } .erp-filter-chip { min-height: 44px; } }

/* Login artwork: incoming streams resolve into one system, expressed as the numeral 1. */
.login-page .crm-auth-story { gap: 20px; }
.erp-login-art { position: relative; flex: 1 0 280px; min-height: 280px; width: calc(100% + 48px); margin-inline: -24px; pointer-events: none; }
.erp-login-art canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.login-page .erp-art-toggle { position: relative; align-self: flex-start; display: inline-flex; gap: 7px; align-items: center; min-height: 36px; padding: 6px 10px; border: 1px solid rgb(221 223 242 / 30%); border-radius: 8px; background: transparent; color: #dddff2; font-size: 12px; }
.login-page .erp-art-toggle:hover { background: rgb(221 223 242 / 8%); color: #fff; }
.login-page .erp-art-toggle:focus-visible { outline-color: #80e8b0; }
.login-page .crm-auth-story-status { position: relative; }
@media (max-height: 800px) and (min-width: 901px) {
  .login-page .crm-auth-story { padding-top: 52px; padding-bottom: 24px; gap: 12px; }
  .login-page .crm-auth-story h2 { font-size: 42px; }
  .erp-login-art { flex-basis: 220px; min-height: 220px; }
}

/* Existing record editors: split detail on desktop, full-height sheet on phone. */
.erp-record-panel { min-width: 0; }
.erp-detail-close { margin-bottom: 16px; }
.erp-record-panel.erp-detail-open { animation: erpDetailEnter var(--crm-motion-panel) var(--crm-motion-ease); }
@keyframes erpDetailEnter { from { opacity: .5; transform: translateX(10px); } }
#clientsList .client-row, #leadList .lead-row { transition: background-color var(--crm-motion-fast), border-color var(--crm-motion-fast); }
#clientsList .client-row:hover, #leadList .lead-row:hover { background: var(--crm-shell-soft) !important; transform: none; }
#contactMain thead th { position: sticky; top: 0; z-index: 1; background: var(--crm-shell-surface); }
#contactMain tbody tr { transition: background-color var(--crm-motion-fast); }
#contactMain tbody tr:hover { background: var(--crm-shell-soft); }

/* Settings hub: the navigation is a real two-column layout, so labels and
   descriptions never collapse into adjacent text nodes. */
.settings-hub {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  max-width: 1380px;
  margin: 0; /* left-align the menu column against the app sidebar instead of centering it */
}
.settings-hub-menu {
  position: sticky;
  top: 16px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--crm-shell-border);
  border-radius: 14px;
  background: var(--crm-shell-surface);
  box-shadow: var(--crm-shell-shadow);
}
.settings-hub-menu nav { display: grid; gap: 5px; }
/* Group label matches the sidebar .nav-section (same size/tracking/weight/casing). */
.settings-hub-group {
  margin: 18px 8px 6px;
  color: var(--crm-shell-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.settings-hub-group:first-child { margin-top: 4px; }
/* Item geometry mirrors the sidebar .nav-item: 26px icon column, 10px radius, transparent border. */
.settings-hub-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--crm-shell-ink);
  text-align: left;
  cursor: pointer;
}
/* Icon chip identical to the sidebar: 26×26, radius 7, soft bg, inherit glyph color, 16px. */
.settings-hub-item > i { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--crm-shell-soft); color: inherit; font-size: 16px; }
.settings-hub-item strong, .settings-hub-item small { display: block; min-width: 0; }
.settings-hub-item strong { overflow: hidden; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.settings-hub-item small { margin-top: 2px; overflow: hidden; color: var(--crm-shell-muted); font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.settings-hub-item:hover { background: var(--crm-shell-soft); color: var(--crm-shell-ink); }
/* Active state = solid green pill, same as the sidebar's active .nav-item. */
.settings-hub-item.active { border-color: #102d20; background: var(--crm-shell-green); box-shadow: var(--crm-shell-offset); }
.settings-hub-item.active :is(strong, small) { color: #102d20; }
.settings-hub-item.active > i { background: rgb(255 255 255 / 22%); color: #102d20; }
.settings-hub-item.active:hover { background: #43d37d; }
.settings-hub-pane { min-width: 0; }
.settings-hub-pane .billing-settings { min-width: 0; }
.settings-hub-pane .billing-settings-bar { position: static; }

.integration-overview-summary { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 18px; color: var(--crm-shell-muted); font-size: 13px; }
.integration-overview-summary span, .integration-overview-status { display: inline-flex; align-items: center; gap: 6px; }
.integration-overview-summary .bi-check-circle-fill, .integration-overview-status.is-ready { color: var(--crm-shell-green-dark); }
.integration-overview-summary .bi-exclamation-triangle-fill, .integration-overview-status.is-attention { color: #b45309; }
.integration-overview-summary .bi-circle, .integration-overview-status.is-off { color: var(--crm-shell-muted); }
.integration-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.integration-overview-card { display: flex; flex-direction: column; min-width: 0; min-height: 210px; padding: 18px; border: 1px solid var(--crm-shell-border); border-radius: 12px; background: var(--crm-shell-surface); box-shadow: var(--crm-shell-shadow); }
.integration-overview-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.integration-overview-card .integration-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--crm-shell-soft); color: var(--crm-shell-ink); }
.integration-overview-status { font-size: 12px; font-weight: 650; }
.integration-overview-card h3 { margin: 16px 0 4px; color: var(--crm-shell-ink); font-size: 15px; }
.integration-overview-card p { margin: 0 0 16px; color: var(--crm-shell-muted); font-size: 13px; line-height: 1.45; }
.integration-overview-owner { display: block; margin: -8px 0 16px; color: var(--crm-shell-muted); font-size: 11px; }
.integration-overview-card .btn { margin-top: auto; align-self: flex-start; min-height: 36px; }
html[data-theme='dark'] .integration-overview-card, [data-theme='dark'] .integration-overview-card { border-color: var(--crm-shell-border); background: var(--crm-shell-surface); }
@media (max-width: 900px) {
  .settings-hub { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .settings-hub-menu { position: static; overflow-x: auto; padding: 10px; }
  .settings-hub-menu nav { display: flex; gap: 8px; min-width: max-content; }
  .settings-hub-group { display: none; }
  .settings-hub-item { grid-template-columns: 28px auto; min-width: 190px; min-height: 52px; }
  .settings-hub-item small { display: none; }
}

/* CRM is one navigation destination with five focused child screens. */
#sidebar .nav-group { display: block; }
#sidebar .nav-group-toggle { position: relative; }
#sidebar .nav-group-toggle .nav-group-chevron { width: auto !important; height: auto !important; margin-left: auto; border: 0 !important; background: transparent !important; color: currentColor !important; font-size: 11px !important; transition: transform 160ms ease; }
#sidebar .nav-group:not(.open) .nav-group-chevron { transform: rotate(-90deg); }
#sidebar .nav-submenu { display: grid; gap: 2px; margin: 2px 0 6px 20px; padding-left: 12px; border-left: 1px solid rgb(255 255 255 / 16%); max-height: none !important; overflow: visible !important; }
#sidebar .nav-group:not(.open) .nav-submenu { display: none; }
#sidebar .nav-submenu .nav-item { min-height: 40px !important; margin: 0 !important; width: 100% !important; padding: 6px 8px !important; border-radius: 8px !important; font-size: 13px; color: rgb(255 255 255 / 82%) !important; font-weight: 500; }
#sidebar .nav-submenu .nav-item > span { color: inherit !important; }
#sidebar .nav-submenu .nav-item:hover { color: #fff !important; background: rgb(255 255 255 / 8%) !important; }
/* Every CRM sub-item icon shares one uniform tile, size and colour. */
#sidebar .nav-submenu .nav-item > i {
  display: inline-flex !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  flex-basis: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgb(255 255 255 / 10%) !important;
  border-radius: 7px !important;
  background: rgb(255 255 255 / 8%) !important;
  color: #10cf91 !important;
  font-size: 14px !important;
}
#sidebar .nav-submenu .nav-item.active > i { color: #fff !important; background: rgb(255 255 255 / 16%) !important; border-color: rgb(255 255 255 / 18%) !important; }
#sidebar .nav-submenu .nav-item.active { background: rgb(255 255 255 / 12%) !important; color: #fff !important; box-shadow: inset 3px 0 var(--crm-shell-green-dark) !important; }
@media (min-width: 1200px) {
  body.sidebar-collapsed #sidebar .nav-group .nav-submenu { display: none; }
  body.sidebar-collapsed #sidebar .nav-group-toggle .nav-group-chevron { display: none; }
}
@media (max-width:767px) {
  .erp-record-panel:not(.erp-detail-open) { display: none; }
  html .app-layout .erp-record-panel.erp-detail-open { position: fixed; inset: 0; z-index: 1055; margin: 0; width: 100%; height: 100dvh !important; overflow-y: auto; overscroll-behavior: contain; border-radius: 0 !important; padding: max(20px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)) !important; background: var(--crm-shell-surface) !important; }
  .erp-detail-close { min-height: 44px; }
}
.erp-object-nav { display: flex; gap: 6px; padding: 14px 28px 0; overflow-x: auto; flex-shrink: 0; }
.erp-object-link { flex: 0 0 auto; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--crm-shell-muted); padding: 8px 12px; font-size: 13px; min-height: 40px; }
.erp-object-link:hover { background: var(--crm-shell-soft); color: var(--crm-shell-ink); }
.erp-object-link[aria-current='page'] { background: var(--crm-shell-soft); border-color: var(--crm-shell-border); color: var(--crm-shell-ink); font-weight: 650; box-shadow: inset 0 -2px var(--crm-shell-green-dark); }
@media (max-width:639px) { .erp-object-nav { padding: 12px 16px 0; } .erp-object-link { min-height: 44px; } }

/* Persistent dark navigation: the workspace can be light while orientation and
   navigation stay visually anchored. Icon color identifies a product area;
   text remains one quiet, readable system. */
html[data-theme='light'] #sidebar,
html[data-theme='light'] #sidebar :is(.sidebar-header, .sidebar-footer, .sidebar-nav) {
  background: #1e2a3e !important;
  border-color: rgb(255 255 255 / 10%) !important;
}
html[data-theme='light'] #sidebar .sidebar-brand,
html[data-theme='light'] #sidebar .sidebar-user .user-name,
html[data-theme='light'] #sidebar .sidebar-nav > .nav-item { color: #edf3ff !important; }
html[data-theme='light'] #sidebar .sidebar-brand small,
html[data-theme='light'] #sidebar .sidebar-user .user-role,
html[data-theme='light'] #sidebar .crm-footer-branding,
html[data-theme='light'] #sidebar .sidebar-nav > .nav-section { color: #8fa7cb !important; }
html[data-theme='light'] #sidebar .sidebar-logo { background: linear-gradient(135deg, #6957f7, #4c40d6) !important; color: #fff !important; }
html[data-theme='light'] #sidebar .sidebar-nav > .nav-item:hover { background: rgb(255 255 255 / 8%) !important; color: #fff !important; }
html[data-theme='light'] #sidebar .sidebar-nav > .nav-item.active { background: linear-gradient(105deg, #6d4ce6, #df3d68) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 10px 24px rgb(88 53 169 / 35%) !important; }
html[data-theme='light'] #sidebar .sidebar-nav > .nav-item.active > :is(i, span) { color: #fff !important; }
html[data-theme='light'] #sidebar .sidebar-nav > .nav-item.active > i { background: rgb(255 255 255 / 14%) !important; }

#sidebar .sidebar-nav > .nav-item[data-view='crm-dashboard'] > i,
#sidebar .sidebar-nav > .nav-item[data-view='crm-tasks'] > i { color: #8d72ff !important; }
#sidebar .sidebar-nav > .nav-item:is([data-view='leads'], [data-view='clients'], [data-view='store'], [data-view='invoices']) > i { color: #f2a900 !important; }
#sidebar .sidebar-nav > .nav-item:is([data-view='contacts'], [data-view='crm-kanban'], [data-view='crm-analytics'], [data-view='calendar']) > i { color: #12ba86 !important; }
#sidebar .sidebar-nav > .nav-item:is([data-view='notes'], [data-view='email'], [data-view='messenger-inbox']) > i { color: #20a6e8 !important; }
#sidebar .sidebar-nav > .nav-item:is([data-view='ai-qualification'], [data-view='automation'], [data-view='ai-settings'], [data-view='e2e-analytics']) > i { color: #7864ff !important; }
#sidebar .sidebar-nav > .nav-item:is([data-view='voice-calls'], [data-view='files'], [data-view='integrations']) > i { color: #f08b21 !important; }

/* The brand belongs to the drawer header; the top bar begins with the menu control. */
#sidebar .sidebar-header { min-height: 80px !important; height: auto; padding: 16px 18px !important; border-bottom: 1px solid rgb(255 255 255 / 10%) !important; }
#sidebar .sidebar-close { display: none; }

/* Every navigation icon uses one consistent tile and sizing; colour identifies its area. */
#sidebar .sidebar-nav > .nav-item > i {
  display: inline-flex !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgb(255 255 255 / 10%) !important;
  border-radius: 8px !important;
  background: rgb(255 255 255 / 8%) !important;
  font-size: 16px !important;
}
#sidebar .sidebar-nav > .nav-item:is([data-view='crm-dashboard'], [data-view='crm-tasks']) > i { color: #a893ff !important; }
#sidebar .sidebar-nav > .nav-item:is([data-view='leads'], [data-view='clients'], [data-view='invoices'], [data-view='store-payments']) > i { color: #f7b500 !important; }
#sidebar .sidebar-nav > .nav-item:is([data-view='contacts'], [data-view='crm-kanban'], [data-view='crm-analytics'], [data-view='calendar']) > i { color: #10cf91 !important; }
#sidebar .sidebar-nav > .nav-item:is([data-view='notes'], [data-view='email'], [data-view='messenger-inbox']) > i { color: #29baf2 !important; }
#sidebar .sidebar-nav > .nav-item:is([data-view='voice-calls'], [data-view='file-manager']) > i { color: #ff9f32 !important; }
#sidebar .sidebar-nav > .nav-item:is([data-view='ai-qualification'], [data-view='automation'], [data-view='ai-settings'], [data-view='e2e-analytics']) > i { color: #9d86ff !important; }
#sidebar .sidebar-nav > .nav-item:is([data-view='integrations-crm'], [data-view='integrations-modules'], [data-view='developer-api']) > i { color: #35d5c5 !important; }
#sidebar .sidebar-nav > .nav-item:is([data-view='documentation'], [data-view='access-control'], [data-view='companies'], [data-view='settings'], [data-view='experts']) > i { color: #f77ca1 !important; }
#sidebar .sidebar-nav > .nav-item.active > i { color: #fff !important; border-color: rgb(255 255 255 / 18%) !important; background: rgb(255 255 255 / 16%) !important; }
/* CRM is a collapsible navigation group, so it needs the same shell treatment
   as top-level items instead of inheriting the legacy muted button styles. */
#sidebar .sidebar-nav > .nav-group { display:block !important; margin:0 !important; }
#sidebar .sidebar-nav > .nav-group > .nav-group-toggle {
  display:flex !important; align-items:center !important; gap:10px !important;
  width:calc(100% - 28px) !important; min-height:44px !important; margin:2px 14px !important;
  padding:8px 10px !important; border:1px solid transparent !important; border-radius:10px !important;
  background:transparent !important; color:#edf3ff !important; font:inherit !important; text-align:left !important;
}
#sidebar .sidebar-nav > .nav-group > .nav-group-toggle:hover { background:rgb(255 255 255 / 8%) !important; color:#fff !important; }
#sidebar .sidebar-nav > .nav-group > .nav-group-toggle > i:first-child {
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:30px !important; height:30px !important; flex:0 0 30px !important; border:1px solid rgb(255 255 255 / 10%) !important;
  border-radius:8px !important; background:rgb(255 255 255 / 8%) !important; color:#9d86ff !important; font-size:16px !important;
}
#sidebar .sidebar-nav > .nav-group > .nav-group-toggle > span { color:#edf3ff !important; white-space:normal !important; }
#sidebar .sidebar-nav > .nav-group > .nav-group-toggle > .nav-group-chevron { color:#8fa7cb !important; }
#sidebar .sidebar-nav > .nav-group > .nav-submenu { margin-left:34px !important; }
@media (max-width: 900px) {
  #sidebar .sidebar-header { display: flex; height: 64px; min-height: 64px !important; padding: 12px !important; }
  #sidebar .sidebar-close { display: inline-grid; margin-left: auto; }
}

/* Lead status counts must remain inside their own cells at every zoom level. */
.leads-admin-page .lead-status-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.leads-admin-page .lead-status-summary-item {
  display: grid;
  min-width: 0;
  min-height: 72px;
  place-content: center;
  gap: 4px;
  padding: 10px 8px;
  border: 1px solid var(--crm-shell-border);
  border-radius: 10px;
  background: var(--crm-shell-surface);
  color: var(--crm-shell-ink);
  text-align: center;
  box-shadow: 0 2px 0 rgb(15 41 34 / 8%);
}
.leads-admin-page .lead-status-summary-label {
  overflow: hidden;
  color: var(--crm-shell-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leads-admin-page .lead-status-summary-count {
  display: block;
  color: var(--crm-shell-ink);
  font-size: 23px;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  line-height: 1;
}
.leads-admin-page .lead-status-summary-item:hover,
.leads-admin-page .lead-status-summary-item.is-active {
  border-color: var(--crm-shell-green-dark);
  background: var(--crm-shell-soft);
  color: var(--crm-shell-ink);
}
.leads-admin-page .lead-status-summary-item.is-active { box-shadow: inset 0 -3px var(--crm-shell-green-dark); }
@media (max-width: 760px) { .leads-admin-page .lead-status-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 400px) { .leads-admin-page .lead-status-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Calendar & Bookings — separated mode buttons, roomier UI, elastic mobile grid ── */
.page-calendar .cal-mode-tabs-bar { margin-top: 10px; }
.page-calendar #calendarModeSwitch { display: flex; flex-wrap: wrap; gap: 8px; }
/* Undo Bootstrap btn-group joining so each mode reads as its own pill. */
.page-calendar #calendarModeSwitch > .btn {
  border-radius: 9px !important;
  margin-left: 0 !important;
  border: 1px solid var(--border) !important;
  font-weight: 600;
}
.page-calendar #calendarModeSwitch > .btn.btn-primary { border-color: transparent !important; }
.page-calendar #calendarViewTabs { gap: 6px; }
.page-calendar #calendarViewTabs > .btn { border-radius: 8px !important; margin-left: 0 !important; }
/* Give the header quick-action a touch of breathing room from the tabs. */
.page-calendar .calendar-page-head { gap: 12px; }

@media (max-width: 991.98px) {
  /* Elastic month grid: fit the viewport instead of forcing a 768px horizontal scroll. */
  .page-calendar .calendar-scroll-wrapper { overflow-x: visible; }
  .page-calendar .calendar-grid { min-width: 0 !important; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .page-calendar .calendar-day { min-height: 72px; padding: 6px; }
  .page-calendar .calendar-day-header { padding: 8px 2px; font-size: 11px; }
  .page-calendar #calendarModeSwitch { width: 100%; }
  .page-calendar #calendarModeSwitch > .btn { flex: 1 1 auto; min-height: 44px; }
}

@media (max-width: 575.98px) {
  .page-calendar .calendar-day { min-height: 58px; padding: 4px; }
  .page-calendar .calendar-day-header { font-size: 10px; padding: 6px 1px; }
  /* Stack the header title and the Book button on narrow phones. */
  .page-calendar .calendar-page-head .d-flex.justify-content-between { flex-wrap: wrap; }
  .page-calendar #headerQuickActions { width: 100%; }
  .page-calendar #headerQuickActions > .btn { width: 100%; }
}

/* ── Settings: unify every panel to the billing-card visual language ──
   Bridges the older .settings-section / .settings-card modules (Brand, Booking,
   Pipeline, Email, Cookie, Widgets…) to the same card shell, gradient icon tile,
   radius, hover and spacing used by the billing-card panels. Theme-safe (uses shell
   vars, not hardcoded finance colours) and scoped to the Settings pane so nothing
   else is affected. */
.settings-hub-pane .settings-section,
.settings-hub-pane .settings-card {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--bg-card) !important;
  overflow: hidden;
  transition: box-shadow .18s, border-color .18s;
}
.settings-hub-pane .settings-section:hover,
.settings-hub-pane .settings-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: 0 10px 30px -18px color-mix(in srgb, #0B1633 40%, transparent);
}
.settings-hub-pane .settings-header {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
/* Bare leading icon → gradient tile, matching .billing-card-icon. */
.settings-hub-pane .settings-header > i:first-child {
  grid-row: 1 / span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 18px;
  color: #fff !important;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #1a1145));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.settings-hub-pane .settings-header > h3 {
  grid-column: 2;
  margin: 0;
  font-size: 14.5px;
  font-weight: 750;
  color: var(--text-primary);
}
.settings-hub-pane .settings-header > span {
  grid-column: 2;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}
.settings-hub-pane .settings-body { padding: 16px 18px 18px; }

/* ── Dark-theme safety net for every Settings surface ──
   All Settings panels (billing-card, settings-section, workspace/brand admin) derive their
   background from --bg-card / --finance-surface. Pin those to the shell's dark surface tokens
   inside the Settings views so no panel can render on a light/white fallback in dark mode, and so
   the cards match the app shell (sidebar/header) instead of the older admin navy. Light theme is
   untouched — this block only applies under [data-theme='dark']. */
html[data-theme='dark'] :is(.settings-hub, .settings-hub-pane, .workspace-settings-admin),
[data-theme='dark'] :is(.settings-hub, .settings-hub-pane, .workspace-settings-admin) {
  --bg-card: var(--crm-shell-surface);
  --bg-input: var(--crm-shell-soft);
  --bg-hover: var(--crm-shell-soft);
  --border: var(--crm-shell-border);
  --text-primary: var(--crm-shell-ink);
  --text-secondary: var(--crm-shell-muted);
  --text-muted: var(--crm-shell-muted);
  --finance-surface: var(--crm-shell-surface);
  --finance-muted: var(--crm-shell-soft);
  --finance-line: var(--crm-shell-border);
  --finance-ink: var(--crm-shell-ink);
  --finance-subtle: var(--crm-shell-muted);
}

/* ── Modules page — standalone module library, unified with the main design system ──
   Modules are separated from the Integrations Center. This gives the library page a
   clean card grid consistent with the shell (theme vars, gradient icon tile, laconic). */
/* grid-auto-rows:1fr + stretch → every card fills the tallest row track, so all module cards
   render identical height regardless of feature-tag count or description length. */
.page-modules .module-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; grid-auto-rows: 1fr; align-items: stretch; }
.page-modules .module-card { display: flex; flex-direction: column; padding: 0 !important; border: 1px solid var(--border) !important; border-radius: 14px !important; background: var(--bg-card) !important; box-shadow: none !important; overflow: hidden; transition: box-shadow .18s, border-color .18s; }
.page-modules .module-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: 0 10px 30px -18px color-mix(in srgb, #0B1633 40%, transparent); }
.page-modules .module-card .integration-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.page-modules .module-card .integration-card-identity { display: flex; gap: 12px; min-width: 0; }
.page-modules .module-card .integration-card-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; font-size: 19px; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #1a1145)); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.page-modules .module-card-titleline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-modules .module-card-titleline h3 { margin: 0; font-size: 15px; font-weight: 750; color: var(--text-primary); }
.page-modules .module-card .integration-card-identity p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.page-modules .module-readiness { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.page-modules .module-readiness.is-operational { color: #0f9b7a; background: color-mix(in srgb, #0f9b7a 12%, var(--bg-card)); border-color: color-mix(in srgb, #0f9b7a 30%, transparent); }
.page-modules .module-readiness.is-partial { color: #c87914; background: color-mix(in srgb, #c87914 12%, var(--bg-card)); border-color: color-mix(in srgb, #c87914 30%, transparent); }
.page-modules .module-readiness.is-foundation { color: var(--text-muted); background: var(--bg-hover); border-color: var(--border); }
.page-modules .module-beta-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, #7c3aed 35%, transparent); color: #7c3aed; background: color-mix(in srgb, #7c3aed 10%, var(--bg-card)); white-space: nowrap; }
.page-modules .module-card-body { flex: 1 1 auto; padding: 0 18px 16px; display: flex; flex-direction: column; gap: 12px; }
/* integrations sit at the bottom of the body so the "Integrations" block aligns across all cards,
   with the flexible gap absorbed above it — keeps footers on one baseline. */
.page-modules .module-card-integrations { margin-top: auto; }
.page-modules .module-card-features { display: flex; flex-wrap: wrap; gap: 6px; }
.page-modules .module-card-features span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-secondary); background: var(--bg-hover); border: 1px solid var(--border); border-radius: 7px; padding: 3px 8px; }
.page-modules .module-card-features span i { color: var(--accent); font-size: 12px; }
.page-modules .module-card-integrations { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; }
.page-modules .module-card-integrations strong { color: var(--text-primary); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.page-modules .module-card-integrations span { color: var(--text-muted); }
.page-modules .module-card-integrations.is-empty span { font-style: italic; }
.page-modules .module-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--bg-hover); }
.page-modules .module-enabled-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.page-modules .module-enabled-state.is-on { color: #0f9b7a; }
.page-modules .module-enabled-state i { font-size: 14px; }
/* "Adds to the menu" — the manifest's sidebar entries, so the toggle's effect is visible up front. */
.page-modules .module-card-menu { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.page-modules .module-card-menu > strong { color: var(--text-primary); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.page-modules .module-card-menu > span { display: flex; flex-wrap: wrap; gap: 6px; color: var(--text-muted); }
.page-modules .module-card-menu.is-empty > span { font-style: italic; }
.page-modules .module-card-menu-item { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); }
.page-modules .module-card-menu-item i { color: var(--accent); }
/* Beta: locked switch + the reason in words, not just a greyed control. */
.page-modules .module-card.is-beta-locked .integration-card-icon { filter: grayscale(.6); opacity: .75; }
.page-modules .module-card-beta-note { display: flex; gap: 6px; align-items: flex-start; margin: 0 18px 14px; padding: 8px 10px; font-size: 12px; line-height: 1.4; color: var(--text-secondary); background: color-mix(in srgb, #7c3aed 6%, var(--bg-card)); border: 1px dashed color-mix(in srgb, #7c3aed 30%, var(--border)); border-radius: 8px; }
.page-modules .module-card-beta-note i { color: #7c3aed; margin-top: 1px; }
/* Landed here from a link to a switched-off module: point at the card to enable. */
.page-modules .module-card.is-highlighted { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent) !important; }
@media (max-width: 575.98px) { .page-modules .module-library { grid-template-columns: 1fr; } }

/* ── Embedded Marketing & Attribution (Integrations Center → Marketing & Attribution) ──
   The standalone Attribution page ships its own cream palette (--e2e-*). Embedded inside the
   integration content pane that reads as "unstyled / broken" next to the rest of the system.
   Remap the e2e tokens to the shared system tokens (theme-aware) and drop the page-level canvas
   background + outer padding, so the sources screen wears the same skin as everything else. */
.page-integrations .e2e-shell {
  --e2e-canvas: transparent;
  --e2e-surface: var(--bg-card);
  --e2e-ink: var(--text-primary);
  --e2e-ink-secondary: var(--text-secondary);
  --e2e-ink-muted: var(--text-muted);
  --e2e-border: var(--border);
  --e2e-border-light: var(--border);
  --e2e-select: var(--accent);
  --e2e-select-ink: #fff;
  --e2e-select-hover: var(--accent);
  --e2e-input: var(--bg-input);
  --e2e-hover: var(--bg-hover);
  --e2e-focus-ring: var(--accent);
  background: transparent;
  padding: 0;
  min-height: 0;
}

/* ── Quick Start onboarding wizard ── */
#sidebar .sidebar-nav > .nav-item-quickstart > i { color: #20c764 !important; }
.quick-start-screen { display: flex; justify-content: center; padding: clamp(16px, 4vw, 48px) 0; }
.quick-start-card { width: min(640px, 100%); background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 18px 50px -30px rgb(12 20 40 / 45%); padding: clamp(22px, 4vw, 36px); }
.qs-hero { text-align: center; margin-bottom: 22px; }
.qs-hero-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; font-size: 30px; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #1a1145)); box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--accent) 70%, transparent); margin-bottom: 14px; }
.qs-hero-icon.is-done { background: linear-gradient(135deg, #20c764, #14994b); box-shadow: 0 12px 28px -10px rgb(20 199 100 / 55%); }
.qs-hero h1 { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: var(--text-primary); }
.qs-hero p { margin: 0 auto; max-width: 460px; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.qs-checklist { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.qs-checklist li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-hover); }
.qs-check-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border); color: var(--accent); font-size: 16px; }
.qs-checklist strong { display: block; color: var(--text-primary); font-size: 13.5px; }
.qs-critical, .qs-optional { display: inline-block; margin-top: 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; }
.qs-critical { color: #e05264; background: color-mix(in srgb, #e05264 12%, var(--bg-card)); }
.qs-optional { color: var(--text-muted); background: var(--bg-hover); border: 1px solid var(--border); }
.qs-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.qs-step-count { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.qs-dots { display: flex; gap: 6px; }
.qs-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--border); }
.qs-dot.is-active { background: var(--accent); transform: scale(1.25); }
.qs-dot.is-done { background: #20c764; }
.qs-step-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.qs-step-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 12px; font-size: 20px; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #1a1145)); }
.qs-step-head h2 { margin: 0 0 4px; font-size: 18px; font-weight: 750; color: var(--text-primary); }
.qs-step-head p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.qs-step-body { display: grid; gap: 14px; margin-bottom: 8px; }
.qs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qs-field { display: grid; gap: 5px; }
.qs-field > span { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.qs-field > span small { font-weight: 400; color: var(--text-muted); }
.qs-state { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; }
.qs-state.is-info { color: var(--text-secondary); background: var(--bg-hover); }
.qs-state.is-success { color: #0f9b7a; background: color-mix(in srgb, #0f9b7a 12%, var(--bg-card)); }
.qs-state.is-error { color: #e05264; background: color-mix(in srgb, #e05264 12%, var(--bg-card)); }
.qs-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.qs-actions .btn-lg { flex: 1; }
@media (max-width: 560px) { .qs-grid { grid-template-columns: 1fr; } .qs-actions { flex-direction: column-reverse; } .qs-actions .btn { width: 100%; } }

/* ── Onboarding coach-marks ── */
.onboarding-layer { position: fixed; inset: 0; z-index: 2000; }
.onboarding-backdrop { position: absolute; inset: 0; background: rgb(10 16 30 / 55%); }
.onboarding-spot { position: absolute; border-radius: 12px; box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgb(10 16 30 / 55%); transition: all .2s ease; pointer-events: none; }
.onboarding-pop { position: absolute; z-index: 1; width: min(320px, calc(100vw - 24px)); background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 22px 50px -20px rgb(10 16 30 / 55%); padding: 16px 18px; transition: top .2s ease, left .2s ease; }
.onboarding-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.onboarding-pop-index { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: .04em; }
.onboarding-pop-close { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 2px; }
.onboarding-pop-close:hover { color: var(--text-primary); }
.onboarding-pop h3 { margin: 0 0 6px; font-size: 15px; font-weight: 750; color: var(--text-primary); }
.onboarding-pop p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.onboarding-pop-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }

/* Screen of a switched-off module (AdminApp.showModuleOff): what is off, and one way to turn it on. */
.module-off-state { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; max-width: 720px; margin: 8px 0; padding: 20px 22px; border: 1px dashed var(--border); border-radius: 14px; background: var(--bg-card); }
.module-off-state > i { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 20px; color: var(--text-muted); background: var(--bg-hover); }
.module-off-state > div { flex: 1 1 260px; min-width: 0; }
.module-off-state h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.module-off-state p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.module-off-state .btn { flex: none; }
@media (max-width: 575.98px) { .module-off-state .btn { width: 100%; } }

/* `hidden` on a menu entry must always win. admin.css still carries a legacy
   `body:not(.app-layout) .sidebar-nav > .nav-item { display:flex !important }` — `.app-layout` sits on
   a div, not on body, so that :not() always matches and out-ranked `.sidebar-nav .nav-item[hidden]`:
   a switched-off module's entry stayed on screen in the mobile drawer. ID specificity settles it. */
#sidebarNav .nav-item[hidden],
#sidebarNav .nav-section[hidden],
#crmBottomNav [hidden] { display: none !important; }

/* ── AI model picker (public/assets/js/ai-model-picker.js) — one look on every AI screen ── */
.aip { display: flex; flex-direction: column; gap: 12px; }
.aip-loading, .aip-error { display: flex; align-items: center; gap: 10px; padding: 12px; font-size: 13px; color: var(--text-muted); }
.aip-error { color: #b42318; }
.aip-inherit { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.aip-inherit-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--bg-card); }
.aip-inherit-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.aip-inherit-opt input { margin-top: 3px; }
.aip-inherit-opt strong { display: block; font-size: 13px; color: var(--text-primary); }
.aip-inherit-opt small { display: block; font-size: 12px; color: var(--text-muted); }
.aip-providers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.aip-provider { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.aip-provider.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.aip-provider-main { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 650; font-size: 14px; color: var(--text-primary); min-height: 32px; }
.aip-provider-main > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--bg-hover); color: var(--accent); font-size: 16px; }
.aip-provider-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.aip-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); background: var(--bg-hover); }
.aip-status.is-ok { color: #0f7a5f; border-color: color-mix(in srgb, #0f9b7a 35%, transparent); background: color-mix(in srgb, #0f9b7a 10%, var(--bg-card)); }
.aip-status.is-saved { color: var(--text-secondary); }
.aip-status.is-error { color: #b42318; border-color: color-mix(in srgb, #d92d20 35%, transparent); background: color-mix(in srgb, #d92d20 8%, var(--bg-card)); }
.aip-verify { font-size: 12px; font-weight: 600; padding: 4px 10px; min-height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); cursor: pointer; }
.aip-verify:hover { border-color: var(--accent); }
.aip-verify:focus-visible, .aip-provider-main:focus-within, .aip-inherit-opt:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.aip-key input { width: 100%; font-size: 13px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input, var(--bg-card)); color: var(--text-primary); }
.aip-console { font-size: 12px; color: var(--accent); }
.aip-field { display: flex; flex-direction: column; gap: 4px; }
.aip-label { font-size: 12px; font-weight: 650; color: var(--text-secondary); }
.aip-hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.aip-hint span { color: var(--text-secondary); }
.aip-advanced summary { cursor: pointer; font-size: 12.5px; color: var(--text-secondary); padding: 4px 0; }
.aip-advanced[open] summary { margin-bottom: 6px; }
@media (max-width: 575.98px) { .aip-providers, .aip-inherit { grid-template-columns: 1fr; } }

/* AI Settings page sections that host the picker */
.ai-settings-admin .ai-feature-row { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.ai-settings-admin .ai-feature-row:first-child { border-top: 0; padding-top: 0; }
.ai-settings-admin .ai-feature-row h4 { margin: 0 0 2px; font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.ai-settings-admin .ai-feature-row p { margin: 0; font-size: 12px; color: var(--text-muted); }
.ai-settings-admin .ai-embed-state { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; background: var(--bg-hover); color: var(--text-secondary); }
.ai-settings-admin .ai-embed-state.is-off { background: color-mix(in srgb, #c87914 9%, var(--bg-card)); }
@media (max-width: 767.98px) { .ai-settings-admin .ai-feature-row { grid-template-columns: 1fr; } }
/* Picker inside forms that style every input (helpdesk Bots form): radios stay radios. */
.helpdesk-form .aip input[type="radio"] { padding: 0; border: 0; background: none; width: auto; }
.helpdesk-form .aip-providers { grid-template-columns: 1fr; }
/* Automation editor: AI model block in the node panel (narrow column → cards stack). */
.automation-ai-model { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.automation-ai-model-label { font-size: 12px; font-weight: 650; color: var(--text-secondary); }
.automation-ai-model .aip-providers, .automation-ai-model .aip-inherit { grid-template-columns: 1fr; }
.ai-qualification-model { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.ai-qualification-model > summary { cursor: pointer; font-weight: 650; font-size: 13.5px; color: var(--text-primary); }
.ai-qualification-model[open] > summary { margin-bottom: 12px; }
.ai-qualification-model-actions { margin-top: 12px; }

/* ── AI Knowledge v2 (plan 2026-10, stage 4.7) ──
   Health strip, tabs, sources/documents split, playground fragments, wizard / drawer / ⌘K overlays.
   Colours come from the shell tokens so light and dark themes follow the app shell. */
.akb { --akb-ok: #15803d; --akb-ok-bg: #dcfce7; --akb-busy: #1d4ed8; --akb-busy-bg: #dbeafe; --akb-err: #b91c1c; --akb-err-bg: #fee2e2; --akb-idle-bg: var(--crm-shell-soft); }
html[data-theme='dark'] .akb { --akb-ok: #86efac; --akb-ok-bg: #14532d; --akb-busy: #93c5fd; --akb-busy-bg: #1e3a8a; --akb-err: #fca5a5; --akb-err-bg: #7f1d1d; }
.akb-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.akb-search-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.akb-search-btn kbd { font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--crm-shell-border); background: var(--crm-shell-soft); color: var(--crm-shell-muted); }
.akb-muted { color: var(--crm-shell-muted); font-size: 12.5px; }
.akb-danger { color: var(--akb-err) !important; }
.akb-health { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--crm-shell-border); border-radius: 14px; background: var(--crm-shell-surface); }
.akb-health-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.akb-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.akb-stat strong { font-size: 18px; font-weight: 700; color: var(--crm-shell-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.akb-stat span { font-size: 12px; color: var(--crm-shell-muted); }
.akb-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.akb-tips li { display: flex; gap: 8px; font-size: 13px; color: var(--crm-shell-ink); line-height: 1.45; }
.akb-tips i { color: #ca8a04; margin-top: 2px; }
.akb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--crm-shell-border); overflow-x: auto; scrollbar-width: none; }
.akb-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--crm-shell-muted); font-weight: 600; font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.akb-tab:hover { color: var(--crm-shell-ink); }
.akb-tab.is-active { color: var(--crm-shell-ink); border-bottom-color: var(--crm-shell-green); }
.akb-tab:focus-visible, .akb-source:focus-visible, .akb-type:focus-within, .akb-search-results [role="option"]:focus { outline: 2px solid var(--crm-shell-green); outline-offset: 2px; }
.akb-knowledge { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .akb-knowledge { grid-template-columns: 1fr; } }
.akb-sources, .akb-docs { border: 1px solid var(--crm-shell-border); border-radius: 14px; background: var(--crm-shell-surface); padding: 14px; min-width: 0; }
.akb-sources-head, .akb-docs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.akb-sources-head h2, .akb-docs-head h2 { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: var(--crm-shell-ink); overflow-wrap: anywhere; }
.akb-docs-head p { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.akb-doc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.akb-source-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.akb-source { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--crm-shell-border); border-radius: 10px; background: transparent; color: var(--crm-shell-ink); cursor: pointer; transition: border-color .15s, background-color .15s; }
.akb-source:hover { background: var(--crm-shell-soft); }
.akb-source.is-selected { border-color: var(--crm-shell-green); background: color-mix(in srgb, var(--crm-shell-green) 8%, transparent); }
.akb-source-name { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.akb-source-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--crm-shell-muted); }
.akb-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--akb-idle-bg); color: var(--crm-shell-ink); white-space: nowrap; }
.akb-chip.is-ok { background: var(--akb-ok-bg); color: var(--akb-ok); }
.akb-chip.is-busy { background: var(--akb-busy-bg); color: var(--akb-busy); }
.akb-chip.is-error { background: var(--akb-err-bg); color: var(--akb-err); }
.akb-chip.is-busy i { animation: akb-spin 1s linear infinite; }
.akb-progress { height: 6px; border-radius: 999px; background: var(--crm-shell-soft); overflow: hidden; }
.akb-progress-bar { height: 100%; background: var(--crm-shell-green); border-radius: inherit; transition: width .3s ease-out; }
.akb-progress-bar.is-indeterminate { animation: akb-slide 1.2s ease-in-out infinite; }
.akb-progress-text { margin: 4px 0 0; font-size: 12px; color: var(--crm-shell-muted); overflow-wrap: anywhere; }
@keyframes akb-spin { to { transform: rotate(360deg); } }
@keyframes akb-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .akb-chip.is-busy i, .akb-progress-bar.is-indeterminate { animation: none; } .akb-progress-bar { transition: none; } }
.akb-reason { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--crm-shell-soft); color: var(--crm-shell-ink); font-size: 13px; line-height: 1.45; margin: 8px 0; overflow-wrap: anywhere; }
.akb-reason.is-error { background: var(--akb-err-bg); color: var(--akb-err); }
.akb-table-wrap { overflow-x: auto; }
.akb-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--crm-shell-ink); }
.akb-table th, .akb-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--crm-shell-border); vertical-align: top; }
.akb-table thead th { font-size: 11.5px; font-weight: 600; color: var(--crm-shell-muted); text-transform: uppercase; letter-spacing: .02em; }
.akb-table tbody th { font-weight: 600; }
.akb-table small { display: block; font-weight: 400; color: var(--crm-shell-muted); overflow-wrap: anywhere; }
.akb-table small.akb-err { color: var(--akb-err); }
.akb-table td small { display: inline; }
.akb-doc-title { overflow-wrap: anywhere; }
.akb-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.akb-row-actions { white-space: nowrap; text-align: right !important; }
@media (max-width: 640px) {
  .akb-table thead { display: none; }
  .akb-table, .akb-table tbody, .akb-table tr, .akb-table th, .akb-table td { display: block; width: 100%; }
  .akb-table tr { border: 1px solid var(--crm-shell-border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
  .akb-table th, .akb-table td { border: 0; padding: 4px 0; }
  .akb-table td[data-label]::before { content: attr(data-label) ': '; color: var(--crm-shell-muted); font-size: 12px; }
  .akb-row-actions { text-align: left !important; }
}
.akb-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 20px; border: 1px dashed var(--crm-shell-border); border-radius: 14px; background: var(--crm-shell-surface); }
.akb-empty > i { font-size: 36px; color: var(--crm-shell-green); }
.akb-empty h2 { font-size: 18px; margin: 0; color: var(--crm-shell-ink); }
.akb-empty p { max-width: 460px; margin: 0; color: var(--crm-shell-muted); line-height: 1.5; }
.akb-playground { display: flex; flex-direction: column; gap: 16px; }
.akb-ask { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--crm-shell-border); border-radius: 14px; background: var(--crm-shell-surface); }
.akb-label { font-weight: 600; font-size: 13.5px; color: var(--crm-shell-ink); }
.akb-ask-row { display: grid; grid-template-columns: 1fr minmax(140px, 220px) auto; gap: 8px; }
@media (max-width: 640px) { .akb-ask-row { grid-template-columns: 1fr; } }
.akb-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--crm-shell-ink); min-height: 32px; cursor: pointer; }
.akb-check input { width: 16px; height: 16px; flex-shrink: 0; }
.akb-answer, .akb-fragments { padding: 16px; border: 1px solid var(--crm-shell-border); border-radius: 14px; background: var(--crm-shell-surface); }
.akb-answer h3, .akb-fragments h3 { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: var(--crm-shell-ink); }
.akb-fragments h3 .akb-muted { font-weight: 400; }
.akb-answer-text { white-space: pre-wrap; line-height: 1.55; color: var(--crm-shell-ink); font-size: 14px; }
.akb-frag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.akb-frag { padding: 12px; border: 1px solid var(--crm-shell-border); border-radius: 10px; }
.akb-frag-head { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: 13px; color: var(--crm-shell-ink); }
.akb-frag-head span { color: var(--crm-shell-muted); font-size: 12px; }
.akb-frag p { margin: 6px 0; font-size: 13px; line-height: 1.5; color: var(--crm-shell-ink); overflow-wrap: anywhere; }
.akb mark { background: color-mix(in srgb, #facc15 45%, transparent); color: inherit; padding: 0 1px; border-radius: 2px; }
.akb-scores { display: flex; gap: 16px; flex-wrap: wrap; margin: 0; font-size: 12px; }
.akb-scores div { display: flex; gap: 4px; }
.akb-scores dt { color: var(--crm-shell-muted); font-weight: 400; }
.akb-scores dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--crm-shell-ink); }
.akb-why { margin-top: 12px; font-size: 13px; color: var(--crm-shell-ink); }
.akb-why summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.akb-why.is-open { padding: 12px; border-radius: 10px; background: var(--crm-shell-soft); }
.akb-why h4 { font-size: 13.5px; margin: 0 0 6px; }
.akb-why-body p { margin: 4px 0; line-height: 1.5; }
.akb-why code { font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--crm-shell-soft); }
.akb-prompt-peek summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--crm-shell-ink); min-height: 32px; }
.akb-prompt-peek pre, .akb-preview, .akb-chunks pre, .akb-versions pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.5; background: var(--crm-shell-soft); color: var(--crm-shell-ink); padding: 12px; border-radius: 10px; max-height: 60vh; overflow: auto; margin: 6px 0 0; }
.akb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .akb-grid-2 { grid-template-columns: 1fr; } }
.akb-prompt-kind { padding: 12px 0; border-top: 1px solid var(--crm-shell-border); }
.akb-prompt-kind-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.akb-prompt-kind h3 { font-size: 14px; margin: 0; color: var(--crm-shell-ink); }
.akb-prompt-kind > p { margin: 4px 0 8px; }
.akb-prompt { border: 1px solid var(--crm-shell-border); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.akb-prompt summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 8px; color: var(--crm-shell-ink); }
.akb-prompt textarea { margin-top: 8px; }
.akb-prompt-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.akb-versions { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
/* overlays */
body.akb-overlay-open { overflow: hidden; }
.akb-backdrop { position: fixed; inset: 0; background: rgb(15 23 42 / 45%); z-index: 1050; }
.akb-modal, .akb-drawer { position: fixed; z-index: 1060; background: var(--crm-shell-surface); color: var(--crm-shell-ink); border: 1px solid var(--crm-shell-border); box-shadow: 0 24px 60px rgb(15 23 42 / 30%); display: flex; flex-direction: column; }
.akb-modal { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border-radius: 16px; }
.akb-modal-wide { width: min(880px, calc(100vw - 32px)); }
.akb-drawer { top: 0; right: 0; bottom: 0; width: min(560px, 100vw); padding: 0 18px 18px; overflow: auto; }
.akb-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 8px; }
.akb-drawer .akb-modal-head { padding: 16px 0 8px; position: sticky; top: 0; background: var(--crm-shell-surface); }
.akb-modal-head h2 { font-size: 16px; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.akb-close { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--crm-shell-muted); cursor: pointer; flex-shrink: 0; }
.akb-close:hover { background: var(--crm-shell-soft); color: var(--crm-shell-ink); }
.akb-modal-body { padding: 8px 18px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.akb-modal-body .form-label { margin-top: 8px; }
.akb-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--crm-shell-border); }
@media (max-width: 640px) { .akb-modal { top: auto; bottom: 0; left: 0; transform: none; width: 100vw; max-height: 92dvh; border-radius: 16px 16px 0 0; } }
.akb-steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0 18px 8px; font-size: 12.5px; color: var(--crm-shell-muted); }
.akb-steps li { display: flex; align-items: center; gap: 6px; flex: 1; }
.akb-steps li span { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; border: 1px solid var(--crm-shell-border); }
.akb-steps li.is-current { color: var(--crm-shell-ink); font-weight: 600; }
.akb-steps li.is-current span, .akb-steps li.is-done span { background: var(--crm-shell-green); border-color: var(--crm-shell-green); color: #fff; }
.akb-types { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 520px) { .akb-types { grid-template-columns: 1fr; } }
.akb-type { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--crm-shell-border); border-radius: 12px; cursor: pointer; min-height: 64px; }
.akb-type:has(input:checked) { border-color: var(--crm-shell-green); background: color-mix(in srgb, var(--crm-shell-green) 8%, transparent); }
.akb-type input { margin-top: 3px; }
.akb-type > i { font-size: 20px; color: var(--crm-shell-green); }
.akb-type span { display: flex; flex-direction: column; gap: 2px; }
.akb-type strong { font-size: 13.5px; }
.akb-type small { font-size: 12px; color: var(--crm-shell-muted); line-height: 1.4; }
.akb-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px; border: 2px dashed var(--crm-shell-border); border-radius: 12px; text-align: center; margin-top: 8px; transition: border-color .15s, background-color .15s; }
.akb-drop.is-over { border-color: var(--crm-shell-green); background: color-mix(in srgb, var(--crm-shell-green) 6%, transparent); }
.akb-drop > i { font-size: 28px; color: var(--crm-shell-muted); }
.akb-drop p { margin: 0; }
.akb-drop small { color: var(--crm-shell-muted); font-size: 12px; }
.akb-file-btn { cursor: pointer; }
.akb-file-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.akb-file-list li { display: flex; align-items: center; gap: 8px; }
.akb-file-list li span { overflow-wrap: anywhere; min-width: 0; }
.akb-file-list small { color: var(--crm-shell-muted); }
.akb-indexing { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.akb-chunks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.akb-chunk-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.akb-chunk-head span { color: var(--crm-shell-muted); }
.akb-chunk-head small { margin-left: auto; color: var(--crm-shell-muted); }
.akb-search { top: 12vh; transform: translateX(-50%); }
@media (max-width: 640px) { .akb-search { top: 0; bottom: auto; left: 0; transform: none; border-radius: 0 0 16px 16px; max-height: 100dvh; } }
.akb-search-input { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--crm-shell-border); }
.akb-search-input .form-input { border: 0; box-shadow: none; flex: 1; font-size: 16px; background: transparent; color: var(--crm-shell-ink); }
#akbSearchResults { padding: 8px; overflow: auto; }
#akbSearchResults > p { padding: 12px; margin: 0; }
.akb-search-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.akb-search-results [role="option"] { display: flex; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; font-size: 13px; }
.akb-search-results [role="option"]:hover, .akb-search-results [role="option"]:focus { background: var(--crm-shell-soft); }
.akb-search-results [role="option"] > i { color: var(--crm-shell-green); margin-top: 2px; }
.akb-search-results [role="option"] > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.akb-search-results small { color: var(--crm-shell-muted); }
.akb-search-results span span { overflow-wrap: anywhere; color: var(--crm-shell-ink); }

/* ── Live Chat Widget builder v2 (plan 2026-10, stage 4.9) ── */
.lcw2 { display: flex; flex-direction: column; gap: 16px; }
.lcw2-bar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.lcw2-pick { min-width: 200px; flex: 0 1 280px; }
.lcw2-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lcw2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .lcw2-grid { grid-template-columns: 1fr; } }
.lcw2-editor, .lcw2-preview { border: 1px solid var(--crm-shell-border); border-radius: 14px; background: var(--crm-shell-surface); padding: 14px; min-width: 0; }
.lcw2-panel { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.lcw2-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lcw2 .form-label { margin: 0; }
.lcw2-color { display: flex; gap: 8px; }
.lcw2-color input[type=color] { width: 48px; height: 40px; padding: 2px; border: 1px solid var(--crm-shell-border); border-radius: 8px; background: transparent; }
.lcw2-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 640px) { .lcw2-fields { grid-template-columns: 1fr; } }
.lcw2-preview { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; }
.lcw2-preview-bar { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lcw2-seg { display: inline-flex; border: 1px solid var(--crm-shell-border); border-radius: 10px; overflow: hidden; }
.lcw2-seg-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; background: transparent; color: var(--crm-shell-muted); font-size: 13px; cursor: pointer; }
.lcw2-seg-btn + .lcw2-seg-btn { border-left: 1px solid var(--crm-shell-border); }
.lcw2-seg-btn.is-active { background: var(--crm-shell-soft); color: var(--crm-shell-ink); font-weight: 600; }
.lcw2-seg-btn:focus-visible { outline: 2px solid var(--crm-shell-green); outline-offset: -2px; }
.lcw2-stage { display: flex; justify-content: center; background: var(--crm-shell-soft); border-radius: 12px; padding: 10px; }
.lcw2-stage iframe { border: 0; border-radius: 10px; background: #f6f7fb; width: 100%; height: 640px; transition: width .2s ease-out; }
.lcw2-stage.is-mobile iframe { width: 390px; max-width: 100%; height: 700px; border-radius: 22px; box-shadow: 0 0 0 6px #1f2937; }
@media (prefers-reduced-motion: reduce) { .lcw2-stage iframe { transition: none; } }
.lcw2-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lcw2-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 999px; background: var(--crm-shell-soft); color: var(--crm-shell-ink); font-size: 13px; overflow-wrap: anywhere; }
.lcw2-chip button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--crm-shell-muted); cursor: pointer; }
.lcw2-chip button:hover { background: var(--crm-shell-border); color: var(--crm-shell-ink); }
.lcw2-add { display: flex; gap: 8px; margin-top: 6px; }
.lcw2-add .form-input { flex: 1; }
.lcw2-guides { display: flex; flex-direction: column; gap: 6px; }
.lcw2-guides details { border: 1px solid var(--crm-shell-border); border-radius: 10px; padding: 0 12px; }
.lcw2-guides summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 600; font-size: 13.5px; color: var(--crm-shell-ink); }
.lcw2-guides p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--crm-shell-ink); }
.lcw2-guides code { font-size: 12px; overflow-wrap: anywhere; }
.lcw2-installs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lcw2-installs li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--crm-shell-border); border-radius: 10px; font-size: 13px; color: var(--crm-shell-ink); }
.lcw2-installs small { color: var(--crm-shell-muted); flex-basis: 100%; }
.lcw2 .lcw-embed { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Sales Pipeline reporting scope: CRM records stay distinct from marketing attribution. */
.crm-analytics-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: stretch;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--crm-shell-border);
  border-radius: 12px;
  background: var(--crm-shell-surface);
}
.crm-analytics-context-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 0 12px;
  border-left: 1px solid var(--crm-shell-border);
}
.crm-analytics-context-item:first-child { padding-left: 0; border-left: 0; }
.crm-analytics-context-label {
  color: var(--crm-shell-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.crm-analytics-context-item strong { color: var(--crm-shell-ink); font-size: 13px; overflow-wrap: anywhere; }
.crm-analytics-context-item small, .crm-analytics-context-owner {
  color: var(--crm-shell-muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.crm-analytics-context-status { display: inline-flex; align-items: center; gap: 5px; }
.crm-analytics-context-status.is-ready { color: var(--crm-shell-green-dark); }
.crm-analytics-context-status.is-warning { color: var(--warning-color); }
.crm-analytics-context-actions {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
.crm-analytics-context-actions .btn { min-height: 40px; white-space: normal; }
@media (max-width: 980px) {
  .crm-analytics-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-analytics-context-actions { grid-column: 1 / -1; }
  .crm-analytics-context-item:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .crm-analytics-context { grid-template-columns: 1fr; gap: 10px; }
  .crm-analytics-context-item { padding: 10px 0 0; border-top: 1px solid var(--crm-shell-border); border-left: 0; }
  .crm-analytics-context-item:first-child { padding-top: 0; border-top: 0; }
  .crm-analytics-context-actions { grid-column: auto; flex-direction: column; align-items: stretch; }
  .crm-analytics-context-actions .btn { width: 100%; }
}

/* Chat widget builder — first-run setup and starting designs (any website) */
.lcw2-setup { display: flex; flex-direction: column; gap: 12px; }
.lcw2-setup h2 { font-size: 18px; margin: 0; color: var(--crm-shell-ink); }
.lcw2-setup-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.lcw2-setup-steps > li { display: flex; flex-direction: column; gap: 8px; }
.lcw2-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .lcw2-presets { grid-template-columns: 1fr; } }
.lcw2-preset { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--crm-shell-border); border-radius: 12px; cursor: pointer; min-height: 64px; color: var(--crm-shell-ink); }
.lcw2-preset:focus-within { outline: 2px solid var(--crm-shell-green); outline-offset: 2px; }
.lcw2-preset.is-active { border-color: var(--crm-shell-green); background: color-mix(in srgb, var(--crm-shell-green) 8%, transparent); }
.lcw2-preset input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lcw2-swatch { width: 28px; height: 28px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 60%); }
.lcw2-preset span:last-child { display: flex; flex-direction: column; gap: 2px; }
.lcw2-preset strong { font-size: 13.5px; }
.lcw2-preset small { font-size: 12px; color: var(--crm-shell-muted); line-height: 1.4; }
.lcw2-preset-row { padding-bottom: 12px; border-bottom: 1px solid var(--crm-shell-border); }

/* In-app guide tables (Documentation › Chat widget) */
.docs-table-wrap { overflow-x: auto; margin: 12px 0 18px; }
.docs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.docs-table th, .docs-table td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--crm-shell-border); color: var(--crm-shell-ink); line-height: 1.5; }
.docs-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--crm-shell-muted); font-weight: 600; }
.docs-table td:first-child { font-weight: 600; min-width: 160px; }
.docs-checklist { display: flex; flex-direction: column; gap: 10px; padding-left: 22px; line-height: 1.55; }
.docs-reader p .btn + .btn { margin-left: 6px; }

/* ── AI Copilot (ai-copilot.js) — pop-up assistant on every CRM screen ── */
.aic-fab { position: fixed; right: 24px; bottom: 24px; z-index: 1040; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #6d5efc, #20c764); color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgb(45 55 75 / 28%); transition: transform .15s ease-out; }
.aic-fab:hover { transform: scale(1.06); }
.aic-fab:focus-visible { outline: 3px solid var(--crm-shell-green); outline-offset: 3px; }
body.aic-open .aic-fab { transform: scale(.92); }
.aic-panel { position: fixed; right: 24px; bottom: 88px; z-index: 1041; width: 400px; max-width: calc(100vw - 32px); height: min(620px, calc(100dvh - 120px));
  display: flex; flex-direction: column; background: var(--crm-shell-surface); color: var(--crm-shell-ink); border: 1px solid var(--crm-shell-border);
  border-radius: 16px; box-shadow: 0 24px 60px rgb(15 23 42 / 28%); overflow: hidden; }
.aic-panel[hidden] { display: none; }
.aic-head { display: flex; align-items: center; gap: 6px; padding: 12px 10px 12px 14px; border-bottom: 1px solid var(--crm-shell-border); }
.aic-title { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.aic-title > i { font-size: 20px; color: #6d5efc; }
.aic-title strong { display: block; font-size: 14.5px; }
.aic-title span { display: block; font-size: 12px; color: var(--crm-shell-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aic-icon { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--crm-shell-muted); cursor: pointer; }
.aic-icon:hover { background: var(--crm-shell-soft); color: var(--crm-shell-ink); }
.aic-ctx { padding: 6px 14px; font-size: 12px; color: var(--crm-shell-muted); background: var(--crm-shell-soft); }
.aic-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.aic-empty { text-align: center; color: var(--crm-shell-muted); font-size: 13.5px; line-height: 1.5; padding: 20px 8px; }
.aic-empty > i { font-size: 30px; color: #6d5efc; }
.aic-empty p { margin: 6px 0; }
.aic-msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.aic-msg p { margin: 0; } .aic-msg p + p, .aic-msg ul { margin-top: 6px; } .aic-msg ul { padding-left: 18px; margin-bottom: 0; }
.aic-msg code { font-size: 12.5px; background: rgb(0 0 0 / 6%); padding: 0 4px; border-radius: 4px; }
.aic-msg.is-user { align-self: flex-end; background: #6d5efc; color: #fff; border-bottom-right-radius: 5px; white-space: pre-wrap; }
.aic-msg.is-ai { align-self: flex-start; background: var(--crm-shell-soft); border-bottom-left-radius: 5px; }
.aic-msg.is-error { background: #fee2e2; color: #991b1b; }
.aic-src { margin-top: 6px; font-size: 11.5px; color: var(--crm-shell-muted); }
.aic-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding: 8px; border: 1px dashed var(--crm-shell-border); border-radius: 10px; background: var(--crm-shell-surface); }
.aic-act span { flex: 1 1 100%; font-size: 13px; font-weight: 600; }
.aic-confirm, .aic-skip { min-height: 32px; border-radius: 8px; padding: 0 12px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.aic-confirm { background: var(--crm-shell-green); color: #fff; }
.aic-skip { background: transparent; color: var(--crm-shell-muted); border-color: var(--crm-shell-border); }
.aic-done { display: block; margin-top: 8px; font-size: 12.5px; color: var(--crm-shell-muted); }
.aic-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.aic-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--crm-shell-muted); animation: aic-b 1.2s infinite ease-in-out; }
.aic-typing span:nth-child(2) { animation-delay: .15s; } .aic-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes aic-b { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aic-typing span { animation: none; } .aic-fab { transition: none; } }
.aic-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.aic-suggest[hidden] { display: none; }
.aic-chip { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--crm-shell-border); background: var(--crm-shell-surface); color: var(--crm-shell-ink); font-size: 13px; cursor: pointer; }
.aic-chip:hover { background: var(--crm-shell-soft); }
.aic-form { position: relative; display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--crm-shell-border); }
.aic-form textarea { flex: 1; resize: none; min-height: 42px; max-height: 140px; border: 1px solid var(--crm-shell-border); border-radius: 12px; padding: 10px 12px;
  font: inherit; font-size: 15px; background: var(--crm-shell-soft); color: var(--crm-shell-ink); }
.aic-send { width: 42px; height: 42px; flex: none; border: 0; border-radius: 12px; background: #6d5efc; color: #fff; cursor: pointer; }
.aic-send:disabled { opacity: .5; cursor: default; }
.aic-cmds { position: absolute; left: 10px; right: 62px; bottom: 58px; background: var(--crm-shell-surface); border: 1px solid var(--crm-shell-border); border-radius: 10px; box-shadow: var(--crm-shell-shadow); padding: 4px; }
.aic-cmds[hidden] { display: none; }
.aic-cmds button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 9px; border-radius: 7px; font-size: 13px; color: var(--crm-shell-ink); cursor: pointer; }
.aic-cmds button:hover { background: var(--crm-shell-soft); }
.aic-foot { margin: 0; padding: 0 12px 10px; font-size: 11px; color: var(--crm-shell-muted); }
.aic button:focus-visible, .aic textarea:focus-visible { outline: 2px solid var(--crm-shell-green); outline-offset: 2px; }
html[data-theme='dark'] .aic-msg.is-error { background: #7f1d1d; color: #fee2e2; }
html[data-theme='dark'] .aic-msg code { background: rgb(255 255 255 / 10%); }
@media (max-width: 768px) {
  .aic-fab { right: 16px; bottom: calc(var(--crm-bottom-nav-h, 64px) + 16px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
  .aic-panel { inset: 0; width: 100%; max-width: none; height: 100dvh; border-radius: 0; border: 0; padding-bottom: env(safe-area-inset-bottom); z-index: 1060; }
  body.aic-open { overflow: hidden; }
}