:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend {
	background: var(--salescrm-bg);
	border-radius: 0;
	min-height: auto;
	padding: 4px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-main {
	padding: 20px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend-login {
	max-width: 360px;
	margin: 40px auto;
	text-align: center;
	background: var(--salescrm-card);
	border: 1px solid var(--salescrm-border);
	border-radius: var(--salescrm-radius);
	padding: 24px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend-login .login-username input,
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend-login .login-password input {
	width: 100%;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid var(--salescrm-border);
	margin-top: 4px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend-login p.login-submit {
	margin-top: 14px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend-login input[type="submit"] {
	background: var(--salescrm-primary);
	color: #fff;
	border: none;
	padding: 8px 18px;
	border-radius: 8px;
	cursor: pointer;
}
@media (max-width: 782px) {
	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-main { padding: 10px; }
}

/* ---- Full front-end app (sidebar + every CRM screen) ---- */
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend {
	display: flex;
	min-height: 70vh;
	box-shadow: var(--salescrm-shadow);
	overflow: hidden;
}
/* Without this, wide tables force the flex item past the page width. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-main {
	min-width: 0;
	flex: 1;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar {
	border-radius: 0;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend.salescrm-no-nav .salescrm-main {
	width: 100%;
}
/* Themes often style page links/tables — reassert ours inside the app. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-nav-item,
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-pill,
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-tab {
	text-decoration: none;
	box-shadow: none;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend table {
	margin: 0;
	border-collapse: collapse;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-table-card {
	overflow-x: auto;
}

@media (max-width: 782px) {
	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend { flex-direction: column; }
	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--salescrm-border);
		border-radius: 0;
		padding: 12px;
	}
	/* Horizontal scrolling nav strip instead of a tall column on phones. */
	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar nav {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar .salescrm-nav-item {
		flex: 0 0 auto;
		margin-bottom: 0;
		white-space: nowrap;
	}
	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar-collapse { flex-direction: row; }
}

/* =========================================================
   Breaking out of the theme's narrow content column
   ========================================================= */

/* A full-bleed child would add a horizontal scrollbar; clip it at the root. */
body.salescrm-has-app {
	overflow-x: hidden;
}

/* The bug this fixes: `100vw` includes the vertical scrollbar's width, but
   `50%` (used right below to break out of the theme's column) does not.
   Dashboard is shorter than Leads/Follow-ups/Orders, so it doesn't always
   need a scrollbar while the others do — on pages that differ in scrollbar
   presence, the two didn't match and the whole app (sidebar included)
   visibly shifted sideways by the scrollbar's width when navigating between
   them. Reserving the scrollbar gutter on every page keeps `100vw` and
   `50%` consistent everywhere, so the shift can't happen regardless of a
   page's content height. */
html {
	overflow-y: scroll;
	scrollbar-gutter: stable;
}

/* Themes constrain content with max-width on the container AND on children
   (block themes use .is-layout-constrained > *). Reset both for our shell. */
:is(#sales-crm-shell, #sales-crm-shell *).salescrm-shell {
	box-sizing: border-box;
	max-width: none !important;
	width: 100%;
}
:is(#sales-crm-shell, #sales-crm-shell *).salescrm-shell * {
	box-sizing: border-box;
}

/* full  — truly edge to edge across the window, no inner gutter */
:is(#sales-crm-shell, #sales-crm-shell *).salescrm-width-full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0;
}

/* wide  — escapes the theme column but stays readable on huge monitors */
:is(#sales-crm-shell, #sales-crm-shell *).salescrm-width-wide {
	width: 100vw;
	max-width: 1400px !important;
	margin-left: calc(50% - min(50vw, 700px));
	margin-right: calc(50% - min(50vw, 700px));
	padding: 0 20px;
}

/* theme — no break-out at all */
:is(#sales-crm-shell, #sales-crm-shell *).salescrm-width-theme {
	width: 100%;
	padding: 0;
}

@media (max-width: 782px) {
	:is(#sales-crm-shell, #sales-crm-shell *).salescrm-width-wide {
		padding: 0 10px;
	}
}

/* ---- Table breathing room now that we have the width ---- */
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-table {
	width: 100%;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-table th,
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-table td {
	white-space: nowrap;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-table .salescrm-note-cell {
	white-space: normal;
	min-width: 180px;
}

/* Toolbar buttons were wrapping onto three rows in the narrow column. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-toolbar-left {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-toolbar-right input[type="search"] {
	min-width: 260px;
}

/* ---- Front-end sign-in ---- */
:is(#sales-crm-app, #sales-crm-app *).salescrm-login-wrap {
	display: flex;
	justify-content: center;
	padding: 48px 16px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-login-card {
	width: 100%;
	max-width: 380px;
	background: var(--salescrm-card);
	border: 1px solid var(--salescrm-border);
	border-radius: var(--salescrm-radius);
	box-shadow: var(--salescrm-shadow);
	padding: 32px 28px;
	text-align: center;
	color: var(--salescrm-text);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-login-logo { font-size: 22px; font-weight: 700; color: var(--salescrm-primary); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-login-sub { color: var(--salescrm-text-muted); font-size: 14px; margin: 6px 0 20px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-login-card form { text-align: left; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-login-card label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-login-card input[type="text"],
:is(#sales-crm-app, #sales-crm-app *).salescrm-login-card input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--salescrm-border);
	border-radius: 8px;
	background: var(--salescrm-bg);
	color: var(--salescrm-text);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-login-remember {
	display: flex; align-items: center; gap: 8px;
	font-weight: 400; font-size: 13px; margin-top: 14px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-login-remember input { width: auto; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-login-submit { width: 100%; margin-top: 18px; padding: 10px; justify-content: center; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-login-error {
	background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5;
	border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-login-lost {
	display: inline-block; margin-top: 16px;
	font-size: 13px; color: var(--salescrm-text-muted);
}


/* =========================================================
   Mobile top navigation — legacy CRM style
   Keep the working app/layout untouched; only turn the existing
   sidebar navigation into a compact horizontal scrolling header.
   ========================================================= */
@media (max-width: 782px) {
	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar {
		position: sticky;
		top: 0;
		z-index: 1000;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		padding: 6px 8px 7px;
		background: var(--salescrm-card);
		border-right: 0;
		border-bottom: 1px solid var(--salescrm-border);
		border-radius: 0;
		box-shadow: 0 1px 4px rgba(16,24,40,.05);
	}

	/* The mobile header is the nav itself; hide the desktop brand area. */
	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar > .salescrm-logo {
		display: none;
	}

	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar nav {
		display: flex;
		align-items: stretch;
		justify-content: flex-start;
		gap: 2px;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar nav::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	/* Each item matches the supplied reference: icon on top, label below. */
	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar .salescrm-nav-item {
		flex: 0 0 auto;
		min-width: 58px;
		max-width: 82px;
		min-height: 50px;
		margin: 0;
		padding: 5px 8px 4px;
		border: 0;
		border-radius: 8px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 3px;
		text-align: center;
		font-size: 10.5px;
		line-height: 1.15;
		font-weight: 500;
		white-space: nowrap;
	}

	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar .salescrm-nav-item:hover {
		background: transparent;
		color: var(--salescrm-text);
	}
	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar .salescrm-nav-item.is-active,
	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar .salescrm-nav-item.is-active:hover {
		background: var(--salescrm-primary-light);
		color: var(--salescrm-primary);
		border: 0;
	}

	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar .salescrm-nav-icon {
		width: 20px;
		height: 20px;
		margin: 0;
		flex: 0 0 20px;
		justify-content: center;
	}
	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar .salescrm-nav-icon svg {
		width: 18px;
		height: 18px;
	}
	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-sidebar .salescrm-nav-label {
		display: block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 10.5px;
		line-height: 1.15;
		white-space: nowrap;
	}

	/* Content starts immediately below the mobile header. */
	:is(#sales-crm-app, #sales-crm-app *).salescrm-frontend .salescrm-main {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
	}
}


/* =========================================================
   MOBILE CRM NAV — FINAL OVERRIDE
   Uses direct selectors because the legacy :is(...) selectors above
   do not target the sidebar when .salescrm-frontend is on #sales-crm-app.
   ========================================================= */
@media (max-width: 782px) {
  #sales-crm-app.salescrm-frontend {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #sales-crm-app.salescrm-frontend > .salescrm-sidebar {
    order: 0 !important;
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 72px !important;
    flex: 0 0 72px !important;
    box-sizing: border-box !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #e7e9ef !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 4px rgba(16,24,40,.06) !important;
    overflow: hidden !important;
  }

  #sales-crm-app.salescrm-frontend > .salescrm-sidebar > .salescrm-logo,
  #sales-crm-app.salescrm-frontend > .salescrm-sidebar > .salescrm-sidebar-collapse {
    display: none !important;
  }

  #sales-crm-app.salescrm-frontend > .salescrm-sidebar > nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 60px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
  }

  #sales-crm-app.salescrm-frontend > .salescrm-sidebar > nav::-webkit-scrollbar {
    display: none !important;
  }

  #sales-crm-app.salescrm-frontend > .salescrm-sidebar > nav > .salescrm-nav-item {
    display: flex !important;
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 82px !important;
    height: 58px !important;
    min-height: 58px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 5px 6px 4px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #111827 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  #sales-crm-app.salescrm-frontend > .salescrm-sidebar > nav > .salescrm-nav-item.is-active {
    background: #eef0ff !important;
    color: #4f46e5 !important;
  }

  #sales-crm-app.salescrm-frontend > .salescrm-sidebar > nav > .salescrm-nav-item:hover {
    background: transparent !important;
    color: #111827 !important;
  }

  #sales-crm-app.salescrm-frontend > .salescrm-sidebar > nav > .salescrm-nav-item.is-active:hover {
    background: #eef0ff !important;
    color: #4f46e5 !important;
  }

  #sales-crm-app.salescrm-frontend > .salescrm-sidebar > nav > .salescrm-nav-item > .salescrm-nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #sales-crm-app.salescrm-frontend > .salescrm-sidebar > nav > .salescrm-nav-item > .salescrm-nav-icon svg {
    width: 19px !important;
    height: 19px !important;
  }

  #sales-crm-app.salescrm-frontend > .salescrm-sidebar > nav > .salescrm-nav-item > .salescrm-nav-label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 10px !important;
    line-height: 13px !important;
    font-weight: 500 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  #sales-crm-app.salescrm-frontend > .salescrm-main {
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
}