:root {
	--salescrm-primary: #4F46E5;
	--salescrm-primary-hover: #4338CA;
	--salescrm-primary-light: #EEF0FF;
	--salescrm-whatsapp: #25D366;
	--salescrm-whatsapp-hover: #1EBE59;
	--salescrm-bg: #EEF0FF;
	--salescrm-card: #FFFFFF;
	--salescrm-text: #1F2333;
	--salescrm-text-muted: #6B7280;
	--salescrm-border: #E9EAF2;
	--salescrm-radius: 12px;
	--salescrm-shadow: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
	--salescrm-sidebar-w: 240px;
}
body.salescrm-dark {
	--salescrm-bg: #14161F;
	--salescrm-card: #1D2030;
	--salescrm-text: #F3F4F6;
	--salescrm-text-muted: #9CA3AF;
	--salescrm-border: #2C2F42;
	--salescrm-primary-light: #262A48;
}

#wpcontent,
#wpbody-content { background: var(--salescrm-bg); }

/* =====================================================================
   FILE-WIDE SCOPING CONVENTION
   ---------------------------------------------------------------------
   Every component rule in this file (and in frontend.css) is prefixed
   with :is(#sales-crm-app, #sales-crm-app *) — or, for the
   handful of rules that belong to the front-end shell wrapper,
   :is(#sales-crm-shell, #sales-crm-shell *). :is() matches
   whichever of its arguments applies, so one prefix correctly covers a
   class that sits on the root app/shell element itself AND a class
   that sits on a descendant, without needing to know which case a
   given rule is. Per the CSS spec, :is()/:where() take on the highest
   specificity of their arguments — here that's always the ID's
   specificity (0,1,0,0) — so every rule in this file now outranks
   ordinary class/element rules from wp-admin core or an active theme,
   regardless of stylesheet load order or how deep the theme's own
   selector nesting is. `!important` is still used in a few narrow,
   documented spots (native form-control chrome) where even ID-level
   specificity isn't enough to beat inline/attribute-driven browser or
   theme styles.

   A few selectors are deliberately left unscoped and are called out
   inline: `:root` (custom properties, inherited everywhere), `html`
   and `body.*` (page-level toggles, not descendants of the app), and
   `#wpcontent`/`#wpbody-content` (WordPress' own admin containers).
   The two `:where(...) a` link-colour rules are also left as-is; they
   intentionally keep the specificity of a bare `a` selector so they
   never outrank the more specific `.salescrm-*` component rules
   below them — see the comment above those rules for the full
   reasoning. ===================================================== */

/* =====================================================================
   Scoping / override layer
   ---------------------------------------------------------------------
   WordPress core (wp-admin forms.css) and whatever theme is active on
   the front end both style bare tags — input, select, table, h1-h6,
   a, ul/li — and some of those rules load after this file or carry
   surprising specificity, so raw colours/borders/radii/spacing were
   bleeding through instead of the design tokens above.

   Everything here is scoped to #sales-crm-app / #sales-crm-shell.
   IMPORTANT: an ID selector always outranks a class selector in CSS,
   with or without !important — so this block deliberately touches only
   properties that NONE of our own `.salescrm-*` component rules set
   (box-sizing, heading/list/table box-model, link colour, native
   appearance/outline). It never sets background, border or box-shadow
   on input/select/textarea/button as a class, because those are exactly
   the properties our own `.salescrm-btn`, `.salescrm-inline-status`,
   `.salescrm-table th`, etc. rely on — an ID-scoped reset would beat
   them and break our own design instead of the theme's. Those elements
   keep getting their look from the regular `.salescrm-*` classes below,
   which is safe because nothing here competes with them. */
#sales-crm-app,
#sales-crm-shell {
	box-sizing: border-box;
}
#sales-crm-app *,
#sales-crm-shell *,
#sales-crm-app *::before,
#sales-crm-app *::after {
	box-sizing: border-box;
}
#sales-crm-app,
#sales-crm-app * {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}
#sales-crm-app h1,
#sales-crm-app h2,
#sales-crm-app h3,
#sales-crm-app h4,
#sales-crm-app h5,
#sales-crm-app h6 {
	margin: 0 0 8px; padding: 0; letter-spacing: normal;
}
#sales-crm-app p { margin: 0 0 10px; }
#sales-crm-app ul,
#sales-crm-app ol { margin: 0; padding: 0; list-style: none; }
#sales-crm-app img,
#sales-crm-app svg { vertical-align: middle; }
#sales-crm-app table { border-collapse: collapse; border-spacing: 0; width: 100%; }
#sales-crm-app th,
#sales-crm-app td { text-align: left; font-weight: 400; }

/* Every native form control gets the same box model and has the theme's
   focus glow / native chrome switched off. This never sets colour,
   background or border here — those come from `.salescrm-*` classes
   a few lines down, which is what keeps status pills, coloured dropdowns
   and buttons working. */
#sales-crm-app input,
#sales-crm-app select,
#sales-crm-app textarea,
#sales-crm-app button {
	font-family: inherit;
	box-sizing: border-box;
	outline: none;
}
/* Checkboxes and radios are excluded from the appearance reset above.
   Stripping native appearance with no custom box/tick drawn back in makes
   them render with no visible square or checkmark at all — clickable but
   invisible, which is exactly what broke the dashboard "show/hide blocks"
   checkboxes (and every other plain checkbox in the CRM). Keep native
   appearance for these two types; accent-color themes the checked state
   to match the rest of the UI without needing a custom-drawn box. */
#sales-crm-app input:not([type="checkbox"]):not([type="radio"]),
#sales-crm-app select,
#sales-crm-app textarea,
#sales-crm-app button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
#sales-crm-app input[type="checkbox"],
#sales-crm-app input[type="radio"] {
	accent-color: var(--salescrm-primary);
	width: 15px;
	height: 15px;
	cursor: pointer;
	flex: 0 0 auto;
}
#sales-crm-app button { cursor: pointer; text-transform: none; }
/* Native search-input chrome (WebKit magnifier/cancel icon) is what
   themes and wp-admin skin most aggressively — our own search icon and
   placeholder replace it visually, so strip the browser's own version. */
#sales-crm-app input[type="search"]::-webkit-search-decoration,
#sales-crm-app input[type="search"]::-webkit-search-cancel-button,
#sales-crm-app input[type="search"]::-webkit-search-results-button,
#sales-crm-app input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none;
	display: none;
}

/* Links — boosts our own rules just enough to beat a plain theme `a`
   rule, at (effectively) the same specificity our components already
   use, so nav items / pills / buttons (styled by more specific classes
   further down) still win over this. */
:where(#sales-crm-app, #sales-crm-shell) a {
	color: var(--salescrm-primary);
	text-decoration: none;
}
:where(#sales-crm-app, #sales-crm-shell) a:hover {
	color: var(--salescrm-primary-hover);
}
/* Client/Lead name links in the Leads and Orders tables — keep these
   readable as plain black text (the bold weight already does the job of
   marking them as clickable) instead of inheriting the app's blue link
   colour, which made every row read like a wall of links. Scoped to the
   anchor tag specifically since these same class names are reused on the
   row's "Edit" button too, which should keep its own colour untouched. */
:where(#sales-crm-app, #sales-crm-shell) a.salescrm-edit-lead,
:where(#sales-crm-app, #sales-crm-shell) a.salescrm-edit-order,
:where(#sales-crm-app, #sales-crm-shell) a.salescrm-edit-customer {
	color: var(--salescrm-text);
}
:where(#sales-crm-app, #sales-crm-shell) a.salescrm-edit-lead:hover,
:where(#sales-crm-app, #sales-crm-shell) a.salescrm-edit-order:hover,
:where(#sales-crm-app, #sales-crm-shell) a.salescrm-edit-customer:hover {
	color: var(--salescrm-text);
}

/* ---- The two fields flagged as picking up WordPress' own look:
   the topbar search box and the dashboard's custom date-range inputs.
   Unique IDs + !important here is safe precisely because nothing else
   in this file styles these specific IDs, so there is no component
   rule for them to fight. ---- */
:is(#sales-crm-app, #sales-crm-app *)#salescrm-global-search,
:is(#sales-crm-app, #sales-crm-app *)#salescrm-date-from,
:is(#sales-crm-app, #sales-crm-app *)#salescrm-date-to {
	font-family: inherit !important;
	font-size: 13.5px !important;
	color: var(--salescrm-text) !important;
	background-color: var(--salescrm-card) !important;
	background-image: none !important;
	border: 1px solid var(--salescrm-border) !important;
	border-radius: 8px !important;
	padding: 8px 12px !important;
	margin: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	min-height: 0 !important;
	max-width: none !important;
}
:is(#sales-crm-app, #sales-crm-app *)#salescrm-global-search:focus,
:is(#sales-crm-app, #sales-crm-app *)#salescrm-date-from:focus,
:is(#sales-crm-app, #sales-crm-app *)#salescrm-date-to:focus {
	border-color: var(--salescrm-primary) !important;
	box-shadow: 0 0 0 3px var(--salescrm-primary-light) !important;
}
:is(#sales-crm-app, #sales-crm-app *)#salescrm-global-search::-webkit-search-decoration,
:is(#sales-crm-app, #sales-crm-app *)#salescrm-global-search::-webkit-search-cancel-button,
:is(#sales-crm-app, #sales-crm-app *)#salescrm-global-search::-webkit-search-results-button,
:is(#sales-crm-app, #sales-crm-app *)#salescrm-global-search::-webkit-search-results-decoration {
	-webkit-appearance: none !important;
	display: none !important;
}
:is(#sales-crm-app, #sales-crm-app *)#salescrm-date-from::-webkit-calendar-picker-indicator,
:is(#sales-crm-app, #sales-crm-app *)#salescrm-date-to::-webkit-calendar-picker-indicator {
	opacity: .6; cursor: pointer;
}
:is(#sales-crm-app, #sales-crm-app *)#salescrm-date-apply {
	background: var(--salescrm-primary) !important;
	border-color: var(--salescrm-primary) !important;
	color: #fff !important;
	box-shadow: 0 1px 2px rgba(79,70,229,.25) !important;
}
:is(#sales-crm-app, #sales-crm-app *)#salescrm-date-apply:hover {
	background: var(--salescrm-primary-hover) !important;
	border-color: var(--salescrm-primary-hover) !important;
}

/* ---- Notification panel's "Mark all read" text-button and the small
   round checkmark on each row. Same problem as the search/date fields
   above: themes carry their own `button` rule (background, border,
   box-shadow, sometimes a hover colour meant for a big CTA), and it was
   winning over the plain `.salescrm-notif-mark-*` classes further down
   this file. #salescrm-notif-mark-all is a real unique id, so it can
   take !important safely on its own; the per-row checkmark has no id
   (there's one per notification), so it's scoped through the dropdown's
   id instead — #id + .class still outranks a bare `button`/`.theme-widget
   button` selector, which is what was leaking through. ---- */
:is(#sales-crm-app, #sales-crm-app *)#salescrm-notif-mark-all {
	font-family: inherit !important;
	background: none !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--salescrm-primary) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 0 0 auto !important;
	border-radius: 0 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
:is(#sales-crm-app, #sales-crm-app *)#salescrm-notif-mark-all:hover {
	background: none !important;
	color: var(--salescrm-primary-hover) !important;
	text-decoration: underline !important;
}
:is(#sales-crm-app, #sales-crm-app *)#salescrm-notif-dropdown .salescrm-notif-mark-read {
	font-family: inherit !important;
	background: var(--salescrm-card) !important;
	background-image: none !important;
	border: 1px solid var(--salescrm-border) !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--salescrm-text-muted) !important;
	font-size: 11px !important;
	line-height: 1 !important;
	width: 22px !important;
	height: 22px !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
	margin: 0 12px 0 0 !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
:is(#sales-crm-app, #sales-crm-app *)#salescrm-notif-dropdown .salescrm-notif-mark-read:hover {
	background: var(--salescrm-card) !important;
	border-color: #16A34A !important;
	color: #16A34A !important;
}


:is(#sales-crm-app, #sales-crm-app *).salescrm-app {
	display: flex;
	min-height: 90vh;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--salescrm-text);
}

/* Plain text links (client name → edit, "View follow-ups →", etc.) had no
   colour rule of their own anywhere in this file, so they fell back
   entirely to the active theme's `a` / `a:hover` styles — including hover
   states meant for the theme's own dark-background buttons, which turned
   this text white and made it disappear against our light cards.
   `:where()` keeps the non-hover rule at the specificity of a bare `a`
   selector so it never outranks our own components (.salescrm-btn,
   .salescrm-pill, .salescrm-nav-item, …); the `:hover` version is one
   pseudo-class more specific than a theme's bare `a:hover` (which is what
   was overriding us), so it wins that fight on specificity alone, while
   still losing — correctly — to any of our own more specific `:hover`
   rules. Loading after the theme's stylesheet (see the enqueue priority
   in the main plugin file) settles any remaining ties in our favour. */
:where(.salescrm-shell, .salescrm-app) a {
	color: var(--salescrm-primary);
}
:where(.salescrm-shell, .salescrm-app) a:hover {
	color: var(--salescrm-primary-hover);
}
:where(.salescrm-shell, .salescrm-app) a.salescrm-edit-lead,
:where(.salescrm-shell, .salescrm-app) a.salescrm-edit-order,
:where(.salescrm-shell, .salescrm-app) a.salescrm-edit-customer {
	color: var(--salescrm-text);
}

/* Sidebar */
:is(#sales-crm-app, #sales-crm-app *).salescrm-sidebar {
	width: var(--salescrm-sidebar-w);
	flex-shrink: 0;
	background: var(--salescrm-card);
	border-right: 1px solid var(--salescrm-border);
	padding: 22px 14px;
	border-radius: var(--salescrm-radius) 0 0 var(--salescrm-radius);
}

/* Logo — company name (or uploaded logo image) set in Settings > Branding. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-logo {
	display: flex; align-items: center; gap: 10px;
	padding: 2px 8px 18px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-logo-full {
	font-weight: 700; font-size: 17px; color: var(--salescrm-text);
	letter-spacing: -.01em;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-logo-img {
	max-height: 34px; max-width: 180px; display: block;
}

/* Profile card — who's signed in, without needing the topbar */
:is(#sales-crm-app, #sales-crm-app *).salescrm-profile-card {
	display: flex; align-items: center; gap: 10px;
	background: var(--salescrm-bg);
	border: 1px solid var(--salescrm-border);
	border-radius: 10px;
	padding: 10px 12px;
	margin: 0 0 8px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-profile-avatar {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
	background: var(--salescrm-primary-light); color: var(--salescrm-primary);
	font-weight: 700; font-size: 13px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-profile-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-profile-name {
	font-weight: 600; font-size: 13px; color: var(--salescrm-text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-profile-sub {
	font-size: 12px; color: var(--salescrm-text-muted);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

:is(#sales-crm-app, #sales-crm-app *).salescrm-nav-item {
	display: flex; align-items: center; gap: 12px;
	padding: 9px 12px; border-radius: 8px; text-decoration: none;
	color: var(--salescrm-text); font-size: 14px; font-weight: 500; margin-bottom: 2px;
	border-left: 3px solid transparent;
	transition: background .12s ease, color .12s ease;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-nav-item:hover { background: var(--salescrm-bg); color: var(--salescrm-text); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-nav-item.is-active {
	background: var(--salescrm-primary-light);
	color: var(--salescrm-primary);
	border-left-color: var(--salescrm-primary);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-nav-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; flex-shrink: 0; color: inherit;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-nav-icon svg { width: 19px; height: 19px; }

/* Main content */
:is(#sales-crm-app, #sales-crm-app *).salescrm-main { flex: 1; padding: 28px 34px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-page-header h1 { margin: 0 0 4px; font-size: 25px; font-weight: 700; letter-spacing: -.01em; color: var(--salescrm-text); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-subtitle { color: var(--salescrm-text-muted); margin: 0; font-size: 14px; }

/* Cards */
:is(#sales-crm-app, #sales-crm-app *).salescrm-card {
	background: var(--salescrm-card);
	border-radius: var(--salescrm-radius);
	box-shadow: var(--salescrm-shadow);
	border: 1px solid var(--salescrm-border);
	padding: 20px;
	margin-bottom: 20px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-card h2 { margin-top: 0; font-size: 16px; }

/*
 * Groups a run of cards under a plain-language label — e.g. "Lead
 * Settings" over the Lead Statuses + Lead Sources cards, "Pipeline
 * Settings" over the Pipeline Stages card — so it's obvious at a glance
 * which page/feature each card's settings apply to. Deliberately smaller
 * and quieter than a card's own <h2> (which names the specific setting),
 * so the hierarchy reads as: group label > card title > card content.
 */
:is(#sales-crm-app, #sales-crm-app *).salescrm-settings-group-title {
	margin: 28px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; color: var(--salescrm-text-muted);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-settings-group-title:first-child { margin-top: 0; }

/* Stat grid */
:is(#sales-crm-app, #sales-crm-app *).salescrm-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; margin-bottom: 24px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stat-card { margin-bottom: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stat-label { font-size: 13px; color: var(--salescrm-text-muted); margin-bottom: 6px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stat-value { font-size: 26px; font-weight: 700; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stat-highlight { border-color: var(--salescrm-primary); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stat-link { font-size: 12px; color: var(--salescrm-primary); text-decoration: none; }

/* Buttons */
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px; border-radius: 8px; border: 1px solid var(--salescrm-border);
	background: var(--salescrm-card); color: var(--salescrm-text); font-size: 13px;
	cursor: pointer; text-decoration: none; font-weight: 600;
	transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn:hover { border-color: #D1D5DB; box-shadow: 0 1px 2px rgba(16,24,40,.06); color: var(--salescrm-text); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn-primary { background: var(--salescrm-primary); border-color: var(--salescrm-primary); color: #fff; box-shadow: 0 1px 2px rgba(79,70,229,.25); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn-primary:hover { background: var(--salescrm-primary-hover); border-color: var(--salescrm-primary-hover); box-shadow: 0 2px 6px rgba(79,70,229,.3); color: #fff; }
/* Ghost buttons were transparent, so they picked up the page's grey
   background and read as disabled next to the white cards. Solid white
   keeps them looking clickable; the text colour is untouched. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn-ghost { background: var(--salescrm-card); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn-ghost:hover { background: var(--salescrm-bg); color: var(--salescrm-text); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn-ghost.is-active { background: var(--salescrm-primary); border-color: var(--salescrm-primary); color: #fff; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn-ghost.is-active:hover { color: #fff; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn-whatsapp { background: var(--salescrm-whatsapp); border-color: var(--salescrm-whatsapp); color: #fff; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn-whatsapp:hover { background: var(--salescrm-whatsapp-hover); color: #fff; border-color: var(--salescrm-whatsapp-hover); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn-whatsapp.is-disabled { background: var(--salescrm-border); border-color: var(--salescrm-border); color: var(--salescrm-text-muted); cursor: not-allowed; box-shadow: none; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-wa-icon { display: inline-flex; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-wa-icon svg { width: 13px; height: 13px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Tables */
:is(#sales-crm-app, #sales-crm-app *).salescrm-table { width: 100%; border-collapse: collapse; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-table th {
	text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: var(--salescrm-text-muted); padding: 12px 14px; background: var(--salescrm-card);
	border-bottom: 1px solid var(--salescrm-border); position: sticky; top: 0; z-index: 1;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-table td { padding: 13px 14px; border-bottom: 1px solid var(--salescrm-border); font-size: 13.5px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-table tbody tr { transition: background .1s ease; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-table tbody tr:hover { background: var(--salescrm-bg); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-table tbody tr:last-child td { border-bottom: none; }

/* Kanban */
:is(#sales-crm-app, #sales-crm-app *).salescrm-kanban { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-kanban-col { min-width: 240px; background: var(--salescrm-bg); border-radius: var(--salescrm-radius); padding: 12px; flex-shrink: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-kanban-col-header { display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; margin-bottom: 10px; padding: 0 4px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-kanban-count { background: var(--salescrm-border); border-radius: 20px; padding: 1px 8px; font-size: 11px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-kanban-cards { min-height: 40px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-lead-card {
	background: var(--salescrm-card); border-radius: 10px; padding: 12px; margin-bottom: 10px;
	box-shadow: var(--salescrm-shadow); cursor: grab; border: 1px solid var(--salescrm-border);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-lead-card.dragging { opacity: 0.5; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-lead-name { font-weight: 600; font-size: 14px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-lead-phone,
:is(#sales-crm-app, #sales-crm-app *).salescrm-lead-source { font-size: 12px; color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-lead-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* Empty states */
:is(#sales-crm-app, #sales-crm-app *).salescrm-empty-state { text-align: center; padding: 48px 20px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-field-hint { font-size: 12px; color: var(--salescrm-text-muted); margin: -6px 0 10px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-autocomplete-wrap { position: relative; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-autocomplete-list {
	position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 50;
	background: var(--salescrm-card-bg); border: 1px solid var(--salescrm-border);
	border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
	max-height: 220px; overflow-y: auto;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-autocomplete-item { padding: 9px 12px; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-autocomplete-item:hover,
:is(#sales-crm-app, #sales-crm-app *).salescrm-autocomplete-item.is-active { background: var(--salescrm-hover-bg, #F3F4F6); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-autocomplete-item .salescrm-ac-name { font-weight: 600; color: var(--salescrm-text); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-autocomplete-item .salescrm-ac-phone { color: var(--salescrm-text-muted); font-size: 12px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-autocomplete-empty { padding: 9px 12px; font-size: 12.5px; color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-empty-icon { font-size: 32px; margin-bottom: 10px; line-height: 1; color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-empty-icon svg { width: 40px; height: 40px; display: inline-block; }

/* Tabs */
:is(#sales-crm-app, #sales-crm-app *).salescrm-tabs {
	display: flex; gap: 6px; margin-bottom: 16px;
	overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap;
	scrollbar-width: thin;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-tab { padding: 8px 14px; border-radius: 8px; text-decoration: none; color: var(--salescrm-text-muted); font-size: 13px; flex: 0 0 auto; white-space: nowrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-tab.is-active { background: var(--salescrm-primary); color: #fff; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-tab-count { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 20px; font-size: 11px; background: rgba(0,0,0,0.08); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-tab.is-active .salescrm-tab-count { background: rgba(255,255,255,0.25); }

/* Badges */
:is(#sales-crm-app, #sales-crm-app *).salescrm-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; background: var(--salescrm-border); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-badge-done { background: #D1FAE5; color: #065F46; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-priority-high { background: #FEE2E2; color: #991B1B; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-priority-medium { background: #FEF3C7; color: #92400E; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-priority-low { background: #DBEAFE; color: #1E40AF; }

/* Todo List */
:is(#sales-crm-app, #sales-crm-app *).salescrm-todo-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-todo-row.is-done .salescrm-todo-title { text-decoration: line-through; color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-todo-open { flex: 1; min-width: 0; cursor: pointer; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-todo-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-todo-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-todo-meta span { display: inline-flex; align-items: center; gap: 4px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-todo-meta svg { width: 13px; height: 13px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-todo-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-todo-check { width: 18px; height: 18px; flex-shrink: 0; }

/* Reminder / Repeat radio pickers */
:is(#sales-crm-app, #sales-crm-app *).salescrm-option-list { display: flex; flex-direction: column; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-option-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--salescrm-border); cursor: pointer; font-size: 14px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-option-row:last-child { border-bottom: none; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-option-row input[type="radio"] { width: 17px; height: 17px; flex-shrink: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-option-row small { display: block; color: var(--salescrm-text-muted); font-weight: 400; }

/* Task Details */
:is(#sales-crm-app, #sales-crm-app *).salescrm-detail-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--salescrm-border); font-size: 14px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-detail-row svg { width: 16px; height: 16px; color: var(--salescrm-text-muted); flex-shrink: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-detail-row.is-clickable { cursor: pointer; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-detail-row.is-clickable:hover { color: var(--salescrm-primary); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-detail-row .salescrm-detail-chevron { margin-left: auto; width: 14px; height: 14px; color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-subtask-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-subtask-item.is-done span { text-decoration: line-through; color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-subtask-item input[type="checkbox"] { width: 17px; height: 17px; }

/* Modals */
:is(#sales-crm-app, #sales-crm-app *).salescrm-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999999; display: flex; align-items: center; justify-content: center; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-modal-content { background: var(--salescrm-card); border-radius: var(--salescrm-radius); padding: 24px; width: 420px; max-width: 90vw; max-height: 85vh; overflow-y: auto; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-modal-wide { width: 560px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-modal-content label { display: block; margin: 12px 0 4px; font-size: 13px; font-weight: 600; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-modal-content input,
:is(#sales-crm-app, #sales-crm-app *).salescrm-modal-content select,
:is(#sales-crm-app, #sales-crm-app *).salescrm-modal-content textarea {
	width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--salescrm-border);
	background: var(--salescrm-bg); color: var(--salescrm-text); font-size: 14px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-hint { font-size: 11px; color: var(--salescrm-text-muted); margin: 4px 0 0; }

/* ---- Leads toolbar Status Filter ----
   Single dropdown trigger (button + absolutely-positioned panel) that
   replaces the old row of always-visible, differently-coloured status
   pills above the Leads toolbar. Lives inline in the toolbar next to
   "View as Pipeline" rather than as its own full-width row, and only ever
   shows one colour (the active status's, on the trigger) instead of eight
   at once. Sibling to, but intentionally separate from, the
   .salescrm-status-select "fancy select" system above — that one
   upgrades a live <select> element and needs fixed positioning to escape
   modal scroll containers; this one is a plain link list inside the
   toolbar (never inside a modal), so a simple relative/absolute pair is
   enough and avoids dragging in the extra JS positioning logic. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter {
	position: relative;
	/* Set on this wrapper by initStatusFilterIcons() in admin.js to match
	   whichever status option is currently active, so the trigger and the
	   active row below both pick it up via var() without any extra JS
	   wiring per element. Falls back to the primary colour (e.g. for "All
	   Statuses", or before JS has run) rather than staying unset. */
	--dcrm-status-color: var(--salescrm-primary);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-trigger { position: relative; }
/*
 * Deliberately named "is-filtered" rather than the generic "is-active" —
 * this button already carries .salescrm-btn-ghost, and that class has
 * its own site-wide .is-active / .is-active:hover rules (solid primary
 * fill, forced white text) used for other "this is the current selection"
 * buttons elsewhere in the app. Reusing "is-active" here collided with
 * those higher-specificity :hover rules and made the label/icon flash
 * white on hover instead of showing the intended per-status colour.
 */
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-trigger.is-filtered,
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-trigger.is-filtered:hover {
	border-color: var(--dcrm-status-color);
	background: var(--salescrm-card);
	color: var(--dcrm-status-color);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-trigger-label {
	max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-chevron {
	width: 15px; height: 15px; flex-shrink: 0; margin-left: 1px; transition: transform .15s ease;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter.is-open .salescrm-status-filter-chevron { transform: rotate(180deg); }

:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-panel {
	display: none;
	/* Fixed + repositioned via JS (salescrmPositionPanel(), same helper
	   the Status field's own dropdown uses) rather than absolute + a fixed
	   mobile breakpoint. The old "right: 0" trick anchored the panel to the
	   trigger's *right* edge, so on narrow screens where the trigger isn't
	   near the right edge itself, the panel's left side still ran off
	   screen. Computing left/top from the trigger's actual on-screen
	   position avoids that regardless of viewport width or where the
	   trigger happens to sit in the toolbar. */
	position: fixed; z-index: 60;
	max-height: 340px; overflow-y: auto;
	background: var(--salescrm-card); border: 1px solid var(--salescrm-border);
	border-radius: 12px; box-shadow: 0 12px 28px rgba(16,24,40,.14);
	padding: 6px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter.is-open .salescrm-status-filter-panel { display: block; }

:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-option {
	display: flex; align-items: center; gap: 9px;
	padding: 8px 8px; border-radius: 8px;
	font-size: 13.5px; font-weight: 500; color: var(--salescrm-text);
	text-decoration: none; cursor: pointer;
	/* Layout-neutral "border" (doesn't affect padding/box size the way a
	   real border would), so the active row doesn't jump against its
	   un-selected siblings. */
	box-shadow: inset 0 0 0 1px transparent;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-option:hover { background: var(--salescrm-bg); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-option.is-active {
	background: var(--salescrm-card); color: var(--dcrm-status-color); font-weight: 600;
	box-shadow: inset 0 0 0 1px var(--dcrm-status-color);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-option-icon {
	width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--salescrm-primary-light); color: var(--salescrm-primary);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-option-icon svg { width: 13px; height: 13px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-option-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-option-count {
	font-size: 11.5px; font-weight: 700; color: var(--salescrm-text-muted);
	background: var(--salescrm-bg); border-radius: 20px; padding: 1px 7px; flex-shrink: 0;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-option.is-active .salescrm-status-filter-option-count {
	background: color-mix(in srgb, var(--dcrm-status-color) 16%, var(--salescrm-card)); color: var(--dcrm-status-color);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-option-check {
	width: 15px; height: 15px; flex-shrink: 0; visibility: hidden;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-filter-option.is-active .salescrm-status-filter-option-check { visibility: visible; }

/* Fancy Status Select — replaces a plain <select class="salescrm-fancy-select">
   with an icon-led dropdown (trigger button + option panel). The original
   <select> stays in the DOM (hidden via a dedicated !important class, not
   jQuery .hide(), since a theme reset with !important on select { display }
   would otherwise win and make it reappear on top of the custom UI) so every
   existing .val()/change call in admin.js keeps working untouched; this is a
   visual layer on top. The panel itself is position:fixed with its
   top/left/width set from JS on open — this deliberately escapes the
   modal's overflow:auto and any WoodMart/Elementor stacking context, which
   is what silently ate clicks when the panel was absolutely positioned
   inside the scrollable modal. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-fancy-select-hidden { display: none !important; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-select { position: relative; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-trigger {
	display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
	padding: 9px 12px; border-radius: 12px; border: 1.5px solid var(--salescrm-border);
	background: var(--salescrm-card); cursor: pointer; font-family: inherit; font-size: 15px;
	color: var(--salescrm-text); transition: border-color .15s ease, box-shadow .15s ease;
	position: relative; z-index: 1;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-trigger:hover {
	border-color: color-mix(in srgb, var(--salescrm-primary) 45%, var(--salescrm-border));
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-select.is-open .salescrm-status-trigger {
	border-color: var(--salescrm-primary); box-shadow: 0 0 0 3px var(--salescrm-primary-light);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-trigger-icon {
	width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center;
	justify-content: center; flex-shrink: 0;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-trigger-icon svg { width: 17px; height: 17px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-trigger-label { flex: 1; font-weight: 600; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-chevron {
	width: 18px; height: 18px; flex-shrink: 0; color: var(--salescrm-text-muted);
	transition: transform .15s ease;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-select.is-open .salescrm-status-chevron { transform: rotate(180deg); color: var(--salescrm-primary); }

/* Compact trigger — used by the inline Status select inside the leads
   table cell, AND by the Status field in the New/Edit Lead popup, so both
   match in size. Marked via the .salescrm-status-select-compact class
   (set in admin.js) rather than only the leads-table ancestor, since the
   modal's field isn't inside .salescrm-leads-table. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-leads-table .salescrm-status-trigger,
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-select-compact .salescrm-status-trigger {
	padding: 4px 8px !important; font-size: 13px !important; gap: 6px !important; border-radius: 8px !important;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-leads-table .salescrm-status-trigger-icon,
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-select-compact .salescrm-status-trigger-icon {
	width: 20px !important; height: 20px !important; border-radius: 6px !important;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-leads-table .salescrm-status-trigger-icon svg,
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-select-compact .salescrm-status-trigger-icon svg { width: 12px !important; height: 12px !important; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-leads-table .salescrm-status-chevron,
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-select-compact .salescrm-status-chevron { width: 14px !important; height: 14px !important; }

/* Match the option rows inside the panel to the compact trigger above,
   when the panel was opened from the leads-table select. Scoped by the
   .salescrm-status-panel-compact marker class (set in admin.js) rather
   than a DOM-nesting selector, since the panel lives in document.body and
   isn't actually inside .salescrm-leads-table. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-panel-compact .salescrm-status-option {
	font-size: 13px !important; padding: 6px 8px 6px 6px !important; gap: 6px !important;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-panel-compact .salescrm-status-option-icon {
	width: 20px !important; height: 20px !important; border-radius: 6px !important;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-panel-compact .salescrm-status-option-icon svg { width: 12px !important; height: 12px !important; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-panel-compact .salescrm-status-option-check { width: 14px !important; height: 14px !important; }

/* ---- Status option panel + rows ----
   Each option carries its own status color via the --dcrm-accent /
   --dcrm-accent-bg custom properties (set inline from JS, per status), so
   hover/selected states tint with that status's own color instead of one
   flat, generic panel-wide highlight. The panel is duplicated below,
   unscoped, because it's appended to document.body (see note further down)
   and the #sales-crm-app-scoped copy above never reaches it there. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-panel {
	display: none; position: fixed; z-index: 1000000; pointer-events: auto;
	background: var(--salescrm-card); border: 1px solid var(--salescrm-border); border-radius: 14px;
	box-shadow: 0 16px 36px rgba(16,24,40,0.18), 0 2px 8px rgba(16,24,40,0.08);
	max-height: 320px; overflow-y: auto; padding: 8px;
	-webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-panel.is-open {
	display: block; animation: salescrmPanelIn .14s ease-out;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-option {
	display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 10px;
	cursor: pointer; font-size: 14.5px; color: var(--salescrm-text); font-weight: 500;
	pointer-events: auto; position: relative; border: 1.5px solid transparent;
	transition: background-color .12s ease, border-color .12s ease;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-option + .salescrm-status-option { margin-top: 2px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-option:hover { background: var(--salescrm-bg); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-option.is-selected {
	background: var(--dcrm-accent-bg); border-color: color-mix(in srgb, var(--dcrm-accent) 30%, transparent);
	color: var(--salescrm-text); font-weight: 600;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-option-icon {
	width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center;
	justify-content: center; flex-shrink: 0;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-option-icon svg { width: 17px; height: 17px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-option-label { flex: 1; white-space: nowrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-option-check {
	width: 18px; height: 18px; flex-shrink: 0; color: var(--dcrm-accent); opacity: 0;
	transform: scale(.6); transition: opacity .12s ease, transform .12s ease;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-option-check svg { width: 100%; height: 100%; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-option.is-selected .salescrm-status-option-check {
	opacity: 1; transform: scale(1);
}

@keyframes salescrmPanelIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* The panel above is appended to document.body (not inside #sales-crm-app)
   by design, so it can't be clipped by a modal's overflow:auto. That also means
   the #sales-crm-app-scoped rules above never match it — without the
   duplicate, unscoped rules below, the panel and its option rows render with
   no layout at all (unsized SVGs dumped down the page at native size). */
.salescrm-status-panel {
	display: none; position: fixed; z-index: 1000000; pointer-events: auto;
	background: var(--salescrm-card); border: 1px solid var(--salescrm-border); border-radius: 14px;
	box-shadow: 0 16px 36px rgba(16,24,40,0.18), 0 2px 8px rgba(16,24,40,0.08);
	max-height: 320px; overflow-y: auto; padding: 8px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain;
}
.salescrm-status-panel * { box-sizing: border-box; }
.salescrm-status-panel.is-open { display: block; animation: salescrmPanelIn .14s ease-out; }
.salescrm-status-panel .salescrm-status-option {
	display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 10px;
	cursor: pointer; font-size: 14.5px; color: var(--salescrm-text); font-weight: 500;
	pointer-events: auto; position: relative; border: 1.5px solid transparent;
	transition: background-color .12s ease, border-color .12s ease;
}
.salescrm-status-panel .salescrm-status-option + .salescrm-status-option { margin-top: 2px; }
.salescrm-status-panel .salescrm-status-option:hover { background: var(--salescrm-bg); }
.salescrm-status-panel .salescrm-status-option.is-selected {
	background: var(--dcrm-accent-bg); border-color: color-mix(in srgb, var(--dcrm-accent) 30%, transparent);
	color: var(--salescrm-text); font-weight: 600;
}
.salescrm-status-panel .salescrm-status-option-icon {
	width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center;
	justify-content: center; flex-shrink: 0;
}
.salescrm-status-panel .salescrm-status-option-icon svg { width: 17px; height: 17px; flex-shrink: 0; }
.salescrm-status-panel .salescrm-status-option-label { flex: 1; white-space: nowrap; }
.salescrm-status-panel .salescrm-status-option-check {
	width: 18px; height: 18px; flex-shrink: 0; color: var(--dcrm-accent); opacity: 0;
	transform: scale(.6); transition: opacity .12s ease, transform .12s ease;
}
.salescrm-status-panel .salescrm-status-option-check svg { width: 100%; height: 100%; }
.salescrm-status-panel .salescrm-status-option.is-selected .salescrm-status-option-check {
	opacity: 1; transform: scale(1);
}

.salescrm-status-panel-compact .salescrm-status-option {
	font-size: 13px !important; padding: 6px 8px 6px 6px !important; gap: 6px !important;
}
.salescrm-status-panel-compact .salescrm-status-option-icon {
	width: 20px !important; height: 20px !important; border-radius: 6px !important;
}
.salescrm-status-panel-compact .salescrm-status-option-icon svg { width: 12px !important; height: 12px !important; }
.salescrm-status-panel-compact .salescrm-status-option-check { width: 14px !important; height: 14px !important; }

/* Same field styling as inside a modal, but for forms that sit directly on
   the page in a plain .salescrm-card instead of a popup (e.g. the
   Settings screen). Without this, labels stay inline and inputs/textareas
   render with raw browser chrome — no width, padding, or border — which is
   what made that page look broken. Scoped to "> form" so it never touches
   the small filter forms (search boxes, date pickers) that sit in a
   toolbar next to a card rather than inside one. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-card > form label {
	display: block; margin: 14px 0 4px; font-size: 13px; font-weight: 600;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-card > form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
:is(#sales-crm-app, #sales-crm-app *).salescrm-card > form select,
:is(#sales-crm-app, #sales-crm-app *).salescrm-card > form textarea {
	display: block; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--salescrm-border);
	background: var(--salescrm-bg); color: var(--salescrm-text); font-size: 14px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-card > form textarea { resize: vertical; }

/* Projects */
:is(#sales-crm-app, #sales-crm-app *).salescrm-project-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 16px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-project-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-progress-bar { background: var(--salescrm-border); border-radius: 20px; height: 6px; overflow: hidden; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-progress-fill { background: var(--salescrm-primary); height: 100%; transition: width 0.3s; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-progress-label { font-size: 11px; color: var(--salescrm-text-muted); margin: 4px 0 10px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-task-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-task-item .is-done { text-decoration: line-through; color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-add-task-form input { margin-top: 8px; font-size: 13px; }

/* Invoice items */
:is(#sales-crm-app, #sales-crm-app *).salescrm-invoice-item-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-invoice-totals-row { display: flex; gap: 20px; margin-top: 12px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-invoice-total-preview { font-size: 16px; font-weight: 700; margin-top: 12px; text-align: right; }

/* Team */
:is(#sales-crm-app, #sales-crm-app *).salescrm-team-stats { list-style: none; padding: 0; margin: 12px 0; font-size: 13px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-team-stats li { display: flex; justify-content: space-between; padding: 4px 0; }

/* Switch */
:is(#sales-crm-app, #sales-crm-app *).salescrm-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-switch input { opacity: 0; width: 0; height: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-switch-slider { position: absolute; inset: 0; background: var(--salescrm-border); border-radius: 22px; cursor: pointer; transition: 0.2s; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-switch-slider:before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: 0.2s; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-switch input:checked + .salescrm-switch-slider { background: var(--salescrm-primary); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-switch input:checked + .salescrm-switch-slider:before { transform: translateX(18px); }

:is(#sales-crm-app, #sales-crm-app *).salescrm-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 16px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-notice { background: #D1FAE5; color: #065F46; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; }

/* Leads dashboard (table view) */
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--salescrm-text-muted); margin-right: 2px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill {
	--pill-color: var(--salescrm-primary);
	--pill-tint: color-mix(in srgb, var(--pill-color) 12%, var(--salescrm-card));
	--pill-tint-strong: color-mix(in srgb, var(--pill-color) 22%, var(--salescrm-card));
	--pill-border-tint: color-mix(in srgb, var(--pill-color) 40%, var(--salescrm-border));
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
	border: 1px solid var(--salescrm-border); text-decoration: none;
	/* Plain, neutral by default (Dashboard date range, etc). The Leads
	   status filter row below opts into always-colour-coded text/badges —
	   that look shouldn't leak into every other pill row in the app. */
	color: var(--salescrm-text); background: var(--salescrm-card);
	transition: background .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill:hover { border-color: var(--pill-color); box-shadow: 0 1px 3px rgba(16,24,40,.08); color: var(--pill-color) !important; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill.is-active { background: var(--pill-color); color: #fff; border-color: var(--pill-color); box-shadow: 0 1px 3px rgba(16,24,40,.12); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill.is-active:hover { color: #fff !important; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-static { color: var(--salescrm-text-muted); background: var(--salescrm-bg); }

/* Leads status filter row only — every pill carries its status colour in
   its text at all times, with a soft tinted background/border once
   selected, instead of the neutral/solid-fill look used elsewhere. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-row:not(.salescrm-pill-row-tight) .salescrm-pill {
	color: var(--pill-color);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-row:not(.salescrm-pill-row-tight) .salescrm-pill:hover {
	border-color: var(--pill-border-tint); background: var(--pill-tint); box-shadow: 0 1px 3px rgba(16,24,40,.06); color: var(--pill-color) !important;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-row:not(.salescrm-pill-row-tight) .salescrm-pill.is-active {
	background: var(--pill-tint-strong); color: var(--pill-color) !important; border-color: var(--pill-border-tint); box-shadow: none;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-row:not(.salescrm-pill-row-tight) .salescrm-pill.is-active:hover {
	background: var(--pill-tint-strong);
}

:is(#sales-crm-app, #sales-crm-app *).salescrm-toolbar {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-toolbar-left { display: flex; gap: 8px; flex-wrap: wrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-toolbar-right input[type="search"] {
	padding: 8px 12px 8px 34px; border-radius: 8px; border: 1px solid var(--salescrm-border);
	background: var(--salescrm-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 10px center;
	background-size: 15px; color: var(--salescrm-text); font-size: 13px; min-width: 230px;
	transition: border-color .12s ease, box-shadow .12s ease;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-toolbar-right input[type="search"]:focus {
	outline: none; border-color: var(--salescrm-primary);
	box-shadow: 0 0 0 3px var(--salescrm-primary-light);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-toolbar-right select.salescrm-month-filter {
	padding: 8px 12px; border-radius: 8px; border: 1px solid var(--salescrm-border);
	background: var(--salescrm-card); color: var(--salescrm-text); font-size: 13px; cursor: pointer;
}

/* Custom-range date pickers revealed next to the Leads date filter. Hidden
   with width/opacity (not display:none) so it fades in in place instead of
   snapping the rest of the toolbar sideways when it appears. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-lead-date-range {
	display: inline-flex; align-items: center; gap: 6px;
	width: 0; overflow: hidden; opacity: 0;
	transition: width .15s ease, opacity .15s ease;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-lead-date-range.is-visible {
	width: 320px; opacity: 1;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-lead-date-range input[type="date"] {
	padding: 7px 10px; border-radius: 8px; border: 1px solid var(--salescrm-border);
	background: var(--salescrm-card); color: var(--salescrm-text); font-size: 13px;
	width: 140px; flex: none;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-lead-date-range-sep {
	font-size: 12px; color: var(--salescrm-text-muted); flex: none;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-no-live-results {
	display: none; padding: 16px; text-align: center; color: var(--salescrm-text-muted); font-size: 13px;
}

:is(#sales-crm-app, #sales-crm-app *).salescrm-table-card { overflow-x: auto; padding: 0; -webkit-overflow-scrolling: touch; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-leads-table { min-width: 900px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-tickets-table { min-width: 760px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-tickets-table td,
:is(#sales-crm-app, #sales-crm-app *).salescrm-tickets-table th { white-space: nowrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-tickets-table td:nth-child(2),
:is(#sales-crm-app, #sales-crm-app *).salescrm-tickets-table td:nth-child(3) { white-space: normal; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-leads-table th,
:is(#sales-crm-app, #sales-crm-app *).salescrm-leads-table td { white-space: nowrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-note-cell { white-space: normal; max-width: 200px; font-size: 12px; color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-inline-status {
	padding: 6px 26px 6px 10px; border-radius: 20px; border: 1.5px solid; background-color: transparent;
	font-size: 12px; font-weight: 700; cursor: pointer; appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 8px center; background-size: 11px;
}

:is(#sales-crm-app, #sales-crm-app *).salescrm-manage-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--salescrm-border); font-size: 13px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-manage-row:last-child { border-bottom: none; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-manage-row button { margin-left: auto; background: none; border: none; color: var(--salescrm-text-muted); font-size: 18px; cursor: pointer; line-height: 1; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-manage-row button:hover { color: #DC2626; }
:is(#sales-crm-app, #sales-crm-app *)#salescrm-status-list,
:is(#sales-crm-app, #sales-crm-app *)#salescrm-source-list { max-height: 200px; overflow-y: auto; margin-bottom: 10px; }

@media (max-width: 782px) {
	:is(#sales-crm-app, #sales-crm-app *).salescrm-app { flex-direction: column; }
	:is(#sales-crm-app, #sales-crm-app *).salescrm-sidebar { width: 100%; border-radius: var(--salescrm-radius) var(--salescrm-radius) 0 0; }
	:is(#sales-crm-app, #sales-crm-app *).salescrm-main { padding: 16px; }
}

/* Row action buttons (Edit / Delete / Follow-up / To Order) */
:is(#sales-crm-app, #sales-crm-app *).salescrm-row-actions { white-space: nowrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-row-actions .salescrm-btn {
	margin-left: 4px; padding: 6px 11px; font-size: 12px; border-radius: 7px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-row-actions .salescrm-btn:hover { background: var(--salescrm-bg); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-chart-fallback td { padding: 6px 8px; font-size: 13px; }

/* ---- Access control matrix ---- */
:is(#sales-crm-app, #sales-crm-app *).salescrm-access-table td,
:is(#sales-crm-app, #sales-crm-app *).salescrm-access-table th { vertical-align: middle; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-access-col { text-align: center; width: 140px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-access-col input[type="checkbox"] { transform: scale(1.25); cursor: pointer; }

:is(#sales-crm-app, #sales-crm-app *).salescrm-override-row {
	border: 1px solid var(--salescrm-border);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 10px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-override-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-override-head strong { flex: 1; min-width: 140px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-override-screens {
	display: flex; flex-wrap: wrap; gap: 10px 18px;
	margin-top: 12px; padding-top: 12px;
	border-top: 1px dashed var(--salescrm-border);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-override-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* ---- CRM user management ---- */
:is(#sales-crm-app, #sales-crm-app *).salescrm-team-card .salescrm-team-login { word-break: break-all; margin: 6px 0 10px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-team-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-password-row { display: flex; gap: 6px; align-items: center; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-password-row input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-inline-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 400; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-inline-check input { width: auto; }

/* ---- Team Control: departments ---- */
:is(#sales-crm-app, #sales-crm-app *).salescrm-notice-soft { background: rgba(79,70,229,0.06); border: 1px solid rgba(79,70,229,0.25); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-notice-soft p { margin: 0; font-size: 13px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-dept-card { margin-bottom: 18px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-dept-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-dept-head h2 { margin: 0 0 2px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-dept-actions { display: flex; gap: 6px; flex-wrap: wrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-dept-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 16px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-badge-outline { background: transparent; border: 1px dashed var(--salescrm-border); color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-badge-muted { background: var(--salescrm-border); color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-screen-picker {
	display: flex; flex-wrap: wrap; gap: 8px 18px;
	border: 1px solid var(--salescrm-border); border-radius: 8px;
	padding: 12px; margin-top: 4px;
}

/* ---- Orders ---- */
:is(#sales-crm-app, #sales-crm-app *).salescrm-orders-table td,
:is(#sales-crm-app, #sales-crm-app *).salescrm-orders-table th { white-space: nowrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-expenses-table td,
:is(#sales-crm-app, #sales-crm-app *).salescrm-expenses-table th,
:is(#sales-crm-app, #sales-crm-app *).salescrm-followups-table td,
:is(#sales-crm-app, #sales-crm-app *).salescrm-followups-table th,
:is(#sales-crm-app, #sales-crm-app *).salescrm-reminders-table td,
:is(#sales-crm-app, #sales-crm-app *).salescrm-reminders-table th { white-space: nowrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-amount-due { color: #DC2626; font-weight: 600; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-amount-clear { color: #16A34A; font-weight: 600; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-amount-warn { color: #D97706; font-weight: 600; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-field-grid .salescrm-hint { margin: 4px 0 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-input-warn { border-color: #DC2626 !important; color: #DC2626; }
:is(#sales-crm-app, #sales-crm-app *)#salescrm-order-remaining { background: var(--salescrm-bg); font-weight: 600; }
@media (max-width: 640px) {
	:is(#sales-crm-app, #sales-crm-app *).salescrm-field-grid { grid-template-columns: 1fr; }

	/* Orders toolbar's Filter by Status / Filter by Developer dropdowns:
	   without a cap these can grow to the width of their longest option
	   (a developer's name can be a full email address), which looked
	   oversized next to the New Order button on a phone screen. Each now
	   takes roughly half the row and truncates its label instead. */
	:is(#sales-crm-app, #sales-crm-app *).salescrm-status-select-toolbar-filter {
		flex: 1 1 46%; max-width: 46%; min-width: 0;
	}
	:is(#sales-crm-app, #sales-crm-app *).salescrm-status-select-toolbar-filter .salescrm-status-trigger {
		padding: 4px 6px !important; font-size: 12px !important; gap: 4px !important;
	}
	:is(#sales-crm-app, #sales-crm-app *).salescrm-status-select-toolbar-filter .salescrm-status-trigger-icon {
		width: 18px !important; height: 18px !important;
	}
	:is(#sales-crm-app, #sales-crm-app *).salescrm-status-select-toolbar-filter .salescrm-status-trigger-icon svg {
		width: 10px !important; height: 10px !important;
	}
	:is(#sales-crm-app, #sales-crm-app *).salescrm-status-select-toolbar-filter .salescrm-status-trigger-label {
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	:is(#sales-crm-app, #sales-crm-app *).salescrm-status-select-toolbar-filter .salescrm-status-chevron {
		width: 12px !important; height: 12px !important;
	}
}

/* Status dropdown must be wide enough to actually read the status name */
:is(#sales-crm-app, #sales-crm-app *).salescrm-inline-order-status {
	min-width: 140px;
	width: auto;
	font-weight: 600;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-filter-select { min-width: 150px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-field-full { grid-column: 1 / -1; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-toolbar-right { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Assigned By / Developer pill rows sit under the status pills */
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-row-labelled {
	align-items: center;
	margin-bottom: 12px;
	padding-top: 10px;
	border-top: 1px dashed var(--salescrm-border);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--salescrm-text-muted);
	margin-right: 4px;
	flex: 0 0 auto;
}
/* "Unassigned" is a count, not a filter — no link, no hover affordance */
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-static { opacity: .65; cursor: default; }

/* Freshly converted order gets a brief highlight so it's easy to spot */
@keyframes salescrm-flash {
	from { background: rgba(79, 70, 229, 0.18); }
	to   { background: transparent; }
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-row-highlight td {
	animation: salescrm-flash 2.5s ease-out forwards;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-convert-lead {
	background: var(--salescrm-bg);
	border-radius: 8px;
	padding: 10px 12px;
	margin: 0 0 6px;
	font-size: 14px;
}

/* Lead status dropdown needs room for the status name, same as Orders */
:is(#sales-crm-app, #sales-crm-app *).salescrm-inline-status {
	min-width: 150px;
	width: auto;
	font-weight: 600;
}

/* ================= Dashboard: date range card =================
   One card holds the preset pills on top and the custom From/To row
   underneath. The "Custom" pill sits right after "All Time" and just
   toggles the row below open/closed — it isn't a link like the other
   presets because it doesn't resolve to a range on its own, it needs
   the two dates first. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-range-card {
	padding: 16px 16px 0;
	margin-bottom: 18px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-row-tight {
	background: var(--salescrm-bg);
	border-radius: 10px;
	padding: 5px;
	margin: 0 0 16px;
	display: inline-flex;
	max-width: 100%;
	overflow-x: auto;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-row-tight .salescrm-pill {
	border: none;
	border-radius: 7px;
	background: transparent;
	white-space: nowrap;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-row-tight .salescrm-pill:hover {
	box-shadow: none;
	background: rgba(79,70,229,.08);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-row-tight .salescrm-pill.is-active {
	background: linear-gradient(135deg, var(--salescrm-primary), #7C6CF0);
	box-shadow: 0 2px 6px rgba(79,70,229,.35);
}

:is(#sales-crm-app, #sales-crm-app *).salescrm-stat-sub { font-size: 12px; color: var(--salescrm-text-muted); margin-top: 4px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stat-alert { border-color: #F59E0B; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-open-tickets-card { border: none; box-shadow: none; }

/* Thin bar used for percentages everywhere on this screen */
:is(#sales-crm-app, #sales-crm-app *).salescrm-progress {
	height: 6px; border-radius: 999px; margin-top: 8px;
	background: var(--salescrm-border); overflow: hidden;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-progress span {
	display: block; height: 100%; border-radius: 999px;
	background: var(--salescrm-primary);
}

:is(#sales-crm-app, #sales-crm-app *).salescrm-status-strip { display: flex; flex-wrap: wrap; gap: 18px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-block { flex: 1 1 140px; min-width: 120px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-count { font-size: 26px; font-weight: 700; line-height: 1.1; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-status-name { font-size: 13px; color: var(--salescrm-text-muted); }

:is(#sales-crm-app, #sales-crm-app *).salescrm-dash-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-dash-columns .salescrm-card { margin: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-dash-trend { margin-top: 20px; }

:is(#sales-crm-app, #sales-crm-app *).salescrm-bar-row { margin-bottom: 14px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-bar-label { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }

/* ================= Lead pipeline board ================= */
:is(#sales-crm-app, #sales-crm-app *).salescrm-layout-switch { display: inline-flex; gap: 4px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-layout-switch .is-active {
	background: var(--salescrm-primary);
	color: #fff;
	border-color: var(--salescrm-primary);
}

/*
 * The board's height is set in pixels by JS (see syncPipelineHeight() in
 * admin.js), which measures down to the bottom of the sidebar — that's a
 * lot more reliable than trying to get a "fill the rest of the page"
 * height purely from CSS, since this app can be embedded inside all kinds
 * of theme wrappers on the front end. min-height below is just the
 * fallback for the brief moment before that JS runs.
 */
:is(#sales-crm-app, #sales-crm-app *).salescrm-pipeline {
	display: flex;
	gap: 12px;
	align-items: stretch;
	overflow-x: auto;
	padding-bottom: 12px;
	-webkit-overflow-scrolling: touch;
	min-height: 60vh;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage {
	flex: 0 0 270px;
	background: var(--salescrm-bg);
	border: 1px solid var(--salescrm-border);
	border-radius: var(--salescrm-radius);
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage.is-over {
	border-color: var(--salescrm-primary);
	box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.18) inset;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-head {
	padding: 14px 14px 12px;
	border-top: 4px solid var(--salescrm-border);
	background: var(--salescrm-card);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-head-top { display: flex; align-items: flex-start; gap: 10px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-icon {
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 10px;
	background: color-mix(in srgb, var(--stage-color, var(--salescrm-primary)) 14%, var(--salescrm-card));
	color: var(--stage-color, var(--salescrm-primary));
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-icon svg { width: 19px; height: 19px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-head-text { flex: 1; min-width: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-name { font-weight: 700; font-size: 14px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-meta {
	display: flex; justify-content: space-between; gap: 8px;
	font-size: 12px; color: var(--salescrm-text-muted); margin-top: 3px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-meta strong { color: var(--stage-color, var(--salescrm-text)); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-body { padding: 10px; overflow-y: auto; flex: 1; min-height: 90px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-empty {
	margin: 0; padding: 30px 12px; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	font-size: 12px; color: var(--salescrm-text-muted);
	border: 1.5px dashed var(--salescrm-border); border-radius: 10px;
	min-height: 160px; justify-content: center;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-empty strong { font-size: 13px; color: var(--salescrm-text); font-weight: 600; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-empty-icon {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 999px;
	background: var(--salescrm-card); box-shadow: var(--salescrm-shadow);
	color: var(--salescrm-text-muted);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-empty-icon svg { width: 15px; height: 15px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-orphan { opacity: .85; }

:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-card {
	background: var(--salescrm-card);
	border: 1px solid var(--salescrm-border);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 10px;
	cursor: grab;
	transition: box-shadow .15s ease, transform .15s ease;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-card:hover { box-shadow: var(--salescrm-shadow); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-card.is-dragging { opacity: .45; transform: rotate(1deg); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-title a { font-weight: 700; text-decoration: none; color: var(--card-color, var(--salescrm-primary)); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-menu {
	flex: 0 0 auto; display: flex; color: var(--salescrm-text-muted); text-decoration: none;
	padding: 2px; border-radius: 4px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-menu:hover { color: var(--salescrm-text); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-menu svg { width: 16px; height: 16px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-line { font-size: 12px; color: var(--salescrm-text-muted); margin-top: 3px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-tag {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
	background: var(--salescrm-primary-light); color: var(--salescrm-primary);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-tag svg { width: 11px; height: 11px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-tag-alt { background: var(--salescrm-bg); color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-foot {
	display: flex; justify-content: space-between; align-items: baseline;
	margin-top: 10px; font-size: 13px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-foot span { font-size: 11px; color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-note {
	margin-top: 10px; padding-top: 8px;
	border-top: 1px solid var(--salescrm-border);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-note-head {
	display: flex; align-items: center; gap: 5px;
	font-size: 11.5px; font-weight: 700; color: var(--salescrm-text-muted);
	text-transform: uppercase; letter-spacing: .02em;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-note-head svg { width: 13px; height: 13px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-note p { margin: 4px 0 0; font-size: 12.5px; color: var(--salescrm-text); line-height: 1.4; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-actions { margin-top: 12px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-actions-utility {
	display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-actions .salescrm-btn-whatsapp { padding: 4px 8px; font-size: 11px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-actions-primary {
	display: flex; align-items: center; gap: 8px; margin-top: 8px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-deal-actions-primary .salescrm-btn { flex: 1; justify-content: center; padding: 8px 10px; font-size: 12.5px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn-success-outline {
	background: #F0FDF4; border-color: #86EFAC; color: #16A34A;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn-success-outline:hover {
	background: #DCFCE7; border-color: #16A34A; color: #15803D;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-icon-btn {
	border: 1px solid var(--salescrm-border);
	background: var(--salescrm-card);
	border-radius: 8px; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; padding: 0; line-height: 1;
	flex: 0 0 auto;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-icon-btn svg { width: 14px; height: 14px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-icon-btn:hover { border-color: var(--salescrm-primary); color: var(--salescrm-primary); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-icon-btn-danger { color: #DC2626; border-color: #FBCFCF; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-icon-btn-danger:hover { border-color: #DC2626; color: #DC2626; background: #FEF2F2; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-pipeline-hint { margin-top: 4px; }

/* Settings radio choices */
:is(#sales-crm-app, #sales-crm-app *).salescrm-choice-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-choice {
	display: flex; gap: 10px; align-items: flex-start;
	border: 1px solid var(--salescrm-border); border-radius: 8px;
	padding: 10px 12px; cursor: pointer; font-weight: 400;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-choice.is-selected { border-color: var(--salescrm-primary); background: rgba(79,70,229,.05); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-choice input { width: auto; margin-top: 3px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-choice em { display: block; font-style: normal; font-size: 12px; color: var(--salescrm-text-muted); }

@media (max-width: 782px) {
	:is(#sales-crm-app, #sales-crm-app *).salescrm-stage { flex-basis: 82vw; height: auto; min-height: 0; }
}

/* Stage reordering */
:is(#sales-crm-app, #sales-crm-app *).salescrm-reorder { display: inline-flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-reorder button {
	margin: 0 !important; padding: 0 4px; line-height: 1;
	font-size: 9px; border: none; background: none; cursor: pointer;
	color: var(--salescrm-text-muted);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-reorder button:hover { color: var(--salescrm-primary) !important; }

:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-head { cursor: grab; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-head:active { cursor: grabbing; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage-grip {
	color: var(--salescrm-text-muted);
	letter-spacing: -2px;
	margin-right: 4px;
	font-size: 11px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage.is-moving { opacity: .5; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stage.is-drop-target { outline: 2px dashed var(--salescrm-primary); outline-offset: 2px; }

/* Dashboard customize panel */
:is(#sales-crm-app, #sales-crm-app *).salescrm-customize-panel h2 { margin-top: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-customize-group { margin-bottom: 14px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-customize-group h3 {
	margin: 0 0 6px; font-size: 12px; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--salescrm-text-muted);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-customize-panel .salescrm-modal-actions { margin-top: 6px; }

/* ================= Collapsible sidebar ================= */
:is(#sales-crm-app, #sales-crm-app *).salescrm-sidebar-action {
	display: flex; align-items: center; gap: 12px;
	width: 100%; padding: 8px 12px;
	background: none; border: 1px solid transparent; border-radius: 8px;
	color: var(--salescrm-text-muted);
	font-size: 13px; font-weight: 500; text-align: left; cursor: pointer;
	box-shadow: none; outline: none;
}
/* The theme's own button styling (border/box-shadow on focus, accent-colour
   outline) was leaking through onto these — they're real <button> elements,
   unlike the nav links, so Astra's default button chrome applied to them
   and showed up as a stray coloured box. Force it off in every state. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-sidebar-action,
:is(#sales-crm-app, #sales-crm-app *).salescrm-sidebar-action:hover,
:is(#sales-crm-app, #sales-crm-app *).salescrm-sidebar-action:focus,
:is(#sales-crm-app, #sales-crm-app *).salescrm-sidebar-action:active {
	border-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-sidebar-action:hover { background: var(--salescrm-bg); color: var(--salescrm-text); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-sidebar-logout:hover { background: #fdecec; color: #d33; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-collapse-icon { transition: transform .2s ease; display: inline-flex; }

/* Sidebar needs to be a column for margin-top:auto to push the footer down */
:is(#sales-crm-app, #sales-crm-app *).salescrm-sidebar { display: flex; flex-direction: column; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-sidebar nav { flex: 0 0 auto; }

/* --- Collapsed rail ---
   Icon on top, short label underneath — wider than a bare icon rail so the
   two-word labels ("Toggle Dark Mode") can wrap onto a second line instead
   of getting clipped with an ellipsis. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-sidebar { width: 92px; padding-left: 6px; padding-right: 6px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-logo-full { display: none; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-logo { justify-content: center; padding: 2px 0 16px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-profile-card { justify-content: center; padding: 8px 0; background: none; border: none; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-profile-info { display: none; }

:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-nav-item,
:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-sidebar-action {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	padding: 10px 4px;
	text-align: center;
	border-left: none;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-nav-icon { width: auto; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-nav-label {
	display: block;
	max-width: 100%;
	font-size: 10.5px;
	line-height: 1.25;
	font-weight: 600;
	white-space: normal;
	overflow-wrap: break-word;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-collapse-icon { transform: rotate(180deg); }

/* The board and wide tables get the reclaimed width */
:is(#sales-crm-app, #sales-crm-app *).salescrm-sidebar { transition: width .18s ease; }

@media (max-width: 782px) {
	/* The mobile sidebar is already a horizontal strip — collapsing it there
	   would hide the navigation entirely. */
	:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-sidebar { width: 100%; }
	:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-logo-full { display: block; }
	:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-profile-info { display: flex; }
	:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-nav-item,
:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-sidebar-action {
		flex-direction: row;
		gap: 10px;
		padding: 8px 12px;
		text-align: left;
	}
	:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-nav-label {
		white-space: nowrap;
		font-size: 13px;
	}
}

/* Collapse control sits right under the tabs, not at the bottom of a tall sidebar */
:is(#sales-crm-app, #sales-crm-app *).salescrm-sidebar-collapse {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--salescrm-border);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-collapsed .salescrm-sidebar-collapse { padding-left: 0; padding-right: 0; }

@media (max-width: 782px) {
	:is(#sales-crm-app, #sales-crm-app *).salescrm-sidebar-collapse { display: none; }
}

/* Notification bell — a fixed floating button in the corner of the
   viewport (not inline in the topbar), so it stays reachable while
   scrolling a long table and never crowds the search/user block on a
   narrow screen. Covers follow-ups and renewals, read-only. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-wrap { position: relative; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-fab-wrap {
	position: fixed; right: 26px; bottom: 26px; z-index: 9000;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-fab {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 50%;
	background: var(--salescrm-primary); border: none;
	color: #fff; cursor: pointer;
	box-shadow: 0 8px 22px rgba(79,70,229,.35), 0 2px 6px rgba(16,24,40,.15);
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-fab:hover {
	background: var(--salescrm-primary-hover, var(--salescrm-primary));
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(79,70,229,.42), 0 3px 8px rgba(16,24,40,.18);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-fab svg { width: 23px; height: 23px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-fab-badge {
	position: absolute; top: -2px; right: -2px;
	background: #EF4444; color: #fff; font-size: 10.5px; font-weight: 700;
	min-width: 19px; height: 19px; border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	padding: 0 4px; border: 2px solid var(--salescrm-bg);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-dropdown {
	position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
	width: 340px; max-width: 88vw;
	background: var(--salescrm-card); border: 1px solid var(--salescrm-border);
	border-radius: var(--salescrm-radius); box-shadow: 0 12px 32px rgba(16,24,40,.16);
	overflow: hidden;
}
/* Opens upward from the floating button instead of downward from a topbar icon. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-dropdown-fab {
	top: auto; bottom: calc(100% + 14px); right: 0;
	box-shadow: 0 -12px 32px rgba(16,24,40,.18), 0 4px 14px rgba(16,24,40,.1);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 16px; border-bottom: 1px solid var(--salescrm-border);
	font-size: 13.5px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-count {
	background: var(--salescrm-primary-light); color: var(--salescrm-primary);
	font-size: 11px; font-weight: 700; border-radius: 20px; padding: 1px 9px;
}
/* Layout-only rules for these two live here; the hardened, theme-proof
   look (background/border/color/etc., all !important) is defined once,
   up in the "Scoping / override layer" near the top of this file, right
   after #salescrm-date-apply — see the comment there for why. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-empty { padding: 22px 16px; margin: 0; text-align: center; font-size: 13px; color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-list { max-height: 360px; overflow-y: auto; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-item {
	display: flex; align-items: center; gap: 4px;
	border-bottom: 1px solid var(--salescrm-border);
	transition: background .12s ease;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-item:last-child { border-bottom: none; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-item:hover { background: var(--salescrm-bg); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-item.is-removing { opacity: 0; transform: translateX(6px); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-link {
	flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px;
	padding: 11px 8px 11px 16px; text-decoration: none; color: inherit;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: #D97706; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-danger .salescrm-notif-dot { background: #DC2626; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-warn .salescrm-notif-dot { background: #D97706; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-title { font-size: 13px; font-weight: 600; color: var(--salescrm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-sub { font-size: 12px; color: var(--salescrm-text-muted); }

@media (max-width: 782px) {
	:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-fab-wrap { right: 16px; bottom: 16px; }
	:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-fab { width: 50px; height: 50px; }
	:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-dropdown-fab { right: -8px; width: 300px; }
	:is(#sales-crm-app, #sales-crm-app *).salescrm-notif-dropdown { right: -8px; width: 300px; }
}

/* ================= Dashboard header actions ================= */
:is(#sales-crm-app, #sales-crm-app *).salescrm-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-date-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px; border-radius: 8px; border: 1px solid var(--salescrm-border);
	background: var(--salescrm-card); font-size: 13px; font-weight: 600;
	color: var(--salescrm-text); cursor: pointer; font-family: inherit;
	transition: background 0.15s ease, border-color 0.15s ease;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-date-pill:hover { background: var(--salescrm-bg); border-color: var(--salescrm-primary); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-date-pill .salescrm-nav-icon { width: 16px; height: 16px; color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-date-pill .salescrm-nav-icon svg { width: 16px; height: 16px; }

/* ================= Stat card icons ================= */
:is(#sales-crm-app, #sales-crm-app *).salescrm-stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stat-icon {
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 42px; height: 42px; border-radius: 12px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-stat-icon svg { width: 21px; height: 21px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-icon-purple { background: var(--salescrm-primary-light); color: var(--salescrm-primary); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-icon-green { background: #DCFCE7; color: #16A34A; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-icon-orange { background: #FFEDD5; color: #EA580C; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-icon-blue { background: #DBEAFE; color: #2563EB; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-icon-gray { background: var(--salescrm-bg); color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-icon-amber { background: #FEF3C7; color: #D97706; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-icon-red { background: #FEE2E2; color: #DC2626; }

:is(#sales-crm-app, #sales-crm-app *).salescrm-stat-card-lr { display: flex; align-items: flex-start; gap: 14px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-icon-square { width: 44px; height: 44px; border-radius: 10px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-icon-square svg { width: 21px; height: 21px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stat-body { flex: 1; min-width: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-stat-body .salescrm-stat-value { margin: 2px 0; }

/* ================= Donut charts ================= */
:is(#sales-crm-app, #sales-crm-app *).salescrm-donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-donut {
	position: relative; flex-shrink: 0;
	width: 140px; height: 140px; border-radius: 50%;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-donut-hole {
	position: absolute; inset: 22px; border-radius: 50%;
	background: var(--salescrm-card);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-donut-legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 12px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-legend-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-legend-label { flex: 1; color: var(--salescrm-text); font-weight: 500; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-legend-value { text-align: right; font-weight: 700; color: var(--salescrm-text); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-legend-value em {
	display: block; font-style: normal; font-weight: 400; font-size: 11.5px;
	color: var(--salescrm-text-muted); margin-top: 1px;
}

/* ================= Sales trend (SVG line chart) ================= */
:is(#sales-crm-app, #sales-crm-app *).salescrm-trend {
	display: block; margin-top: 14px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-trend-svg {
	width: 100%; height: 220px; display: block; overflow: visible;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-trend-gridline {
	stroke: var(--salescrm-border); stroke-width: 1; vector-effect: non-scaling-stroke;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-trend-labels {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: 10px; padding-top: 6px;
	font-size: 11px; line-height: 1.4; color: var(--salescrm-text-muted);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-trend-labels span {
	flex: 1; text-align: center; white-space: nowrap;
}

/* =====================================================================
   Leads UI v2 — page header icon, top-right date controls, pill count
   badges, coloured per-action row buttons, source filter panel, and
   client-side pagination footer.
   ---------------------------------------------------------------------
   Every selector below is additionally scoped with
   :is(#sales-crm-app, #sales-crm-app *) — matches the rule
   whether it sits directly on the app root or on a descendant — so each
   one carries real ID-level specificity and can't be outranked or
   leaked into by WordPress admin chrome or an active theme's front-end
   styles, regardless of load order. ===== */

:is(#sales-crm-app, #sales-crm-app *).salescrm-leads-filters-form { display: block; }

:is(#sales-crm-app, #sales-crm-app *).salescrm-page-heading { display: flex; align-items: flex-start; gap: 14px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-page-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
	background: var(--salescrm-primary); color: #fff;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-page-icon svg { width: 22px; height: 22px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-page-heading h1 { margin: 2px 0 2px; }

:is(#sales-crm-app, #sales-crm-app *).salescrm-page-header-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-date-field {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid var(--salescrm-border); border-radius: 8px;
	padding: 7px 10px; background: var(--salescrm-card);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-date-field svg { width: 15px; height: 15px; color: var(--salescrm-text-muted); flex-shrink: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-date-field select.salescrm-month-filter {
	border: none; padding: 0; background: transparent; font-size: 13px; color: var(--salescrm-text);
	cursor: pointer;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-date-field input[type="date"] {
	border: none; padding: 0; background: transparent; font-size: 13px; color: var(--salescrm-text);
	width: 112px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-page-header-dates .salescrm-lead-date-range { display: inline-flex; gap: 6px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-page-header-dates .salescrm-lead-date-range.is-visible { width: auto; }

/* Pill count badge — small circular chip trailing the label, matching
   the reference layout, instead of a leading bare number. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 18px; height: 18px; padding: 0 5px; border-radius: 50%;
	background: var(--salescrm-bg); color: inherit; font-size: 11px; font-weight: 700;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-row:not(.salescrm-pill-row-tight) .salescrm-pill-count {
	background: var(--pill-tint-strong);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-pill-row:not(.salescrm-pill-row-tight) .salescrm-pill.is-active .salescrm-pill-count {
	background: color-mix(in srgb, var(--pill-color) 32%, var(--salescrm-card));
}

/* Search box with a leading icon instead of a CSS background-image, so
   it can share the exact same colour token as every other icon here. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-search-wrap {
	position: relative; display: inline-flex; align-items: center;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-search-wrap svg {
	position: absolute; left: 11px; width: 15px; height: 15px; color: var(--salescrm-text-muted); pointer-events: none;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-search-wrap input[type="search"] {
	padding: 8px 12px 8px 32px !important; border-radius: 8px; border: 1px solid var(--salescrm-border);
	background: var(--salescrm-card) !important; color: var(--salescrm-text); font-size: 13px; min-width: 230px;
	transition: border-color .12s ease, box-shadow .12s ease;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-search-wrap input[type="search"]:focus {
	outline: none; border-color: var(--salescrm-primary); box-shadow: 0 0 0 3px var(--salescrm-primary-light);
}

/* Filters button removed from the Leads toolbar per request — search box
   and Clear Filters link remain the only toolbar-right controls. */

/* Coloured per-action row buttons (Follow-up / To Order / Edit / Delete) */
:is(#sales-crm-app, #sales-crm-app *).salescrm-action-btn {
	border-width: 1.5px; background: var(--salescrm-card);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-action-followup { background: #FFF7ED; color: #C2410C; border-color: #FDBA8C; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn.salescrm-action-followup:hover { background: #FFEDD5; color: #9A3412; border-color: #FB923C; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-action-order { background: #F0FDF4; color: #16A34A; border-color: #BBF7D0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn.salescrm-action-order:hover { background: #DCFCE7; color: #15803D; border-color: #86EFAC; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-action-edit { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn.salescrm-action-edit:hover { background: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-action-delete { background: #FEF2F2; color: #DC2626; border-color: #FBCFCF; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-btn.salescrm-action-delete:hover { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
/* .salescrm-row-actions .salescrm-btn:hover (grey) ties on specificity with
   the rule above but loses on source order — kept here as documentation, not
   a fix, since CSS source order already resolves it correctly. */

/* Pagination footer */
:is(#sales-crm-app, #sales-crm-app *).salescrm-table-pagination {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
	padding: 14px 16px; border-top: 1px solid var(--salescrm-border); font-size: 12.5px; color: var(--salescrm-text-muted);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-pagination-controls { display: flex; align-items: center; gap: 4px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-page-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--salescrm-border);
	background: var(--salescrm-card); color: var(--salescrm-text); cursor: pointer;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-page-btn svg { width: 16px; height: 16px; stroke-width: 2.4; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-page-btn:disabled { opacity: .55; color: var(--salescrm-text-muted); cursor: not-allowed; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-page-numbers { display: flex; gap: 4px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-page-num {
	min-width: 30px; height: 30px; padding: 0 6px; border-radius: 7px; border: 1px solid transparent;
	background: transparent; color: var(--salescrm-text); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-page-num.is-active { background: var(--salescrm-primary); color: #fff; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-pagination-size { display: flex; align-items: center; gap: 6px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-pagination-size select {
	padding: 5px 8px; border-radius: 7px; border: 1px solid var(--salescrm-border);
	background: var(--salescrm-card); color: var(--salescrm-text); font-size: 12.5px; cursor: pointer;
}

@media (max-width: 960px) {
	:is(#sales-crm-app, #sales-crm-app *).salescrm-page-header { flex-direction: column; align-items: flex-start; gap: 14px; }
	:is(#sales-crm-app, #sales-crm-app *).salescrm-page-header-dates { width: 100%; }
}

/* ================= Sales ================= */
:is(#sales-crm-app, #sales-crm-app *).salescrm-subtabs {
	display: flex; gap: 4px; flex-wrap: wrap;
	border-bottom: 1px solid var(--salescrm-border);
	margin-bottom: 18px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-subtabs .salescrm-subtab {
	padding: 9px 16px; text-decoration: none; font-size: 14px; font-weight: 600;
	color: var(--salescrm-text-muted);
	border-bottom: 2px solid transparent; margin-bottom: -1px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-subtabs .salescrm-subtab:hover { color: var(--salescrm-text); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-subtabs .salescrm-subtab.is-active {
	color: var(--salescrm-primary);
	border-bottom-color: var(--salescrm-primary);
}

:is(#sales-crm-app, #sales-crm-app *).salescrm-radio-row { display: flex; gap: 18px; margin-bottom: 6px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-field-grid-3 {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-linkish {
	background: none; border: none; padding: 4px 0; cursor: pointer;
	color: var(--salescrm-primary); font-size: 12px;
}

/* Item table inside the quote / invoice modal */
:is(#sales-crm-app, #sales-crm-app *).salescrm-item-table td { vertical-align: top; padding: 6px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-item-table textarea,
:is(#sales-crm-app, #sales-crm-app *).salescrm-item-table input,
:is(#sales-crm-app, #sales-crm-app *).salescrm-item-table select { margin: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-item-table .item-qty,
:is(#sales-crm-app, #sales-crm-app *).salescrm-item-table .item-rate { width: 90px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-item-table .item-amount { text-align: right; font-weight: 600; white-space: nowrap; padding-top: 14px; }

:is(#sales-crm-app, #sales-crm-app *).salescrm-doc-footer {
	display: grid; grid-template-columns: 1fr 320px; gap: 20px; margin-top: 16px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-doc-totals {
	background: var(--salescrm-bg);
	border: 1px solid var(--salescrm-border);
	border-radius: 10px; padding: 14px;
	align-self: start;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-total-line {
	display: flex; justify-content: space-between; align-items: center;
	gap: 12px; padding: 5px 0; font-size: 14px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-total-line input { width: 110px; margin: 0; text-align: right; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-total-grand {
	border-top: 1px solid var(--salescrm-border);
	margin-top: 6px; padding-top: 10px; font-size: 16px; font-weight: 700;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-payment-invoices { margin-bottom: 12px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-payment-invoices table { margin: 0; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-badge-overdue { background: #FEE2E2; color: #991B1B; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-badge-pay-paid { background: #DCFCE7; color: #15803D; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-badge-pay-partial { background: #FEF3C7; color: #B45309; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-badge-pay-unpaid { background: #FEE2E2; color: #B91C1C; }

@media (max-width: 782px) {
	:is(#sales-crm-app, #sales-crm-app *).salescrm-doc-footer { grid-template-columns: 1fr; }
	:is(#sales-crm-app, #sales-crm-app *).salescrm-field-grid-3 { grid-template-columns: 1fr; }
}

/* Renewals: payment source cell */
:is(#sales-crm-app, #sales-crm-app *).salescrm-pay-source { display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.35; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-pay-source span { color: var(--salescrm-text-muted); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-badge-source { background: #EEF0FF; color: #4F46E5; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-renewals-table td { vertical-align: middle; }

/* Partial refresh: dim the content while the new markup is fetched, so a save
   still feels like it did something without the page blanking out. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-main.salescrm-refreshing { opacity: .55; transition: opacity .12s ease; pointer-events: none; }

/* Freshly captured lead — form or webhook, first 24 hours */
:is(#sales-crm-app, #sales-crm-app *).salescrm-badge-new {
	background: #DCFCE7; color: #166534; margin-left: 6px;
	font-size: 10px; letter-spacing: .03em; text-transform: uppercase;
}

/* ================= Lead capture settings ================= */
:is(#sales-crm-app, #sales-crm-app *).salescrm-shortcode {
	background: var(--salescrm-bg); padding: 3px 8px; border-radius: 6px;
	font-size: 12px; white-space: nowrap;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-webhook-url {
	display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-webhook-url input {
	flex: 1; min-width: 260px; margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
	padding: 9px 12px; border-radius: 8px; border: 1px solid var(--salescrm-border);
	background: var(--salescrm-bg); color: var(--salescrm-text);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-steps { margin: 0 0 8px; padding-left: 20px; line-height: 1.9; font-size: 14px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-payload {
	max-height: 220px; overflow: auto; margin: 6px 0 0;
	background: var(--salescrm-bg); border: 1px solid var(--salescrm-border);
	border-radius: 8px; padding: 10px; font-size: 11px; white-space: pre-wrap; word-break: break-word;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-form-fields-table td { vertical-align: top; padding: 6px; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-form-fields-table input,
:is(#sales-crm-app, #sales-crm-app *).salescrm-form-fields-table select,
:is(#sales-crm-app, #sales-crm-app *).salescrm-form-fields-table textarea { margin: 0; }

/* ---------- Website Tracking ---------- */

/* Smaller, denser stat card just for this page — the shared
   .salescrm-stat-value/.salescrm-stat-label sizing (used on the main
   Dashboard's money cards) reads oversized for 5 cards in a row here. */
:is(#sales-crm-app, #sales-crm-app *).salescrm-tracking-stat-grid .salescrm-stat-value {
	font-size: 18px; font-weight: 600;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-tracking-stat-grid .salescrm-stat-label {
	font-size: 12px; margin-bottom: 4px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-tracking-stat-grid .salescrm-stat-sub {
	font-size: 11px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-tracking-stat-grid .salescrm-stat-icon {
	width: 34px; height: 34px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-tracking-stat-grid .salescrm-stat-icon svg {
	width: 17px; height: 17px;
}

:is(#sales-crm-app, #sales-crm-app *).salescrm-filter-row {
	display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-filter-row select {
	margin: 0; min-width: 200px; padding: 8px 12px; border-radius: 8px;
	border: 1px solid var(--salescrm-border); background: var(--salescrm-card);
	color: var(--salescrm-text); font-size: 13px; cursor: pointer;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-filter-row input[type="date"] {
	margin: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--salescrm-border);
	background: var(--salescrm-card); color: var(--salescrm-text); font-size: 13px; width: 150px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-filter-row select:focus,
:is(#sales-crm-app, #sales-crm-app *).salescrm-filter-row input[type="date"]:focus {
	outline: none; border-color: var(--salescrm-primary); box-shadow: 0 0 0 3px var(--salescrm-primary-light);
}

:is(#sales-crm-app, #sales-crm-app *).salescrm-tracking-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
	padding: 3px 8px; border-radius: 6px; background: var(--salescrm-bg);
	border: 1px solid var(--salescrm-border); color: var(--salescrm-text); letter-spacing: .5px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-snippet-box {
	width: 100%; margin: 4px 0 0; resize: vertical;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6;
	padding: 10px 12px; border-radius: 8px; border: 1px solid var(--salescrm-border);
	background: var(--salescrm-bg); color: var(--salescrm-text);
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-tracking-snippet-row td { background: var(--salescrm-bg); }
:is(#sales-crm-app, #sales-crm-app *).salescrm-tracking-table td code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-pageview-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 360px; overflow-y: auto; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-pageview-list li {
	display: flex; justify-content: space-between; gap: 10px; padding: 10px 0;
	border-bottom: 1px solid var(--salescrm-border); font-size: 13px;
}
:is(#sales-crm-app, #sales-crm-app *).salescrm-pageview-list li:last-child { border-bottom: none; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-pageview-list .salescrm-pv-url { font-weight: 600; word-break: break-all; }
:is(#sales-crm-app, #sales-crm-app *).salescrm-pageview-list .salescrm-pv-meta { color: var(--salescrm-text-muted); font-size: 12px; white-space: nowrap; }