/* ==========================================================================
   תן לי — Agent App shared shell + Leads List (screen 03) styles.
   Scoped entirely under .agent-app — never touches :root or any selector
   that could leak into the public site (BRIEF §21). Reuses the SAME token
   values already defined in main.css (navy #2c347e, navy-deep #16335a, teal
   #4cbaba, bg #f2f4fa, radius-pill 23px, Birzia/system fonts) as its own
   local custom properties, per BRIEF §7 — not a new palette.
   ========================================================================== */

.agent-app, .agent-auth {
	--aa-navy: #2c347e;
	--aa-navy-deep: #16335a;
	--aa-navy-darker: #102947;
	--aa-teal: #4cbaba;
	--aa-teal-dark: #2f8f8f;
	--aa-bg: #f2f4fa;
	--aa-white: #ffffff;
	--aa-text: #16203a;
	--aa-text-muted: #64708a;
	--aa-border: #e3e7f2;
	--aa-radius: 18px;
	--aa-radius-sm: 12px;
	--aa-radius-pill: 23px;
	--aa-shadow: 0 8px 28px rgba(24, 52, 92, 0.08);
	--aa-sidebar-w: 236px;
	--aa-green-bg: #e3f7ef; --aa-green-fg: #1f8a5a;
	--aa-blue-bg: #e8f1fd; --aa-blue-fg: #2563a8;
	--aa-purple-bg: #f1ecfb; --aa-purple-fg: #6d4fc9;
	--aa-amber-bg: #fff6e0; --aa-amber-fg: #a5710a;
	--aa-gray-bg: #eef0f5; --aa-gray-fg: #5b6478;
	--aa-orange-bg: #fdedde; --aa-orange-fg: #c1650e;
	--aa-red-bg: #fdeceb; --aa-red-fg: #c0392b;

	direction: rtl;
	font-family: var(--font-body, -apple-system, 'Segoe UI', Arial, sans-serif);
	color: var(--aa-text);
	background: var(--aa-bg);
	min-height: 100vh;
	display: flex;
}

.agent-app *, .agent-auth * { box-sizing: border-box; }
.agent-app h1, .agent-app h2, .agent-app h3,
.agent-auth h1, .agent-auth h2, .agent-auth h3 {
	font-family: var(--font-heading, -apple-system, 'Segoe UI', Arial, sans-serif);
	color: var(--aa-navy-deep);
	margin: 0;
}
.agent-app a, .agent-auth a { text-decoration: none; }
/* color:inherit is only for plain links (breadcrumb-style, nav items, etc)
   — deliberately excludes .agent-app__btn so its own .agent-app__btn--primary
   /--outline color declarations aren't fought over: ".agent-app a" (class +
   element = 0,1,1) was beating ".agent-app__btn--primary" (single class =
   0,1,0) regardless of file order, leaving <a class="agent-app__btn
   agent-app__btn--primary"> links (e.g. "יצוא לאקסל" on the leads screen)
   with dark, inherited text on their own dark navy background — invisible.
   Verified live and reported by the user; :not() keeps every OTHER anchor's
   color:inherit exactly as before.

   .agent-app__cta-pill (the "+ חבילת לידים" topbar pill) hit the exact same
   bug when its own color declaration switched to white: same specificity
   fight, same symptom (dark, inherited text swallowed by its own teal
   background), just a second anchor class this exclusion never covered.
   Added here rather than given its own color:inherit-breaking rule, so any
   future .agent-app__* anchor button only needs to be listed here once. */
.agent-app a:not(.agent-app__btn):not(.agent-app__cta-pill),
.agent-auth a:not(.agent-app__btn):not(.agent-app__cta-pill) { color: inherit; }
.agent-app button, .agent-auth button { font: inherit; cursor: pointer; }
.agent-app :focus-visible, .agent-auth :focus-visible { outline: 2px solid var(--aa-teal); outline-offset: 2px; }

/* No overflow:hidden here (real bug: found live) — this is a flex container
   with min-height:100vh, and any real content taller than one screen (e.g.
   supplier-signup's longer steps) got silently clipped at the exact
   viewport edge with no scrollbar and no way to reach the rest, which read
   as "the form isn't centered" (only the vertical middle slice stayed
   visible). The decorative background blobs/icons (.agent-auth__deco, next
   block) are the only thing that ever needed clipping — that's now scoped
   to .agent-auth__deco itself instead, same visual result for them, but the
   real card can grow past 100vh and the page scrolls normally to reach it. */
.agent-auth { align-items: center; justify-content: center; padding: 40px 20px; position: relative; }

/* -------------------------------------------------------------------- */
/* Sidebar                                                                */
/* -------------------------------------------------------------------- */

.agent-app__sidebar {
	width: var(--aa-sidebar-w);
	flex: none;
	background: var(--aa-navy-deep);
	color: #fff;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	z-index: 30;
}
.agent-app__brand {
	padding: 24px 18px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.agent-app__brand img { display: block; width: 99px; height: auto; }
.agent-app__nav-close { display: none; background: none; border: none; color: #fff; padding: 6px; border-radius: 8px; }
.agent-app__nav-close svg { width: 20px; height: 20px; }

/* Desktop: the shell establishes a centered, larger logo with no close
   button in view (that control only exists for the mobile drawer, gated
   below at max-width:1024px) — scoped to a min-width query so the tested
   mobile brand-row layout (logo + close button, space-between) is untouched. */
@media (min-width: 1025px) {
	.agent-app__brand { justify-content: center; }
	.agent-app__brand img { width: 145px; margin-block-end: 36px; }
}

.agent-app__nav { flex: 1; overflow-y: auto; padding: 24px 14px; }
.agent-app__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.agent-app__nav-item {
	display: flex;
	align-items: center;
	min-height: 56px;
	gap: 14px;
	padding-inline: 18px;
	border-radius: var(--aa-radius-sm);
	font-size: 16px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
	transition: background 0.15s ease, color 0.15s ease;
}
.agent-app__nav-item svg { width: 22px; height: 22px; flex: none; }
a.agent-app__nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.agent-app__nav-item.is-active {
	background: var(--aa-teal);
	color: #fff;
	box-shadow: var(--aa-shadow);
}
.agent-app__nav-item.is-disabled {
	color: rgba(255, 255, 255, 0.38);
	cursor: default;
	position: relative;
}

/* Reuses the exact same CSS-only tooltip technique already established in
   main.css for the header utility icons — content from data-tooltip,
   hover/focus reveal, no JS. */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	right: 50%;
	transform: translateX(50%) translateY(4px);
	background: var(--aa-navy-darker);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	padding: 6px 11px;
	border-radius: 7px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 40;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateX(50%) translateY(0);
}

.agent-app__identity {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	background: var(--aa-navy-darker);
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.agent-app__identity-agency {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}
.agent-app__identity-badge { color: var(--aa-teal); display: flex; flex: none; }
.agent-app__identity-badge svg { width: 17px; height: 17px; }
.agent-app__identity-agent { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255, 255, 255, 0.85); }
.agent-app__identity-avatar {
	width: 34px; height: 34px; border-radius: 50%; background: var(--aa-teal); color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none;
}
.agent-app__identity-agent strong { display: block; color: #fff; font-size: 13px; }
.agent-app__identity-agent small { opacity: 0.75; }
.agent-app__logout {
	display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700;
	color: rgba(255, 255, 255, 0.85); padding: 9px 10px; border-radius: var(--aa-radius-sm);
}
.agent-app__logout:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.agent-app__logout svg { width: 17px; height: 17px; }

.agent-app__scrim { position: fixed; inset: 0; background: rgba(16, 41, 71, 0.45); z-index: 25; border: none; padding: 0; display: none; }

/* -------------------------------------------------------------------- */
/* Main column / topbar                                                  */
/* -------------------------------------------------------------------- */

.agent-app__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.agent-app__topbar {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap-reverse;
	gap: 12px; min-height: 112px; padding: 18px 32px; background: var(--aa-white); border-bottom: 1px solid var(--aa-border);
}
.agent-app__topbar-actions { display: flex; align-items: center; gap: 8px; }
.agent-app__icon-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
	border-radius: 50%; background: var(--aa-bg); color: var(--aa-navy-deep); border: none; flex: none;
}
.agent-app__icon-btn svg { width: 20px; height: 20px; }
.agent-app__bell { position: relative; }
[data-agent-nav-open] { display: none; }

/* Persistent "קבלת לידים" pill, topbar, every screen (see
   tenli_agent_app_render_header()) — deliberately NOT another banner: small,
   short label, same height as the icon buttons beside it so it reads as one
   more topbar action, not a separate promo block. */
/* Matches the public site's .btn.btn--accent (main.css) exactly — same
   font, weight, padding, radius and shadow recipe, not a smaller/rounder
   toolbar-only variant — per explicit request that every button on the site
   (including inside the agent app) share one graphic language. Values are
   duplicated as local --aa-* tokens rather than referencing main.css's
   :root directly, same reasoning as the rest of this file (see the header
   comment above): the agent app's own styling stays self-contained even
   though main.css happens to also be enqueued on these pages today. */
.agent-app__cta-pill {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
	min-height: 45px; padding-block: 13px; padding-inline: 28px;
	border-radius: var(--aa-radius-pill); border: none; background: var(--aa-teal); color: var(--aa-white);
	font-family: var(--font-heading, -apple-system, 'Segoe UI', Arial, sans-serif);
	font-size: 19px; font-weight: 700; white-space: nowrap;
	box-shadow: 0 6px 16px -6px rgba(76, 186, 186, 0.55);
	transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.3), box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.agent-app__cta-pill svg { width: 18px; height: 18px; flex: none; }
.agent-app__cta-pill:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -8px rgba(44, 52, 126, 0.55); }

.agent-app__dropdown { position: relative; }
.agent-app__badge-count {
	position: absolute; top: -2px; left: -2px; min-width: 16px; height: 16px; padding: 0 3px;
	border-radius: 999px; background: var(--aa-red-fg, #c0392b); color: #fff; font-size: 10px; font-weight: 800;
	display: flex; align-items: center; justify-content: center; line-height: 1;
}
.agent-app__dropdown-panel {
	display: none; position: absolute; top: calc(100% + 10px); left: 0; width: 320px; max-width: 90vw;
	background: var(--aa-white); border: 1px solid var(--aa-border); border-radius: var(--aa-radius-sm);
	box-shadow: var(--aa-shadow); z-index: 40; overflow: hidden;
}
.agent-app__dropdown.is-open .agent-app__dropdown-panel { display: block; }
.agent-app__dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--aa-border); }
.agent-app__dropdown-head strong { font-size: 13.5px; color: var(--aa-navy-deep); }
.agent-app__dropdown-head form button { background: none; border: none; color: var(--aa-teal-dark); font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
.agent-app__dropdown-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.agent-app__dropdown-list li { border-bottom: 1px solid var(--aa-border); }
.agent-app__dropdown-list li:last-child { border-bottom: none; }
.agent-app__dropdown-list li.is-unread { background: var(--aa-blue-bg, #e8f1fd); }
.agent-app__dropdown-list a, .agent-app__dropdown-list li > span:not(.agent-app__dropdown-icon) {
	display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; text-decoration: none; color: var(--aa-text, #15345C);
}
.agent-app__dropdown-icon { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--aa-bg); display: flex; align-items: center; justify-content: center; color: var(--aa-teal); }
.agent-app__dropdown-icon svg { width: 14px; height: 14px; }
.agent-app__dropdown-list time { display: block; font-size: 11px; color: var(--aa-text-muted); margin-top: 2px; }
.agent-app__dropdown-empty { padding: 24px 16px; text-align: center; color: var(--aa-text-muted); font-size: 13px; margin: 0; }
.agent-app__dropdown-panel--help { padding-bottom: 4px; }
.agent-app__help-faq { list-style: none; margin: 0; padding: 6px 16px; display: flex; flex-direction: column; gap: 12px; }
.agent-app__help-faq strong { display: block; font-size: 12.5px; color: var(--aa-navy-deep); margin-bottom: 2px; }
.agent-app__help-faq span { display: block; font-size: 12px; color: var(--aa-text-muted); line-height: 1.5; }
.agent-app__dropdown-support { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--aa-border); font-size: 12.5px; font-weight: 700; color: var(--aa-teal-dark); text-decoration: none; }
.agent-app__dropdown-support svg { width: 15px; height: 15px; }
.agent-app__dropdown-viewall { display: block; text-align: center; padding: 10px 16px; border-top: 1px solid var(--aa-border); font-size: 12.5px; font-weight: 700; color: var(--aa-teal-dark); text-decoration: none; }
.agent-app__dropdown-viewall:hover { background: var(--aa-bg); }

/* "כל ההתראות" full-history screen. */
.agent-notif__list { list-style: none; margin: 0; padding: 0; }
.agent-notif__item { display: flex; align-items: flex-start; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--aa-border); }
.agent-notif__item:last-child { border-bottom: none; }
.agent-notif__item.is-unread { background: var(--aa-blue-bg, #e8f1fd); }
.agent-notif__icon { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--aa-bg); display: flex; align-items: center; justify-content: center; color: var(--aa-teal); }
.agent-notif__icon svg { width: 17px; height: 17px; }
.agent-notif__body { flex: 1; min-width: 0; }
.agent-notif__body a, .agent-notif__body span { color: var(--aa-text, #15345C); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.agent-notif__body a:hover { text-decoration: underline; }
.agent-notif__body time { display: block; font-size: 11.5px; color: var(--aa-text-muted); margin-top: 3px; font-weight: 400; }
.agent-notif__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--aa-teal); margin-top: 6px; }

.agent-app__topbar-greeting { text-align: right; }
.agent-app__topbar-greeting p { margin: 0; font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 30px; line-height: 1.2; color: var(--aa-navy-deep); display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.agent-app__wave svg { width: 22px; height: 22px; color: #f5b942; }
.agent-app__topbar-greeting span { display: block; font-size: 15px; color: var(--aa-text-muted); }

/* width:100% is load-bearing, not decorative: .agent-app__main is a COLUMN
   flex container, and per the flexbox spec, ANY auto margin on a flex
   item's cross axis (margin-inline:auto here) disables stretch/alignment
   for that item entirely - it falls back to shrink-to-fit sizing instead.
   Without an explicit width, that meant .agent-app__content sized itself to
   its widest child's content (e.g. the leads table) instead of the 390px
   actually available on mobile, so it stuck out past the viewport by
   however much its content demanded - the root cause of "mobile looks
   broken" across every screen with a table or other wide element (verified
   live: this screen's table forced .agent-app__content to 553px on a 390px
   viewport, hanging 163px off the left edge, invisible past the site-wide
   overflow-x:clip - not a scrollbar, just silently cut off). width:100%
   makes the box compute from the container (capped at max-width, still
   centered by the same margin-inline:auto on wide screens) instead of from
   content, on every screen that shares this shell - fixed once here, not
   per breakpoint. */
.agent-app__content { width: 100%; padding: 28px 32px 22px; max-width: 1260px; margin-inline: auto; box-sizing: border-box; }

.agent-app__page-head { margin-block-end: 20px; }
.agent-app__page-head h1 { font-size: 22px; display: flex; align-items: center; gap: 10px; }
.agent-app__page-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--aa-teal); color: #fff; flex: none; }
.agent-app__page-icon svg { width: 18px; height: 18px; }
.agent-app__page-head p { margin: 6px 0 0; color: var(--aa-text-muted); font-size: 13.5px; }

/* -------------------------------------------------------------------- */
/* Buttons / chips                                                       */
/* -------------------------------------------------------------------- */

.agent-app__toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin-block-end: 16px; }
/* Shape/interaction aligned with the site-wide button system (see
   docs/button-system.md, decided 29.07.2026): full symmetric pill, never the
   old single-square-corner shape, and hover = lift + shadow, not a flat
   color swap. Colors stay the agent app's own navy-deep/teal tokens (already
   consistent across the whole shell — sidebar, badges, page icon) rather
   than the public site's lighter navy, so the button doesn't clash with
   everything else already built on --aa-navy-deep. */
.agent-app__btn {
	display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px;
	padding: 11px 20px; border-radius: var(--aa-radius-pill); border: none;
	transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.3), box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
/* Needed whenever JS toggles the `hidden` attribute on one of these (e.g. the
   price-quote wizard's back/next/submit buttons) — `display:inline-flex`
   above is an author rule, and author rules beat the browser's own
   `[hidden]{display:none}` UA-stylesheet default at equal specificity, so
   without this override a "hidden" .agent-app__btn stayed fully visible.
   Verified live: all 3 wizard step buttons showed at once on step 1 before
   this was added. */
.agent-app__btn[hidden] { display: none; }
.agent-app__btn svg { width: 16px; height: 16px; }
.agent-app__btn--primary { background: var(--aa-navy-deep); color: #fff; box-shadow: 0 6px 16px -6px rgba(22, 51, 90, 0.5); }
.agent-app__btn--primary:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -8px rgba(22, 51, 90, 0.55); }
.agent-app__btn--primary:disabled { background: var(--aa-gray-fg); box-shadow: none; opacity: 0.6; cursor: not-allowed; transform: none; }
.agent-app__btn--outline { background: transparent; color: var(--aa-navy-deep); border: 1.5px solid var(--aa-navy-deep); }
.agent-app__btn--outline:hover { background: var(--aa-navy-deep); color: #fff; transform: translateY(-3px); }
.agent-app__chip {
	display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px;
	padding: 9px 16px; border-radius: 999px; background: var(--aa-bg); color: var(--aa-navy-deep); border: 1px solid var(--aa-border);
	transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.3), background 0.18s ease;
}
.agent-app__chip svg { width: 13px; height: 13px; }
.agent-app__chip:hover { background: #eef1f9; transform: translateY(-2px); }

/* -------------------------------------------------------------------- */
/* Filters                                                                */
/* -------------------------------------------------------------------- */

.agent-app__filters { background: var(--aa-white); border: 1px solid var(--aa-border); border-radius: var(--aa-radius); padding: 20px 22px; box-shadow: var(--aa-shadow); margin-block-end: 16px; }
.agent-app__filters-grid { display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: 16px; }
.agent-app__clear-filters { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--aa-red-fg, #c0392b); text-decoration: none; }
.agent-app__clear-filters svg { width: 14px; height: 14px; }
.agent-app__clear-filters:hover { text-decoration: underline; }
.agent-app__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.agent-app__field label { font-size: 12px; font-weight: 700; color: var(--aa-text-muted); }
.agent-app__field select,
.agent-app__field input[type="date"],
.agent-app__field input[type="search"] {
	width: 100%; border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm);
	padding: 10px 12px; font: inherit; font-size: 13.5px; color: var(--aa-text); background: #fff;
}
.agent-app__field select:focus, .agent-app__field input:focus { border-color: var(--aa-teal); }
.agent-app__field-icon { position: relative; display: flex; align-items: center; }
.agent-app__field-icon svg { position: absolute; inset-inline-start: 12px; width: 16px; height: 16px; color: var(--aa-text-muted); pointer-events: none; }
.agent-app__field-icon input[type="date"] { padding-inline-start: 36px; }
.agent-app__field--search .agent-app__field-icon input { padding-inline-end: 40px; }
.agent-app__field--search .agent-app__field-icon button { position: absolute; inset-inline-end: 8px; background: none; border: none; color: var(--aa-text-muted); display: flex; padding: 6px; border-radius: 50%; }
.agent-app__field--search .agent-app__field-icon button svg { position: static; width: 16px; height: 16px; }
.agent-app__field--search .agent-app__field-icon button:hover { background: var(--aa-bg); }

/* -------------------------------------------------------------------- */
/* Status tabs                                                           */
/* -------------------------------------------------------------------- */

.agent-app__tabs {
	display: flex; gap: 22px; flex-wrap: wrap; background: var(--aa-white); border: 1px solid var(--aa-border);
	border-radius: var(--aa-radius); padding: 4px 22px; box-shadow: var(--aa-shadow); margin-block-end: 16px;
	flex-direction: row-reverse; justify-content: flex-end;
}
.agent-app__tab { padding: 14px 2px; font-size: 13.5px; font-weight: 700; color: var(--aa-text-muted); border-bottom: 2.5px solid transparent; }
.agent-app__tab.is-active { color: var(--aa-teal-dark); border-color: var(--aa-teal); }
.agent-app__tab:hover { color: var(--aa-navy-deep); }

/* -------------------------------------------------------------------- */
/* Table card                                                            */
/* -------------------------------------------------------------------- */

.agent-app__table-card { background: var(--aa-white); border: 1px solid var(--aa-border); border-radius: var(--aa-radius); box-shadow: var(--aa-shadow); overflow: hidden; }
.agent-app__table-head { display: flex; justify-content: flex-start; padding: 16px 20px 0; }
.agent-app__sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--aa-text-muted); }
.agent-app__sort select { border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm); padding: 6px 10px; font: inherit; font-size: 13px; }

.agent-app__table-wrap { overflow-x: auto; padding: 12px 8px 4px; }
.agent-app__table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 920px; }
.agent-app__table th {
	text-align: right; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em;
	color: var(--aa-text-muted); padding: 10px 14px; border-bottom: 2px solid var(--aa-border); white-space: nowrap;
}
.agent-app__table td { padding: 13px 14px; border-bottom: 1px solid var(--aa-border); vertical-align: middle; }
.agent-app__table tbody tr:hover { background: var(--aa-bg); }
.agent-app__table tbody tr:last-child td { border-bottom: none; }
.agent-app__mono { direction: ltr; text-align: right; font-variant-numeric: tabular-nums; color: var(--aa-text-muted); font-size: 12.5px; }
.agent-app__table small { color: var(--aa-text-muted); }

.agent-app__phone-cell { display: flex; align-items: center; gap: 8px; direction: rtl; }
.agent-app__phone-cell a { display: inline-flex; color: var(--aa-text-muted); }
.agent-app__phone-cell a svg { width: 16px; height: 16px; }
.agent-app__phone-cell a[href^="https://wa.me"] { color: #25b360; }
.agent-app__phone-cell bdi { font-variant-numeric: tabular-nums; }

.agent-app__copy-btn { display: inline-flex; color: var(--aa-text-muted); background: none; border: none; padding: 0; cursor: pointer; }
.agent-app__copy-btn svg { width: 15px; height: 15px; }
.agent-app__copy-btn:hover { color: var(--aa-teal-dark); }
.agent-app__copy-btn.is-copied { color: var(--aa-green-fg); }

/* Bulk-select bar + checkbox column (leads list) — desktop-only by design,
   see the mobile media query below. */
.agent-app__bulk-cell { width: 36px; text-align: center; }
.agent-app__bulk-cell input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--aa-teal-dark); cursor: pointer; }
.agent-app__bulk-bar {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 20px;
	background: var(--aa-bg); border-bottom: 1px solid var(--aa-border); font-size: 13px; font-weight: 700; color: var(--aa-navy-deep);
}
.agent-app__bulk-bar select { border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm); padding: 7px 10px; font: inherit; font-size: 12.5px; }
.agent-app__bulk-bar .agent-app__btn { padding: 8px 16px; font-size: 12.5px; }
#tenli-bulk-lead-form { display: none; }

.agent-app__badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.agent-app__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; margin-inline-end: 6px; background: currentColor; }
.agent-app__badge--new { background: var(--aa-green-bg); color: var(--aa-green-fg); }
.agent-app__badge--contacted { background: var(--aa-blue-bg); color: var(--aa-blue-fg); }
.agent-app__badge--quoted { background: var(--aa-purple-bg); color: var(--aa-purple-fg); }
.agent-app__badge--no-answer { background: var(--aa-amber-bg); color: var(--aa-amber-fg); }
.agent-app__badge--closed { background: var(--aa-gray-bg); color: var(--aa-gray-fg); }
.agent-app__badge--disputed { background: var(--aa-orange-bg); color: var(--aa-orange-fg); }
.agent-app__badge--danger { background: var(--aa-red-bg, #fdeceb); color: var(--aa-red-fg, #c0392b); }

/* Screen 05 dispute KPI accent colors (per-status, not the shared teal) */
.agent-disp__kpis .agent-ov__kpi--rejected .agent-ov__kpi-top svg,
.agent-disp__kpis .agent-ov__kpi--rejected .agent-ov__kpi-btn { color: var(--aa-red-fg, #c0392b); border-color: var(--aa-red-fg, #c0392b); }
.agent-disp__kpis .agent-ov__kpi--approved .agent-ov__kpi-top svg,
.agent-disp__kpis .agent-ov__kpi--approved .agent-ov__kpi-btn { color: var(--aa-green-fg); border-color: var(--aa-green-fg); }
.agent-disp__kpis .agent-ov__kpi--pending .agent-ov__kpi-top svg,
.agent-disp__kpis .agent-ov__kpi--pending .agent-ov__kpi-btn { color: var(--aa-amber-fg); border-color: var(--aa-amber-fg); }
.agent-disp__kpis .agent-ov__kpi--all .agent-ov__kpi-top svg,
.agent-disp__kpis .agent-ov__kpi--all .agent-ov__kpi-btn { color: var(--aa-blue-fg); border-color: var(--aa-blue-fg); }

/* Must come after the color rules above (equal specificity, source order
   decides) so the button actually goes white-on-color on hover instead of
   staying colored-text-on-colored-bg. */
.agent-disp__kpis .agent-ov__kpi-btn:hover { color: #fff; }
.agent-disp__kpis .agent-ov__kpi--rejected .agent-ov__kpi-btn:hover { background: var(--aa-red-fg, #c0392b); }
.agent-disp__kpis .agent-ov__kpi--approved .agent-ov__kpi-btn:hover { background: var(--aa-green-fg); }
.agent-disp__kpis .agent-ov__kpi--pending .agent-ov__kpi-btn:hover { background: var(--aa-amber-fg); }
.agent-disp__kpis .agent-ov__kpi--all .agent-ov__kpi-btn:hover { background: var(--aa-blue-fg); }
.agent-disp__manager-note { display: block; margin-top: 4px; color: var(--aa-text-muted, #71809A); font-size: 12.5px; }
/* The icon SVGs (tenli_agent_app_icon_svg()) carry no width/height attribute
   of their own by design - every usage site is expected to size them via
   CSS. This one was missing here, so the browser fell back to its default
   inline-SVG box (300x150) instead of a small icon - a large, stretched
   blob wherever an admin_note actually has content (agent-agreement.php x2,
   agent-disputes.php, agent-profile.php all share this exact class). */
.agent-disp__manager-note svg { width: 13px; height: 13px; flex-shrink: 0; vertical-align: -2px; }

.agent-app__row-actions { background: var(--aa-bg); border: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--aa-text-muted); }
.agent-app__row-actions svg { width: 16px; height: 16px; }
.agent-app__row-actions:hover { background: #e7eaf4; }

/* Per-row quick-actions menu (leads list "···") — reuses .agent-app__dropdown-
   panel's own chrome (border/shadow/radius) via the extra .agent-app__row-menu
   class, narrower than the topbar dropdowns since it's just a short action
   list, not a message feed. */
.agent-app__row-menu { width: 248px; padding: 6px 0; }
.agent-app__row-menu-link {
	display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px;
	color: var(--aa-text, #15345C); text-decoration: none; border: none; background: none;
	width: 100%; text-align: right; cursor: pointer; font: inherit;
}
.agent-app__row-menu-link svg { width: 15px; height: 15px; flex: none; color: var(--aa-teal); }
.agent-app__row-menu-link:hover { background: var(--aa-bg); }
.agent-app__row-menu-link--danger { color: var(--aa-red-fg, #c0392b); }
.agent-app__row-menu-link--danger svg { color: var(--aa-red-fg, #c0392b); }
.agent-app__row-menu-divider { border-block-start: 1px solid var(--aa-border); margin: 6px 0; }
.agent-app__row-menu-status { padding: 6px 14px 8px; display: flex; flex-direction: column; gap: 6px; }
.agent-app__row-menu-status label { font-size: 11.5px; font-weight: 700; color: var(--aa-text-muted); }
.agent-app__row-menu-status select,
.agent-app__row-menu-status input[type="text"] { width: 100%; border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm); padding: 8px 10px; font: inherit; font-size: 12.5px; }
.agent-app__row-menu-status-btn { align-self: flex-start; padding: 7px 16px; font-size: 12px; margin-block-start: 2px; }

.agent-app__empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 20px; text-align: center; color: var(--aa-text-muted); }
.agent-app__empty svg { width: 40px; height: 40px; color: var(--aa-border); }
.agent-app__empty a { color: var(--aa-teal-dark); font-weight: 700; }

.agent-app__pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--aa-border); }
.agent-app__pagination-pages { display: flex; align-items: center; gap: 4px; }
.agent-app__pagination-pages a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--aa-text-muted); }
.agent-app__pagination-pages a svg { width: 14px; height: 14px; transform: rotate(90deg); }
.agent-app__pagination-pages a[aria-label="עמוד קודם"] svg { transform: rotate(-90deg); }
.agent-app__pagination-pages a:hover { background: var(--aa-bg); }
.agent-app__pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 32px; color: var(--aa-text-muted); font-weight: 700; }

.agent-app__field--daterange { grid-column: span 1; }
.agent-app__daterange { display: flex; align-items: center; gap: 6px; }
.agent-app__daterange .agent-app__field-icon { flex: 1; min-width: 0; }
.agent-app__daterange span { color: var(--aa-text-muted); flex: none; }
.agent-app__pagination-pages a.is-active { background: var(--aa-navy-deep); color: #fff; }
.agent-app__pagination-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--aa-text-muted); }
.agent-app__pagination-meta select { border: 1.5px solid var(--aa-border); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12.5px; }

/* -------------------------------------------------------------------- */
/* Access gate (not logged in / no agency / pending / suspended)         */
/* -------------------------------------------------------------------- */

.agent-app--gate { display: flex; align-items: center; justify-content: center; width: 100%; padding: 24px; }
.agent-app__gate { background: #fff; border-radius: var(--aa-radius); box-shadow: var(--aa-shadow); padding: 44px 36px; max-width: 420px; text-align: center; }
.agent-app__gate h1 { font-size: 20px; margin-block-end: 10px; }
.agent-app__gate p { color: var(--aa-text-muted); font-size: 14px; margin-block-end: 20px; }
.agent-app__gate-btn {
	display: inline-flex; padding: 12px 28px; border-radius: var(--aa-radius-pill); background: var(--aa-navy-deep); color: #fff; font-weight: 700;
	box-shadow: 0 6px 16px -6px rgba(22, 51, 90, 0.5);
	transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.3), box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.agent-app__gate-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -8px rgba(22, 51, 90, 0.55); }
.agent-app__gate-btn--outline { background: transparent; border: 1.5px solid var(--aa-navy-deep); color: var(--aa-navy-deep); box-shadow: none; }
.agent-app__gate-btn--outline:hover { background: var(--aa-navy-deep); color: #fff; }

/* ==========================================================================
   Responsive — 1024 / 768 / 430ish, per BRIEF §18 (1440/1280/1024/768/430/390/360)
   ========================================================================== */

@media (max-width: 1180px) {
	.agent-app__filters-grid { grid-template-columns: repeat(2, 1fr); }
	.agent-app__field--search { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
	.agent-app__sidebar {
		/* Physical `right`, not `inset-inline-end` — this app is RTL-only, and
		   inset-inline-end resolves to the LOGICAL end, which in an RTL
		   context is the physical LEFT, not the right. Mixing that with a
		   translateX() (which is always physical, never logical) pinned the
		   drawer to the wrong edge and left it fully on-screen, blocking
		   clicks across the viewport even while "closed" — verified live
		   with Playwright (hamburger button was unclickable, sidebar
		   intercepted pointer events everywhere). */
		position: fixed; right: 0; top: 0; height: 100dvh;
		transform: translateX(100%); transition: transform 0.2s ease; box-shadow: -12px 0 30px rgba(0,0,0,0.18);
	}
	.agent-app.is-nav-open .agent-app__sidebar { transform: translateX(0); }
	.agent-app.is-nav-open .agent-app__scrim { display: block; }
	.agent-app__nav-close { display: inline-flex; }
	[data-agent-nav-open] { display: inline-flex; }
	.agent-app__content { padding: 20px 16px 48px; }
	.agent-app__topbar { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.agent-app__sidebar { transition: none; }
}

@media (max-width: 780px) {
	.agent-app__filters-grid { grid-template-columns: 1fr 1fr; }
	/* justify-content:flex-end (the desktop rule, where every tab always
	   fits) packs this scrollable row against its end edge once
	   flex-wrap:nowrap can no longer wrap tabs onto a second line - with
	   more tabs/longer labels than fit (leads' 5 status tabs, disputes' 4),
	   that pushed the excess off the START edge instead of the end, which
	   for this row-reverse+RTL combination meant the FIRST tab - always the
	   default-active "all" one - rendered with a negative left position,
	   entirely off-screen at the default scrollLeft:0 (verified live: "כל
	   הלידים (178)" at left:-130..right:-27, invisible on load, only
	   reachable by scrolling right first with no visual hint it was there).
	   Even tab sets that DO fit (settings' 4, profile's 4) still had their
	   first tab's last character clipped by a few px the same way - just a
	   smaller version of the identical edge-packing problem. flex-start
	   anchors the row to its start edge instead, so the active/first tab is
	   always in view at load; overflow (when a tab set is genuinely too
	   wide) now spills off the END, which the existing overflow-x:auto
	   scrolling handles as intended. */
	.agent-app__tabs { overflow-x: auto; flex-wrap: nowrap; padding-inline: 16px; justify-content: flex-start; }
	.agent-app__tab { white-space: nowrap; }

	/* Cards, not squeezed tables — BRIEF §12. */
	.agent-app__table-wrap { padding: 0; overflow: visible; }
	.agent-app__table { min-width: 0; }
	.agent-app__table thead { display: none; }
	.agent-app__table, .agent-app__table tbody, .agent-app__table tr, .agent-app__table td { display: block; width: 100%; }
	.agent-app__table tr { padding: 14px 16px; border-bottom: 1px solid var(--aa-border); }
	.agent-app__table td { border: none; padding: 5px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
	.agent-app__table td::before { content: attr(data-label); font-size: 11.5px; font-weight: 700; color: var(--aa-text-muted); flex: none; }
	.agent-app__table td:first-child { font-weight: 800; color: var(--aa-navy-deep); }
	/* Bulk-select is desktop-only (BRIEF-style card layout has no room for a
	   checkbox column) — hidden here rather than not-rendered so the same
	   markup works at both sizes. Hiding it shifts which cell is visually
	   first, but :first-child still targets the (now invisible) checkbox
	   cell by DOM position, so the "bold first cell" rule above needs this
	   adjacent-sibling override to land on the cell that's actually visible. */
	.agent-app__table td.agent-app__bulk-cell { display: none; }
	.agent-app__table td.agent-app__bulk-cell + td { font-weight: 800; color: var(--aa-navy-deep); }
	.agent-app__bulk-bar { display: none; }

	.agent-app__pagination { flex-direction: column; align-items: stretch; }
	.agent-app__pagination-meta { justify-content: space-between; }
}

@media (max-width: 430px) {
	.agent-app__filters-grid { grid-template-columns: 1fr; }
	.agent-app__toolbar .agent-app__btn { flex: 1; justify-content: center; }
}

@media (max-width: 560px) {
	/* Collapses to a round icon button, same footprint as the other topbar
	   icons, once there isn't room for the label next to them. */
	.agent-app__cta-pill { width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 50%; }
	.agent-app__cta-pill span { display: none; }
}

/* ==========================================================================
   Screen 01 — Agent Login (כניסה לאזור הסוכן). Centered card, no sidebar.
   ========================================================================== */

.agent-auth__deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.agent-auth__deco-blob { position: absolute; border-radius: 50%; filter: blur(0px); opacity: 0.35; }
.agent-auth__deco-blob--1 { width: 340px; height: 340px; background: radial-gradient(circle, var(--aa-teal) 0%, transparent 70%); top: -80px; left: -80px; }
.agent-auth__deco-blob--2 { width: 300px; height: 300px; background: radial-gradient(circle, var(--aa-navy) 0%, transparent 70%); bottom: -100px; right: -60px; opacity: 0.18; }
.agent-auth__deco-icon { position: absolute; color: var(--aa-navy); opacity: 0.14; }
.agent-auth__deco-icon svg { width: 64px; height: 64px; }
.agent-auth__deco-icon--1 { top: 12%; left: 8%; }
.agent-auth__deco-icon--2 { bottom: 14%; left: 12%; color: var(--aa-teal); }
.agent-auth__deco-icon--3 { top: 18%; right: 9%; }
.agent-auth__deco-icon--4 { bottom: 10%; right: 14%; color: var(--aa-teal); }
@media (max-width: 700px) { .agent-auth__deco-icon { display: none; } }

.agent-auth__card {
	position: relative; z-index: 1; background: var(--aa-white); border-radius: 24px; box-shadow: var(--aa-shadow), 0 20px 50px rgba(22,51,90,0.10);
	padding: 44px 44px 34px; width: 100%; max-width: 460px; text-align: center;
}
.agent-auth__logo { display: block; margin: 0 auto 22px; height: 48px; width: auto; }

/* Login/register switcher (tenli_agent_app_render_auth_tabs()) — segmented-
   pill control, active side gets a raised white "chip"; shared by both
   /agent-login/ and /supplier-signup/ since both pages already load this
   file. Sits right under the logo, above the h1. */
.agent-auth__tabs {
	display: flex; gap: 4px; background: var(--aa-bg); border-radius: var(--aa-radius-pill);
	padding: 4px; margin: 0 auto 20px; max-width: 260px;
}
.agent-auth__tab {
	flex: 1; text-align: center; padding: 9px 12px; border-radius: var(--aa-radius-pill);
	font-size: 13.5px; font-weight: 700; transition: color 0.15s ease;
}
/* Specificity note (same lesson as the "already registered" button bug):
   these are <a> tags, so the earlier `.agent-auth a:not(.agent-app__btn)
   {color:inherit}` reset (0,2,1) would otherwise beat a plain .agent-auth__tab
   rule (0,1,0) and .agent-auth__tab.is-active (0,2,0), erasing the muted/
   active color distinction. .agent-auth__tabs a.agent-auth__tab matches its
   specificity exactly and wins on source order (this file, defined later). */
.agent-auth__tabs a.agent-auth__tab { color: var(--aa-text-muted); }
.agent-auth__tabs a.agent-auth__tab.is-active { background: var(--aa-white); color: var(--aa-navy-deep); box-shadow: 0 2px 8px rgba(22, 51, 90, 0.14); }
.agent-auth__tabs a.agent-auth__tab:hover:not(.is-active) { color: var(--aa-navy-deep); }
.agent-auth__card h1 { font-size: 22px; }
.agent-auth__subtitle { margin: 8px 0 26px; color: var(--aa-text-muted); font-size: 13.5px; }
.agent-auth__error { background: var(--aa-orange-bg, #fdedde); color: #a23b0e; border: 1px solid #f3c199; border-radius: var(--aa-radius-sm); padding: 10px 14px; font-size: 13px; font-weight: 600; margin-block-end: 16px; text-align: right; }
.agent-auth__form { text-align: right; display: flex; flex-direction: column; gap: 16px; }
.agent-auth__field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--aa-text); margin-block-end: 6px; }
.agent-auth__field input { width: 100%; border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm); padding: 12px 14px; font: inherit; font-size: 14px; }
.agent-auth__field input:focus { border-color: var(--aa-teal); }
.agent-auth__password-wrap { position: relative; }
.agent-auth__password-wrap input { padding-inline-start: 42px; }
.agent-auth__eye { position: absolute; inset-inline-start: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 8px; border-radius: 50%; color: var(--aa-text-muted); display: flex; }
.agent-auth__eye svg { width: 18px; height: 18px; }
.agent-auth__eye:hover { background: var(--aa-bg); }
.agent-auth__forgot { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--aa-teal-dark); text-decoration: underline; margin-top: -6px; }
.agent-auth__remember { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--aa-text); }
.agent-auth__submit { width: 100%; justify-content: center; padding: 13px; font-size: 14.5px; border-radius: var(--aa-radius-pill); }
.agent-auth__divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--aa-text-muted); font-size: 12.5px; }
.agent-auth__divider::before, .agent-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--aa-border); }
.agent-auth__google {
	width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px;
	border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-pill); background: #fff; font-weight: 700; font-size: 14px; color: var(--aa-text);
	transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.3), border-color 0.18s ease;
}
.agent-auth__google svg { width: 19px; height: 19px; }
.agent-auth__google:not(:disabled):hover { border-color: var(--aa-navy-deep); transform: translateY(-3px); }
.agent-auth__google:disabled { opacity: 0.55; cursor: not-allowed; }
.agent-auth__footer { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 26px 0 0; font-size: 12px; color: var(--aa-text-muted); }
.agent-auth__footer svg { width: 15px; height: 15px; color: var(--aa-teal); }

@media (max-width: 480px) {
	.agent-auth__card { padding: 32px 22px 26px; border-radius: 18px; }
}

/* Wider auth-shell card variant for longer forms (agent-pilot.php,
   agent-register.php) - shared here instead of duplicated per page since
   both now use it. */
.agent-auth__card--wide { max-width: 640px; text-align: right; }
.agent-auth__card--wide h1 { text-align: center; }
.agent-auth__card--wide .agent-auth__subtitle { text-align: center; }

/* ==========================================================================
   Screen 04 — Lead Details (פרטי ליד)
   ========================================================================== */

.agent-app__chip--danger { background: var(--aa-red-bg, #fdeceb); color: var(--aa-red-fg, #c0392b); border-color: #f2b8b2; }
.agent-app__chip--danger:hover { background: #fbe0de; }
.agent-app__toolbar form { display: contents; }

.agent-lead__summary { padding: 20px 22px; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-block-end: 16px; }
.agent-lead__summary-main h2 { font-size: 19px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agent-lead__summary-main p { margin: 6px 0 0; font-size: 12.5px; color: var(--aa-text-muted); }
.agent-lead__summary-meta { display: flex; gap: 26px; flex-wrap: wrap; }
.agent-lead__summary-meta div { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.agent-lead__summary-meta span { color: var(--aa-text-muted); }
.agent-lead__summary-meta strong { color: var(--aa-navy-deep); font-size: 13.5px; }

.agent-lead__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.agent-lead__col-main, .agent-lead__col-side { display: flex; flex-direction: column; gap: 16px; }
.agent-lead__card { padding: 20px 22px; }
.agent-lead__card h3 { display: flex; align-items: center; gap: 8px; font-size: 14.5px; margin-block-end: 14px; }
.agent-lead__card h3 svg { width: 17px; height: 17px; color: var(--aa-teal); }
.agent-lead__status-h { margin-block-start: 22px; }
.agent-lead__contact-scope-note { font-size: 11.5px; color: var(--aa-text-muted); margin-block-end: 10px; line-height: 1.5; }

.agent-lead__dispute-window { font-size: 12.5px; color: var(--aa-text-muted); margin: 0 0 12px; line-height: 1.55; }
.agent-lead__dispute-window--closed {
	background: var(--aa-amber-bg); color: var(--aa-amber-fg); border-radius: var(--aa-radius-sm);
	padding: 10px 14px; font-weight: 600;
}
.agent-lead__dispute-window--closed a { color: inherit; text-decoration: underline; }

.agent-lead__kv { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.agent-lead__kv th { text-align: right; color: var(--aa-text-muted); font-weight: 600; padding: 9px 0; width: 45%; border-bottom: 1px solid var(--aa-border); }
.agent-lead__kv td { text-align: right; font-weight: 700; color: var(--aa-text); padding: 9px 0; border-bottom: 1px solid var(--aa-border); }
.agent-lead__kv tr:last-child th, .agent-lead__kv tr:last-child td { border-bottom: none; }

.agent-lead__note-form, .agent-lead__status-form { display: flex; flex-direction: column; gap: 10px; }
.agent-lead__note-form label, .agent-lead__status-form label { font-size: 12.5px; font-weight: 700; color: var(--aa-text-muted); }
.agent-lead__note-form textarea, .agent-lead__note-form select, .agent-lead__status-form select {
	width: 100%; border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm); padding: 9px 12px; font: inherit; font-size: 13.5px;
}
.agent-lead__note-form textarea { resize: vertical; min-height: 44px; }
.agent-lead__note-form .agent-app__btn { align-self: flex-start; }

.agent-lead__contact { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.agent-lead__contact li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.agent-lead__contact li svg { width: 16px; height: 16px; color: var(--aa-teal); flex: none; }
.agent-lead__contact li span { font-weight: 700; direction: ltr; text-align: right; }
.agent-lead__contact li small { color: var(--aa-text-muted); margin-inline-start: auto; }

.agent-lead__timeline { list-style: none; margin: 0; padding: 0; }
.agent-lead__timeline-item { display: flex; gap: 12px; padding-bottom: 18px; position: relative; padding-inline-start: 2px; }
.agent-lead__timeline-item::before { content: ""; position: absolute; inset-inline-start: 10.5px; top: 26px; bottom: -2px; width: 1.5px; background: var(--aa-border); }
.agent-lead__timeline-item:last-child::before { display: none; }
.agent-lead__timeline-item:last-child { padding-bottom: 0; }
.agent-lead__timeline-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--aa-teal-bg, #e6f7f7); color: var(--aa-teal); display: flex; align-items: center; justify-content: center; flex: none; }
.agent-lead__timeline-dot svg { width: 12px; height: 12px; }
.agent-lead__timeline-item--note .agent-lead__timeline-dot { background: var(--aa-purple-bg); color: var(--aa-purple-fg); }
.agent-lead__timeline-item--status .agent-lead__timeline-dot { background: var(--aa-blue-bg); color: var(--aa-blue-fg); }
.agent-lead__timeline-item--dispute .agent-lead__timeline-dot { background: var(--aa-orange-bg); color: var(--aa-orange-fg); }
.agent-lead__timeline-item--view .agent-lead__timeline-dot { background: var(--aa-gray-bg); color: var(--aa-gray-fg); }

.agent-lead__soon-tag { display: inline-block; background: var(--aa-gray-bg, #eef1f5); color: var(--aa-gray-fg, #6b7280); font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-inline-start: 6px; cursor: help; }

.agent-lead__consent { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: var(--aa-red-bg, #fdeceb); border-radius: var(--aa-radius-sm); margin-block-end: 16px; }
.agent-lead__consent svg { width: 20px; height: 20px; color: var(--aa-red-fg, #c0392b); flex: none; margin-top: 2px; }
.agent-lead__consent strong { display: block; color: var(--aa-red-fg, #c0392b); font-size: 13.5px; }
.agent-lead__consent p { margin: 2px 0 0; font-size: 12.5px; color: var(--aa-text-muted); }
.agent-lead__consent--ok { background: var(--aa-green-bg); }
.agent-lead__consent--ok svg { color: var(--aa-green-fg); }
.agent-lead__consent--ok strong { color: var(--aa-green-fg); }
.agent-lead__timeline-item strong { display: block; font-size: 13px; color: var(--aa-navy-deep); font-weight: 700; }
.agent-lead__timeline-item time { display: block; font-size: 11.5px; color: var(--aa-text-muted); margin-top: 2px; }

@media (max-width: 1024px) {
	.agent-lead__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Screen 02 — Agent Overview Dashboard (סקירה כללית)
   ========================================================================== */

.agent-ov__kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-block-end: 16px; }
.agent-ov__kpi { min-height: 184px; padding: 20px; display: flex; flex-direction: column; }
.agent-ov__kpi-top { display: flex; align-items: center; justify-content: space-between; font-size: 15px; color: var(--aa-text-muted); font-weight: 600; margin-block-end: 10px; }
.agent-ov__kpi-top svg { width: 18px; height: 18px; color: var(--aa-teal); flex: none; }
.agent-ov__kpi strong { font-size: 36px; font-weight: 700; color: var(--aa-navy-deep); font-family: var(--font-heading, sans-serif); font-variant-numeric: tabular-nums; }
.agent-ov__kpi small { color: var(--aa-text-muted); font-size: 13.5px; margin-block-start: 4px; }
.agent-ov__kpi-btn { margin-block-start: auto; padding-block-start: 14px; justify-content: center; font-size: 13.5px; min-height: 36px; padding-inline: 14px; }
.agent-ov__bar { height: 6px; border-radius: 999px; background: var(--aa-border); overflow: hidden; margin-block-start: 8px; }
.agent-ov__bar span { display: block; height: 100%; background: var(--aa-teal); border-radius: 999px; }
.agent-ov__trend--up { color: var(--aa-green-fg); font-weight: 700; }
.agent-ov__trend--down { color: var(--aa-red-fg, #c0392b); font-weight: 700; }

/* Right-to-left three-column dashboard grid: fixed 286px side columns keep
   width proportions stable regardless of content, the center track absorbs
   the rest. DOM order matters here — under dir="rtl" grid auto-placement,
   the FIRST child lands in the rightmost track, so the agreement/quota
   column must be first in markup and the alerts/quick-actions column last
   (this was backwards before: reversed in page-templates/agent-overview.php
   to match). */
.agent-ov__grid { display: grid; grid-template-columns: 286px minmax(0, 1fr) 286px; gap: 16px; align-items: start; }
.agent-ov__col-side { display: flex; flex-direction: column; gap: 16px; }
.agent-ov__card { padding: 20px; min-height: 510px; }
.agent-ov__card h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin-block-end: 14px; }
.agent-ov__card h3 svg { width: 17px; height: 17px; color: var(--aa-teal); flex: none; }
.agent-ov__card-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-block-end: 10px; }
.agent-ov__card-head h3 { margin: 0; }
.agent-ov__card-head a { font-size: 13px; font-weight: 700; color: var(--aa-teal-dark); display: flex; align-items: center; gap: 4px; }
.agent-ov__card-head a svg { width: 13px; height: 13px; transform: rotate(90deg); }
.agent-ov__view-all { width: 100%; justify-content: center; margin-block-start: 14px; min-height: 36px; }

.agent-ov__notices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.agent-ov__notice { display: flex; align-items: flex-start; gap: 10px; border-inline-start: 3px solid var(--aa-border); background: var(--aa-bg); border-radius: var(--aa-radius-sm); padding: 12px 14px; font-size: 13px; }
.agent-ov__notice svg { width: 17px; height: 17px; flex: none; margin-block-start: 1px; color: var(--aa-text-muted); }
.agent-ov__notice strong { display: block; font-size: 13.5px; color: var(--aa-navy-deep); }
.agent-ov__notice span { color: var(--aa-text-muted); }
.agent-ov__notice--danger { border-color: var(--aa-red-fg, #c0392b); background: var(--aa-red-bg, #fdeceb); }
.agent-ov__notice--danger svg { color: var(--aa-red-fg, #c0392b); }
.agent-ov__notice--warn { border-color: var(--aa-amber-fg); background: var(--aa-amber-bg); }
.agent-ov__notice--warn svg { color: var(--aa-amber-fg); }
.agent-ov__notice--info { border-color: var(--aa-blue-fg); background: var(--aa-blue-bg); }
.agent-ov__notice--info svg { color: var(--aa-blue-fg); }

.agent-ov__quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agent-ov__quick-grid .agent-app__chip {
	justify-content: flex-start; min-height: 64px; padding-inline: 14px; border-radius: var(--aa-radius-sm);
}

.agent-ov__agreement-kv li span { direction: ltr; }
.agent-ov__empty-note { font-size: 13px; color: var(--aa-text-muted); margin: 0 0 12px; }

.agent-ov__empty--compact { padding: 20px 8px; }
.agent-ov__empty--compact svg { width: 32px; height: 32px; }
.agent-ov__empty--compact strong { display: block; font-size: 14.5px; color: var(--aa-navy-deep); margin-block-end: 4px; }
.agent-ov__empty--compact p { margin: 0 0 12px; font-size: 13px; color: var(--aa-text-muted); }

.agent-ov__donut {
	--pct: 0; width: 132px; height: 132px; border-radius: 50%; margin: 4px auto 16px; display: flex; align-items: center; justify-content: center;
	background: conic-gradient(var(--aa-teal) calc(var(--pct) * 1%), var(--aa-border) 0);
	position: relative;
}
.agent-ov__donut::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--aa-white); }
.agent-ov__donut span { position: relative; font-size: 24px; font-weight: 800; color: var(--aa-navy-deep); font-family: var(--font-heading, sans-serif); }
.agent-ov__donut-legend { display: flex; justify-content: space-around; text-align: center; margin-block-end: 14px; }
.agent-ov__donut-legend strong { display: block; font-size: 18px; color: var(--aa-navy-deep); }
.agent-ov__donut-legend span { font-size: 11.5px; color: var(--aa-text-muted); }

.agent-ov__updated { text-align: center; font-size: 12px; color: var(--aa-text-faint, var(--aa-text-muted)); margin-block-start: 20px; }

/* Recent-leads table (screen 02 only) — a simplified 4-column table, distinct
   from the full Leads List (screen 03). The shared .agent-app__table has a
   920px min-width for that richer table's column count; here it must be
   dropped or the card gets a needless horizontal scrollbar at every
   realistic desktop width. Rows are made fully clickable via a "stretched
   link" on the existing real <a> (not a second interactive element, not a
   JS click handler on the row) — the customer-name link's hit area is
   expanded to cover the whole row. */
.agent-ov__col-main .agent-app__table { min-width: 0; }
.agent-ov__col-main .agent-app__table tbody tr { position: relative; }
.agent-ov__col-main .agent-app__table td:last-child a::after { content: ""; position: absolute; inset: 0; }

/* Fixed row/header heights only make sense in the desktop table layout —
   below 780px .agent-app__table already turns into stacked, auto-height
   "cards" (see the shared mobile rules further down); forcing a 60px row
   height there clips/overlaps the multi-line stacked content. */
@media (min-width: 781px) {
	.agent-ov__col-main .agent-app__table thead th { height: 48px; }
	.agent-ov__col-main .agent-app__table tbody tr { height: 60px; }
}

.agent-disp__kpis { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1280px) {
	.agent-ov__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.agent-ov__grid { grid-template-columns: 1fr; }
	.agent-ov__card { min-height: 0; }
}
/* Tablet: two columns, recent leads gets full width and visual priority
   (first, above the two side cards) rather than being squeezed into one of
   three narrow tracks. */
@media (max-width: 1280px) and (min-width: 769px) {
	.agent-ov__grid { grid-template-columns: 1fr 1fr; }
	.agent-ov__col-main { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 640px) {
	.agent-ov__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.agent-ov__quick-grid { grid-template-columns: 1fr 1fr; }
}

.agent-app__notice-success { background: var(--aa-green-bg); color: var(--aa-green-fg); border: 1px solid #b7e6cb; border-radius: var(--aa-radius-sm); padding: 12px 16px; font-weight: 700; font-size: 13.5px; margin-block-end: 16px; }

/* ==========================================================================
   Screen 06 — Agreement and Monthly Quota (הסכם ומכסה חודשית)
   ========================================================================== */

.agent-agr__tabs { margin-block-end: 16px; }
.agent-agr__current { padding: 20px 22px; margin-block-end: 16px; }
.agent-agr__current-head h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-block-end: 16px; }
.agent-agr__current-head svg { width: 17px; height: 17px; color: var(--aa-teal); }
.agent-agr__current-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.agent-agr__current-grid div { display: flex; flex-direction: column; gap: 5px; }
.agent-agr__current-grid span { font-size: 12px; color: var(--aa-text-muted); }
.agent-agr__current-grid strong { font-size: 14px; color: var(--aa-navy-deep); }

/* "המסמך שאישרת" (page-templates/agent-agreement.php) - the package summary
   reuses the exact same grid rhythm as .agent-agr__current-grid above, on
   purpose (same kind of fact list), just under its own class since it's a
   separate card with a different field set. */
.agent-agr__document { padding: 20px 22px; margin-block-end: 16px; }
.agent-agr__document h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-block-end: 16px; }
.agent-agr__document h3 svg { width: 17px; height: 17px; color: var(--aa-teal); }
.agent-agr__document-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-block-end: 14px; }
.agent-agr__document-summary div { display: flex; flex-direction: column; gap: 5px; }
.agent-agr__document-summary span { font-size: 12px; color: var(--aa-text-muted); }
.agent-agr__document-summary strong { font-size: 14px; color: var(--aa-navy-deep); }
.agent-agr__document-categories { font-size: 13px; color: var(--aa-text); margin: 0 0 14px; }
.agent-agr__document-categories strong { color: var(--aa-navy-deep); }
.agent-agr__document-details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--aa-teal-dark); list-style: none; }
.agent-agr__document-details summary::-webkit-details-marker { display: none; }
.agent-agr__document-details summary::before { content: '▸'; display: inline-block; margin-inline-end: 6px; transition: transform 0.15s ease; }
.agent-agr__document-details[open] summary::before { transform: rotate(90deg); }
.agent-agr__document-text {
	max-height: 320px; overflow-y: auto; margin-block-start: 12px; padding: 16px 18px;
	border: 1px solid var(--aa-border); border-radius: var(--aa-radius-sm); background: var(--aa-bg);
	font-size: 13px; line-height: 1.7; color: var(--aa-text);
}
.agent-agr__document-text h2, .agent-agr__document-text h3 { font-size: 14px; color: var(--aa-navy-deep); margin: 14px 0 6px; }
.agent-agr__document-text h2:first-child, .agent-agr__document-text h3:first-child { margin-block-start: 0; }
.agent-agr__document-text p { margin: 0 0 10px; }
.agent-agr__document-note { font-size: 12px; color: var(--aa-text-muted); margin-block-start: 10px; }

@media (max-width: 900px) {
	.agent-agr__document-summary { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.agent-agr__document-summary { grid-template-columns: 1fr; }
}

.agent-agr__grid { grid-template-columns: 1fr 1fr; margin-block-end: 16px; }
.agent-agr__bar { margin-block-end: 16px; }
.agent-agr__info-box { display: flex; align-items: flex-start; gap: 10px; background: var(--aa-green-bg); border-radius: var(--aa-radius-sm); padding: 12px 14px; }
.agent-agr__info-box svg { width: 18px; height: 18px; color: var(--aa-green-fg); flex: none; margin-top: 2px; }
.agent-agr__info-box p { margin: 0; font-size: 13px; font-weight: 700; color: var(--aa-green-fg); }
.agent-agr__info-box small { color: var(--aa-text-muted); font-weight: 500; }

.agent-agr__chart { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; height: 190px; padding-block-start: 10px; }
.agent-agr__chart-avg-line { position: absolute; inset-inline: 0; height: 0; border-top: 1.5px dashed var(--aa-text-muted); z-index: 1; }
.agent-agr__chart-avg-line span { position: absolute; inset-inline-end: 0; top: -18px; font-size: 10.5px; color: var(--aa-text-muted); background: var(--aa-white); padding-inline-start: 4px; }
.agent-agr__cat-bar { width: 70px; height: 6px; border-radius: 4px; background: var(--aa-bg); display: inline-block; overflow: hidden; vertical-align: middle; margin-inline-end: 6px; }
.agent-agr__cat-bar span { display: block; height: 100%; background: var(--aa-teal); border-radius: 4px; }
.agent-agr__full-breakdown { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--aa-teal-dark); text-decoration: none; }
.agent-agr__full-breakdown svg { width: 14px; height: 14px; transform: rotate(90deg); }
.agent-agr__bar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; height: 100%; justify-content: flex-end; }
.agent-agr__bar-value { font-size: 12px; font-weight: 700; color: var(--aa-navy-deep); }
.agent-agr__bar-track { width: 60%; flex: 1; display: flex; align-items: flex-end; background: var(--aa-bg); border-radius: 6px; overflow: hidden; }
.agent-agr__bar-fill { width: 100%; background: var(--aa-teal); border-radius: 6px 6px 0 0; min-height: 4px; }
.agent-agr__bar-col:last-child .agent-agr__bar-fill { background: var(--aa-navy-deep); }
.agent-agr__bar-label { font-size: 10.5px; color: var(--aa-text-muted); white-space: nowrap; }

@media (max-width: 1024px) {
	.agent-agr__grid, .agent-agr__current-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.agent-agr__current-grid { grid-template-columns: 1fr; }
	/* .agent-agr__current-grid (above) already got this collapse; the quota
	   view's donut+trend-chart pair (.agent-agr__grid) never did, so it
	   stayed at 2 equal columns all the way down to phone width - ~171px
	   each on a 390px screen. That's nowhere near enough for the 6-month bar
	   chart (verified live: 3 of its 6 columns rendered at negative x,
	   entirely off-screen and unreachable - including the two BUSIEST months,
	   151 and 25 leads, invisible) or the 4-item donut legend (each item ~35px
	   wide, numbers and labels overlapping into unreadable text). Stacking to
	   a single column, same as its sibling grid, gives each card the full
	   width it needs. */
	.agent-agr__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Screen 07 — Billing and Monthly History (חיובים והיסטוריית חודשים)
   ========================================================================== */

.agent-bill__grid { grid-template-columns: 2fr 1fr; }
/* Was missing top/side padding entirely (only padding-block-end existed) —
   .agent-app__table-card has no padding of its own by design (see the
   screen-09 note above), and unlike every other screen's main card this one
   never got one, so its toolbar ("יצוא לאקסל") sat flush against the card's
   top-right corner, overlapping/crowding the card edge. Reduced bottom
   padding is intentional and kept as-is: .agent-app__table-wrap already adds
   its own bottom padding, so the card doesn't need to double up there. */
.agent-bill__main { padding: 20px 22px 8px; }
.agent-bill__disclaimer { font-size: 12px; color: var(--aa-text-muted); padding: 14px 20px 4px; line-height: 1.6; }

@media (max-width: 1024px) {
	.agent-bill__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Screen 08 — Agency Profile (פרופיל הסוכנות)
   ========================================================================== */

.agent-prof__grid { grid-template-columns: 2fr 1fr; }
.agent-prof__col-main, .agent-prof__col-side { display: flex; flex-direction: column; gap: 16px; }
/* Base layout for EVERY .agent-prof__form use, including the ones on the
   settings screen that hold loose .agent-app__field divs with no grid
   wrapper — without this, those fields and the trailing submit button sat
   flush against each other (zero margin anywhere on either element). The
   .agent-prof__form-grid used on the agency-profile screen gets its spacing
   from this same gap now too (its own margin-block-end was removed) so
   there's one place controlling the rhythm, not two overlapping rules. */
.agent-prof__form { display: flex; flex-direction: column; gap: 14px; }
.agent-prof__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.agent-prof__form .agent-app__field input { width: 100%; }
.agent-prof__form > .agent-app__btn, .agent-prof__form > button.agent-app__btn { align-self: flex-start; }
.agent-prof__current-badge { font-weight: 500; font-size: 11.5px; color: var(--aa-text-muted); background: var(--aa-bg); padding: 1px 7px; border-radius: 999px; margin-inline-start: 4px; }
.agent-prof__contact-list, .agent-prof__doc-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.agent-prof__contact-list li, .agent-prof__doc-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--aa-border); border-radius: var(--aa-radius-sm); }
.agent-prof__contact-list strong { font-size: 13.5px; color: var(--aa-navy-deep); }
.agent-prof__contact-meta { font-size: 12px; color: var(--aa-text-muted); margin-inline-start: 8px; }
.agent-prof__doc-list a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--aa-navy-deep); text-decoration: none; font-size: 13.5px; }
.agent-prof__doc-list a:hover { color: var(--aa-teal-dark); }
.agent-prof__doc-list a svg { width: 15px; height: 15px; }

.agent-prof__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block-end: 16px; }
.agent-prof__stats > div { display: flex; align-items: center; gap: 10px; background: var(--aa-bg); border-radius: 10px; padding: 10px 12px; }
.agent-prof__stat-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--aa-white); display: flex; align-items: center; justify-content: center; flex: none; color: var(--aa-teal); }
.agent-prof__stat-icon svg { width: 15px; height: 15px; }
.agent-prof__stats strong { display: block; font-size: 15px; color: var(--aa-navy-deep); }
.agent-prof__stats small { color: var(--aa-text-muted); font-size: 11px; }

.agent-prof__status { display: flex; flex-direction: column; gap: 14px; }
.agent-prof__status-row { display: flex; align-items: center; gap: 12px; }
.agent-prof__status-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.agent-prof__status-icon svg { width: 17px; height: 17px; }
.agent-prof__status-icon--ok { background: var(--aa-green-bg); color: var(--aa-green-fg); }
.agent-prof__status-icon--warn { background: var(--aa-amber-bg); color: var(--aa-amber-fg); }
.agent-prof__status-row strong { display: block; font-size: 13px; color: var(--aa-navy-deep); }
.agent-prof__status-row small { color: var(--aa-text-muted); font-size: 11.5px; }

@media (max-width: 1024px) {
	.agent-prof__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.agent-prof__form-grid, .agent-prof__stats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Screen 09 — Account Settings (הגדרות חשבון)
   ========================================================================== */

.agent-set__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
/* Was entirely missing before — .agent-app__table-card has no padding of its
   own by design (every other screen adds its own, e.g. .agent-lead__card,
   .agent-agr__current), and this screen never got its own rule, so every
   settings card had its content flush against the edges (clipped by the
   card's overflow:hidden in places) — same padding language as the rest of
   the app's cards (20-24px), not a new one. */
.agent-set__card { padding: 24px 26px; }
.agent-set__card h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--aa-navy-deep); margin: 0 0 16px; }
.agent-set__card h3 svg { width: 17px; height: 17px; color: var(--aa-teal); }
/* Scoped to this screen only — .agent-lead__contact is shared with the lead
   details/overview/profile screens, which already read fine; here it's
   always followed directly by a button or note with no other spacing. */
.agent-set__card > .agent-lead__contact { margin-block-end: 18px; }

.agent-set__avatar-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.agent-set__avatar-card img { border-radius: 50%; margin-bottom: 0; }
.agent-set__avatar-name { font-size: 15px; color: var(--aa-navy-deep); }
.agent-set__member-since { color: var(--aa-text-muted); font-size: 12px; }
.agent-set__avatar-card .agent-ov__empty-note { margin-top: 4px; margin-bottom: 0; }

.agent-set__toggles { display: flex; flex-direction: column; gap: 4px; }
/* The submit button is a direct child of this same flex column (the form IS
   the toggle list), so it inherited the 4px row-gap meant for the tightly
   packed toggle rows above it — far too close after a list of bordered rows. */
.agent-set__toggles > .agent-app__btn { align-self: flex-start; margin-block-start: 14px; }
.agent-set__toggle { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--aa-border); cursor: pointer; font-size: 13.5px; color: var(--aa-navy-deep); }
.agent-set__toggle > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.agent-set__toggle > span:last-child strong { font-weight: 700; }
.agent-set__toggle > span:last-child small { font-weight: 400; color: var(--aa-text-muted); font-size: 11.5px; }
.agent-set__toggle:last-of-type { border-bottom: none; }
.agent-set__toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.agent-set__toggle--inline { padding: 0; border-bottom: none; }

.agent-set__switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--aa-border); transition: background-color .15s ease; }
.agent-set__switch::after { content: ''; position: absolute; inset-inline-start: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--aa-white); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: inset-inline-start .15s ease; }
.agent-set__toggle input:checked + .agent-set__switch { background: var(--aa-teal); }
.agent-set__toggle input:checked + .agent-set__switch::after { inset-inline-start: 18px; }
.agent-set__toggle input:focus-visible + .agent-set__switch { outline: 2px solid var(--aa-teal); outline-offset: 2px; }
.agent-set__toggle input:disabled + .agent-set__switch { opacity: .5; cursor: not-allowed; }

.agent-set__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 4px; margin-top: 10px; border-top: 1px solid var(--aa-border); font-size: 13.5px; color: var(--aa-navy-deep); }
.agent-set__2fa { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--aa-border); }
.agent-set__2fa-setup p { font-size: 13px; color: var(--aa-text-muted); margin: 0 0 10px; }
.agent-set__2fa-secret { display: block; font-size: 16px; letter-spacing: 2px; text-align: center; background: var(--aa-bg); border: 1px dashed var(--aa-border); border-radius: var(--aa-radius-sm); padding: 12px; margin-bottom: 14px; direction: ltr; }
.agent-set__2fa-setup .agent-app__field { margin-bottom: 10px; }
.agent-set__backup-codes strong { display: block; margin-bottom: 6px; }
.agent-set__backup-codes p { font-weight: 400; font-size: 12.5px; margin: 0 0 10px; }
.agent-set__backup-codes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.agent-set__backup-codes-grid code { display: block; text-align: center; background: rgba(255,255,255,.6); border-radius: 6px; padding: 6px; font-size: 13px; direction: ltr; }

/* The native "Choose File" control had zero styling (raw browser default),
   the one visibly unstyled control in the whole app — styled to look like
   an .agent-app__btn without duplicating the markup as a fake label+input
   pair, so it stays a real, fully-accessible native file input. */
.agent-set__avatar-card input[type="file"] { font: inherit; font-size: 12.5px; color: var(--aa-text-muted); }
.agent-set__avatar-card input[type="file"]::file-selector-button {
	display: inline-flex; align-items: center; margin-inline-end: 12px;
	padding: 9px 18px; border-radius: var(--aa-radius-pill); border: none;
	background: var(--aa-navy-deep); color: #fff; font: inherit; font-weight: 700; font-size: 13px;
	cursor: pointer; transition: background 0.15s ease;
}
.agent-set__avatar-card input[type="file"]::file-selector-button:hover { background: var(--aa-navy); }

@media (max-width: 1024px) {
	.agent-set__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Shared: trailing highlighted nav item (screens 10/11, "extra_nav_item")
   ========================================================================== */

.agent-app__nav-item--pending,
.agent-app__nav-item--danger { margin-top: 14px; cursor: default; }
.agent-app__nav-item--danger.is-active { background: var(--aa-red-fg); }

/* ==========================================================================
   Screen 10 — Pending Account Approval (חשבון ממתין לאישור)
   ========================================================================== */

.agent-pend__hero { display: flex; gap: 20px; align-items: flex-start; padding: 26px 28px; }
.agent-pend__hero-icon { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--aa-teal); color: #fff; display: flex; align-items: center; justify-content: center; }
.agent-pend__hero-icon svg { width: 26px; height: 26px; }
.agent-pend__hero-body h3 { font-size: 16px; margin-block-end: 8px; }
.agent-pend__hero-body p { margin: 0 0 14px; color: var(--aa-text-muted); font-size: 13.5px; line-height: 1.7; max-width: 60ch; }
.agent-pend__hero-meta { display: inline-flex; align-items: center; gap: 8px; background: var(--aa-bg); border-radius: 999px; padding: 8px 16px; font-size: 12.5px; font-weight: 700; color: var(--aa-navy-deep); }
.agent-pend__hero-meta svg { width: 15px; height: 15px; color: var(--aa-teal-dark); }

.agent-pend__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-block-start: 16px; }
.agent-pend__grid .agent-app__table-card { padding: 22px 24px; }
.agent-pend__grid h3 { display: flex; align-items: center; gap: 8px; font-size: 14.5px; margin: 0 0 12px; }
.agent-pend__grid h3 svg { width: 17px; height: 17px; color: var(--aa-teal); }

.agent-pend__checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.agent-pend__checklist li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--aa-navy-deep); }
.agent-pend__checklist li svg { width: 17px; height: 17px; flex: none; }
.agent-pend__checklist li.is-done svg { color: var(--aa-green-fg); }
.agent-pend__checklist li.is-pending svg { color: var(--aa-amber-fg); }
.agent-pend__checklist li.is-pending span { font-weight: 700; }
.agent-pend__checklist--muted li span { color: var(--aa-text-muted); }

.agent-pend__banner { display: flex; align-items: flex-start; gap: 16px; background: var(--aa-amber-bg); border: 1px solid #f2dfa8; border-radius: var(--aa-radius); padding: 20px 24px; margin-block-start: 16px; }
.agent-pend__banner svg { width: 24px; height: 24px; color: var(--aa-amber-fg); flex: none; }
.agent-pend__banner strong { display: block; color: var(--aa-navy-deep); font-size: 14px; margin-block-end: 4px; }
.agent-pend__banner p { margin: 0; color: var(--aa-text-muted); font-size: 13px; }
.agent-pend__banner a { color: var(--aa-teal-dark); font-weight: 700; text-decoration: underline; }

@media (max-width: 1024px) {
	.agent-pend__grid { grid-template-columns: 1fr; }
	.agent-pend__hero { flex-direction: column; }
}

/* ==========================================================================
   Screen 11 — Suspended or Inactive Account (חשבון חסום או לא פעיל)
   ========================================================================== */

.agent-susp__hero { display: flex; gap: 20px; align-items: flex-start; padding: 26px 28px; }
/* Same missing-padding bug as .agent-bill__main above: this card's h3 +
   .agent-susp__grid (with its "תנאי שימוש"/"יצירת קשר" buttons) sat flush
   against the unpadded .agent-app__table-card edges. */
.agent-susp__info { padding: 24px 26px; }
.agent-susp__info > h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--aa-navy-deep); margin: 0 0 16px; }
.agent-susp__info > h3 svg { width: 17px; height: 17px; color: var(--aa-teal); }
.agent-susp__hero-icon { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--aa-red-fg); color: #fff; display: flex; align-items: center; justify-content: center; }
.agent-susp__hero-icon svg { width: 26px; height: 26px; }
.agent-susp__hero-body h3 { font-size: 16px; color: var(--aa-red-fg); margin-block-end: 8px; }
.agent-susp__hero-body > p { margin: 0 0 16px; color: var(--aa-text-muted); font-size: 13.5px; line-height: 1.7; max-width: 60ch; }

.agent-susp__reason { display: flex; align-items: flex-start; gap: 12px; background: var(--aa-red-bg); border: 1px solid #f2b8b2; border-radius: var(--aa-radius-sm); padding: 14px 18px; margin-block-end: 16px; max-width: 60ch; }
.agent-susp__reason svg { width: 18px; height: 18px; color: var(--aa-red-fg); flex: none; margin-top: 2px; }
.agent-susp__reason strong { display: block; color: var(--aa-red-fg); font-size: 13px; margin-block-end: 4px; }
.agent-susp__reason p { margin: 0; color: var(--aa-navy-deep); font-size: 13px; line-height: 1.6; }

.agent-susp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block-start: 4px; }
.agent-susp__grid-item { background: var(--aa-bg); border-radius: var(--aa-radius-sm); padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.agent-susp__grid-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-block-end: 4px; }
.agent-susp__grid-icon svg { width: 19px; height: 19px; }
.agent-susp__grid-icon--purple { background: var(--aa-purple-bg); color: var(--aa-purple-fg); }
.agent-susp__grid-icon--amber { background: var(--aa-amber-bg); color: var(--aa-amber-fg); }
.agent-susp__grid-item strong { font-size: 13.5px; color: var(--aa-navy-deep); }
.agent-susp__grid-item p { margin: 0 0 8px; font-size: 12.5px; color: var(--aa-text-muted); }

@media (max-width: 1024px) {
	.agent-susp__hero { flex-direction: column; }
}
@media (max-width: 640px) {
	.agent-susp__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Price-quote wizard trigger + <dialog> (assets/js/agent-price-quote.js).
   The trigger pill itself lives in the shared topbar
   (inc/agent-app.php::tenli_agent_app_render_header(), .agent-app__cta-pill,
   see the "Topbar" section above) so it shows on every screen, not just
   screen 06 — .agent-agr__cta-bar below is the screen-06-only "request
   another package" bar that stays even once an agreement is active. Same
   native-<dialog> convention as assets/css/agent-pilot.css's
   .signup-otp-modal, just under the .agent-app --aa-* tokens instead of
   duplicating a palette.
   ========================================================================== */

.agent-agr__cta-bar { display: flex; justify-content: flex-end; margin-block-end: 14px; }

/* Structured as a flex column so the head/progress bar and the action row
   stay pinned while only the current step's own body scrolls — a short
   viewport (laptop + zoom, a long city list) no longer hides the "הבא"
   button below the fold with no way to reach it. */
.pq-modal {
	width: min(640px, 94vw); max-height: 90vh; border: none; border-radius: var(--aa-radius);
	padding: 0; box-shadow: 0 24px 60px -20px rgba(15, 32, 57, 0.35);
	color: var(--aa-text); font-family: var(--font-body, -apple-system, 'Segoe UI', Arial, sans-serif);
	direction: rtl; text-align: right;
}
/* Narrower variant for simple single-view popups (e.g. the "פתח ערעור"
   dispute dialog, page-templates/agent-lead-details.php) that don't need the
   full wizard width - reuses every other .pq-modal rule as-is. */
.pq-modal--narrow { width: min(480px, 92vw); }
/* Layout (display/flex) is scoped to [open] on purpose — the native <dialog>
   UA stylesheet only hides a closed dialog via `dialog:not([open]){display:
   none}`, and an unscoped `.pq-modal{display:flex}` here would override that
   (author styles beat the UA stylesheet regardless of selector specificity),
   leaving the dialog occupying its centered position:absolute box and
   intercepting clicks on whatever's underneath even while "closed". Verified
   live: this exact bug blocked the topbar trigger pill from ever opening it. */
.pq-modal[open] { display: flex; flex-direction: column; overflow: hidden; }
.pq-modal::backdrop { background: rgba(5, 39, 72, 0.6); }

.pq-modal__head {
	flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 22px 28px 16px; border-bottom: 1px solid var(--aa-border);
}
.pq-modal__head h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; color: var(--aa-navy-deep); margin: 0; }
.pq-modal__head h2 svg { width: 21px; height: 21px; color: var(--aa-teal); flex: none; }
.pq-modal__close {
	display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none;
	border-radius: 50%; border: none; background: var(--aa-bg); cursor: pointer; color: var(--aa-navy-deep);
}
.pq-modal__close svg { width: 16px; height: 16px; }
.pq-modal__close:hover { background: var(--aa-border); }

.pq-modal__progress { flex: none; display: flex; gap: 6px; padding: 16px 28px 0; }
.pq-modal__progress-seg { flex: 1; height: 5px; border-radius: 999px; background: var(--aa-border); transition: background 0.2s ease; }
.pq-modal__progress-seg.is-active,
.pq-modal__progress-seg.is-done { background: var(--aa-teal); }
.pq-modal__step-indicator { flex: none; font-size: 12px; font-weight: 700; color: var(--aa-text-muted); margin: 8px 28px 0; }

.pq-modal form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
/* form.hidden is how the JS swaps the wizard out for the "done" success
   panel on submit (see agent-price-quote.js) — without this, the same
   author-beats-UA-stylesheet issue as .pq-modal[open] above left the whole
   step-2-or-wherever-it-was-submitted-from form visibly stacked on top of
   the "הבקשה נשלחה!" message. Verified live: reported by the user, exactly
   reproduced this way. */
.pq-modal form[hidden] { display: none; }

.pq-modal__step {
	padding: 18px 28px 4px; overflow-y: auto; scrollbar-gutter: stable;
}
.pq-modal__step[hidden] { display: none; }
.pq-modal__step:not([hidden]) { flex: 1 1 auto; min-height: 0; }

/* Same padding/scroll rule as .pq-modal__step above but for a plain
   single-view dialog body (no wizard steps) - e.g. the dispute popup, which
   reuses .agent-lead__note-form's own label/select/textarea styling inside
   here rather than duplicating field CSS. */
.pq-modal__body { padding: 18px 28px 26px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.pq-modal__body .agent-lead__note-form .agent-app__btn { align-self: flex-start; margin-block-start: 4px; }

.pq-modal__step-title { font-size: 15px; font-weight: 800; color: var(--aa-navy-deep); margin: 0 0 16px; }
/* Per-step "this choice affects the price" reminder — one per step, pointing
   down at the persistent price strip/note that's always visible below the
   form regardless of which step is showing. */
.pq-modal__step-hint { font-size: 12px; color: var(--aa-text-muted); margin: 14px 0 4px; line-height: 1.5; }

.pq-modal__checklist { display: flex; flex-direction: column; gap: 8px; }
.pq-modal__checklist--scroll { max-height: 240px; overflow-y: auto; border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm); padding: 8px; margin-block-start: 10px; }
.pq-modal__option {
	display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 14px;
	border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
/* Same fix again, this time for the city search filter (agent-price-quote.js
   sets label.hidden on non-matching [data-pq-city-option] rows) — without
   it, typing in "חיפוש עיר" visibly did nothing, because every option kept
   rendering regardless of its hidden attribute. */
.pq-modal__option[hidden] { display: none; }
.pq-modal__option:hover { background: var(--aa-bg); }
.pq-modal__option:has(input:checked) { border-color: var(--aa-teal); background: var(--aa-bg); }
.pq-modal__option input { width: 18px; height: 18px; flex: none; accent-color: var(--aa-teal-dark); }
.pq-modal__checklist--scroll .pq-modal__option { border-color: transparent; padding: 10px 8px; }
.pq-modal__checklist--scroll .pq-modal__option:has(input:checked) { border-color: var(--aa-teal); }

.pq-modal__radio-row {
	display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--aa-border);
	border-radius: var(--aa-radius-sm); margin-block-end: 10px; font-size: 14px; line-height: 1.5; cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.pq-modal__radio-row:hover { background: var(--aa-bg); }
.pq-modal__radio-row:has(input:checked) { border-color: var(--aa-teal); background: var(--aa-bg); }
.pq-modal__radio-row input { margin-block-start: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--aa-teal-dark); }
.pq-modal__radio-row strong { color: var(--aa-navy-deep); }

.pq-modal [data-pq-city-list-wrap] input[type="text"] {
	width: 100%; border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm);
	padding: 11px 14px; font: inherit; font-size: 14px; margin-block: 12px 6px;
}
.pq-modal__hint { font-size: 12px; font-weight: 700; color: var(--aa-teal-dark); margin: 0 0 6px; }

.pq-modal__field { margin-block-start: 18px; }
.pq-modal__field label { display: block; font-size: 13px; font-weight: 700; color: var(--aa-text); margin-block-end: 8px; }
.pq-modal__field input { width: 100%; border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm); padding: 12px 14px; font: inherit; font-size: 15px; }

.pq-modal__summary { display: flex; flex-direction: column; gap: 0; margin: 0 0 16px; border: 1px solid var(--aa-border); border-radius: var(--aa-radius-sm); overflow: hidden; }
.pq-modal__summary div { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--aa-border); font-size: 14px; }
.pq-modal__summary div:last-child { border-bottom: none; }
.pq-modal__summary div:nth-child(odd) { background: var(--aa-bg); }
.pq-modal__summary dt { flex: none; color: var(--aa-text-muted); }
.pq-modal__summary dd { margin: 0; font-weight: 700; color: var(--aa-navy-deep); text-align: right; }
.pq-modal__note { font-size: 12.5px; line-height: 1.6; color: var(--aa-text-muted); background: var(--aa-bg); border-radius: var(--aa-radius-sm); padding: 12px 14px; }

.pq-modal__price-strip {
	flex: none; background: var(--aa-green-bg); color: var(--aa-green-fg); border-radius: var(--aa-radius-sm);
	padding: 12px 16px; font-size: 13.5px; font-weight: 700; margin: 14px 28px 0; text-align: center; line-height: 1.5;
}
/* Static — NOT touched by the JS price refresh, so it stays visible and
   consistent no matter which step is showing or whether a price is
   configured yet, unlike .pq-modal__price-strip above (that one's innerHTML
   is replaced on every AJAX refresh). */
.pq-modal__price-note { flex: none; font-size: 11.5px; color: var(--aa-text-muted); line-height: 1.6; margin: 8px 28px 0; text-align: center; }
.pq-modal__error { flex: none; background: var(--aa-red-bg); color: var(--aa-red-fg); border-radius: var(--aa-radius-sm); padding: 10px 14px; font-size: 13px; margin: 10px 28px 0; text-align: center; }

.pq-modal__actions { flex: none; display: flex; justify-content: space-between; gap: 12px; padding: 18px 28px 24px; }
.pq-modal__actions [data-pq-next],
.pq-modal__actions [data-pq-submit] { margin-inline-start: auto; }

.pq-modal__done { text-align: center; padding: 32px 28px; }
.pq-modal__done svg { width: 44px; height: 44px; color: var(--aa-green-fg); }
.pq-modal__done h3 { margin: 14px 0 6px; font-size: 18px; color: var(--aa-navy-deep); }
.pq-modal__done p { color: var(--aa-text-muted); font-size: 14px; margin: 0 0 20px; }

@media (max-width: 480px) {
	.pq-modal { max-height: 95vh; width: 100vw; border-radius: var(--aa-radius) var(--aa-radius) 0 0; align-self: flex-end; margin: auto 0 0; }
	.pq-modal__head { padding: 18px 18px 14px; }
	.pq-modal__progress { padding: 14px 18px 0; }
	.pq-modal__step-indicator { margin: 8px 18px 0; }
	.pq-modal__step { padding: 16px 18px 4px; }
	.pq-modal__price-strip { margin: 12px 18px 0; }
	.pq-modal__price-note { margin: 8px 18px 0; }
	.pq-modal__error { margin: 8px 18px 0; }
	.pq-modal__actions { padding: 16px 18px 20px; }
}

/* ==========================================================================
   Lead pricing wizard (page-templates/agent-lead-pricing.php). Mobile
   first: single column, price panel stacks below the form; from 960px the
   form takes the wide column and the price panel becomes a sticky sidebar
   (matches the two-column pattern already used on screen 07's billing
   page, agent-bill__grid, not a new layout idea).
   ========================================================================== */

.lpw__layout { display: flex; flex-direction: column; gap: 16px; }
.lpw__layout[hidden] { display: none; }
.lpw__form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lpw__step { padding: 22px; }
.lpw__step-title { font-size: 16px; display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.lpw__step-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--aa-navy-deep); color: #fff; font-size: 13px; font-weight: 700; flex: none;
}
/* Sub-category checkbox picker (2026-08-04) — copied at the form/code level
   from supplier-signup's specialty picker (main.css .supplier-signup__
   specialty-*/checkbox, assets/js/supplier-signup.js:initSpecialtyPicker())
   so this page's "pick as many sub-categories as you want" step looks and
   behaves the same way, re-declared here (not literally reusing those
   classes) because agent-app.css is deliberately self-contained and never
   loads main.css — see the file banner comment above. */
.lpw__product-hint { margin: 14px 0 0; font-size: 13px; color: var(--aa-text-muted); }
.lpw__product-hint[hidden] { display: none; }
.lpw__product-picker { margin-block-start: 16px; }
.lpw__product-picker[hidden] { display: none; }
#lpw-product-search {
	width: 100%; height: 44px; border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm);
	padding: 0 40px 0 14px; font: inherit; font-size: 13.5px; color: var(--aa-text);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364708a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.3-4.3'/%3E%3C/svg%3E") no-repeat left 12px center / 16px;
}
#lpw-product-search:focus { border-color: var(--aa-teal); outline: none; }

.lpw__checklist-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 0 10px; font-family: var(--font-heading, sans-serif); font-size: 13px; }
.lpw__checklist-count { padding: 5px 12px; border-radius: 999px; background: var(--aa-bg); color: var(--aa-navy-deep); font-size: 12px; font-weight: 700; flex: none; }

.lpw__checklist {
	display: flex; flex-direction: column; gap: 4px;
	max-height: 300px; overflow-y: auto;
	border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm);
	padding: 10px 14px; background: #fff;
}
.lpw__checklist-group { margin-block-start: 10px; padding-block-start: 10px; border-top: 1px solid var(--aa-border); }
.lpw__checklist-group:first-child { margin-block-start: 0; padding-block-start: 0; border-top: none; }
.lpw__checklist-group-title { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; color: var(--aa-text-muted); text-transform: uppercase; letter-spacing: 0.02em; }

/* Checklist row (2026-08-04; restructured same day, "inline row" fix, to
   carry each product's delivery-mode+quantity+live price INSIDE the row
   itself instead of a separate table/card elsewhere on the page). Two
   different DOM shapes share this one class on purpose: a plain <label>
   for the geo region/city checklists (just a checkbox+text child) below,
   and a <div> wrapping a nested .lpw__checklist-item-check <label> + a
   .lpw__row-config block for the product picker — flex-wrap lets the
   config controls wrap onto their own line on narrow screens without any
   separate mobile-only markup. */
.lpw__checklist-item {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
	padding: 8px; border-radius: 8px; font-size: 13.5px; color: var(--aa-text);
}
.lpw__checklist-item:hover { background: var(--aa-bg); }
.lpw__checklist-item input[type="checkbox"] { width: auto; flex-shrink: 0; }
.lpw__checklist-item.is-selected { background: color-mix(in srgb, var(--aa-teal) 12%, #fff); font-weight: 700; }
.lpw__checklist-item-label { flex: 1 1 auto; }
.lpw__checklist-item[hidden] { display: none; }

/* The checkbox+label part of a product row — its own <label> (not the same
   one wrapping the select/input below) so a click on the select/input can
   never also toggle the checkbox. */
.lpw__checklist-item-check { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 200px; cursor: pointer; }
.lpw__checklist-item.is-selected .lpw__checklist-item-check { font-weight: 700; color: var(--aa-navy-deep); }

/* Per-row funnel-status indicator — same status/colors the old singular
   #lpw-funnel-note used to show for the one selected product, now inline
   per checkbox since several products with different statuses can be
   selected together. */
.lpw__checklist-badge { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.lpw__checklist-badge--direct { background: var(--aa-green-bg); color: var(--aa-green-fg); }
.lpw__checklist-badge--adjacent { background: var(--aa-amber-bg); color: var(--aa-amber-fg); }
.lpw__checklist-badge--none { background: var(--aa-gray-bg); color: var(--aa-gray-fg); }

.lpw__checklist-empty { margin: 10px 2px 0; font-size: 13px; color: var(--aa-text-muted); }
.lpw__checklist-empty[hidden] { display: none; }

/* Inline per-row delivery-mode + quantity + live price — appears only once
   the row's checkbox is checked (BRIEF: no config fields, no price, for an
   unchecked lead type; nothing shown anywhere else on the page). */
.lpw__row-config { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; flex: 1 1 320px; }
.lpw__row-config[hidden] { display: none; }
.lpw__row-sharing-select {
	border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm);
	padding: 6px 8px; font: inherit; font-size: 13px; color: var(--aa-text); background: #fff;
}
.lpw__row-sharing-select:focus { border-color: var(--aa-teal); outline: none; }
.lpw__row-quantity-input {
	width: 68px; border: 1.5px solid var(--aa-border); border-radius: var(--aa-radius-sm);
	padding: 6px 8px; font: inherit; font-size: 13px; text-align: center; background: #fff;
}
.lpw__row-quantity-input:focus { border-color: var(--aa-teal); outline: none; }
.lpw__row-price, .lpw__row-total {
	display: flex; flex-direction: column; gap: 1px; flex: none;
	font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lpw__row-price small, .lpw__row-total small { font-size: 10.5px; font-weight: 700; color: var(--aa-text-muted); }
.lpw__row-total { color: var(--aa-navy-deep); font-weight: 700; }

/* Region → city drill-down (2026-08-04) — folded into the same card as the
   product picker (2026-08-04, "inline row" fix, later the same day; used to
   be its own step-2 card). Reuses the .lpw__checklist* component above
   (renamed from .lpw__product-* so both the product picker and this one
   share the same bordered/grouped/checkbox styling) for both the flat
   region list and the region-grouped city list — logic untouched. */
.lpw__geo-inline { margin: 14px 0; padding: 12px 14px; background: var(--aa-bg); border-radius: var(--aa-radius-sm); }
.lpw__toggle { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--aa-navy-deep); cursor: pointer; }
.lpw__toggle input { width: auto; flex: none; }
.lpw__geo-inline-label { font-weight: 700; color: var(--aa-text-muted); }
.lpw__geo-picker { margin-block-start: 14px; display: flex; flex-direction: column; gap: 14px; }
.lpw__geo-picker[hidden] { display: none; }
.lpw__geo-picker .lpw__checklist { max-height: 220px; background: #fff; }
#lpw-geo-regions { flex-direction: row; flex-wrap: wrap; gap: 8px; max-height: none; background: none; border: none; padding: 0; }
#lpw-geo-regions .lpw__checklist-item { flex: 0 0 auto; padding: 6px 12px; border: 1px solid var(--aa-border); border-radius: 999px; background: #fff; }
#lpw-geo-regions .lpw__checklist-item.is-selected { border-color: var(--aa-teal); }
.lpw__geo-summary { margin: 0; padding: 8px 12px; border-radius: var(--aa-radius-sm); background: var(--aa-blue-bg); color: var(--aa-blue-fg); font-size: 12.5px; font-weight: 700; }
.lpw__geo-summary[hidden] { display: none; }

/* Summary card's read-only recap table (2026-08-04) — reuses .agent-app__table
   (Leads List screen's table component, incl. its automatic mobile-card
   layout below 780px, see main.css breakpoint) — only min-width is
   overridden here, since it has far fewer/narrower columns than a leads
   grid and doesn't need .agent-app__table's default 920px scroll-triggering
   width. */
.lpw__summary-table { min-width: 0; }

.lpw__summary { min-width: 0; }
.lpw__summary-card { padding: 22px; position: static; }
.lpw__summary-card h2 { font-size: 16px; margin: 0 0 14px; }
.lpw__summary-empty { padding: 36px 16px; }
.lpw__summary-empty svg { width: 32px; height: 32px; }
/* Inherits display:flex from .agent-app__empty — same [hidden] override
   needed as every other flex/block-author-styled element JS toggles on
   this page (see .agent-app__btn[hidden] comment above for why). Verified
   live: the "choose a category" placeholder stayed visible next to the
   real price panel before this was added. */
.lpw__summary-empty[hidden] { display: none; }

.lpw__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--aa-border); font-size: 13.5px; }
.lpw__price-row span { color: var(--aa-text-muted); }
.lpw__price-row strong { font-variant-numeric: tabular-nums; color: var(--aa-navy-deep); }
.lpw__price-row--total { border-bottom: none; padding-block-start: 12px; flex-wrap: wrap; }
.lpw__price-row--total strong { font-size: 22px; font-family: var(--font-heading, sans-serif); }
.lpw__price-row--muted strong { color: var(--aa-text-muted); text-decoration: line-through; font-size: 14px; }
.lpw__price-row--positive strong { color: var(--aa-green-fg); }
/* "הערכה בלבד" — sits right next to the total so it can never be read as a
   final, binding amount, per the 04.08.2026 manual-review clarifications. */
.lpw__estimate-tag {
	flex-basis: 100%; font-size: 11px; font-weight: 700; color: var(--aa-amber-fg);
	background: var(--aa-amber-bg); border-radius: 999px; padding: 2px 10px; width: fit-content;
}

/* "חשוב לדעת לפני שליחת הבקשה" — native <details>, open by default (real
   HTML attribute in the template, not CSS), collapsible afterward by the
   visitor via <summary>. Same accordion chevron recipe as .faq__item in
   main.css (rotate 45deg -> -135deg on [open]), just re-skinned with this
   app's amber notice tokens instead of navy. Amber, not red/error — an
   important notice, not a warning that something went wrong. */
.lpw__disclosure {
	background: var(--aa-amber-bg); border-radius: var(--aa-radius-sm);
	margin: 14px 0; font-size: 12.5px; line-height: 1.7; color: var(--aa-text);
}
.lpw__disclosure-title {
	display: flex; align-items: center; gap: 7px; margin: 0; padding: 12px 16px;
	font-size: 13.5px; color: var(--aa-amber-fg); cursor: pointer; list-style: none;
}
.lpw__disclosure-title::-webkit-details-marker { display: none; }
.lpw__disclosure-title svg { width: 17px; height: 17px; flex: none; }
.lpw__disclosure-title::after {
	content: ''; width: 8px; height: 8px; margin-inline-start: auto; flex-shrink: 0;
	border-inline-end: 2px solid var(--aa-amber-fg); border-block-end: 2px solid var(--aa-amber-fg);
	transform: rotate(45deg);
}
.lpw__disclosure[open] .lpw__disclosure-title::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: no-preference) {
	.lpw__disclosure-title::after { transition: transform 0.2s ease; }
}
.lpw__disclosure-body { padding: 0 16px 14px; }
.lpw__disclosure p { margin: 0 0 8px; }
.lpw__disclosure p:last-of-type { margin-block-end: 12px; }
.lpw__disclosure strong { color: var(--aa-navy-deep); }
.lpw__disclosure-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.lpw__disclosure-checkbox input { margin-block-start: 3px; flex: none; }
.lpw__agreement-link { display: inline-block; margin-block-start: 8px; font-size: 12px; font-weight: 700; color: var(--aa-teal-dark); text-decoration: underline; }

/* Read-only "view the agreement" dialog (inc/supplier-terms.php:
   tenli_render_agreement_reference_dialog()) — re-skinned with this app's
   own --aa-* tokens, same recipe already used for assets/css/agent-pilot.css
   / agent-register.css's identical .terms-gate-modal overrides (those gate a
   NEW acceptance with scroll-to-unlock; this one is reference-only, no
   .terms-gate-modal__notice here since there's nothing to unlock). */
.lpw .terms-gate-modal {
	width: min(640px, 92vw); border: none; border-radius: var(--aa-radius); padding: 0;
	max-height: calc(100vh - 80px);
	box-shadow: 0 24px 60px -20px rgba(15, 32, 57, 0.35);
}
.lpw .terms-gate-modal::backdrop { background: rgba(5, 39, 72, 0.55); }
.lpw .terms-gate-modal__head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 20px 24px 14px; border-bottom: 1px solid var(--aa-border);
}
.lpw .terms-gate-modal__head h2 { font-size: 17px; color: var(--aa-navy-deep); margin: 0; }
.lpw .terms-gate-modal__close {
	font-size: 18px; line-height: 1; padding: 6px 10px; border-radius: 8px; border: none;
	background: none; cursor: pointer; color: var(--aa-text-muted);
}
.lpw .terms-gate-modal__close:hover { background: var(--aa-bg); }
.lpw .terms-gate-modal__scroll { max-height: 60vh; overflow-y: auto; padding: 16px 24px; font-size: 13.5px; line-height: 1.7; color: var(--aa-text-muted); }
.lpw .terms-gate-modal__foot { padding: 14px 24px 20px; border-top: 1px solid var(--aa-border); text-align: left; }

.lpw__note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; border-radius: var(--aa-radius-sm); padding: 8px 12px; margin: 10px 0 0; }
.lpw__note--positive { background: var(--aa-green-bg); color: var(--aa-green-fg); }
.lpw__note svg { width: 15px; height: 15px; flex: none; }
/* Same known gotcha as .agent-app__btn[hidden] above: `display:flex` here is
   an author rule that beats the UA `[hidden]{display:none}` default at equal
   specificity, so JS-toggled `hidden` did nothing without this. */
.lpw__note[hidden] { display: none; }

.lpw__pilot-block { margin: 12px 0; padding: 12px; background: var(--aa-blue-bg); border-radius: var(--aa-radius-sm); }
.lpw__pilot-title { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--aa-blue-fg); font-size: 13px; margin: 0 0 8px; }
.lpw__pilot-title svg { width: 16px; height: 16px; }
.lpw__pilot-block .lpw__price-row { border-bottom: none; padding: 3px 0; font-size: 12.5px; }

.lpw__terms { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--aa-text-muted); }
.lpw__terms li::before { content: '•'; color: var(--aa-teal); margin-inline-end: 6px; }

.lpw__waitlist-notice { display: flex; gap: 10px; align-items: flex-start; background: var(--aa-amber-bg); color: var(--aa-amber-fg); border-radius: var(--aa-radius-sm); padding: 12px 14px; margin: 10px 0; font-size: 12.5px; line-height: 1.6; }
.lpw__waitlist-notice svg { width: 18px; height: 18px; flex: none; margin-block-start: 2px; }
.lpw__waitlist-notice p { margin: 0; }
.lpw__waitlist-notice[hidden] { display: none; }

#lpw-submit { width: 100%; justify-content: center; margin-block-start: 6px; }
.lpw__error { margin-block-start: 10px; background: var(--aa-red-bg); color: var(--aa-red-fg); border-radius: var(--aa-radius-sm); padding: 10px 14px; font-size: 13px; text-align: center; }

.lpw__done { text-align: center; padding: 50px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lpw__done[hidden] { display: none; }
.lpw__done svg { width: 48px; height: 48px; color: var(--aa-green-fg); }
.lpw__done h2 { font-size: 20px; margin: 4px 0 0; }
.lpw__done p { color: var(--aa-text-muted); max-width: 440px; }
.lpw__done-quote-id { font-size: 12.5px; }
.lpw__done-quote-id code { background: var(--aa-bg); padding: 2px 8px; border-radius: 6px; }
.lpw__done .agent-app__btn { margin-block-start: 10px; }

/* "בקשות קודמות" — always-visible history card below the wizard/done
   screens, same .agent-app__table-card + .agent-app__table components as
   every other list on this app, same icon+h2 header recipe as
   .agent-agr__document h3 above. */
.lpw__history { margin-block-start: 16px; }
.lpw__history h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 14px; }
.lpw__history h2 svg { width: 17px; height: 17px; color: var(--aa-teal); flex: none; }

@media (min-width: 960px) {
	.lpw__layout { flex-direction: row; align-items: flex-start; }
	.lpw__form { flex: 1 1 auto; }
	.lpw__summary { flex: 0 0 480px; }
	.lpw__summary-card { position: sticky; top: 20px; }
}

/* Widened container for this page specifically (not the shared
   .agent-app__content max-width:1260px every other agent-app screen still
   uses) — both the "בחירת סוגי לידים" column and the "סיכום מחיר" column
   get more room, per explicit request that the layout felt too narrow/
   cramped ("תופס את כל המסך" for the disclosure box was really a symptom of
   the same narrow column, not just the box itself). .lpw is already on the
   very same element as .agent-app__content (see #lpw-root in the template),
   so this compound selector overrides only this one screen. No min-width
   gate needed — max-width only ever caps the container on screens wide
   enough to reach it, a narrower viewport still shrinks to fit exactly like
   before. */
.agent-app__content.lpw { max-width: 1440px; }