/* Salesgee CRM - Reset WP styles for our app */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

#sgcrm-root {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: #f8fafc;
}

#sgcrm-root *, #sgcrm-root *::before, #sgcrm-root *::after {
  font-family: inherit;
}

/* Hide WP chrome entirely */
#wpadminbar,
#adminmenuwrap,
#adminmenuback,
#adminmenushadow {
  display: none !important;
}

html.wp-toolbar { padding-top: 0 !important; }
body.admin-bar { margin-top: 0 !important; padding-top: 0 !important; }

*, *::before, *::after { box-sizing: border-box; }

/* ── GLOBAL MOBILE FIXES ── */
@media (max-width: 768px) {
  /* Prevent iOS zoom on input focus */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Kill ALL horizontal scroll everywhere */
  #sgcrm-root,
  #sgcrm-root * {
    max-width: 100%;
  }

  /* Tables scroll horizontally within their container only */
  table {
    max-width: 100%;
    table-layout: fixed;
    word-break: break-word;
  }

  /* Flex rows that could overflow */
  .sgcrm-flex-row {
    flex-wrap: wrap;
  }

  /* iOS safe area bottom padding for bottom nav */
  .sgcrm-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* Bottom padding only needs to clear the fixed mobile nav. */
  .sgcrm-page-scroll {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* Keep selected scroll areas scrollable while hiding the visual scrollbar. */
.sgcrm-hide-scrollbar {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.sgcrm-hide-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Scrollbars */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }



/* Lock page scrolling behind full-screen app overlays to prevent mobile/tablet flicker */
html, body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  height: 100%;
}

#sgcrm-root {
  overscroll-behavior: none;
}

/* Salesgee dark mode toggle from the user menu.
   Dark mode is intentionally closer to the supplied premium dashboard sample:
   deep navy shell, softer elevated cards, readable text, and clear borders. */
.sgcrm-dark-mode{
  --sgd-bg:#0b1220;
  --sgd-surface:#0f1728;
  --sgd-surface-2:#121c31;
  --sgd-surface-3:#162238;
  --sgd-card:#101a2d;
  --sgd-card-2:#111b30;
  --sgd-border:#2d3a4f;
  --sgd-border-strong:#46546b;
  --sgd-text:#f8fafc;
  --sgd-muted:#c7d2e2;
  --sgd-subtle:#93a2ba;
  --sgd-accent:#34d399;
  --sgd-accent-2:#22c55e;
  --sgd-danger:#f87171;
  --sgd-warning:#fbbf24;
  --sgd-shadow:none;
}
.sgcrm-dark-mode,
.sgcrm-dark-mode .sgcrm-page-scroll{
  background:var(--sgd-bg)!important;
  background-color:var(--sgd-bg)!important;
  color:var(--sgd-text)!important;
  color-scheme:dark;
}
.sgcrm-dark-mode *{scrollbar-color:#42506a var(--sgd-bg);}
.sgcrm-dark-mode ::selection{background:#22c55e;color:#05120d;}
.sgcrm-dark-mode a{color:#d8e2ef;}
.sgcrm-dark-mode p,
.sgcrm-dark-mode span,
.sgcrm-dark-mode small,
.sgcrm-dark-mode li,
.sgcrm-dark-mode td,
.sgcrm-dark-mode th{color:inherit;}
.sgcrm-dark-mode h1,
.sgcrm-dark-mode h2,
.sgcrm-dark-mode h3,
.sgcrm-dark-mode h4,
.sgcrm-dark-mode h5,
.sgcrm-dark-mode strong,
.sgcrm-dark-mode label{color:var(--sgd-text)!important;}

/* App shell / page backgrounds. */
.sgcrm-dark-mode [style*="background: rgb(248, 250, 252)"],
.sgcrm-dark-mode [style*="background:#f8fafc"],
.sgcrm-dark-mode [style*="background: #f8fafc"],
.sgcrm-dark-mode [style*="background: rgb(250, 251, 252)"],
.sgcrm-dark-mode [style*="background:#fafbfc"],
.sgcrm-dark-mode [style*="background: #fafbfc"],
.sgcrm-dark-mode [style*="background:#020617"],
.sgcrm-dark-mode [style*="background: #020617"],
.sgcrm-dark-mode [style*="background:#11151d"],
.sgcrm-dark-mode [style*="background: #11151d"]{
  background:var(--sgd-bg)!important;
  background-color:var(--sgd-bg)!important;
}

/* White / light panels become raised deep-navy surfaces instead of flat black. */
.sgcrm-dark-mode [style*="background: rgb(255, 255, 255)"],
.sgcrm-dark-mode [style*="background:#fff"],
.sgcrm-dark-mode [style*="background: #fff"],
.sgcrm-dark-mode [style*="background: white"],
.sgcrm-dark-mode [style*="background: rgb(255,255,255)"]{
  background:var(--sgd-surface)!important;
  background-color:var(--sgd-surface)!important;
  box-shadow:var(--sgd-shadow)!important;
}

/* Light tints/selected rows/empty states/soft panels. */
.sgcrm-dark-mode [style*="background: rgb(241, 245, 249)"],
.sgcrm-dark-mode [style*="background:#f1f5f9"],
.sgcrm-dark-mode [style*="background: #f1f5f9"],
.sgcrm-dark-mode [style*="background: rgb(240, 253, 250)"],
.sgcrm-dark-mode [style*="background:#f0fdfa"],
.sgcrm-dark-mode [style*="background: #f0fdfa"],
.sgcrm-dark-mode [style*="background: rgb(230, 244, 246)"],
.sgcrm-dark-mode [style*="background:#e6f4f6"],
.sgcrm-dark-mode [style*="background: #e6f4f6"],
.sgcrm-dark-mode [style*="background: rgb(239, 246, 255)"],
.sgcrm-dark-mode [style*="background:#eff6ff"],
.sgcrm-dark-mode [style*="background: #eff6ff"],
.sgcrm-dark-mode [style*="background: rgb(248, 250, 252)"]{
  background:var(--sgd-surface-2)!important;
  background-color:var(--sgd-surface-2)!important;
}

/* Sidebar/footer rows / stronger content blocks. */
.sgcrm-dark-mode [style*="background: rgb(226, 232, 240)"],
.sgcrm-dark-mode [style*="background:#e2e8f0"],
.sgcrm-dark-mode [style*="background: #e2e8f0"],
.sgcrm-dark-mode [style*="background: rgb(203, 213, 225)"],
.sgcrm-dark-mode [style*="background:#cbd5e1"],
.sgcrm-dark-mode [style*="background: #cbd5e1"]{
  background:var(--sgd-surface-3)!important;
  background-color:var(--sgd-surface-3)!important;
}

/* Keep Salesgee accent readable on dark surfaces. */
.sgcrm-dark-mode [style*="color:#007e8e"],
.sgcrm-dark-mode [style*="color: #007e8e"],
.sgcrm-dark-mode [style*="color: rgb(0, 126, 142)"]{color:var(--sgd-accent)!important;}
.sgcrm-dark-mode [style*="background:#007e8e"],
.sgcrm-dark-mode [style*="background: #007e8e"],
.sgcrm-dark-mode [style*="background: rgb(0, 126, 142)"]{
  background:linear-gradient(180deg,#34d399,#2ac58d)!important;
  background-color:#34d399!important;
  color:#07110b!important;
  border-color:#34d399!important;
}

/* Text tones hard-coded inline in React. */
.sgcrm-dark-mode [style*="color: rgb(15, 23, 42)"],
.sgcrm-dark-mode [style*="color:#0f172a"],
.sgcrm-dark-mode [style*="color: #0f172a"],
.sgcrm-dark-mode [style*="color: rgb(17, 24, 39)"],
.sgcrm-dark-mode [style*="color:#111827"],
.sgcrm-dark-mode [style*="color: #111827"],
.sgcrm-dark-mode [style*="color: rgb(30, 41, 59)"],
.sgcrm-dark-mode [style*="color:#1e293b"],
.sgcrm-dark-mode [style*="color: #1e293b"],
.sgcrm-dark-mode [style*="color: rgb(31, 41, 55)"],
.sgcrm-dark-mode [style*="color:#1f2937"],
.sgcrm-dark-mode [style*="color: #1f2937"]{color:var(--sgd-text)!important;}
.sgcrm-dark-mode [style*="color: rgb(51, 65, 85)"],
.sgcrm-dark-mode [style*="color:#334155"],
.sgcrm-dark-mode [style*="color: #334155"],
.sgcrm-dark-mode [style*="color: rgb(71, 85, 105)"],
.sgcrm-dark-mode [style*="color:#475569"],
.sgcrm-dark-mode [style*="color: #475569"],
.sgcrm-dark-mode [style*="color: rgb(55, 65, 81)"],
.sgcrm-dark-mode [style*="color:#374151"],
.sgcrm-dark-mode [style*="color: #374151"]{color:var(--sgd-muted)!important;}
.sgcrm-dark-mode [style*="color: rgb(100, 116, 139)"],
.sgcrm-dark-mode [style*="color:#64748b"],
.sgcrm-dark-mode [style*="color: #64748b"],
.sgcrm-dark-mode [style*="color: rgb(148, 163, 184)"],
.sgcrm-dark-mode [style*="color:#94a3b8"],
.sgcrm-dark-mode [style*="color: #94a3b8"],
.sgcrm-dark-mode [style*="color: rgb(107, 114, 128)"],
.sgcrm-dark-mode [style*="color:#6b7280"],
.sgcrm-dark-mode [style*="color: #6b7280"]{color:var(--sgd-subtle)!important;}

/* Status / semantic soft fills stay visible. */
.sgcrm-dark-mode [style*="background:#ecfdf5"],
.sgcrm-dark-mode [style*="background: #ecfdf5"],
.sgcrm-dark-mode [style*="background: rgb(236, 253, 245)"]{background:rgba(34,197,94,.14)!important;background-color:rgba(34,197,94,.14)!important;}
.sgcrm-dark-mode [style*="background:#fef3c7"],
.sgcrm-dark-mode [style*="background: #fef3c7"],
.sgcrm-dark-mode [style*="background: rgb(254, 243, 199)"]{background:rgba(251,191,36,.14)!important;background-color:rgba(251,191,36,.14)!important;}
.sgcrm-dark-mode [style*="background:#fee2e2"],
.sgcrm-dark-mode [style*="background: #fee2e2"],
.sgcrm-dark-mode [style*="background: rgb(254, 226, 226)"]{background:rgba(248,113,113,.14)!important;background-color:rgba(248,113,113,.14)!important;}

/* Inputs and controls. */
.sgcrm-dark-mode input,
.sgcrm-dark-mode select,
.sgcrm-dark-mode textarea{
  background:var(--sgd-card)!important;
  color:var(--sgd-text)!important;
  border:1px solid var(--sgd-border)!important;
  caret-color:var(--sgd-accent);
}
.sgcrm-dark-mode input::placeholder,
.sgcrm-dark-mode textarea::placeholder{color:var(--sgd-subtle)!important;}
.sgcrm-dark-mode input:focus,
.sgcrm-dark-mode select:focus,
.sgcrm-dark-mode textarea:focus{
  outline:none!important;
  border-color:#4b5b74!important;
  box-shadow:0 0 0 3px rgba(52,211,153,.12)!important;
}
.sgcrm-dark-mode button{
  border-color:var(--sgd-border)!important;
}
.sgcrm-dark-mode button[style*="background: rgb(248, 250, 252)"],
.sgcrm-dark-mode button[style*="background:#f8fafc"],
.sgcrm-dark-mode button[style*="background: #f8fafc"],
.sgcrm-dark-mode button[style*="background: rgb(255, 255, 255)"],
.sgcrm-dark-mode button[style*="background:#fff"],
.sgcrm-dark-mode button[style*="background: #fff"]{
  background:var(--sgd-surface-2)!important;
  background-color:var(--sgd-surface-2)!important;
  color:var(--sgd-text)!important;
}

/* Borders/dividers. */
.sgcrm-dark-mode [style*="border: 1px solid rgb(226, 232, 240)"],
.sgcrm-dark-mode [style*="border:1px solid #e2e8f0"],
.sgcrm-dark-mode [style*="border: 1px solid #e2e8f0"],
.sgcrm-dark-mode [style*="border:1px solid rgb(203, 213, 225)"],
.sgcrm-dark-mode [style*="border: 1px solid rgb(203, 213, 225)"],
.sgcrm-dark-mode [style*="border:1px solid #cbd5e1"],
.sgcrm-dark-mode [style*="border: 1px solid #cbd5e1"],
.sgcrm-dark-mode [style*="border-bottom: 1px solid rgb(226, 232, 240)"],
.sgcrm-dark-mode [style*="border-bottom:1px solid #e2e8f0"],
.sgcrm-dark-mode [style*="border-bottom: 1px solid #e2e8f0"],
.sgcrm-dark-mode [style*="border-top: 1px solid rgb(226, 232, 240)"],
.sgcrm-dark-mode [style*="border-top:1px solid #e2e8f0"],
.sgcrm-dark-mode [style*="border-top: 1px solid #e2e8f0"],
.sgcrm-dark-mode [style*="border-left: 1px solid rgb(226, 232, 240)"],
.sgcrm-dark-mode [style*="border-right: 1px solid rgb(226, 232, 240)"]{
  border-color:var(--sgd-border)!important;
}
.sgcrm-dark-mode [style*="box-shadow"]{box-shadow:var(--sgd-shadow)!important;}

/* Premium KPI-card style: visible outline like the reference screenshot. */
.sgcrm-dark-mode [style*="border-radius:18"],
.sgcrm-dark-mode [style*="border-radius: 18"],
.sgcrm-dark-mode [style*="borderRadius:18"],
.sgcrm-dark-mode [style*="border-radius:16"],
.sgcrm-dark-mode [style*="border-radius: 16"],
.sgcrm-dark-mode [style*="border-radius:14"],
.sgcrm-dark-mode [style*="border-radius: 14"]{
  border-color:var(--sgd-border-strong)!important;
}

/* Common inline SVG/icon colors. */
.sgcrm-dark-mode svg[stroke="#334155"],
.sgcrm-dark-mode svg[stroke="#475569"]{stroke:#d8e2ef!important;}
.sgcrm-dark-mode svg[fill="#334155"],
.sgcrm-dark-mode svg[fill="#475569"]{fill:#d8e2ef!important;}
.sgcrm-dark-mode .sgcrm-bottom-nav{background:var(--sgd-surface)!important;border-top:1px solid var(--sgd-border)!important;}

/* Dark-mode patch for mobile KPI/stat cards and dashboard warning panels.
   These components use inline pastel backgrounds (#fef3e2, #f5f3ff,
   #fef9f0, etc.). Earlier dark-mode rules changed the text to white but
   left those pastel card backgrounds intact, making the values look blank
   on mobile. Force those pastel cards into dark elevated surfaces while
   keeping their semantic accent colors readable. */
.sgcrm-dark-mode [style*="background:#fef3e2"],
.sgcrm-dark-mode [style*="background: #fef3e2"],
.sgcrm-dark-mode [style*="background:#f5f3ff"],
.sgcrm-dark-mode [style*="background: #f5f3ff"],
.sgcrm-dark-mode [style*="background:#fef9f0"],
.sgcrm-dark-mode [style*="background: #fef9f0"],
.sgcrm-dark-mode [style*="background:#fff7ed"],
.sgcrm-dark-mode [style*="background: #fff7ed"],
.sgcrm-dark-mode [style*="background:#fef2f2"],
.sgcrm-dark-mode [style*="background: #fef2f2"],
.sgcrm-dark-mode [style*="background:#fffbeb"],
.sgcrm-dark-mode [style*="background: #fffbeb"]{
  background:var(--sgd-surface-2)!important;
  background-color:var(--sgd-surface-2)!important;
  border-color:var(--sgd-border-strong)!important;
}

.sgcrm-dark-mode [style*="background:#fef3e2"] [style*="color:#0f172a"],
.sgcrm-dark-mode [style*="background: #fef3e2"] [style*="color:#0f172a"],
.sgcrm-dark-mode [style*="background:#f5f3ff"] [style*="color:#0f172a"],
.sgcrm-dark-mode [style*="background: #f5f3ff"] [style*="color:#0f172a"],
.sgcrm-dark-mode [style*="background:#fef9f0"] [style*="color:#0f172a"],
.sgcrm-dark-mode [style*="background: #fef9f0"] [style*="color:#0f172a"]{
  color:var(--sgd-text)!important;
}

.sgcrm-dark-mode [style*="background:rgba(255,255,255,.9)"],
.sgcrm-dark-mode [style*="background: rgba(255,255,255,.9)"]{
  background:rgba(255,255,255,.10)!important;
  background-color:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.12)!important;
}

.sgcrm-dark-mode [style*="borderBottom:`1px solid #f1f5f9`"],
.sgcrm-dark-mode [style*="border-bottom: 1px solid #f1f5f9"],
.sgcrm-dark-mode [style*="borderBottom:1px solid #f1f5f9"]{
  border-color:var(--sgd-border)!important;
}

.sgcrm-dark-mode [style*="color:#b91c1c"],
.sgcrm-dark-mode [style*="color: #b91c1c"]{color:#fca5a5!important;}
.sgcrm-dark-mode [style*="color:#d97706"],
.sgcrm-dark-mode [style*="color: #d97706"]{color:#fbbf24!important;}
.sgcrm-dark-mode [style*="color:#9333ea"],
.sgcrm-dark-mode [style*="color: #9333ea"]{color:#c084fc!important;}
.sgcrm-dark-mode [style*="color:#ea580c"],
.sgcrm-dark-mode [style*="color: #ea580c"]{color:#fb923c!important;}



/* v1.0.221: explicit rgb fallbacks for mobile stat cards and low-stock panels.
   Some browsers serialize React inline hex backgrounds as rgb() in the style attribute,
   so these catch the exact problem cards even if the source hex selectors miss. */
.sgcrm-dark-mode [style*="background: rgb(254, 243, 226)"],
.sgcrm-dark-mode [style*="background: rgb(245, 243, 255)"],
.sgcrm-dark-mode [style*="background: rgb(254, 249, 240)"],
.sgcrm-dark-mode [style*="background: rgb(255, 251, 235)"],
.sgcrm-dark-mode [style*="background: rgb(255, 247, 237)"],
.sgcrm-dark-mode [style*="background: rgb(250, 245, 255)"],
.sgcrm-dark-mode [style*="background: rgb(254, 242, 242)"]{
  background:#111b30!important;
  background-color:#111b30!important;
  border-color:#46546b!important;
}
.sgcrm-dark-mode [style*="background: rgb(255, 255, 255, 0.9)"],
.sgcrm-dark-mode [style*="background: rgba(255, 255, 255, 0.9)"]{
  background:rgba(255,255,255,.10)!important;
  background-color:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.12)!important;
}

/* Salesgee motion system - smooth Apple-like UI polish.
   This is deliberately mounted on the page content shell with a React key
   so navigation actually replays the transition. Fixed modals/forms are not
   animated, so create/edit forms keep opening and behaving exactly as before. */
@keyframes sgcrm-page-enter {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes sgcrm-page-child-enter {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes sgcrm-soft-pop {
  0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

#sgcrm-root {
  --sgcrm-ease-apple: cubic-bezier(.22, 1, .36, 1);
  --sgcrm-ease-soft: cubic-bezier(.2, .8, .2, 1);
}

/* Real page transition. The keyed wrapper is remounted on page/subpage/business
   navigation, so the motion is visible instead of only running on first load. */
#sgcrm-root .sgcrm-page-motion-shell {
  min-height: 100%;
  animation: sgcrm-page-enter .32s var(--sgcrm-ease-apple) both;
}

/* Stagger only the first-level page sections. This gives the Apple-like flow
   without changing modal/form internals or causing fields to jump around. */
#sgcrm-root .sgcrm-page-motion-shell > *:not([style*="position: fixed"]):not([style*="position:fixed"]) {
  animation: sgcrm-page-child-enter .28s var(--sgcrm-ease-apple) both;
}
#sgcrm-root .sgcrm-page-motion-shell > *:nth-child(1) { animation-delay: .03s; }
#sgcrm-root .sgcrm-page-motion-shell > *:nth-child(2) { animation-delay: .075s; }
#sgcrm-root .sgcrm-page-motion-shell > *:nth-child(3) { animation-delay: .115s; }
#sgcrm-root .sgcrm-page-motion-shell > *:nth-child(4) { animation-delay: .15s; }
#sgcrm-root .sgcrm-page-motion-shell > *:nth-child(5) { animation-delay: .18s; }

/* Card/list surfaces get interaction polish and optional first-render pop.
   Kept broad because most CRM screens are inline-style React surfaces. */
#sgcrm-root .sgcrm-page-motion-shell [style*="border-radius: 18"],
#sgcrm-root .sgcrm-page-motion-shell [style*="border-radius:18"],
#sgcrm-root .sgcrm-page-motion-shell [style*="border-radius: 16"],
#sgcrm-root .sgcrm-page-motion-shell [style*="border-radius:16"],
#sgcrm-root .sgcrm-page-motion-shell [style*="border-radius: 14"],
#sgcrm-root .sgcrm-page-motion-shell [style*="border-radius:14"],
#sgcrm-root .sgcrm-page-motion-shell [style*="box-shadow"] {
  transition:
    transform .28s var(--sgcrm-ease-apple),
    box-shadow .28s var(--sgcrm-ease-apple),
    border-color .22s var(--sgcrm-ease-soft),
    background-color .22s var(--sgcrm-ease-soft),
    color .22s var(--sgcrm-ease-soft),
    opacity .22s var(--sgcrm-ease-soft);
}

@media (hover: hover) and (pointer: fine) {
  #sgcrm-root .sgcrm-page-motion-shell [style*="border-radius: 18"]:hover,
  #sgcrm-root .sgcrm-page-motion-shell [style*="border-radius:18"]:hover,
  #sgcrm-root .sgcrm-page-motion-shell [style*="border-radius: 16"]:hover,
  #sgcrm-root .sgcrm-page-motion-shell [style*="border-radius:16"]:hover {
    box-shadow: none;
  }
}

/* Buttons/menu controls feel responsive without changing layout. */
#sgcrm-root button,
#sgcrm-root a,
#sgcrm-root [role="button"] {
  transition:
    transform .18s var(--sgcrm-ease-apple),
    background-color .22s var(--sgcrm-ease-soft),
    border-color .22s var(--sgcrm-ease-soft),
    color .22s var(--sgcrm-ease-soft),
    opacity .22s var(--sgcrm-ease-soft),
    box-shadow .22s var(--sgcrm-ease-soft);
}
#sgcrm-root button:active,
#sgcrm-root [role="button"]:active {
  opacity:.92;
}

/* Inputs should not animate into view, but focus should feel smooth. */
#sgcrm-root input,
#sgcrm-root select,
#sgcrm-root textarea {
  transition:
    border-color .2s var(--sgcrm-ease-soft),
    box-shadow .2s var(--sgcrm-ease-soft),
    background-color .2s var(--sgcrm-ease-soft),
    color .2s var(--sgcrm-ease-soft);
}

/* Preserve form/modal behavior exactly. Fixed overlays, form tags, and form
   descendants do not receive page/card entrance animations. */
#sgcrm-root form,
#sgcrm-root form *,
#sgcrm-root [style*="position: fixed"],
#sgcrm-root [style*="position: fixed"] *,
#sgcrm-root [style*="position:fixed"],
#sgcrm-root [style*="position:fixed"] * {
  animation-name: none !important;
}
#sgcrm-root [style*="position: fixed"] button:active,
#sgcrm-root [style*="position:fixed"] button:active {
  transform: none !important;
}

/* Keep the startup Salesgee bag/logo pulse alive. The modal-safety rules below
   intentionally suppress animations inside fixed overlays, but the splash
   loader is a fixed full-screen shell too. Re-enable only this logo so the
   initial loading state keeps its previous breathing/pulse feedback without
   reintroducing modal animation regressions. */
#sgcrm-root #sgcrm-loader img,
#sgcrm-root .sgcrm-splash-logo {
  animation-name: sgcrm-logo-pulse !important;
  animation-duration: 1.2s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  transform-origin: center center !important;
  will-change: transform, opacity;
}


/* Important: never transform a parent that can contain fixed-position modals.
   CSS transforms create a new containing block and make popups appear scattered.
   Keep route animation opacity-based so add/edit forms stay centered. */
#sgcrm-root .sgcrm-page-motion-shell,
#sgcrm-root .sgcrm-page-motion-shell > * {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #sgcrm-root,
  #sgcrm-root * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Modal portal safety: every add/edit popup is mounted at #sgcrm-root level,
   outside the animated page shell. This keeps overlays above the header/sidebar
   and prevents page transition stacking contexts from clipping or offsetting forms. */
#sgcrm-root > .sgcrm-modal-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  isolation:isolate;
}
#sgcrm-root > .sgcrm-modal-overlay,
#sgcrm-root > .sgcrm-modal-overlay *{
  animation:none!important;
}
#sgcrm-root > .sgcrm-modal-overlay .sgcrm-modal-box{
  transform:none!important;
}
@media (max-width: 768px){
  #sgcrm-root > .sgcrm-modal-overlay{
    top:0!important;
    padding-top:env(safe-area-inset-top,0px)!important;
  }
}


/* SalesGee 3.1.97: flatten page containers and keep the sidebar collapse control icon-only. */
#sgcrm-root .sgcrm-page-motion-shell div[style*="box-shadow"]:not([style*="position: fixed"]):not([style*="position:fixed"]),
#sgcrm-root .sgcrm-page-motion-shell section[style*="box-shadow"]:not([style*="position: fixed"]):not([style*="position:fixed"]),
#sgcrm-root .sgcrm-page-motion-shell article[style*="box-shadow"]:not([style*="position: fixed"]):not([style*="position:fixed"]) {
  box-shadow: none !important;
}

#sgcrm-root .sgcrm-page-motion-shell div[style*="box-shadow"]:not([style*="position: fixed"]):not([style*="position:fixed"]):hover,
#sgcrm-root .sgcrm-page-motion-shell section[style*="box-shadow"]:not([style*="position: fixed"]):not([style*="position:fixed"]):hover,
#sgcrm-root .sgcrm-page-motion-shell article[style*="box-shadow"]:not([style*="position: fixed"]):not([style*="position:fixed"]):hover {
  box-shadow: none !important;
}

#sgcrm-root [aria-label="Collapse sidebar"],
#sgcrm-root [aria-label="Expand sidebar"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Salesgee public demo CTA */
@keyframes sgcrmDemoCtaPulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,126,142,.38),0 14px 30px rgba(0,126,142,.28)}
  70%{transform:scale(1.035);box-shadow:0 0 0 13px rgba(0,126,142,0),0 18px 36px rgba(0,126,142,.34)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,126,142,0),0 14px 30px rgba(0,126,142,.28)}
}
.sgcrm-demo-cta{animation:sgcrmDemoCtaPulse 1.65s ease-in-out infinite;will-change:transform,box-shadow}
.sgcrm-demo-cta:hover{transform:translateY(-1px);filter:brightness(1.04)}
@media (prefers-reduced-motion:reduce){.sgcrm-demo-cta{animation:none}}