/* 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;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#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;
}

/* iOS/Safari dark-mode edge guard.
   Safari can expose 1px white seams around fixed 100vh shells during rubber-band
   scrolling, safe-area rendering, and GPU compositing. Keep the document,
   root, and overscan buffer black so iOS matches Android in dark mode. */
html.sgcrm-dark-mode,
body.sgcrm-dark-mode{
  background:#000!important;
  background-color:#000!important;
  margin:0!important;
  padding:0!important;
  min-height:100%!important;
  width:100%!important;
  overflow:hidden!important;
}
body.sgcrm-dark-mode::before{
  content:"";
  position:fixed;
  inset:-80px;
  background:#000;
  pointer-events:none;
  z-index:0;
}
#sgcrm-root.sgcrm-dark-mode{
  background:#000!important;
  background-color:#000!important;
  outline:2px solid #000;
  box-shadow:0 0 0 2px #000;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  isolation:isolate;
}
@supports (-webkit-touch-callout: none){
  html.sgcrm-dark-mode,
  body.sgcrm-dark-mode{
    background:#000!important;
    background-color:#000!important;
  }
  #sgcrm-root.sgcrm-dark-mode{
    inset:-1px!important;
    width:calc(100vw + 2px)!important;
    height:calc(var(--sgcrm-vh, 100dvh) + 2px)!important;
    min-height:calc(100dvh + 2px)!important;
    max-width:none!important;
    outline:3px solid #000!important;
    border:0!important;
  }
  #sgcrm-root.sgcrm-dark-mode > .sgcrm-modal-overlay{
    inset:-2px!important;
    background:rgba(0,0,0,.66)!important;
  }
  #sgcrm-root.sgcrm-dark-mode .sgcrm-page-scroll{
    background:#000!important;
    background-color:#000!important;
  }
}

/* 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:#000000;
  --sgd-surface:#05080d;
  --sgd-surface-2:#0a0f16;
  --sgd-surface-3:#111827;
  --sgd-card:#0a0f16;
  --sgd-card-2:#101722;
  --sgd-border:#1f2937;
  --sgd-border-strong:#2b3647;
  --sgd-text:#ffffff;
  --sgd-muted:#e5e7eb;
  --sgd-subtle:#b8c2d1;
  --sgd-accent:#5eead4;
  --sgd-accent-2:#2dd4bf;
  --sgd-danger:#f87171;
  --sgd-warning:#fbbf24;
  --sgd-shadow:0 18px 40px rgba(0,0,0,.42);
}
.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:#5eead4;color:#041012;}
.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,#7cefdc,#43dbc8)!important;
  background-color:#5eead4!important;
  color:#041012!important;
  border-color:#5eead4!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(94,234,212,.18)!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;
}

/* iOS serializes some inline light dividers as #eef2f7/#f1f5f9/rgb().
   Force those light lines dark to avoid white seams around cards and rows. */
.sgcrm-dark-mode [style*="#eef2f7"],
.sgcrm-dark-mode [style*="#f1f5f9"],
.sgcrm-dark-mode [style*="#dbe3ef"],
.sgcrm-dark-mode [style*="#e5e7eb"],
.sgcrm-dark-mode [style*="rgb(238, 242, 247)"],
.sgcrm-dark-mode [style*="rgb(241, 245, 249)"],
.sgcrm-dark-mode [style*="rgb(219, 227, 239)"],
.sgcrm-dark-mode [style*="rgba(226,232,240"],
.sgcrm-dark-mode [style*="rgba(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"],
.sgcrm-dark-mode svg[stroke="#0f172a"],
.sgcrm-dark-mode svg[stroke="#111827"]{stroke:#e5eef8!important;}
.sgcrm-dark-mode svg[fill="#334155"],
.sgcrm-dark-mode svg[fill="#475569"],
.sgcrm-dark-mode svg[fill="#0f172a"],
.sgcrm-dark-mode svg[fill="#111827"]{fill:#e5eef8!important;}
.sgcrm-dark-mode .sgcrm-bottom-nav{background:rgba(0,0,0,.92)!important;background-color:rgba(0,0,0,.92)!important;border-top:1px solid var(--sgd-border)!important;box-shadow:0 -14px 34px rgba(0,0,0,.55)!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,.96)"],
.sgcrm-dark-mode [style*="background:rgba(255,255,255,.96)"],
.sgcrm-dark-mode [style*="background: rgba(255, 255, 255, 0.96)"],
.sgcrm-dark-mode [style*="background: rgba(255,255,255,0.96)"],
.sgcrm-dark-mode [style*="background: rgb(255, 255, 255, 0.96)"]{
  background:rgba(0,0,0,.92)!important;
  background-color:rgba(0,0,0,.92)!important;
  border-color:var(--sgd-border)!important;
}
.sgcrm-dark-mode [style*="background:#f6f7fb"],
.sgcrm-dark-mode [style*="background: #f6f7fb"],
.sgcrm-dark-mode [style*="background: rgb(246, 247, 251)"]{
  background:var(--sgd-surface-2)!important;
  background-color:var(--sgd-surface-2)!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 3.1.201: sidebar/menu hover micro-interactions matching the Admin Console.
   Uses soft transitions, a 1px horizontal glide, and tiny icon scale for a smoother premium feel. */
#sgcrm-root .sgcrm-sidebar-nav-item,
#sgcrm-root .sgcrm-sidebar-subnav-item,
#sgcrm-root .sgcrm-sidebar-business-menu,
#sgcrm-root .sgcrm-sidebar-signout,
#sgcrm-root .sgcrm-bottom-nav-item {
  will-change: transform, background-color, box-shadow, color;
}
#sgcrm-root .sgcrm-sidebar-nav-icon svg,
#sgcrm-root .sgcrm-bottom-nav-item svg {
  transition: opacity .18s ease, transform .18s ease, stroke .18s ease, color .18s ease;
  transform-origin: center;
}
@media (hover: hover) and (pointer: fine) {
  #sgcrm-root .sgcrm-sidebar-nav-item:hover .sgcrm-sidebar-nav-icon svg,
  #sgcrm-root .sgcrm-bottom-nav-item:hover svg {
    opacity: 1;
    transform: scale(1.02);
  }
  #sgcrm-root .sgcrm-bottom-nav-item:hover {
    transform: translateY(-1px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #sgcrm-root .sgcrm-sidebar-nav-item,
  #sgcrm-root .sgcrm-sidebar-subnav-item,
  #sgcrm-root .sgcrm-sidebar-business-menu,
  #sgcrm-root .sgcrm-sidebar-signout,
  #sgcrm-root .sgcrm-sidebar-nav-icon,
  #sgcrm-root .sgcrm-sidebar-nav-icon svg,
  #sgcrm-root .sgcrm-bottom-nav-item,
  #sgcrm-root .sgcrm-bottom-nav-item svg {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}


/* v1.0.439: global dark-mode popup coverage.
   React portals render modals/action sheets directly under #sgcrm-root, as
   siblings of the inner app shell. The JS now mirrors sgcrm-dark-mode on
   html/body/#sgcrm-root; these rules make all add/view/edit popups inherit
   the premium black theme instead of staying white. */
html.sgcrm-dark-mode,
body.sgcrm-dark-mode,
#sgcrm-root.sgcrm-dark-mode{
  background:#000!important;
  background-color:#000!important;
  color:#fff!important;
  color-scheme:dark;
}
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-overlay,
body.sgcrm-dark-mode .sgcrm-modal-overlay{
  background:rgba(0,0,0,.64)!important;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box,
body.sgcrm-dark-mode .sgcrm-modal-box{
  background:#05080d!important;
  background-color:#05080d!important;
  color:#fff!important;
  border:1px solid #1f2937!important;
  box-shadow:0 28px 80px rgba(0,0,0,.62)!important;
}
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="background:#fff"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="background: #fff"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="background: white"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="background: rgb(255, 255, 255)"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="background:#fff"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="background: #fff"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="background: white"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="background: rgb(255, 255, 255)"]{
  background:#05080d!important;
  background-color:#05080d!important;
}
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="background:#f8fafc"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="background: #f8fafc"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="background: rgb(248, 250, 252)"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="background:#f1f5f9"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="background: #f1f5f9"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="background: rgb(241, 245, 249)"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="background:#f8fafc"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="background: #f8fafc"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="background: rgb(248, 250, 252)"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="background:#f1f5f9"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="background: #f1f5f9"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="background: rgb(241, 245, 249)"]{
  background:#0a0f16!important;
  background-color:#0a0f16!important;
}
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box h1,
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box h2,
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box h3,
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box h4,
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box strong,
body.sgcrm-dark-mode .sgcrm-modal-box h1,
body.sgcrm-dark-mode .sgcrm-modal-box h2,
body.sgcrm-dark-mode .sgcrm-modal-box h3,
body.sgcrm-dark-mode .sgcrm-modal-box h4,
body.sgcrm-dark-mode .sgcrm-modal-box strong{
  color:#fff!important;
}
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box label,
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="color:#475569"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="color: #475569"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="color: rgb(71, 85, 105)"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="color:#64748b"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="color: #64748b"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="color: rgb(100, 116, 139)"],
body.sgcrm-dark-mode .sgcrm-modal-box label,
body.sgcrm-dark-mode .sgcrm-modal-box [style*="color:#475569"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="color: #475569"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="color: rgb(71, 85, 105)"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="color:#64748b"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="color: #64748b"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="color: rgb(100, 116, 139)"]{
  color:#dbe3ee!important;
}
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="color:#0f172a"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="color: #0f172a"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="color: rgb(15, 23, 42)"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="color:#1e293b"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="color: #1e293b"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="color: rgb(30, 41, 59)"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="color:#0f172a"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="color: #0f172a"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="color: rgb(15, 23, 42)"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="color:#1e293b"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="color: #1e293b"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="color: rgb(30, 41, 59)"]{
  color:#fff!important;
}
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box input,
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box select,
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box textarea,
body.sgcrm-dark-mode .sgcrm-modal-box input,
body.sgcrm-dark-mode .sgcrm-modal-box select,
body.sgcrm-dark-mode .sgcrm-modal-box textarea{
  background:#0a0f16!important;
  background-color:#0a0f16!important;
  color:#fff!important;
  border-color:#2b3647!important;
}
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box input::placeholder,
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box textarea::placeholder,
body.sgcrm-dark-mode .sgcrm-modal-box input::placeholder,
body.sgcrm-dark-mode .sgcrm-modal-box textarea::placeholder{
  color:#b8c2d1!important;
}
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="border-bottom: 1px solid"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="borderBottom"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box [style*="border: 1px solid"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="border-bottom: 1px solid"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="borderBottom"],
body.sgcrm-dark-mode .sgcrm-modal-box [style*="border: 1px solid"]{
  border-color:#1f2937!important;
}
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box button[style*="background:none"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box button[style*="background: none"],
body.sgcrm-dark-mode .sgcrm-modal-box button[style*="background:none"],
body.sgcrm-dark-mode .sgcrm-modal-box button[style*="background: none"]{
  color:#dbe3ee!important;
}
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box svg[stroke="#64748b"],
#sgcrm-root.sgcrm-dark-mode .sgcrm-modal-box svg[stroke="#94a3b8"],
body.sgcrm-dark-mode .sgcrm-modal-box svg[stroke="#64748b"],
body.sgcrm-dark-mode .sgcrm-modal-box svg[stroke="#94a3b8"]{
  stroke:#dbe3ee!important;
}

/* v1.0.441: iOS dark sidebar seam fix.
   iOS Safari/PWA can antialias 1px light seams around transformed fixed drawers
   even when Android renders cleanly. These explicit classes remove all light
   borders from the mobile drawer and paint a black overscan strip over the
   right edge so the drawer matches Android. */
html.sgcrm-dark-mode,
body.sgcrm-dark-mode,
#sgcrm-root.sgcrm-dark-mode{
  background:#000!important;
  background-color:#000!important;
}
body.sgcrm-dark-mode #sgcrm-root .sgcrm-mobile-sidebar-shell,
#sgcrm-root.sgcrm-dark-mode .sgcrm-mobile-sidebar-shell{
  background:#000!important;
  background-color:#000!important;
  border:0!important;
  outline:2px solid #000!important;
  box-shadow:none!important;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  isolation:isolate;
}
body.sgcrm-dark-mode #sgcrm-root .sgcrm-mobile-sidebar-shell::after,
#sgcrm-root.sgcrm-dark-mode .sgcrm-mobile-sidebar-shell::after{
  content:"";
  position:absolute;
  top:-4px;
  right:-4px;
  bottom:-4px;
  width:8px;
  background:#000;
  background-color:#000;
  pointer-events:none;
  z-index:2147483647;
}
body.sgcrm-dark-mode #sgcrm-root .sgcrm-sidebar-panel,
#sgcrm-root.sgcrm-dark-mode .sgcrm-sidebar-panel{
  background:#000!important;
  background-color:#000!important;
  border-right:0!important;
  border-inline-end:0!important;
  outline:0!important;
  box-shadow:inset -2px 0 0 #000!important;
}
body.sgcrm-dark-mode #sgcrm-root .sgcrm-sidebar-header,
body.sgcrm-dark-mode #sgcrm-root .sgcrm-sidebar-footer,
body.sgcrm-dark-mode #sgcrm-root .sgcrm-sidebar-nav-scroll,
#sgcrm-root.sgcrm-dark-mode .sgcrm-sidebar-header,
#sgcrm-root.sgcrm-dark-mode .sgcrm-sidebar-footer,
#sgcrm-root.sgcrm-dark-mode .sgcrm-sidebar-nav-scroll{
  background:#000!important;
  background-color:#000!important;
  border-color:#000!important;
  border-top-color:#000!important;
  border-bottom-color:#000!important;
  box-shadow:none!important;
}
body.sgcrm-dark-mode #sgcrm-root .sgcrm-mobile-sidebar-backdrop,
#sgcrm-root.sgcrm-dark-mode .sgcrm-mobile-sidebar-backdrop{
  background:rgba(0,0,0,.72)!important;
}
@supports (-webkit-touch-callout: none){
  body.sgcrm-dark-mode #sgcrm-root .sgcrm-mobile-sidebar-shell,
  #sgcrm-root.sgcrm-dark-mode .sgcrm-mobile-sidebar-shell{
    top:-1px!important;
    bottom:-1px!important;
    height:calc(100dvh + 2px)!important;
    transform:translate3d(0,0,0);
  }
  body.sgcrm-dark-mode #sgcrm-root .sgcrm-mobile-sidebar-shell[style*="translate3d(-100%"],
  #sgcrm-root.sgcrm-dark-mode .sgcrm-mobile-sidebar-shell[style*="translate3d(-100%"]{
    transform:translate3d(-101%,0,0)!important;
  }
}


/* v1.0.442: iOS Safari can show a bright 1px compositing seam below the sticky
   mobile header even after general dark-mode border conversion. Force the header
   itself and the first pixels below it to black in dark mode. */
#sgcrm-root.sgcrm-dark-mode .sgcrm-mobile-topbar,
body.sgcrm-dark-mode #sgcrm-root .sgcrm-mobile-topbar{
  background:#000!important;
  background-color:#000!important;
  border-bottom:0!important;
  box-shadow:0 2px 0 #000!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  outline:0!important;
}
#sgcrm-root.sgcrm-dark-mode .sgcrm-mobile-topbar::after,
body.sgcrm-dark-mode #sgcrm-root .sgcrm-mobile-topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height:4px;
  background:#000;
  pointer-events:none;
  z-index:1;
}
@supports (-webkit-touch-callout:none){
  #sgcrm-root.sgcrm-dark-mode .sgcrm-mobile-topbar{
    -webkit-transform:translate3d(0,0,0)!important;
    transform:translate3d(0,0,0)!important;
  }
}