/* 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.
   Keep this as real theme CSS, not a global filter. The previous filter-based
   approach made cards dark but left some page backgrounds/light shell areas
   untouched on certain browsers. These overrides target the common inline
   React surfaces used throughout the CRM while keeping modals/layout fixed. */
.sgcrm-dark-mode,
.sgcrm-dark-mode .sgcrm-page-scroll{
  background:#020617!important;
  background-color:#020617!important;
  color:#e5e7eb!important;
  color-scheme:dark;
}
.sgcrm-dark-mode *{scrollbar-color:#334155 #020617;}
.sgcrm-dark-mode ::selection{background:#0f766e;color:#fff;}

/* Main app shell, sidebar, top bars, bottom nav, cards, tables, panels. */
.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"]{
  background:#020617!important;
  background-color:#020617!important;
}
.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"]{
  background:#070b13!important;
  background-color:#070b13!important;
}
.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(230, 244, 246)"],
.sgcrm-dark-mode [style*="background:#e6f4f6"],
.sgcrm-dark-mode [style*="background: #e6f4f6"],
.sgcrm-dark-mode [style*="background: rgb(240, 253, 250)"],
.sgcrm-dark-mode [style*="background:#f0fdfa"],
.sgcrm-dark-mode [style*="background: #f0fdfa"]{
  background:#0b1620!important;
  background-color:#0b1620!important;
}

/* Text tones that are hard-coded inline in the React components. */
.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(30, 41, 59)"],
.sgcrm-dark-mode [style*="color:#1e293b"],
.sgcrm-dark-mode [style*="color: #1e293b"]{color:#f8fafc!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"]{color:#dbe4ef!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"]{color:#94a3b8!important;}

/* Inputs and controls. */
.sgcrm-dark-mode input,
.sgcrm-dark-mode select,
.sgcrm-dark-mode textarea{
  background:#0b1220!important;
  color:#f8fafc!important;
  border-color:#253044!important;
  caret-color:#38bdf8;
}
.sgcrm-dark-mode input::placeholder,
.sgcrm-dark-mode textarea::placeholder{color:#64748b!important;}
.sgcrm-dark-mode button{border-color:#253044!important;}

/* Borders/dividers/shadows. */
.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-bottom: 1px solid rgb(226, 232, 240)"],
.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"]{border-color:#1f2937!important;}
.sgcrm-dark-mode [style*="box-shadow"]{box-shadow:none!important;}