/* ============================================================
   LexOps — BRAND: Turquoise / Green → Blue
   Loaded LAST in the CSS cascade so its tokens + shadows win.
   ============================================================ */
:root {
  --primary:     #0d9488 !important;  /* teal-600 */
  --primary-dk:  #0f766e !important;  /* teal-700 */
  --primary-lt:  #ccfbf1 !important;  /* teal-100 */
  --purple:      #0891b2 !important;  /* cyan-600 — was #a358df */
  --purple-lt:   #cffafe !important;  /* cyan-100 */
  /* Premium uplift tokens */
  --px-grad:     linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #0ea5e9 100%) !important;
  --px-grad-btn: linear-gradient(135deg, #10b981 0%, #0891b2 100%) !important;
}

/* Primary button (.bp) — rewrite shadow stack to cyan-teal tones */
.bp {
  background: linear-gradient(135deg, #10b981 0%, #0891b2 100%) !important;
  box-shadow: 0 6px 18px rgba(13, 148, 136, .28) !important;
}
.bp:hover {
  box-shadow: 0 10px 26px rgba(13, 148, 136, .38) !important;
  filter: brightness(1.06);
}
.bp:active {
  box-shadow: 0 4px 12px rgba(13, 148, 136, .24) !important;
}

/* Monday-theme brand-gradient surfaces */
.hdr-brand-icon,
.brand-gradient,
[class*="-brand-ic"] {
  background: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #0ea5e9 100%) !important;
}

/* Main app header (.hdr) — elegant monogram matching the login page */
.hdr-logo {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  position: relative;
  /* SVG mask: partial circle (teal→sky arc) + 'Lx' wordmark inside */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2310b981'/><stop offset='0.55' stop-color='%2314b8a6'/><stop offset='1' stop-color='%230ea5e9'/></linearGradient></defs><circle cx='20' cy='20' r='18' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='88 26'/><text x='20' y='26' text-anchor='middle' font-family='Inter,-apple-system,Segoe UI,sans-serif' font-size='18' font-weight='800' fill='url(%23g)' letter-spacing='-1'>Lx</text></svg>") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.hdr h1,
.hdr-title h1 {
  background: linear-gradient(135deg, #0d9488 0%, #0891b2 60%, #0ea5e9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: -.4px !important;
}
.hdr-title .sub { color: #64748b !important; font-weight: 500 !important; }

/* Make header cleaner — subtle border, no heavy gradient accents */
.hdr {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(13,148,136,.12) !important;
}

/* Marketing site (www) — adopt the same elegant monogram for the nav logo */
.wn-logo-m {
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%2310b981'/><stop offset='0.55' stop-color='%2314b8a6'/><stop offset='1' stop-color='%230ea5e9'/></linearGradient></defs><circle cx='20' cy='20' r='18' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='88 26'/><text x='20' y='26' text-anchor='middle' font-family='Inter,-apple-system,Segoe UI,sans-serif' font-size='18' font-weight='800' fill='url(%23g)' letter-spacing='-1'>Lx</text></svg>") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.wn-logo {
  font-weight: 800 !important;
}
/* Footer logo on www */
.ww-logo-mark {
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%235eead4'/><stop offset='0.55' stop-color='%2367e8f9'/><stop offset='1' stop-color='%237dd3fc'/></linearGradient></defs><circle cx='20' cy='20' r='18' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='88 26'/><text x='20' y='26' text-anchor='middle' font-family='Inter,-apple-system,Segoe UI,sans-serif' font-size='18' font-weight='800' fill='url(%23g)' letter-spacing='-1'>Lx</text></svg>") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Login page — override the dual-portal and header gradients */
body.login,
body.login .lg-bg,
body.login .lg-card-pro::before,
body.login .lg-hdr-icon,
body.login .lg-title {
  /* hooked individually below */
}
body.login {
  background: linear-gradient(135deg, #10b981 0%, #14b8a6 40%, #0ea5e9 100%) !important;
}
.lg-hdr-icon {
  background: linear-gradient(135deg, #10b981 0%, #0891b2 100%) !important;
}
.lg-title {
  background: linear-gradient(135deg, #0d9488 0%, #0891b2 55%, #0ea5e9 110%) !important;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.lg-card-pro::before {
  background: linear-gradient(90deg, #10b981, #0d9488, #0891b2) !important;
}
.lg-card-client::before {
  background: linear-gradient(90deg, #14b8a6, #0891b2, #0ea5e9) !important;
}

/* Login page dual colour tokens */
:root {
  --lg-pro:       #0d9488 !important;
  --lg-pro-dk:    #0f766e !important;
  --lg-pro-soft:  #ccfbf1 !important;
  --lg-cli:       #0891b2 !important;
  --lg-cli-dk:    #0e7490 !important;
  --lg-cli-soft:  #cffafe !important;
}

/* Ecosystem header primary-accent card */
#p-ecosystem div[style*="border-left:3px solid var(--primary)"] {
  border-left-color: #0d9488 !important;
}

/* CRM — swap the hardcoded #0073ea bits inside crm.css */
.crm-kpi { border-left-color: #0d9488 !important; }
.crm-step.done { background: #ccfbf1 !important; color: #0d9488 !important; }
.crm-step.cur { background: #0d9488 !important; }

/* Matter (cp-na) */
.cp-na { background: #ecfeff !important; border-left-color: #0d9488 !important; }

/* Monday-theme sticky gradients */
.hdr,
.page-accent,
.brand-gradient-strip {
  /* the monday-theme file uses hard gradients — override the common ones */
}
[style*="linear-gradient(135deg, #0073ea"],
[style*="linear-gradient(135deg,#0073ea"] {
  background: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #0ea5e9 100%) !important;
}

/* Analytics monthly-revenue vertical bars */
.an-bar {
  background: linear-gradient(180deg, #14b8a6 0%, #0d9488 60%, #0f766e 100%) !important;
  box-shadow: 0 2px 6px rgba(13,148,136,.2) inset !important;
}
.an-bar-h-fill {
  background: linear-gradient(90deg, #0d9488, #0ea5e9) !important;
}

/* Monthly CRM bars */
.crm-month-fill {
  background: linear-gradient(90deg, #0d9488, #0ea5e9) !important;
}

/* Top accent strip across the page */
body::before {
  background: linear-gradient(90deg, #065f46 0%, #0d9488 20%, #14b8a6 50%, #0ea5e9 80%, #0369a1 100%) !important;
}

/* ============================================================
   Sidebar — light, modern, turquoise-accented, professional
   Replaces the old dark-slate look.
   ============================================================ */
.lx-sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #475569 !important;
  border-right: 1px solid rgba(13,148,136,.14) !important;
  box-shadow: 4px 0 24px -10px rgba(13,148,136,.18), inset 0 0 0 1px rgba(255,255,255,.6) !important;
}
/* Thin gradient accent strip on the left edge */
.lx-sidebar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #10b981 0%, #14b8a6 50%, #0ea5e9 100%);
  pointer-events: none;
  opacity: .85;
}

/* Section labels — small caps, brand color */
.lx-sb-section {
  color: #0d9488 !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  opacity: .78;
  padding: 18px 22px 8px !important;
  font-size: 10px !important;
}

/* RECENT section clickable header */
.lx-sb-recent-head {
  color: #0d9488 !important;
  opacity: 1 !important;
}
.lx-sb-recent-head:hover { background: rgba(13,148,136,.06) }
.lx-sb-recent-more svg { color: #0d9488 }

/* Nav items — default */
.lx-sb-item {
  color: #334155 !important;
  font-weight: 600 !important;
  transition: background .14s ease, color .14s ease, transform .1s ease !important;
}
.lx-sb-item svg {
  color: #64748b;
  transition: color .14s ease;
}
/* Hover */
.lx-sb-item:hover {
  background: linear-gradient(90deg, rgba(13,148,136,.08), rgba(14,165,233,.05)) !important;
  color: #0d9488 !important;
}
.lx-sb-item:hover svg { color: #0d9488 }

/* Active */
.lx-sb-item.active {
  background: linear-gradient(135deg, #10b981, #0891b2) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px -4px rgba(13,148,136,.5) !important;
  font-weight: 700 !important;
}
.lx-sb-item.active svg { color: #fff !important; }

/* Recent list items */
.lx-sb-recent-item {
  color: #475569 !important;
  padding: 7px 22px 7px 28px !important;
  font-size: 12.5px !important;
  transition: background .12s ease !important;
}
.lx-sb-recent-item:hover {
  background: rgba(13,148,136,.06) !important;
  color: #0d9488 !important;
}
.lx-sb-recent-dot { box-shadow: 0 0 0 2px #fff }
.lx-sb-recent-empty {
  color: rgba(71,85,105,.5) !important;
  padding: 10px 22px !important;
}

/* Footer */
.lx-sb-footer {
  border-top: 1px solid rgba(13,148,136,.1);
  background: rgba(240,253,250,.4);
}
.lx-sb-collapse-btn {
  color: #64748b !important;
  transition: background .12s, color .12s !important;
}
.lx-sb-collapse-btn:hover {
  background: rgba(13,148,136,.1) !important;
  color: #0d9488 !important;
}
.lx-sb-footer-text { color: #94a3b8 !important }

/* Resize handle — slightly visible with brand accent on hover */
.lx-sb-resize { background: transparent !important }
.lx-sb-resize:hover,
.lx-sb-resize.dragging {
  background: linear-gradient(180deg, #10b981, #0891b2) !important;
  width: 3px !important;
  box-shadow: 0 0 12px rgba(13,148,136,.5);
}

/* Collapsed sidebar — keep the same polish when 60px */
.lx-sidebar.collapsed {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%) !important;
}
.lx-sidebar.collapsed .lx-sb-item {
  border-radius: 10px !important;
  padding: 11px 10px !important;
}
.lx-sidebar.collapsed .lx-sb-item.active {
  background: linear-gradient(135deg, #10b981, #0891b2) !important;
  box-shadow: 0 4px 14px -4px rgba(13,148,136,.5) !important;
}

/* Mobile drawer — keep the light look */
@media (max-width: 640px) {
  .lx-sidebar { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important }
}

/* Status pills that used primary-lt/primary-dk */
[style*="background:var(--primary-lt)"],
[style*="background: var(--primary-lt)"] { background: #ccfbf1 !important; }
[style*="color:var(--primary-dk)"],
[style*="color: var(--primary-dk)"] { color: #0f766e !important; }

/* ============================================================
   MOBILE LAYOUT FINAL OVERRIDE — loaded last, wins every cascade
   Defeats the four conflicting body.has-sidebar .content width rules
   in styles.css that force width:calc(100% - 240px) even at < 900px.
   ============================================================ */
@media (max-width: 900px) {
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  body.has-sidebar .content,
  body.has-sidebar.sb-collapsed .content {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }
  body.has-sidebar .hdr,
  body.has-sidebar.sb-collapsed .hdr {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }
  body.has-sidebar .app-footer,
  body.has-sidebar.sb-collapsed .app-footer {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }
  body.has-sidebar .content .pane,
  body.has-sidebar .content .pane.on {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Sidebar hidden off-screen by default (drawer opens via .lx-sb-open) */
  .lx-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 280px !important;
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.2,.8,.3,1) !important;
    z-index: 200 !important;
  }
  .lx-sidebar.lx-sb-open { transform: translateX(0) !important; }
  /* Common grid collapse — any remaining multi-column grids */
  .mf-shell, .mf-kpis, .cd-grid, .two-col, .cb-grid,
  .ww-hero-grid, .ww-features, .ww-cards, .ww-price,
  .land-cards:not(.cs-action-cards), .fg, .tl-grid, .tf-grid {
    grid-template-columns: 1fr !important;
  }
  /* Sledgehammer: clamp every top-level pane child to viewport so no rogue
     fixed-width element pushes the column narrow on the left. */
  body.has-sidebar .content,
  body.has-sidebar .content > *,
  body.has-sidebar .pane,
  body.has-sidebar .pane > *,
  body.has-sidebar main.content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.has-sidebar .content > *,
  body.has-sidebar .pane > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Neutralize any inline width:Npx on top-level pane containers */
  body.has-sidebar .pane > div[style*="width:"],
  body.has-sidebar .pane > div[style*="max-width:"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   GLOBAL SEARCH — modern turquoise redesign
   Overrides the legacy .gsr-* styles from styles.css with a
   card-based, color-coded, animated dropdown.
   ============================================================ */
.global-search-results {
  background: #fff !important;
  border: 1px solid rgba(13,148,136,.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 48px -10px rgba(13,148,136,.18), 0 4px 12px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.02) !important;
  max-height: 560px !important;
  overflow-y: auto !important;
  padding: 4px 0 0 !important;
  animation: gsrSlideIn .18s cubic-bezier(.2,.9,.3,1) !important;
  min-width: 380px !important;
}
@keyframes gsrSlideIn { from { opacity:0; transform:translateY(-6px) } to { opacity:1; transform:none } }

/* Head strip — shows total count */
.gsr-head {
  padding: 12px 18px 10px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  background: linear-gradient(180deg, rgba(13,148,136,.05), transparent);
}
.gsr-head-count { font-size: 12.5px; color: #64748b; font-weight: 500; }
.gsr-head-count strong { color: #0d9488; font-weight: 800; }
.gsr-head-count em { color: #0f172a; font-style: normal; font-weight: 700; }

/* Groups */
.gsr-group { padding: 4px 0 6px; border-bottom: 1px solid rgba(15,23,42,.04); }
.gsr-group:last-of-type { border-bottom: 0; }
.gsr-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px 6px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .8px; color: #64748b;
}
.gsr-group-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 3px currentColor; opacity: .25; }
.gsr-group-lbl { flex: 1; min-width: 0; }
.gsr-group-n {
  background: rgba(13,148,136,.1); color: #0f766e;
  padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; min-width: 22px; text-align: center;
}

/* Items — card-like rows */
.gsr-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: background .12s ease, transform .1s ease !important;
  border-left: 3px solid transparent !important;
  position: relative;
}
.gsr-item:hover, .gsr-item.gsr-active {
  background: linear-gradient(90deg, rgba(13,148,136,.06), rgba(8,145,178,.04)) !important;
  border-left-color: var(--gsr-accent, #0d9488) !important;
}
.gsr-item .gsr-icon {
  width: 36px !important; height: 36px !important;
  border-radius: 10px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  background: rgba(13,148,136,.08) !important;
  transition: transform .15s ease !important;
}
.gsr-item:hover .gsr-icon, .gsr-item.gsr-active .gsr-icon {
  transform: scale(1.06);
}
.gsr-item .gsr-info { flex: 1 !important; min-width: 0 !important; }
.gsr-item .gsr-title {
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -.1px;
}
.gsr-item .gsr-title strong {
  background: rgba(13,148,136,.12) !important;
  color: #0d9488 !important;
  padding: 0 3px !important;
  border-radius: 4px !important;
  font-weight: 800;
}
.gsr-item .gsr-subtitle {
  font-size: 11.5px !important;
  color: #64748b !important;
  margin-top: 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.gsr-item .gsr-detail {
  font-size: 11px !important;
  color: #94a3b8 !important;
  margin-top: 1px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gsr-arrow {
  flex-shrink: 0; color: #cbd5e1; font-size: 16px; font-weight: 700;
  transition: color .12s ease, transform .12s ease;
}
.gsr-item:hover .gsr-arrow, .gsr-item.gsr-active .gsr-arrow {
  color: var(--gsr-accent, #0d9488);
  transform: translateX(3px);
}

/* Hide legacy type badge */
.gsr-item .gsr-type-badge { display: none !important; }

/* Empty state */
.gsr-empty, .gsr-empty-wrap {
  padding: 32px 24px 26px !important;
  text-align: center !important;
  color: #64748b !important;
  font-size: 13px !important;
}
.gsr-empty-ic {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(13,148,136,.1), rgba(8,145,178,.1));
  color: #0d9488;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
}
.gsr-empty-title {
  font-size: 15px; font-weight: 800; color: #0f172a;
  margin-bottom: 6px; letter-spacing: -.2px;
}
.gsr-empty-sub {
  font-size: 12.5px; color: #64748b;
  line-height: 1.55; max-width: 360px; margin: 0 auto 16px;
}
.gsr-empty-sub code {
  background: rgba(13,148,136,.08); color: #0d9488;
  padding: 1px 6px; border-radius: 5px;
  font-family: ui-monospace, monospace; font-size: 11.5px; font-weight: 700;
}
.gsr-empty-hints {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
}
.gsr-hint-chip {
  background: #fff; border: 1px solid rgba(13,148,136,.2);
  color: #0d9488; padding: 6px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.gsr-hint-chip:hover {
  background: rgba(13,148,136,.08); border-color: #0d9488;
  transform: translateY(-1px);
}

/* Footer */
.gsr-footer {
  padding: 10px 18px;
  border-top: 1px solid rgba(15,23,42,.06);
  background: #f8fafc;
  font-size: 11px;
  color: #94a3b8;
  display: flex; gap: 10px; align-items: center;
  border-radius: 0 0 16px 16px;
  position: sticky; bottom: 0;
  font-weight: 600;
  letter-spacing: .2px;
}
.gsr-footer kbd {
  background: #fff;
  border: 1px solid rgba(15,23,42,.1);
  border-radius: 5px;
  padding: 1px 6px;
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: #475569;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(15,23,42,.05);
}

/* Mobile: full-width overlay style */
@media (max-width: 640px) {
  .global-search-results {
    position: fixed !important;
    top: 60px !important;
    left: 8px !important;
    right: 8px !important;
    min-width: 0 !important;
    max-height: calc(100vh - 80px) !important;
    border-radius: 14px !important;
  }
}