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

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

@media (max-width: 782px) {
	:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-frontend { flex-direction: column; }
	:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-frontend .digiscaler-sidebar {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--digiscaler-border);
		border-radius: var(--digiscaler-radius) var(--digiscaler-radius) 0 0;
		padding: 12px;
	}
	/* Horizontal scrolling nav strip instead of a tall column on phones. */
	:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-frontend .digiscaler-sidebar nav {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-frontend .digiscaler-sidebar .digiscaler-nav-item {
		flex: 0 0 auto;
		margin-bottom: 0;
		white-space: nowrap;
	}
	:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-frontend .digiscaler-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.digiscaler-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:has(.digiscaler-width-wide, .digiscaler-width-theme) {
	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(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-shell {
	box-sizing: border-box;
	max-width: none !important;
	width: 100%;
}
:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-shell * {
	box-sizing: border-box;
}

/* full  — see "Software-style full screen" at the end of this file. */

/* wide  — escapes the theme column but stays readable on huge monitors */
:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-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(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-theme {
	width: 100%;
	padding: 0;
}

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

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

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

/* ---- Front-end sign-in ---- */
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: 32px 16px;
	background:
		radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--digiscaler-primary) 14%, transparent) 0%, transparent 45%),
		radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--digiscaler-primary) 10%, transparent) 0%, transparent 45%),
		var(--digiscaler-bg);
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-shell {
	width: 100%;
	max-width: 880px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--digiscaler-card);
	border: 1px solid var(--digiscaler-border);
	border-radius: 18px;
	box-shadow: 0 20px 50px -12px rgba(16,24,40,0.18), var(--digiscaler-shadow);
	overflow: hidden;
	min-height: 560px;
}

/* Left brand panel — hidden on narrow screens, see media query below */
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-brand-panel {
	background:
		linear-gradient(160deg, color-mix(in srgb, var(--digiscaler-primary) 96%, black) 0%, var(--digiscaler-primary) 55%, color-mix(in srgb, var(--digiscaler-primary) 80%, #6D28D9) 100%);
	color: #fff;
	padding: 44px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-brand-mark {
	width: 56px; height: 56px; border-radius: 14px;
	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.28);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 24px;
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-brand-mark img { max-width: 36px; max-height: 36px; }
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-brand-initial { font-size: 26px; font-weight: 700; }
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-brand-panel h2 {
	font-size: 26px; font-weight: 700; margin: 0 0 10px; line-height: 1.25; color: #fff;
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-brand-panel p {
	font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.88); margin: 0 0 26px; max-width: 320px;
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-brand-points {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 12px;
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-brand-points li {
	font-size: 13.5px; color: rgba(255,255,255,0.92);
	padding-left: 26px; position: relative;
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-brand-points li::before {
	content: "";
	position: absolute; left: 0; top: 3px;
	width: 16px; height: 16px; border-radius: 50%;
	background: rgba(255,255,255,0.18);
	border: 1px solid rgba(255,255,255,0.4);
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-brand-points li::after {
	content: "";
	position: absolute; left: 5px; top: 6.5px;
	width: 6px; height: 3px;
	border-left: 2px solid #fff; border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-card {
	width: 100%;
	max-width: 380px;
	margin: auto;
	padding: 44px 36px;
	text-align: left;
	color: var(--digiscaler-text);
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-logo-mobile { display: none; font-size: 20px; font-weight: 700; color: var(--digiscaler-primary); margin-bottom: 18px; }
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-title { font-size: 24px; font-weight: 700; margin: 0 0 4px; color: var(--digiscaler-text); }
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-sub { color: var(--digiscaler-text-muted); font-size: 14px; margin: 0 0 24px; }
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-card form { text-align: left; }
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-card label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-input-wrap { position: relative; }
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-input-icon {
	position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
	width: 17px; height: 17px; color: var(--digiscaler-text-muted); pointer-events: none;
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-card input[type="text"],
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-card input[type="password"] {
	width: 100%;
	padding: 11px 14px 11px 38px;
	border: 1px solid var(--digiscaler-border);
	border-radius: 9px;
	background: var(--digiscaler-bg);
	color: var(--digiscaler-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-card input[type="text"]:focus,
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-card input[type="password"]:focus {
	outline: none;
	border-color: var(--digiscaler-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--digiscaler-primary) 18%, transparent);
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-remember {
	display: flex; align-items: center; gap: 8px;
	font-weight: 400; font-size: 13px; margin-top: 16px;
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-remember input { width: auto; }
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-submit {
	width: 100%; margin-top: 20px; padding: 12px; justify-content: center;
	font-weight: 600; font-size: 14.5px;
	box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--digiscaler-primary) 55%, transparent);
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-error {
	background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5;
	border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px;
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-lost {
	display: block; margin-top: 22px; text-align: center;
	font-size: 13px; color: var(--digiscaler-text-muted);
}

@media (max-width: 760px) {
	:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-shell { grid-template-columns: 1fr; max-width: 420px; min-height: 0; }
	:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-brand-panel { display: none; }
	:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-logo-mobile { display: block; text-align: center; }
	:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-card { max-width: none; padding: 36px 28px; text-align: center; }
	:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-title,
	:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-sub { text-align: center; }
}



/* =========================================================
   Software-style full screen   (width="full", the default)

   The app is pinned to the browser window like a desktop program:
   the window itself never scrolls, the sidebar stays put, and only
   the content area scrolls. Because it is position:fixed it does not
   depend on the theme's column, padding or header at all, which is
   what the old `100vw` + negative-margin break-out could not
   guarantee (it left gaps and shifted by the scrollbar width).

   Below 782px the sidebar stacks above the content, so the shell
   itself becomes the scroll container instead.
   ========================================================= */
html:has(.digiscaler-width-full),
html:has(.digiscaler-width-full) body {
	overflow: hidden;
	scrollbar-gutter: auto;
}

:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full,
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-screen {
	position: fixed;
	inset: 0;
	z-index: 99990;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: var(--digiscaler-bg);
}
/* The WordPress admin bar (only shown to WP users) keeps its 32/46px. */
body.admin-bar :is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full,
body.admin-bar :is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-screen {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar :is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full,
	body.admin-bar :is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-screen {
		top: 46px;
	}
}

/* The app fills the shell: no card, no radius, no outer padding. */
:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full .digiscaler-frontend {
	height: 100%;
	min-height: 0;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Sidebar: pinned, full height. Its scrollbar is hidden (it is still
   scrollable) — a thick bar with arrows beside the menu looked broken. */
:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full .digiscaler-frontend .digiscaler-sidebar {
	height: 100%;
	border-radius: 0;
	padding-top: 16px;
	padding-bottom: 12px;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: none;
}
:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full .digiscaler-sidebar::-webkit-scrollbar {
	display: none;
}

/* Content: the one scrolling region, with a slim scrollbar. */
:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full .digiscaler-frontend .digiscaler-main {
	height: 100%;
	min-width: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--digiscaler-border) transparent;
}
:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full .digiscaler-main::-webkit-scrollbar {
	width: 8px;
}
:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full .digiscaler-main::-webkit-scrollbar-thumb {
	background: var(--digiscaler-border);
	border-radius: 8px;
}

/* Shorter laptop screens: tighten the menu so every item fits without
   scrolling (Dashboard … Log out is ~740px tall at the default spacing). */
@media (min-width: 783px) and (max-height: 820px) {
	:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full .digiscaler-nav-item {
		padding-top: 7px;
		padding-bottom: 7px;
		margin-bottom: 1px;
	}
	:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full .digiscaler-logo {
		padding-bottom: 10px;
	}
	:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full .digiscaler-sidebar-collapse {
		margin-top: 6px;
		padding-top: 6px;
	}
}

/* Sign-in screen scrolls on its own if the window is very short. */
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-screen {
	overflow-y: auto;
}

/* Phones: shell scrolls, sidebar strip + content stack normally. */
@media (max-width: 782px) {
	:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full .digiscaler-frontend {
		height: auto;
		min-height: 100%;
	}
	:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full .digiscaler-frontend .digiscaler-sidebar,
	:is(#digiscaler-crm-shell, #digiscaler-crm-shell *).digiscaler-width-full .digiscaler-frontend .digiscaler-main {
		height: auto;
		overflow: visible;
		border-radius: 0;
	}
}


/* =========================================================
   Sign-in screen: truly centred + show/hide password
   ========================================================= */

/* The sign-in screen is a fixed full-window box. Its wrapper used to size
   itself to its content (a flex item), which parked the card on the left
   and left the background ending part-way across the window. */
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-screen {
	display: block;
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-screen > .digiscaler-login-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
}

/* Eye button inside the password box */
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-input-wrap.has-toggle input {
	padding-right: 44px;
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-pwd-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	min-height: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	color: var(--digiscaler-text-muted);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-pwd-toggle:hover {
	color: var(--digiscaler-primary);
	background: color-mix(in srgb, var(--digiscaler-primary) 10%, transparent);
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-pwd-toggle:focus-visible {
	outline: 2px solid var(--digiscaler-primary);
	outline-offset: 1px;
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-pwd-toggle svg {
	width: 19px;
	height: 19px;
}
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-pwd-toggle .dcrm-eye-off { display: none; }
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-input-wrap.is-visible .dcrm-eye { display: none; }
:is(#digiscaler-crm-app, #digiscaler-crm-app *).digiscaler-login-input-wrap.is-visible .dcrm-eye-off { display: block; }