.digiscaler-frontend {
	background: var(--digiscaler-bg);
	border-radius: var(--digiscaler-radius);
	min-height: auto;
	padding: 4px;
}
.digiscaler-frontend .digiscaler-main {
	padding: 20px;
}
.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;
}
.digiscaler-frontend-login .login-username input,
.digiscaler-frontend-login .login-password input {
	width: 100%;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid var(--digiscaler-border);
	margin-top: 4px;
}
.digiscaler-frontend-login p.login-submit {
	margin-top: 14px;
}
.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) {
	.digiscaler-frontend .digiscaler-main { padding: 10px; }
}

/* ---- Full front-end app (sidebar + every CRM screen) ---- */
.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. */
.digiscaler-frontend .digiscaler-main {
	min-width: 0;
	flex: 1;
}
.digiscaler-frontend .digiscaler-sidebar {
	border-radius: var(--digiscaler-radius) 0 0 var(--digiscaler-radius);
}
.digiscaler-frontend.digiscaler-no-nav .digiscaler-main {
	width: 100%;
}
/* Themes often style page links/tables — reassert ours inside the app. */
.digiscaler-frontend .digiscaler-nav-item,
.digiscaler-frontend .digiscaler-pill,
.digiscaler-frontend .digiscaler-tab {
	text-decoration: none;
	box-shadow: none;
}
.digiscaler-frontend table {
	margin: 0;
	border-collapse: collapse;
}
.digiscaler-frontend .digiscaler-table-card {
	overflow-x: auto;
}

@media (max-width: 782px) {
	.digiscaler-frontend { flex-direction: column; }
	.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. */
	.digiscaler-frontend .digiscaler-sidebar nav {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.digiscaler-frontend .digiscaler-sidebar .digiscaler-nav-item {
		flex: 0 0 auto;
		margin-bottom: 0;
		white-space: nowrap;
	}
	.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 {
	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. */
.digiscaler-shell {
	box-sizing: border-box;
	max-width: none !important;
	width: 100%;
}
.digiscaler-shell * {
	box-sizing: border-box;
}

/* full  — edge to edge across the window */
.digiscaler-width-full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0 20px;
}

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

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

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

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

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

/* ---- Signed-in bar — sits above the page header inside the content
   column, not stretched across the whole viewport (that used to leave an
   empty strip over the sidebar). ---- */
.digiscaler-topbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 0 0 14px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--digiscaler-border);
	font-size: 13px;
	color: var(--digiscaler-text-muted);
}