@import 'Baler.Client.vfibp0e72h.bundle.scp.css';

/* /Components/Layout/EventCreatorModal.razor.rz.scp.css */
.ec-backdrop[b-3vam3y2a8o] {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 32, .45);
	/* Matches EmailSourceDrawer's backdrop/panel pair (1050/1051) for consistent overlay
	   numbering across the app's custom backdrop+panel components (baler-responsive-reviewer). */
	z-index: 1050;
}

.ec-modal[b-3vam3y2a8o] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, .16);
	color: var(--ink);

	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(880px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(15, 23, 32, .28);
	z-index: 1051;
	overflow: hidden;
}

.ec-header[b-3vam3y2a8o] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--line);
	flex-shrink: 0;
}

.ec-header h5[b-3vam3y2a8o] {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.ec-close[b-3vam3y2a8o] {
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: var(--ink-faint);
	cursor: pointer;
	padding: 2px 6px;
}

.ec-close:hover[b-3vam3y2a8o] {
	color: var(--ink);
}

.ec-alert[b-3vam3y2a8o] {
	margin: 12px 20px 0;
}

.ec-body[b-3vam3y2a8o] {
	display: flex;
	gap: 18px;
	padding: 18px 20px;
	overflow-y: auto;
	min-height: 0;
}

.ec-panel[b-3vam3y2a8o] {
	flex: 1 1 280px;
	min-width: 0;
	background: var(--canvas);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 14px 16px;
}

.ec-panel-title[b-3vam3y2a8o] {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 10px;
}

.ec-field-list[b-3vam3y2a8o] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ec-field-row[b-3vam3y2a8o] {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid var(--line-soft);
}

.ec-field-label[b-3vam3y2a8o] {
	font-size: 12px;
	color: var(--ink-faint);
	flex-shrink: 0;
}

.ec-field-value[b-3vam3y2a8o] {
	font-size: 13px;
	font-weight: 600;
	text-align: right;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ec-field-empty[b-3vam3y2a8o] {
	font-weight: 400;
	color: var(--ink-faint);
	font-style: italic;
}

.ec-field-type-picker[b-3vam3y2a8o] {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.ec-match-box[b-3vam3y2a8o] {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--line);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ec-match-line[b-3vam3y2a8o] {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
}

.ec-match-label[b-3vam3y2a8o] {
	color: var(--ink-faint);
}

.ec-match-value[b-3vam3y2a8o] {
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: right;
}

.ec-match-none[b-3vam3y2a8o] {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	color: var(--ink-faint);
}

.ec-match-none a[b-3vam3y2a8o] {
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
}

.ec-match-none a:hover[b-3vam3y2a8o] {
	text-decoration: underline;
}

.ec-match-warning[b-3vam3y2a8o] {
	font-size: 12px;
	color: #93590c;
	background: #fef3e6;
	border-radius: 7px;
	padding: 6px 9px;
}

.ec-gate-hint[b-3vam3y2a8o] {
	font-size: 12px;
	font-weight: 600;
	border-radius: 7px;
	padding: 6px 9px;
	text-align: center;
}

.ec-gate-new[b-3vam3y2a8o] {
	background: #e8f6ee;
	color: #1c7a45;
}

.ec-gate-supplement[b-3vam3y2a8o] {
	background: #fef3e6;
	color: #93590c;
}

.ec-manual-fill[b-3vam3y2a8o] {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--line);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ec-manual-fill-title[b-3vam3y2a8o] {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.ec-manual-fill-row[b-3vam3y2a8o] {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ec-manual-fill-label[b-3vam3y2a8o] {
	font-size: 12px;
	color: var(--ink-faint);
}

.ec-manual-fill-actions[b-3vam3y2a8o] {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.ec-manual-fill-input[b-3vam3y2a8o],
.ec-manual-fill-select[b-3vam3y2a8o] {
	flex: 1;
	min-width: 90px;
	box-sizing: border-box;
	height: 30px;
	padding: 0 8px;
	border: 1px solid var(--line);
	border-radius: 6px;
	font-size: 12.5px;
	font-family: inherit;
	color: var(--ink);
	background: var(--surface);
}

.ec-manual-fill-input:focus[b-3vam3y2a8o],
.ec-manual-fill-select:focus[b-3vam3y2a8o] {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-ring);
}

.ec-manual-fill-set[b-3vam3y2a8o],
.ec-manual-fill-choice[b-3vam3y2a8o] {
	flex-shrink: 0;
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--accent);
	border-radius: 6px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.ec-manual-fill-set:hover:not(:disabled)[b-3vam3y2a8o],
.ec-manual-fill-choice:hover:not(:disabled)[b-3vam3y2a8o] {
	background: var(--accent);
	color: var(--surface);
}

.ec-manual-fill-set:disabled[b-3vam3y2a8o],
.ec-manual-fill-choice:disabled[b-3vam3y2a8o] {
	opacity: .5;
	cursor: not-allowed;
}

/* Marks the currently-selected Complaint/ServicePlan choice in the always-visible type picker
   (issue #30 follow-up) so a corrected classification is visibly confirmed, not just silently
   applied. */
.ec-manual-fill-choice-active[b-3vam3y2a8o] {
	background: var(--accent);
	color: var(--surface);
}

.ec-input-area[b-3vam3y2a8o] {
	flex: 1 1 380px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ec-lang-row[b-3vam3y2a8o] {
	display: flex;
	justify-content: flex-end;
}

.ec-lang-btn[b-3vam3y2a8o] {
	flex-shrink: 0;
	height: 26px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink-soft);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	cursor: pointer;
}

.ec-lang-btn:hover[b-3vam3y2a8o] {
	border-color: var(--accent);
	color: var(--accent);
}

.ec-textbox-wrap[b-3vam3y2a8o] {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 220px;
}

.ec-textarea[b-3vam3y2a8o] {
	flex: 1;
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
	min-height: 220px;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px 46px;
	font-size: 14px;
	font-family: inherit;
	color: var(--ink);
}

.ec-textarea:focus[b-3vam3y2a8o] {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-ring);
}

.ec-textbox-actions[b-3vam3y2a8o] {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.btn-icon[b-3vam3y2a8o] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 7px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-soft);
	cursor: pointer;
	flex-shrink: 0;
}

.btn-icon:hover:not(:disabled)[b-3vam3y2a8o] {
	border-color: var(--accent);
	color: var(--accent);
}

.btn-icon:disabled[b-3vam3y2a8o] {
	opacity: .5;
	cursor: not-allowed;
}

.ec-mic-active[b-3vam3y2a8o] {
	background: #fbeaea;
	border-color: #f3c9cb;
	color: #a3262b;
}

.btn-icon-label[b-3vam3y2a8o] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border-radius: 7px;
	border: 1px solid var(--accent);
	background: var(--accent-soft);
	color: var(--accent);
	cursor: pointer;
	white-space: nowrap;
	font-weight: 600;
	font-size: 13px;
}

.btn-icon-label:hover:not(:disabled)[b-3vam3y2a8o] {
	background: var(--accent);
	color: var(--surface);
}

.btn-icon-label:disabled[b-3vam3y2a8o] {
	opacity: .6;
	cursor: not-allowed;
}

.ec-listening-indicator[b-3vam3y2a8o] {
	font-size: 12px;
	color: #a3262b;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ec-listening-indicator[b-3vam3y2a8o]::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: #a3262b;
	animation: ec-pulse-b-3vam3y2a8o 1.1s ease-in-out infinite;
}

@keyframes ec-pulse-b-3vam3y2a8o {
	0%, 100% { opacity: 1; }
	50% { opacity: .3; }
}

.ec-footer[b-3vam3y2a8o] {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid var(--line);
	flex-shrink: 0;
}

.btn-outline[b-3vam3y2a8o] {
	background: var(--surface);
	border-color: var(--line);
	color: var(--ink-soft);
}

.btn-outline:hover[b-3vam3y2a8o] {
	border-color: var(--accent);
	color: var(--accent);
}

/* Desktop window resized narrower, or an unfolded foldable - stack panel above input rather than
   side-by-side (razor-page-design-system's 1400px-class compact switch, scaled to this modal's
   own max-width since it never reaches the full 1400px page width itself). */
@media (max-width: 760px) {
	.ec-body[b-3vam3y2a8o] {
		flex-direction: column;
	}

	.ec-panel[b-3vam3y2a8o] {
		flex-basis: auto;
	}

	.ec-textbox-wrap[b-3vam3y2a8o] {
		min-height: 160px;
	}

	.ec-textarea[b-3vam3y2a8o] {
		min-height: 160px;
	}
}

/* Short-viewport-height phones (iPhone SE and similar ~650-670px CSS height, and foldable cover
   screens at similar heights): .ec-body's content was measured to run ~50px taller than its
   visible area at initial scrollTop:0, clipping the mic/Ask Baler buttons - the feature's primary
   CTA - behind an undiscoverable scroll on first open (baler-responsive-reviewer, issue #30).
   Trim the textarea's own min-height and field-row spacing to reclaim that deficit rather than
   relying on scroll discovery. */
@media (max-height: 700px) {
	.ec-textbox-wrap[b-3vam3y2a8o],
	.ec-textarea[b-3vam3y2a8o] {
		min-height: 110px;
	}

	.ec-field-list[b-3vam3y2a8o] {
		gap: 6px;
	}

	.ec-field-row[b-3vam3y2a8o] {
		padding: 4px 0;
	}
}

/* Real phone widths. */
@media (max-width: 480px) {
	.ec-modal[b-3vam3y2a8o] {
		width: 100vw;
		max-height: 100vh;
		max-height: 100dvh;
		top: 0;
		left: 0;
		transform: none;
		border-radius: 0;
	}

	.ec-footer[b-3vam3y2a8o] {
		flex-direction: column-reverse;
	}

	.ec-footer .btn[b-3vam3y2a8o] {
		width: 100%;
	}
}

/* Extra-narrow foldable cover screens. */
@media (max-width: 349px) {
	.ec-body[b-3vam3y2a8o] {
		padding: 12px 14px;
	}

	.ec-panel[b-3vam3y2a8o] {
		padding: 12px;
	}
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-9xt0z7f5zq] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-9xt0z7f5zq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Flex items default to min-width:auto, which refuses to shrink below the
       content's natural (min-content) width. A wide table or other unwrapped
       content inside a page can then force this whole flex item - and with it
       the page's row layout on desktop - wider than the viewport, causing the
       page itself to scroll horizontally instead of the offending element's
       own overflow-x. min-width: 0 lets it shrink to the available space so
       each page is responsible for its own internal scrolling. */
    min-width: 0;
}

.content[b-9xt0z7f5zq] {
    flex: 1;
    min-width: 0;
    /* Turn the content column into a flex container so a page's root element
       can opt in to filling the remaining viewport height (flex: 1) instead
       of just taking its natural content height - e.g. so a list page's
       table can grow to the bottom of the screen and scroll internally
       rather than the whole document scrolling. Pages that don't opt in are
       unaffected: they keep their natural height like a normal block. */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sidebar[b-9xt0z7f5zq] {
    background-color: #f8f9fa;
    border-right: 1px solid #e0e0e0;
    flex-shrink: 0;
}


.bi-list[b-9xt0z7f5zq] {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23444' class='bi bi-list' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
    background-size: cover;
}


@media (min-width: 641px) {
    .page[b-9xt0z7f5zq] {
        flex-direction: row;
    }

    .sidebar[b-9xt0z7f5zq] {
        width: 250px;
        min-width: 0;
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
        scrollbar-width: thin;
        z-index: 100;
        transition: width 0.3s ease-in-out;
        display: flex;
        flex-direction: column;
    }

    .sidebar-hidden[b-9xt0z7f5zq] {
        width: 60px !important;
        overflow-x: hidden;
    }

    .sidebar-hidden[b-9xt0z7f5zq]  .nav-link-text,
    .sidebar-hidden[b-9xt0z7f5zq]  .navbar-brand,
    .sidebar-hidden[b-9xt0z7f5zq]  .nav-section-header,
    .sidebar-hidden[b-9xt0z7f5zq]  .navbar-toggler,
    .sidebar-hidden[b-9xt0z7f5zq]  hr,
    .sidebar-hidden[b-9xt0z7f5zq]  .navbar,
    .sidebar-hidden[b-9xt0z7f5zq]  .bi::after {
        display: none !important;
    }

    .sidebar-hidden[b-9xt0z7f5zq]  .nav-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex;
        justify-content: center;
    }

    .sidebar-hidden[b-9xt0z7f5zq]  .nav-link {
        width: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

    .sidebar-hidden[b-9xt0z7f5zq]  .sidebar-collapse-footer {
        justify-content: center;
        padding: 0.5rem 0;
    }

    .sidebar-hidden[b-9xt0z7f5zq]  .bi {
        margin-right: 0 !important;
        margin-left: 0 !important;
        flex-shrink: 0;
    }

    article[b-9xt0z7f5zq] {
        padding-top: 1.5rem !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (max-width: 640.98px) {
    .content[b-9xt0z7f5zq] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

#blazor-error-ui[b-9xt0z7f5zq] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-9xt0z7f5zq] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-tjscn7geay] {
    color: #444;
    border-color: rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0.75rem;
}

.navbar-toggler:active[b-tjscn7geay] {
    background-color: rgba(0, 0, 0, 0.05);
}

.top-row[b-tjscn7geay] {
    min-height: 3.5rem;
    background-color: transparent;
    display: flex;
    align-items: center;
}

.navbar-brand[b-tjscn7geay] {
    font-size: 1.1rem;
}

.bi[b-tjscn7geay] {
    /* The bi-* classes render via the self-hosted bootstrap-icons font's
       ::before glyph (see wwwroot/lib/bootstrap-icons), not the old
       background-image data-URIs below (those are now dead/vestigial - see
       the *-nav-menu classes further down). An empty <span class="bi bi-*">
       is otherwise just an inline-block box: the glyph, sized by inherited
       font-size, doesn't fill or center itself in this fixed 1.25rem box on
       its own - flex centering is required or the icon renders visibly
       off-center, most noticeable in the collapsed icon-only sidebar where
       the icon is the only content in the nav item. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
    font-size: 1rem;
}

.bi-house-door-fill-nav-menu[b-tjscn7geay] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-tjscn7geay] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-tjscn7geay] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-tjscn7geay] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-tjscn7geay] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-tjscn7geay] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-tjscn7geay] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}


.bi-arrow-bar-left-nav-menu[b-tjscn7geay] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-tjscn7geay] {
    font-size: 0.85rem;
    padding-bottom: 0.15rem;
}

    .nav-item:first-of-type[b-tjscn7geay] {
        padding-top: 0.5rem;
    }

    .nav-item:last-of-type[b-tjscn7geay] {
        padding-bottom: 0.5rem;
    }

.nav-item[b-tjscn7geay]  .nav-link {
    color: #444;
    background: none;
    border: none;
    border-radius: 4px;
    height: 2.2rem;
    display: flex;
    align-items: center;
    line-height: 2.2rem;
    width: 100%;
    padding: 0 0.75rem;
    transition: background-color 0.2s, color 0.2s;
    text-decoration: none;
}

.nav-item[b-tjscn7geay]  a.active {
    background-color: #e2eafc;
    color: #0056b3;
    font-weight: 600;
}

.nav-item[b-tjscn7geay]  .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #000;
}

/* The Event Creator nav item is a <button> (it opens a modal, it doesn't navigate) sharing the
   same .nav-link look as every NavLink - reset the browser's default button chrome first so the
   existing .nav-link rule above is the only thing that actually shows through. */
.nav-item[b-tjscn7geay]  .nav-link-button {
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sidebar-collapse-footer[b-tjscn7geay] {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.sidebar-toggle-btn[b-tjscn7geay] {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: #6c757d;
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover[b-tjscn7geay] {
    background-color: rgba(0, 0, 0, 0.08);
    color: #000;
}

.sidebar-toggle-btn .bi[b-tjscn7geay] {
    margin-right: 0;
    width: 1.1rem;
    height: 1.1rem;
}

.bi-sidebar-collapse[b-tjscn7geay] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M14 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12zM2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M3 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z'/%3E%3C/svg%3E");
}

.bi-sidebar-expand[b-tjscn7geay] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M14 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12zM2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M13 4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V4z'/%3E%3C/svg%3E");
}

.nav-scrollable[b-tjscn7geay] {
    display: none;
    height: calc(100% - 3.5rem);
}

/* On small screens, when NOT collapsed, it should show */
@media (max-width: 640.98px) {
    .nav-scrollable:not(.collapse)[b-tjscn7geay] {
        display: block;
    }
}

.navbar-toggler:focus[b-tjscn7geay] {
    outline: none;
}

@media (min-width: 641px) {
    .navbar-toggler[b-tjscn7geay] {
        display: none;
    }

    .nav-scrollable[b-tjscn7geay] {
        /* Never collapse the sidebar for wide screens */
        display: block !important;

        /* Allow sidebar to scroll for tall menus */
        overflow-y: auto;
    }
}

.nav-section-header[b-tjscn7geay] {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05rem;
    color: #6c757d;
    padding: 1.25rem 1rem 0.5rem 1rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-s0b5sapq40],
.components-reconnect-repeated-attempt-visible[b-s0b5sapq40],
.components-reconnect-failed-visible[b-s0b5sapq40],
.components-pause-visible[b-s0b5sapq40],
.components-resume-failed-visible[b-s0b5sapq40],
.components-rejoining-animation[b-s0b5sapq40] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-s0b5sapq40],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-s0b5sapq40],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-s0b5sapq40],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-s0b5sapq40],
#components-reconnect-modal.components-reconnect-retrying[b-s0b5sapq40],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-s0b5sapq40],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-s0b5sapq40],
#components-reconnect-modal.components-reconnect-failed[b-s0b5sapq40],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-s0b5sapq40] {
    display: block;
}


#components-reconnect-modal[b-s0b5sapq40] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-s0b5sapq40 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-s0b5sapq40 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-s0b5sapq40 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-s0b5sapq40]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-s0b5sapq40 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-s0b5sapq40 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-s0b5sapq40 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-s0b5sapq40 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-s0b5sapq40] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-s0b5sapq40] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-s0b5sapq40] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-s0b5sapq40] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-s0b5sapq40] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-s0b5sapq40] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-s0b5sapq40] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-s0b5sapq40 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-s0b5sapq40] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-s0b5sapq40 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/Settings.razor.rz.scp.css */
.admin-settings-page[b-yk21g9zrnx] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
	max-width: 640px;
}

.eyebrow[b-yk21g9zrnx] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.card[b-yk21g9zrnx] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 16px;
}

.card h2[b-yk21g9zrnx] {
	font-size: 14px;
	margin: 0 0 16px;
	font-weight: 700;
}

.card h2 small[b-yk21g9zrnx] {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.field-row[b-yk21g9zrnx] {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin-bottom: 14px;
}

.field-row select[b-yk21g9zrnx] {
	box-sizing: border-box;
	width: 100%;
}

@media (max-width: 480px) {
	.admin-settings-page[b-yk21g9zrnx] {
		max-width: 100%;
	}
}
/* /Components/Pages/Admin/VisitMonitoring.razor.rz.scp.css */
.visit-monitoring-page[b-vwr4ob0uxm] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
	/* Fill the remaining viewport height (MainLayout's .content is a flex
	   column) so the table can grow to the bottom of the screen and scroll
	   internally instead of the whole page scrolling. */
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.eyebrow[b-vwr4ob0uxm] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.btn-refresh[b-vwr4ob0uxm] {
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

[b-vwr4ob0uxm] .icon-refresh {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

/* Table */

.table-card[b-vwr4ob0uxm] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	max-width: 100%;
	flex: 1;
	min-height: 0;
	overflow: auto;
	margin-bottom: 12px;
}

.visits-table[b-vwr4ob0uxm] {
	width: 100%;
	border-collapse: collapse;
}

.visits-table thead th[b-vwr4ob0uxm] {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: #fafbfc;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

.visits-table thead tr:first-child th:first-child[b-vwr4ob0uxm] { border-top-left-radius: 12px; }
.visits-table thead tr:first-child th:last-child[b-vwr4ob0uxm] { border-top-right-radius: 12px; }
.visits-table tbody tr:last-child td:first-child[b-vwr4ob0uxm] { border-bottom-left-radius: 12px; }
.visits-table tbody tr:last-child td:last-child[b-vwr4ob0uxm] { border-bottom-right-radius: 12px; }

.visits-table tbody td[b-vwr4ob0uxm] {
	padding: 14px 18px;
	font-size: 14px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}

.visits-table tbody tr:last-child td[b-vwr4ob0uxm] { border-bottom: none; }
.visits-table tbody tr:hover[b-vwr4ob0uxm] { background: #f8fafc; }

.cell-time[b-vwr4ob0uxm] { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-user[b-vwr4ob0uxm] { font-weight: 600; }
.cell-ip[b-vwr4ob0uxm] { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* URL / User Agent columns are genuinely long free text - truncate with a
   hover tooltip to reveal the full value, same pattern as ComplaintList's
   Notes column and ServicePlanList's Address column. */

.notes-wrap[b-vwr4ob0uxm] {
	position: relative;
	display: inline-block;
	max-width: 320px;
	vertical-align: middle;
}

.cell-notes-text[b-vwr4ob0uxm] {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ink-soft);
}

.notes-tooltip[b-vwr4ob0uxm] {
	position: absolute;
	top: calc(100% + 9px);
	left: 0;
	min-width: 220px;
	max-width: 420px;
	background: #1f2933;
	color: #fff;
	font-size: 12.5px;
	line-height: 1.5;
	padding: 10px 13px;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(15, 23, 32, 0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.12s ease, transform 0.12s ease;
	z-index: 40;
	white-space: normal;
	word-break: break-word;
	pointer-events: none;
}

.notes-tooltip[b-vwr4ob0uxm]::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 16px;
	border: 6px solid transparent;
	border-bottom-color: #1f2933;
}

.notes-wrap:hover .notes-tooltip[b-vwr4ob0uxm] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* "Load more" button below the table - matches CustomerList/ComplaintList's Load-more pattern
   now that VisitLogService's offset-based GetPageAsync(page, pageSize) is used to append pages
   instead of numbered pill pagination. */

.btn-load-more[b-vwr4ob0uxm] {
	min-width: 160px;
}

/* Mobile card list: hidden on desktop, shown instead of the table on mobile */

.mobile-list[b-vwr4ob0uxm] {
	display: none;
}

.m-card[b-vwr4ob0uxm] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
}

.m-card-top[b-vwr4ob0uxm] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.m-card-user[b-vwr4ob0uxm] {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-time[b-vwr4ob0uxm] {
	flex-shrink: 0;
	color: var(--ink-soft);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.m-card-row[b-vwr4ob0uxm] {
	display: flex;
	gap: 6px;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--ink-soft);
}

.m-card-row .k[b-vwr4ob0uxm] {
	flex-shrink: 0;
	font-weight: 700;
	color: var(--ink-faint);
	font-size: 11px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	min-width: 32px;
}

.m-card-row .v[b-vwr4ob0uxm] {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Mobile layout - breakpoint 1400px, same rationale as every other list page
   in this design system (also covers a resized desktop window). */

@media (max-width: 1400px) {
	.topbar[b-vwr4ob0uxm] {
		align-items: flex-start;
	}

	.btn-refresh[b-vwr4ob0uxm] {
		width: 100%;
		justify-content: center;
	}

	.table-card[b-vwr4ob0uxm] {
		display: none;
	}

	.mobile-list[b-vwr4ob0uxm] {
		display: block;
	}
}

/* Extra-narrow tier: foldable cover screens down to ~280px. */

@media (max-width: 349px) {
	.m-card[b-vwr4ob0uxm] {
		padding: 10px 12px;
	}

	.m-card-user[b-vwr4ob0uxm] {
		font-size: 13.5px;
	}

	.btn-refresh[b-vwr4ob0uxm] {
		font-size: 12.5px;
	}
}
/* /Components/Pages/BadAddresses/BadAddresses.razor.rz.scp.css */
.bad-addresses-page[b-jtfp68ikev] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
	/* Fill the remaining viewport height (MainLayout's .content is a flex
	   column) so the table can grow to the bottom of the screen and scroll
	   internally instead of the whole page scrolling. */
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.eyebrow[b-jtfp68ikev] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.back-link[b-jtfp68ikev] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.btn-outline[b-jtfp68ikev] {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink-soft);
}

.btn-outline:hover[b-jtfp68ikev] {
	border-color: var(--accent);
	color: var(--accent);
}

/* Badges - same palette used across the design system */

.badge[b-jtfp68ikev] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.badge .dot[b-jtfp68ikev] {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	flex-shrink: 0;
}

.badge-new[b-jtfp68ikev] { background: #eaf2fb; color: #14548f; }
.badge-confirm[b-jtfp68ikev] { background: #e9f6fa; color: #196c85; }
.badge-done[b-jtfp68ikev] { background: #e8f6ee; color: #1c7a45; }
.badge-rejected[b-jtfp68ikev] { background: #fbeaea; color: #a3262b; }
.badge-default[b-jtfp68ikev] { background: #eef1f3; color: var(--ink-soft); }

/* Table */

.table-card[b-jtfp68ikev] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	max-width: 100%;
	flex: 1;
	min-height: 0;
	overflow: auto;
	margin-bottom: 4px;
}

.bad-addresses-table[b-jtfp68ikev] {
	width: 100%;
	border-collapse: collapse;
}

.bad-addresses-table thead th[b-jtfp68ikev] {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: #fafbfc;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

.bad-addresses-table thead tr:first-child th:first-child[b-jtfp68ikev] { border-top-left-radius: 12px; }
.bad-addresses-table thead tr:first-child th:last-child[b-jtfp68ikev] { border-top-right-radius: 12px; }
.bad-addresses-table tbody tr:last-child td:first-child[b-jtfp68ikev] { border-bottom-left-radius: 12px; }
.bad-addresses-table tbody tr:last-child td:last-child[b-jtfp68ikev] { border-bottom-right-radius: 12px; }

.bad-addresses-table tbody td[b-jtfp68ikev] {
	padding: 14px 18px;
	font-size: 14px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}

.bad-addresses-table tbody tr:last-child td[b-jtfp68ikev] { border-bottom: none; }
.bad-addresses-table tbody tr:hover[b-jtfp68ikev] { background: #f8fafc; }
.bad-addresses-table tbody tr.row-updating[b-jtfp68ikev] { background: var(--accent-soft); }

.cell-address[b-jtfp68ikev] {
	font-weight: 500;
	max-width: 320px;
}

.cell-attempts[b-jtfp68ikev] { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-lastattempt[b-jtfp68ikev] { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

.address-text[b-jtfp68ikev] {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.status-updating[b-jtfp68ikev] {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ink-soft);
	font-size: 12.5px;
	white-space: nowrap;
}

/* Suggestion chips: design-system chip look, double-click to apply */

.suggestions-wrap[b-jtfp68ikev] {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-width: 320px;
}

.suggestion-chip[b-jtfp68ikev] {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 11px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	font-size: 12px;
	font-weight: 500;
	color: var(--ink-soft);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

.suggestion-chip:hover[b-jtfp68ikev] {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-soft);
}

.no-suggestions[b-jtfp68ikev] {
	color: var(--ink-faint);
	font-size: 12.5px;
}

/* Row actions */

.btn-icon-label[b-jtfp68ikev] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border-radius: 7px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-soft);
	cursor: pointer;
	white-space: nowrap;
}

.btn-icon-label:hover:not(:disabled)[b-jtfp68ikev] {
	border-color: var(--accent);
	color: var(--accent);
}

.btn-icon-label:disabled[b-jtfp68ikev] {
	opacity: 0.5;
	cursor: not-allowed;
}

[b-jtfp68ikev] .icon-pencil {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

/* Edit modal: keep the Bootstrap modal wrapper (same convention as
   RalCodeDetail's RAL picker / BusinessTrips' trip modal), restyle the
   field grid inside modal-body. */

.field-row[b-jtfp68ikev] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}

.field-row.cols-1[b-jtfp68ikev] {
	grid-template-columns: minmax(0, 1fr);
}

.field[b-jtfp68ikev] {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Mobile card list: hidden on desktop, shown instead of the table on mobile */

.mobile-list[b-jtfp68ikev] {
	display: none;
}

.m-card[b-jtfp68ikev] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
}

.m-card.row-updating[b-jtfp68ikev] {
	background: var(--accent-soft);
}

.m-card-top[b-jtfp68ikev] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.m-card-address[b-jtfp68ikev] {
	flex: 1;
	min-width: 0;
	font-weight: 600;
	color: var(--ink);
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-meta[b-jtfp68ikev] {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.m-card-sub[b-jtfp68ikev] {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	color: var(--ink-soft);
	font-size: 12px;
	margin-top: 6px;
}

.m-card-suggestions[b-jtfp68ikev] {
	margin-top: 8px;
}

.m-card-actions[b-jtfp68ikev] {
	margin-top: 10px;
}

.m-card-actions .btn-icon-label[b-jtfp68ikev] {
	width: 100%;
	justify-content: center;
}

/* Mobile layout - breakpoint 1400px, same rationale as every other list page
   in this design system (also covers a resized desktop window). */

@media (max-width: 1400px) {
	.topbar[b-jtfp68ikev] {
		align-items: flex-start;
	}

	.table-card[b-jtfp68ikev] {
		display: none;
	}

	.mobile-list[b-jtfp68ikev] {
		display: block;
	}

	.field-row[b-jtfp68ikev] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Extra-narrow tier: foldable cover screens down to ~280px. */

@media (max-width: 349px) {
	.m-card[b-jtfp68ikev] {
		padding: 10px 12px;
	}

	.m-card-address[b-jtfp68ikev] {
		font-size: 13.5px;
	}
}
/* /Components/Pages/CallIssues/CallIssueDetail.razor.rz.scp.css */
.call-issue-detail-page[b-n4zy9rqoqw] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
}

.eyebrow[b-n4zy9rqoqw] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 4px;
}

.back-link[b-n4zy9rqoqw] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	margin-bottom: 8px;
}

.back-link:hover[b-n4zy9rqoqw] {
	color: var(--accent);
}

/* Sticky header, same "frozen pane" pattern as ComplaintDetail */

.topbar[b-n4zy9rqoqw] {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 22px;
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--canvas);
	margin-left: -24px;
	margin-right: -24px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--line);
	box-shadow: 0 4px 14px rgba(15, 23, 32, 0.04);
}

.title-row[b-n4zy9rqoqw] {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.title-row h1[b-n4zy9rqoqw] {
	font-size: 22px;
	margin: 0;
	letter-spacing: -0.01em;
	min-width: 0;
	overflow-wrap: anywhere;
}

.actions[b-n4zy9rqoqw] {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.actions .btn[b-n4zy9rqoqw] {
	white-space: nowrap;
}

.btn-outline[b-n4zy9rqoqw] {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink-soft);
}

.btn-outline:hover[b-n4zy9rqoqw] {
	border-color: var(--accent);
	color: var(--accent);
}

.btn-danger-ghost[b-n4zy9rqoqw] {
	background: var(--surface);
	border: 1px solid #f3c9cb;
	color: #a3262b;
}

.btn-danger-ghost:hover[b-n4zy9rqoqw] {
	background: #fbeaea;
}

/* Badges - same palette as ComplaintList/ComplaintDetail, reused for CallIssueState
   (New/InProgress/Done/Confirm/Rejected shares the exact same value set). */

.badge[b-n4zy9rqoqw] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.badge .dot[b-n4zy9rqoqw] {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	flex-shrink: 0;
}

.badge-new[b-n4zy9rqoqw] { background: #eaf2fb; color: #14548f; }
.badge-progress[b-n4zy9rqoqw] { background: #fef3e6; color: #93590c; }
.badge-done[b-n4zy9rqoqw] { background: #e8f6ee; color: #1c7a45; }
.badge-confirm[b-n4zy9rqoqw] { background: #e9f6fa; color: #196c85; }
.badge-rejected[b-n4zy9rqoqw] { background: #fbeaea; color: #a3262b; }
.badge-default[b-n4zy9rqoqw] { background: #eef1f3; color: var(--ink-soft); }

/* Layout */

.card[b-n4zy9rqoqw] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 16px;
}

.card h2[b-n4zy9rqoqw] {
	font-size: 14px;
	margin: 0 0 16px;
	font-weight: 700;
}

.card h2 small[b-n4zy9rqoqw] {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 2px;
}

.field-row[b-n4zy9rqoqw] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}

.field-row.cols-1[b-n4zy9rqoqw] {
	grid-template-columns: minmax(0, 1fr);
}

.field[b-n4zy9rqoqw] {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.field select[b-n4zy9rqoqw],
.field textarea[b-n4zy9rqoqw],
.field input[b-n4zy9rqoqw] {
	box-sizing: border-box;
	width: 100%;
}

/* Photos */

.photo-grid[b-n4zy9rqoqw] {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-top: 12px;
}

.photo-thumb[b-n4zy9rqoqw] {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--line);
	aspect-ratio: 1;
	background: #eef1f3;
}

.photo-thumb-btn[b-n4zy9rqoqw] {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.photo-thumb-btn img[b-n4zy9rqoqw] {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photo-thumb .del[b-n4zy9rqoqw] {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #a3262b;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.photo-hint[b-n4zy9rqoqw] {
	font-size: 12.5px;
	color: var(--ink-faint);
	margin: -6px 0 10px;
}

/* Breakpoints match the rest of the design system: 1400px main compact
   switch, 640px/349px MainLayout content-padding tiers. */

@media (max-width: 1400px) {
	.field-row[b-n4zy9rqoqw] {
		grid-template-columns: minmax(0, 1fr);
	}

	.topbar[b-n4zy9rqoqw] {
		flex-direction: column;
	}

	.actions[b-n4zy9rqoqw] {
		width: 100%;
	}

	.actions .btn[b-n4zy9rqoqw] {
		flex: 1;
		justify-content: center;
	}

	.photo-grid[b-n4zy9rqoqw] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.topbar[b-n4zy9rqoqw] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 16px;
	}
}

@media (max-width: 349px) {
	.topbar[b-n4zy9rqoqw] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 12px 16px;
	}

	.title-row h1[b-n4zy9rqoqw] {
		font-size: 18px;
	}

	.actions .btn[b-n4zy9rqoqw] {
		font-size: 12px;
		padding: 0 10px;
		height: 32px;
	}

	.photo-grid[b-n4zy9rqoqw] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
	}
}
/* /Components/Pages/Complaints/ComplaintDetail.razor.rz.scp.css */
.complaint-detail-page[b-3xzks1noe9] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
}

.eyebrow[b-3xzks1noe9] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 4px;
}

.back-link[b-3xzks1noe9] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	margin-bottom: 8px;
}

.back-link:hover[b-3xzks1noe9] {
	color: var(--accent);
}

/* Sticky header, similar to a spreadsheet's frozen panes */

.topbar[b-3xzks1noe9] {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 22px;
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--canvas);
	/* Bleed to the edge of MainLayout's content padding (24px at desktop,
	   article's px-4 / MainLayout.razor.css's 1.5rem override). This must be
	   kept in sync with that padding at each breakpoint - see the 640px and
	   349px overrides below, which match MainLayout's own tiers where
	   .content padding drops to 16px. */
	margin-left: -24px;
	margin-right: -24px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--line);
	box-shadow: 0 4px 14px rgba(15, 23, 32, 0.04);
}

.title-row[b-3xzks1noe9] {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.title-row h1[b-3xzks1noe9] {
	font-size: 22px;
	margin: 0;
	letter-spacing: -0.01em;
	min-width: 0;
	overflow-wrap: anywhere;
}

.actions[b-3xzks1noe9] {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.actions .btn[b-3xzks1noe9] {
	white-space: nowrap;
}

.btn-outline-success[b-3xzks1noe9] {
	background: var(--surface);
	border-color: #bfe6cd;
	color: #1c7a45;
}

.btn-outline-success:hover[b-3xzks1noe9] {
	background: #e8f6ee;
}

.btn-danger-ghost[b-3xzks1noe9] {
	background: var(--surface);
	border-color: #f3c9cb;
	color: #a3262b;
}

.btn-danger-ghost:hover[b-3xzks1noe9] {
	background: #fbeaea;
}

.btn-outline[b-3xzks1noe9] {
	background: var(--surface);
	border-color: var(--line);
	color: var(--ink-soft);
}

.btn-outline:hover[b-3xzks1noe9] {
	border-color: var(--accent);
	color: var(--accent);
}

.btn-sm[b-3xzks1noe9] {
	height: 30px;
	padding: 0 11px;
	font-size: 12.5px;
}

/* Badges (state + priority), shared palette with the Complaints list */

.badge[b-3xzks1noe9] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.badge .dot[b-3xzks1noe9] {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	flex-shrink: 0;
}

.badge-new[b-3xzks1noe9] { background: #eaf2fb; color: #14548f; }
.badge-progress[b-3xzks1noe9] { background: #fef3e6; color: #93590c; }
.badge-done[b-3xzks1noe9] { background: #e8f6ee; color: #1c7a45; }
.badge-confirm[b-3xzks1noe9] { background: #e9f6fa; color: #196c85; }
.badge-rejected[b-3xzks1noe9] { background: #fbeaea; color: #a3262b; }
.badge-default[b-3xzks1noe9] { background: #eef1f3; color: var(--ink-soft); }

.priority-low[b-3xzks1noe9] { background: #e8f6ee; color: #1c7a45; }
.priority-medium[b-3xzks1noe9] { background: #eaf2fb; color: #14548f; }
.priority-high[b-3xzks1noe9] { background: #fef3e6; color: #93590c; }
.priority-critical[b-3xzks1noe9] { background: #fbeaea; color: #a3262b; }
.priority-none[b-3xzks1noe9] { background: #eef1f3; color: var(--ink-soft); }

/* Layout */

.grid[b-3xzks1noe9] {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.card[b-3xzks1noe9] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 16px;
}

.card h2[b-3xzks1noe9] {
	font-size: 14px;
	margin: 0 0 16px;
	font-weight: 700;
}

.card h2 small[b-3xzks1noe9] {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 2px;
}

.field-row[b-3xzks1noe9] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}

.field-row.cols-1[b-3xzks1noe9] {
	grid-template-columns: minmax(0, 1fr);
}

.field-row.cols-4[b-3xzks1noe9] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field[b-3xzks1noe9] {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.field .value-box[b-3xzks1noe9] {
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 14px;
	background: #fafbfc;
	color: var(--ink-soft);
	box-sizing: border-box;
	width: 100%;
	min-height: 38px;
	display: flex;
	align-items: center;
}

/* Machine address box (opens AddressPickerModal) */

.address-box[b-3xzks1noe9] {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	min-height: 44px;
}

.address-box .address-text[b-3xzks1noe9] {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ink);
	font-weight: 600;
}

.address-box:hover[b-3xzks1noe9] {
	border-color: var(--accent);
}

/* Date fields: overlay a calendar icon on the browser date/time picker input.
   The icon lives in its own row (sibling of the label, not stacked under it),
   so it centers on the input itself regardless of label height/wrapping. */

.date-field[b-3xzks1noe9] {
	position: relative;
	display: flex;
	align-items: center;
}

.date-field .cal-icon[b-3xzks1noe9] {
	position: absolute;
	left: 11px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	pointer-events: none;
	z-index: 1;
}

.date-field[b-3xzks1noe9]  input {
	padding-left: 32px !important;
	width: 100%;
}

/* The browser's own datetime-local input already renders a built-in
   calendar icon at the right edge, which duplicated our custom calendar
   icon on the left. Hide the native one (Chromium/Edge/Safari) so there's
   only a single calendar icon per field. */
.date-field[b-3xzks1noe9]  input::-webkit-calendar-picker-indicator {
	display: none;
	-webkit-appearance: none;
}

/* Call issues badge (title row) + count pill in the sticky header */

.badge-callissues[b-3xzks1noe9] {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--accent);
	text-decoration: none;
	cursor: pointer;
}

.badge-callissues:hover[b-3xzks1noe9] {
	border-color: var(--accent);
}

/* Email source info icon (title row) - issue #52 */

.icon-btn-info[b-3xzks1noe9] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-soft);
	cursor: pointer;
	flex-shrink: 0;
}

.icon-btn-info:hover[b-3xzks1noe9] {
	border-color: var(--accent);
	color: var(--accent);
}

.count-pill[b-3xzks1noe9] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 11px;
	font-weight: 700;
}

/* Offset the Call Issues anchor so the sticky header doesn't cover its heading
   when jumped to from the header's "Call Issues" link. */
#call-issues-card[b-3xzks1noe9] {
	scroll-margin-top: 96px;
}

/* Breakpoint is 600px, not a device-specific width: every current single-screen
   phone (iPhone 14-16, all Galaxy S/A/Note models, all Pixel phones, and the
   cover screens of the Z Fold/Z Flip/Pixel Fold) tops out around 430px CSS
   width, while every foldable's UNFOLDED screen starts around 670px - so 600px
   cleanly separates "phone" from "opened foldable / tablet" with margin on both
   sides, without needing per-device rules. */

/* Same rationale as ComplaintList.razor.css: 1400px is wide enough that
   resizing an ordinary desktop browser window down (not just real phones/
   foldables) switches this page to its compact single-column layout too. */

@media (max-width: 1400px) {
	.grid[b-3xzks1noe9] {
		grid-template-columns: minmax(0, 1fr);
	}

	.field-row[b-3xzks1noe9] {
		grid-template-columns: minmax(0, 1fr);
	}

	.field-row.cols-4[b-3xzks1noe9] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.topbar[b-3xzks1noe9] {
		flex-direction: column;
	}

	.actions[b-3xzks1noe9] {
		width: 100%;
	}

	.actions .btn[b-3xzks1noe9] {
		flex: 1;
		justify-content: center;
	}

	.photo-grid[b-3xzks1noe9] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Extra-narrow tier: foldable cover screens (Galaxy Z Fold/Flip closed, Pixel
   Fold closed) run as narrow as ~280px. Tighten further so the header's badges
   and action buttons wrap cleanly instead of overflowing. */

/* MainLayout.razor.css drops .content padding to 16px at this same
   breakpoint (max-width: 640.98px) - keep the topbar bleed in sync so it
   doesn't overflow the content box and cause a page-level horizontal
   scrollbar on normal phones. */
@media (max-width: 640px) {
	.topbar[b-3xzks1noe9] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 16px;
	}
}

@media (max-width: 349px) {
	.topbar[b-3xzks1noe9] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 12px 16px;
	}

	.title-row h1[b-3xzks1noe9] {
		font-size: 18px;
	}

	.actions .btn[b-3xzks1noe9] {
		font-size: 12px;
		padding: 0 10px;
		height: 32px;
	}

	.field-row.cols-4[b-3xzks1noe9] {
		grid-template-columns: minmax(0, 1fr);
	}

	.photo-grid[b-3xzks1noe9] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
	}
}

/* Call issues table */

.table-card-head[b-3xzks1noe9] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.ci-table-wrap[b-3xzks1noe9] {
	overflow-x: auto;
	max-width: 100%;
}

.ci-table[b-3xzks1noe9] {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
}

.ci-table thead th[b-3xzks1noe9] {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: #fafbfc;
	padding: 11px 14px;
	border-bottom: 1px solid var(--line);
	border-top: 1px solid var(--line);
}

.ci-table tbody td[b-3xzks1noe9] {
	padding: 12px 14px;
	font-size: 13.5px;
	border-bottom: 1px solid var(--line-soft);
}

.ci-table tbody tr:last-child td[b-3xzks1noe9] {
	border-bottom: none;
}

.ci-table tbody tr:hover[b-3xzks1noe9] {
	background: #f8fafc;
}

.empty-ci[b-3xzks1noe9] {
	padding: 20px 4px;
	color: var(--ink-faint);
	font-size: 13px;
}

/* Sidebar cards */

.side-card .kv[b-3xzks1noe9] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 13px;
}

.side-card .kv:last-child[b-3xzks1noe9] {
	border-bottom: none;
}

.side-card .kv .k[b-3xzks1noe9] {
	color: var(--ink-faint);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.side-card .kv .v[b-3xzks1noe9] {
	font-weight: 600;
	text-align: right;
}

/* Photos */

.photo-grid[b-3xzks1noe9] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 12px;
}

.photo-thumb[b-3xzks1noe9] {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--line);
	aspect-ratio: 1;
	background: #eef1f3;
}

.photo-thumb-btn[b-3xzks1noe9] {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.photo-thumb-btn img[b-3xzks1noe9] {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photo-thumb .del[b-3xzks1noe9] {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #a3262b;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}
/* /Components/Pages/Complaints/ComplaintList.razor.rz.scp.css */
.complaints-page[b-yxzjglustz] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
	/* Fill the remaining viewport height (MainLayout's .content is now a flex
	   column, see MainLayout.razor.css) so the table below can grow all the
	   way to the bottom of the screen and scroll internally instead of the
	   whole page scrolling. */
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.eyebrow[b-yxzjglustz] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.btn-new[b-yxzjglustz] {
	white-space: nowrap;
}

/* Stat cards */

.stats-row[b-yxzjglustz] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 8px;
}

.stat-card[b-yxzjglustz] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 9px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.stat-card:hover[b-yxzjglustz] {
	border-color: #c7d2da;
}

.stat-card-active[b-yxzjglustz] {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-ring);
}

.stat-num[b-yxzjglustz] {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.stat-label[b-yxzjglustz] {
	font-size: 11px;
	color: var(--ink-soft);
	font-weight: 500;
	line-height: 1.1;
}

.stat-hint[b-yxzjglustz] {
	font-size: 10px;
	color: var(--ink-faint);
	line-height: 1.1;
}

.text-state-new[b-yxzjglustz] { color: #14548f; }
.text-state-progress[b-yxzjglustz] { color: #93590c; }
.text-state-done[b-yxzjglustz] { color: #1c7a45; }
.text-state-rejected[b-yxzjglustz] { color: #a3262b; }

/* Toolbar */

.toolbar[b-yxzjglustz] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 18px 20px;
}

/* Single-line filter bar: search, State and Priority sit side by side on one
   row. As the row runs out of room, Priority (the last block) wraps to its
   own line first; if it's still too tight, State wraps down too, leaving
   Search / State / Priority stacked on three lines. See the tiered
   flex-basis rules below .filter-row-priority / .filter-row-state. */
.toolbar-row[b-yxzjglustz] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

.toolbar-row .search-wrap[b-yxzjglustz] {
	flex: 1 1 260px;
	max-width: 420px;
}

.toolbar-row .filter-row[b-yxzjglustz] {
	flex: 2 1 auto;
	flex-wrap: nowrap;
}

.search-wrap[b-yxzjglustz] {
	position: relative;
}

/* IconSearch is a separate child component, so its rendered <svg> does not
   carry this file's CSS-isolation scope attribute - crossing that component
   boundary requires ::deep, otherwise this rule silently never matches and
   the icon falls back to normal static-flow positioning (appearing above
   the input instead of inside it). */
.search-wrap[b-yxzjglustz]  .icon-search {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-faint);
	pointer-events: none;
}

/* Small functional icons (plus, chevron, sort direction, pencil) rendered as
   inline SVG instead of an icon font - see razor-page-design-system's Icons
   section for why. currentColor lets each pick up its surrounding text/link
   color (and hover state) automatically. */
/* icon-plus, icon-pencil, and sort-icon are CssClass values handed to the
   IconPlus/IconPencil/SortIndicator child components, so (like icon-search
   above) reaching their rendered <svg> requires ::deep; icon-chevron is a
   plain <span> written directly in this file and matches either way. */
.icon-chevron[b-yxzjglustz] {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

[b-yxzjglustz] .icon-plus,
[b-yxzjglustz] .icon-pencil,
[b-yxzjglustz] .sort-icon {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

.search-input[b-yxzjglustz] {
	padding-left: 36px;
}

.filter-row[b-yxzjglustz] {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.filter-label[b-yxzjglustz] {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-right: 4px;
}

/* Tier 1: not enough room for Search + State + Priority side by side ->
   Priority (last block) drops to its own second line. */
@media (max-width: 1150px) {
	.toolbar-row .filter-row-priority[b-yxzjglustz] {
		flex-basis: 100%;
	}
}

/* Tier 2: still not enough room for Search + State together -> State drops
   to its own line too, leaving Search / State / Priority stacked. */
@media (max-width: 780px) {
	.toolbar-row .filter-row-state[b-yxzjglustz],
	.toolbar-row .filter-row-priority[b-yxzjglustz] {
		flex-basis: 100%;
	}
}

/* Tier 3: very narrow (e.g. the filter panel opened on a phone) - let a
   row's own chips wrap onto extra lines rather than overflow horizontally. */
@media (max-width: 480px) {
	.toolbar-row .filter-row-state[b-yxzjglustz],
	.toolbar-row .filter-row-priority[b-yxzjglustz] {
		flex-wrap: wrap;
	}
}

.chip[b-yxzjglustz] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-soft);
	cursor: pointer;
	user-select: none;
	transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

.chip .dot[b-yxzjglustz] {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.55;
	flex-shrink: 0;
}

.clear-link[b-yxzjglustz] {
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
	cursor: pointer;
	margin-left: 4px;
}

.clear-link:hover[b-yxzjglustz] {
	color: #14548f;
}

/* Badge / chip color variants (state + priority) */

.badge-new[b-yxzjglustz], .chip-badge-new.chip-active[b-yxzjglustz] { background: #eaf2fb; color: #14548f; }
.badge-progress[b-yxzjglustz], .chip-badge-progress.chip-active[b-yxzjglustz] { background: #fef3e6; color: #93590c; }
.badge-done[b-yxzjglustz], .chip-badge-done.chip-active[b-yxzjglustz] { background: #e8f6ee; color: #1c7a45; }
.badge-confirm[b-yxzjglustz], .chip-badge-confirm.chip-active[b-yxzjglustz] { background: #e9f6fa; color: #196c85; }
.badge-rejected[b-yxzjglustz], .chip-badge-rejected.chip-active[b-yxzjglustz] { background: #fbeaea; color: #a3262b; }
.badge-default[b-yxzjglustz] { background: #eef1f3; color: var(--ink-soft); }

.priority-low[b-yxzjglustz], .chip-priority-low.chip-active[b-yxzjglustz] { background: #e8f6ee; color: #1c7a45; }
.priority-medium[b-yxzjglustz], .chip-priority-medium.chip-active[b-yxzjglustz] { background: #eaf2fb; color: #14548f; }
.priority-high[b-yxzjglustz], .chip-priority-high.chip-active[b-yxzjglustz] { background: #fef3e6; color: #93590c; }
.priority-critical[b-yxzjglustz], .chip-priority-critical.chip-active[b-yxzjglustz] { background: #fbeaea; color: #a3262b; }
.priority-none[b-yxzjglustz] { background: #eef1f3; color: var(--ink-soft); }

.chip-active[b-yxzjglustz] {
	border-color: currentColor;
}

.badge[b-yxzjglustz] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.badge .dot[b-yxzjglustz] {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	flex-shrink: 0;
}

/* Table */

.table-card[b-yxzjglustz] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	max-width: 100%;
	/* Grow to fill the rest of the page (complaints-page is now a flex
	   column that fills the viewport) instead of only being as tall as its
	   rows, then scroll its own content - both horizontally (wide table)
	   and vertically (many rows) - only when it doesn't fit, rather than
	   the whole page scrolling and leaving dead space below a short table. */
	flex: 1;
	min-height: 0;
	overflow: auto;
	margin-bottom: 4px;
}

.complaints-table[b-yxzjglustz] {
	width: 100%;
	border-collapse: collapse;
}

.complaints-table thead th[b-yxzjglustz] {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: #fafbfc;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.complaints-table thead th i[b-yxzjglustz] {
	font-size: 11px;
	margin-left: 2px;
	opacity: 0.6;
}

.complaints-table thead tr:first-child th:first-child[b-yxzjglustz] { border-top-left-radius: 12px; }
.complaints-table thead tr:first-child th:last-child[b-yxzjglustz] { border-top-right-radius: 12px; }
.complaints-table tbody tr:last-child td:first-child[b-yxzjglustz] { border-bottom-left-radius: 12px; }
.complaints-table tbody tr:last-child td:last-child[b-yxzjglustz] { border-bottom-right-radius: 12px; }

/* Keep the Actions column (row-actions has 2 buttons here - Duplicate +
   Open - wider than a single-button row) always on screen instead of
   requiring a horizontal scroll to reach it once the window narrows a
   little. Sticky to the table's own right edge, inside .table-card's
   horizontal scroll area. */
.complaints-table th:last-child[b-yxzjglustz],
.complaints-table td:last-child[b-yxzjglustz] {
	position: sticky;
	right: 0;
	z-index: 2;
	box-shadow: -6px 0 6px -6px rgba(15, 23, 32, 0.1);
}

.complaints-table thead th:last-child[b-yxzjglustz] {
	background: #fafbfc;
}

.complaints-table tbody td:last-child[b-yxzjglustz] {
	background: var(--surface);
}

.complaints-table tbody tr:hover td:last-child[b-yxzjglustz] {
	background: #f8fafc;
}

.complaints-table tbody td[b-yxzjglustz] {
	padding: 14px 18px;
	font-size: 14px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}

.complaints-table tbody tr:last-child td[b-yxzjglustz] { border-bottom: none; }
.complaints-table tbody tr:hover[b-yxzjglustz] { background: #f8fafc; }

.cell-id[b-yxzjglustz] { font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cell-machine[b-yxzjglustz] { font-weight: 600; }
.cell-serial[b-yxzjglustz] { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cell-date[b-yxzjglustz] { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Notes hover tooltip */

.notes-wrap[b-yxzjglustz] {
	position: relative;
	display: inline-block;
	max-width: 260px;
	vertical-align: middle;
}

.cell-notes-text[b-yxzjglustz] {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ink-soft);
}

.notes-tooltip[b-yxzjglustz] {
	position: absolute;
	top: calc(100% + 9px);
	left: 0;
	min-width: 220px;
	max-width: 320px;
	background: #1f2933;
	color: #fff;
	font-size: 12.5px;
	line-height: 1.5;
	padding: 10px 13px;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(15, 23, 32, 0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.12s ease, transform 0.12s ease;
	z-index: 40;
	white-space: normal;
	pointer-events: none;
}

.notes-tooltip[b-yxzjglustz]::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 16px;
	border: 6px solid transparent;
	border-bottom-color: #1f2933;
}

.notes-wrap:hover .notes-tooltip[b-yxzjglustz] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Row actions */

.row-actions[b-yxzjglustz] {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}

.btn-icon[b-yxzjglustz] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 7px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-soft);
	cursor: pointer;
	flex-shrink: 0;
}

.btn-icon:hover[b-yxzjglustz] {
	border-color: var(--accent);
	color: var(--accent);
}

.btn-load-more[b-yxzjglustz] {
	min-width: 160px;
}

/* Mobile filter toggle button: hidden on desktop, where filters are always visible */

.btn-mobile-filters-toggle[b-yxzjglustz] {
	display: none;
}

.count-pill[b-yxzjglustz] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 11px;
	font-weight: 700;
}

/* Mobile card list: hidden on desktop, shown instead of the table on mobile */

.mobile-list[b-yxzjglustz] {
	display: none;
}

.m-card[b-yxzjglustz] {
	display: block;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
	text-decoration: none;
	color: inherit;
}

.m-card:hover[b-yxzjglustz] {
	border-color: var(--accent);
}

.m-card-top[b-yxzjglustz] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.m-card-title[b-yxzjglustz] {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	color: var(--accent);
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-sub[b-yxzjglustz] {
	display: flex;
	justify-content: space-between;
	color: var(--ink-soft);
	font-size: 12.5px;
	margin-top: 4px;
}

.m-card-meta[b-yxzjglustz] {
	margin-top: 6px;
}

.m-card-notes[b-yxzjglustz] {
	margin-top: 6px;
	color: var(--ink-soft);
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Mobile layout: compact single-column view, closer to the original simple list.
   Breakpoint is 1400px. This is intentionally much wider than any phone or
   opened foldable (which top out around 430px / 900px respectively) - it also
   covers an ordinary desktop browser window that's simply been resized down
   (e.g. to a half-screen/laptop-ish width), so shrinking the window itself
   switches to the compact card view instead of squeezing the desktop table
   layout. */

@media (max-width: 1400px) {
	.btn-mobile-filters-toggle[b-yxzjglustz] {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		margin-bottom: 12px;
		justify-content: center;
	}

	/* Collapsed by default on mobile - only expanded when the Filters toggle is open */
	.stats-row.mobile-collapsed[b-yxzjglustz],
	.toolbar.mobile-collapsed[b-yxzjglustz] {
		display: none;
	}

	/* On mobile the KPI cards live inside the same collapsible "Filters" panel
	   as the State/Priority chips, so give them the same compact chip
	   footprint instead of the desktop's tall stacked-card layout. */
	.stats-row[b-yxzjglustz] {
		display: flex;
		flex-wrap: wrap;
		grid-template-columns: none;
		gap: 8px;
	}

	.stat-card[b-yxzjglustz] {
		flex-direction: row;
		align-items: center;
		gap: 6px;
		width: auto;
		height: 32px;
		padding: 0 12px;
		border-radius: 999px;
	}

	.stat-num[b-yxzjglustz] {
		font-size: 13px;
	}

	.stat-label[b-yxzjglustz] {
		font-size: 13px;
		font-weight: 500;
		color: var(--ink-soft);
	}

	.stat-hint[b-yxzjglustz] {
		display: none;
	}

	.topbar[b-yxzjglustz] {
		align-items: flex-start;
	}

	.btn-new[b-yxzjglustz] {
		width: 100%;
		justify-content: center;
	}

	.table-card[b-yxzjglustz] {
		display: none;
	}

	.mobile-list[b-yxzjglustz] {
		display: block;
	}

	.filter-row[b-yxzjglustz] {
		gap: 8px;
	}

	.chip[b-yxzjglustz] {
		height: 32px;
	}
}

/* Extra-narrow tier: foldable cover screens (Galaxy Z Fold/Flip closed, Pixel
   Fold closed) run as narrow as ~280px, well below any normal phone. Tighten
   spacing further so nothing wraps awkwardly or overflows. */

@media (max-width: 349px) {
	.stats-row[b-yxzjglustz] {
		gap: 6px;
	}

	.stat-card[b-yxzjglustz] {
		padding: 0 10px;
	}

	.toolbar[b-yxzjglustz] {
		padding: 14px 14px;
	}

	.m-card[b-yxzjglustz] {
		padding: 10px 12px;
	}

	.m-card-title[b-yxzjglustz] {
		font-size: 13.5px;
	}

	.btn-new[b-yxzjglustz],
	.btn-mobile-filters-toggle[b-yxzjglustz] {
		font-size: 12.5px;
	}
}
/* /Components/Pages/Customers/CustomerDetail.razor.rz.scp.css */
.customer-detail-page[b-wy2h4i721n] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
}

.eyebrow[b-wy2h4i721n] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 4px;
}

.back-link[b-wy2h4i721n] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	margin-bottom: 8px;
}

.back-link:hover[b-wy2h4i721n] {
	color: var(--accent);
}

/* Sticky header, similar to a spreadsheet's frozen panes */

.topbar[b-wy2h4i721n] {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 22px;
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--canvas);
	/* Bleed to the edge of MainLayout's content padding - kept in sync with that
	   padding at each breakpoint, see the 640px and 349px overrides below. */
	margin-left: -24px;
	margin-right: -24px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--line);
	box-shadow: 0 4px 14px rgba(15, 23, 32, 0.04);
}

.title-row[b-wy2h4i721n] {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.title-row h1[b-wy2h4i721n] {
	font-size: 22px;
	margin: 0;
	letter-spacing: -0.01em;
	min-width: 0;
	overflow-wrap: anywhere;
}

.actions[b-wy2h4i721n] {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.actions .btn[b-wy2h4i721n] {
	white-space: nowrap;
}

.btn-danger-ghost[b-wy2h4i721n] {
	background: var(--surface);
	border-color: #f3c9cb;
	color: #a3262b;
}

.btn-danger-ghost:hover[b-wy2h4i721n] {
	background: #fbeaea;
}

.btn-outline[b-wy2h4i721n] {
	background: var(--surface);
	border-color: var(--line);
	color: var(--ink-soft);
}

.btn-outline:hover[b-wy2h4i721n] {
	border-color: var(--accent);
	color: var(--accent);
}

.btn-sm[b-wy2h4i721n] {
	height: 30px;
	padding: 0 11px;
	font-size: 12.5px;
}

/* Small functional icons (pencil, plus) rendered as inline SVG atoms instead of
   an icon font - see razor-page-design-system's Icons section. Reaching a child
   icon component's rendered <svg> from this page's scoped CSS requires ::deep. */
[b-wy2h4i721n] .icon-pencil,
[b-wy2h4i721n] .icon-plus {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

/* Badges (address status), shared palette with the Customers list */

.badge[b-wy2h4i721n] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.badge .dot[b-wy2h4i721n] {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	flex-shrink: 0;
}

.badge-done[b-wy2h4i721n] { background: #e8f6ee; color: #1c7a45; }
.priority-medium[b-wy2h4i721n] { background: #eaf2fb; color: #14548f; }
.badge-default[b-wy2h4i721n] { background: #eef1f3; color: var(--ink-soft); }

/* Layout */

.grid[b-wy2h4i721n] {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.card[b-wy2h4i721n] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 16px;
}

.card h2[b-wy2h4i721n] {
	font-size: 14px;
	margin: 0 0 16px;
	font-weight: 700;
}

.card h2 small[b-wy2h4i721n] {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 2px;
}

.field-row[b-wy2h4i721n] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}

.field-row.cols-1[b-wy2h4i721n] {
	grid-template-columns: minmax(0, 1fr);
}

.field[b-wy2h4i721n] {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.field .value-box[b-wy2h4i721n] {
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 14px;
	background: #fafbfc;
	color: var(--ink-soft);
	box-sizing: border-box;
	width: 100%;
	min-height: 38px;
	display: flex;
	align-items: center;
}

/* Customer address box (opens AddressPickerModal) */

.address-box[b-wy2h4i721n] {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	min-height: 44px;
}

.address-box .address-text[b-wy2h4i721n] {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ink);
	font-weight: 600;
}

.address-box:hover[b-wy2h4i721n] {
	border-color: var(--accent);
}

/* Machines badge (title row) + count pill in the sticky header */

.badge-callissues[b-wy2h4i721n] {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--accent);
	text-decoration: none;
	cursor: pointer;
}

.badge-callissues:hover[b-wy2h4i721n] {
	border-color: var(--accent);
}

.count-pill[b-wy2h4i721n] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 11px;
	font-weight: 700;
}

/* Offset the Machines anchor so the sticky header doesn't cover its heading
   when jumped to from the header's "Machines" badge link. */
#machines-card[b-wy2h4i721n] {
	scroll-margin-top: 96px;
}

/* Same rationale as ComplaintDetail.razor.css: 1400px is wide enough that
   resizing an ordinary desktop browser window down (not just real phones/
   foldables) switches this page to its compact single-column layout too. */

@media (max-width: 1400px) {
	.grid[b-wy2h4i721n] {
		grid-template-columns: minmax(0, 1fr);
	}

	.field-row[b-wy2h4i721n] {
		grid-template-columns: minmax(0, 1fr);
	}

	.topbar[b-wy2h4i721n] {
		flex-direction: column;
	}

	.actions[b-wy2h4i721n] {
		width: 100%;
	}

	.actions .btn[b-wy2h4i721n] {
		flex: 1;
		justify-content: center;
	}
}

/* MainLayout.razor.css drops .content padding to 16px at this same
   breakpoint (max-width: 640.98px) - keep the topbar bleed in sync so it
   doesn't overflow the content box and cause a page-level horizontal
   scrollbar on normal phones. */
@media (max-width: 640px) {
	.topbar[b-wy2h4i721n] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 16px;
	}
}

@media (max-width: 349px) {
	.topbar[b-wy2h4i721n] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 12px 16px;
	}

	.title-row h1[b-wy2h4i721n] {
		font-size: 18px;
	}

	.actions .btn[b-wy2h4i721n] {
		font-size: 12px;
		padding: 0 10px;
		height: 32px;
	}
}

/* Related-records table (Machines Sold) */

.table-card-head[b-wy2h4i721n] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.related-table-wrap[b-wy2h4i721n] {
	overflow-x: auto;
	max-width: 100%;
}

.related-table[b-wy2h4i721n] {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
}

.related-table thead th[b-wy2h4i721n] {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: #fafbfc;
	padding: 11px 14px;
	border-bottom: 1px solid var(--line);
	border-top: 1px solid var(--line);
	white-space: nowrap;
}

.related-table tbody td[b-wy2h4i721n] {
	padding: 12px 14px;
	font-size: 13.5px;
	border-bottom: 1px solid var(--line-soft);
}

.related-table tbody tr:last-child td[b-wy2h4i721n] {
	border-bottom: none;
}

.related-table tbody tr:hover[b-wy2h4i721n] {
	background: #f8fafc;
}

.empty-ci[b-wy2h4i721n] {
	padding: 20px 4px;
	color: var(--ink-faint);
	font-size: 13px;
}

/* Sidebar cards */

.side-card .kv[b-wy2h4i721n] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 13px;
}

.side-card .kv:last-child[b-wy2h4i721n] {
	border-bottom: none;
}

.side-card .kv .k[b-wy2h4i721n] {
	color: var(--ink-faint);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.side-card .kv .v[b-wy2h4i721n] {
	font-weight: 600;
	text-align: right;
}
/* /Components/Pages/Customers/CustomerList.razor.rz.scp.css */
.customers-page[b-of2cpdr9g6] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
	/* Fill the remaining viewport height (MainLayout's .content is a flex
	   column, see MainLayout.razor.css) so the table below can grow all the
	   way to the bottom of the screen and scroll internally instead of the
	   whole page scrolling. */
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.eyebrow[b-of2cpdr9g6] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.btn-new[b-of2cpdr9g6] {
	white-space: nowrap;
}

/* Stat cards */

.stats-row[b-of2cpdr9g6] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 8px;
}

.stat-card[b-of2cpdr9g6] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 9px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.stat-card:hover[b-of2cpdr9g6] {
	border-color: #c7d2da;
}

.stat-card-active[b-of2cpdr9g6] {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-ring);
}

.stat-num[b-of2cpdr9g6] {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.stat-label[b-of2cpdr9g6] {
	font-size: 11px;
	color: var(--ink-soft);
	font-weight: 500;
	line-height: 1.1;
}

.stat-hint[b-of2cpdr9g6] {
	font-size: 10px;
	color: var(--ink-faint);
	line-height: 1.1;
}

.text-state-done[b-of2cpdr9g6] { color: #1c7a45; }
.text-state-progress[b-of2cpdr9g6] { color: #93590c; }

/* Toolbar */

.toolbar[b-of2cpdr9g6] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 18px 20px;
}

.toolbar-row[b-of2cpdr9g6] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

.toolbar-row .search-wrap[b-of2cpdr9g6] {
	flex: 1 1 260px;
	max-width: 420px;
}

.search-wrap[b-of2cpdr9g6] {
	position: relative;
}

/* IconSearch is a separate child component, so its rendered <svg> does not
   carry this file's CSS-isolation scope attribute - crossing that component
   boundary requires ::deep, otherwise this rule silently never matches and
   the icon falls back to normal static-flow positioning. */
.search-wrap[b-of2cpdr9g6]  .icon-search {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-faint);
	pointer-events: none;
}

/* Small functional icons rendered as inline SVG instead of an icon font - see
   razor-page-design-system's Icons section. icon-plus/icon-pencil/sort-icon are
   CssClass values handed to child icon components, so (like icon-search above)
   reaching their rendered <svg> requires ::deep; icon-chevron is a plain <span>
   written directly in this file and matches either way. */
.icon-chevron[b-of2cpdr9g6] {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

[b-of2cpdr9g6] .icon-plus,
[b-of2cpdr9g6] .icon-pencil,
[b-of2cpdr9g6] .sort-icon {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

.search-input[b-of2cpdr9g6] {
	padding-left: 36px;
}

.clear-link[b-of2cpdr9g6] {
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
	cursor: pointer;
	margin-left: 4px;
}

.clear-link:hover[b-of2cpdr9g6] {
	color: #14548f;
}

/* Badge variants (address status), shared palette with the Complaints module */

.badge-done[b-of2cpdr9g6] { background: #e8f6ee; color: #1c7a45; }
.priority-medium[b-of2cpdr9g6] { background: #eaf2fb; color: #14548f; }
.badge-default[b-of2cpdr9g6] { background: #eef1f3; color: var(--ink-soft); }

.badge[b-of2cpdr9g6] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.badge .dot[b-of2cpdr9g6] {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	flex-shrink: 0;
}

/* Table */

.table-card[b-of2cpdr9g6] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	max-width: 100%;
	/* Grow to fill the rest of the page instead of only being as tall as its
	   rows, then scroll its own content - both horizontally (wide table) and
	   vertically (many rows) - only when it doesn't fit. */
	flex: 1;
	min-height: 0;
	overflow: auto;
	margin-bottom: 4px;
}

.customers-table[b-of2cpdr9g6] {
	width: 100%;
	border-collapse: collapse;
}

.customers-table thead th[b-of2cpdr9g6] {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: #fafbfc;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.customers-table thead tr:first-child th:first-child[b-of2cpdr9g6] { border-top-left-radius: 12px; }
.customers-table thead tr:first-child th:last-child[b-of2cpdr9g6] { border-top-right-radius: 12px; }
.customers-table tbody tr:last-child td:first-child[b-of2cpdr9g6] { border-bottom-left-radius: 12px; }
.customers-table tbody tr:last-child td:last-child[b-of2cpdr9g6] { border-bottom-right-radius: 12px; }

.customers-table tbody td[b-of2cpdr9g6] {
	padding: 14px 18px;
	font-size: 14px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}

.customers-table tbody tr:last-child td[b-of2cpdr9g6] { border-bottom: none; }
.customers-table tbody tr:hover[b-of2cpdr9g6] { background: #f8fafc; }

.cell-name[b-of2cpdr9g6] { font-weight: 600; }
.cell-phone[b-of2cpdr9g6] { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Row actions */

.row-actions[b-of2cpdr9g6] {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}

.btn-load-more[b-of2cpdr9g6] {
	min-width: 160px;
}

/* Mobile filter toggle button: hidden on desktop, where filters are always visible */

.btn-mobile-filters-toggle[b-of2cpdr9g6] {
	display: none;
}

.count-pill[b-of2cpdr9g6] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 11px;
	font-weight: 700;
}

/* Mobile card list: hidden on desktop, shown instead of the table on mobile */

.mobile-list[b-of2cpdr9g6] {
	display: none;
}

.m-card[b-of2cpdr9g6] {
	display: block;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
	text-decoration: none;
	color: inherit;
}

.m-card:hover[b-of2cpdr9g6] {
	border-color: var(--accent);
}

.m-card-top[b-of2cpdr9g6] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.m-card-title[b-of2cpdr9g6] {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	color: var(--accent);
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-sub[b-of2cpdr9g6] {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	color: var(--ink-soft);
	font-size: 12.5px;
	margin-top: 4px;
}

.m-card-sub span[b-of2cpdr9g6] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-notes[b-of2cpdr9g6] {
	margin-top: 6px;
	color: var(--ink-soft);
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Mobile layout: compact single-column view. Breakpoint is 1400px - deliberately
   much wider than any phone or opened foldable, so it also covers an ordinary
   desktop browser window simply resized narrower. See ComplaintList.razor.css. */

@media (max-width: 1400px) {
	.btn-mobile-filters-toggle[b-of2cpdr9g6] {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		margin-bottom: 12px;
		justify-content: center;
	}

	.stats-row.mobile-collapsed[b-of2cpdr9g6],
	.toolbar.mobile-collapsed[b-of2cpdr9g6] {
		display: none;
	}

	/* On mobile the stat cards live inside the same collapsible "Filters" panel
	   as the toolbar, so give them the same compact chip footprint instead of
	   the desktop's tall stacked-card layout. */
	.stats-row[b-of2cpdr9g6] {
		display: flex;
		flex-wrap: wrap;
		grid-template-columns: none;
		gap: 8px;
	}

	.stat-card[b-of2cpdr9g6] {
		flex-direction: row;
		align-items: center;
		gap: 6px;
		width: auto;
		height: 32px;
		padding: 0 12px;
		border-radius: 999px;
	}

	.stat-num[b-of2cpdr9g6] {
		font-size: 13px;
	}

	.stat-label[b-of2cpdr9g6] {
		font-size: 13px;
		font-weight: 500;
		color: var(--ink-soft);
	}

	.stat-hint[b-of2cpdr9g6] {
		display: none;
	}

	.topbar[b-of2cpdr9g6] {
		align-items: flex-start;
	}

	.btn-new[b-of2cpdr9g6] {
		width: 100%;
		justify-content: center;
	}

	.table-card[b-of2cpdr9g6] {
		display: none;
	}

	.mobile-list[b-of2cpdr9g6] {
		display: block;
	}
}

/* Extra-narrow tier: foldable cover screens (Galaxy Z Fold/Flip closed, Pixel
   Fold closed) run as narrow as ~280px. Tighten spacing further. */

@media (max-width: 349px) {
	.stats-row[b-of2cpdr9g6] {
		gap: 6px;
	}

	.stat-card[b-of2cpdr9g6] {
		padding: 0 10px;
	}

	.toolbar[b-of2cpdr9g6] {
		padding: 14px 14px;
	}

	.m-card[b-of2cpdr9g6] {
		padding: 10px 12px;
	}

	.m-card-title[b-of2cpdr9g6] {
		font-size: 13.5px;
	}

	.btn-new[b-of2cpdr9g6],
	.btn-mobile-filters-toggle[b-of2cpdr9g6] {
		font-size: 12.5px;
	}
}
/* /Components/Pages/Distributors/DistributorDetail.razor.rz.scp.css */
.distributor-detail-page[b-xshntgtrsk] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
}

.eyebrow[b-xshntgtrsk] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 4px;
}

.back-link[b-xshntgtrsk] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	margin-bottom: 8px;
}

.back-link:hover[b-xshntgtrsk] {
	color: var(--accent);
}

/* Sticky header, similar to a spreadsheet's frozen panes */

.topbar[b-xshntgtrsk] {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 22px;
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--canvas);
	/* Bleed to the edge of MainLayout's content padding - kept in sync with that
	   padding at each breakpoint, see the 640px and 349px overrides below. */
	margin-left: -24px;
	margin-right: -24px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--line);
	box-shadow: 0 4px 14px rgba(15, 23, 32, 0.04);
}

.title-row[b-xshntgtrsk] {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.title-row h1[b-xshntgtrsk] {
	font-size: 22px;
	margin: 0;
	letter-spacing: -0.01em;
	min-width: 0;
	overflow-wrap: anywhere;
}

.actions[b-xshntgtrsk] {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.actions .btn[b-xshntgtrsk] {
	white-space: nowrap;
}

.btn-danger-ghost[b-xshntgtrsk] {
	background: var(--surface);
	border-color: #f3c9cb;
	color: #a3262b;
}

.btn-danger-ghost:hover[b-xshntgtrsk] {
	background: #fbeaea;
}

.btn-outline[b-xshntgtrsk] {
	background: var(--surface);
	border-color: var(--line);
	color: var(--ink-soft);
}

.btn-outline:hover[b-xshntgtrsk] {
	border-color: var(--accent);
	color: var(--accent);
}

/* Layout */

.grid[b-xshntgtrsk] {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.card[b-xshntgtrsk] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 16px;
}

.card h2[b-xshntgtrsk] {
	font-size: 14px;
	margin: 0 0 16px;
	font-weight: 700;
}

.card h2 small[b-xshntgtrsk] {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 2px;
}

.field-row[b-xshntgtrsk] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}

.field-row.cols-1[b-xshntgtrsk] {
	grid-template-columns: minmax(0, 1fr);
}

.field-row.cols-4[b-xshntgtrsk] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field[b-xshntgtrsk] {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Same breakpoint rationale as ComplaintDetail.razor.css/CustomerDetail.razor.css:
   1400px is wide enough that resizing an ordinary desktop browser window down
   (not just real phones/foldables) switches this page to its compact
   single-column layout too. */

@media (max-width: 1400px) {
	.grid[b-xshntgtrsk] {
		grid-template-columns: minmax(0, 1fr);
	}

	.field-row[b-xshntgtrsk] {
		grid-template-columns: minmax(0, 1fr);
	}

	.field-row.cols-4[b-xshntgtrsk] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.topbar[b-xshntgtrsk] {
		flex-direction: column;
	}

	.actions[b-xshntgtrsk] {
		width: 100%;
	}

	.actions .btn[b-xshntgtrsk] {
		flex: 1;
		justify-content: center;
	}
}

/* MainLayout.razor.css drops .content padding to 16px at this same
   breakpoint (max-width: 640.98px) - keep the topbar bleed in sync so it
   doesn't overflow the content box and cause a page-level horizontal
   scrollbar on normal phones. */
@media (max-width: 640px) {
	.topbar[b-xshntgtrsk] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 16px;
	}
}

@media (max-width: 349px) {
	.topbar[b-xshntgtrsk] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 12px 16px;
	}

	.title-row h1[b-xshntgtrsk] {
		font-size: 18px;
	}

	.actions .btn[b-xshntgtrsk] {
		font-size: 12px;
		padding: 0 10px;
		height: 32px;
	}

	.field-row.cols-4[b-xshntgtrsk] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Sidebar summary card */

.side-card .kv[b-xshntgtrsk] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 13px;
}

.side-card .kv:last-child[b-xshntgtrsk] {
	border-bottom: none;
}

.side-card .kv .k[b-xshntgtrsk] {
	color: var(--ink-faint);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.side-card .kv .v[b-xshntgtrsk] {
	font-weight: 600;
	text-align: right;
}
/* /Components/Pages/Distributors/DistributorList.razor.rz.scp.css */
.distributors-page[b-31dzr83fbg] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
	/* Fill the remaining viewport height (MainLayout's .content is a flex
	   column, see MainLayout.razor.css) so the table below can grow all the
	   way to the bottom of the screen and scroll internally instead of the
	   whole page scrolling. */
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.eyebrow[b-31dzr83fbg] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.btn-new[b-31dzr83fbg] {
	white-space: nowrap;
}

/* Toolbar: just Search + a total-count readout - Distributor has no
   state/priority-style dimension worth a stat-card grid or chip filters (see
   razor-page-design-system's guidance to skip stat cards rather than invent
   fake categories). */

.toolbar[b-31dzr83fbg] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 18px 20px;
}

.toolbar-row[b-31dzr83fbg] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

.toolbar-row .search-wrap[b-31dzr83fbg] {
	flex: 1 1 260px;
	max-width: 420px;
}

.search-wrap[b-31dzr83fbg] {
	position: relative;
}

/* IconSearch is a separate child component, so its rendered <svg> does not
   carry this file's CSS-isolation scope attribute - crossing that component
   boundary requires ::deep, otherwise this rule silently never matches and
   the icon falls back to normal static-flow positioning. */
.search-wrap[b-31dzr83fbg]  .icon-search {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-faint);
	pointer-events: none;
}

/* Small functional icons (plus, pencil) rendered as inline SVG instead of an
   icon font - see razor-page-design-system's Icons section. currentColor lets
   each pick up its surrounding text/link color automatically. icon-plus and
   icon-pencil are CssClass values handed to child icon components, so (like
   icon-search above) reaching their rendered <svg> requires ::deep. */
[b-31dzr83fbg] .icon-plus,
[b-31dzr83fbg] .icon-pencil,
[b-31dzr83fbg] .sort-icon {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

.search-input[b-31dzr83fbg] {
	padding-left: 36px;
}

.total-count[b-31dzr83fbg] {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	white-space: nowrap;
}

/* Table */

.table-card[b-31dzr83fbg] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	max-width: 100%;
	/* Grow to fill the rest of the page (distributors-page is a flex column
	   that fills the viewport) instead of only being as tall as its rows,
	   then scroll its own content - both horizontally (wide table) and
	   vertically (many rows) - only when it doesn't fit, rather than the
	   whole page scrolling and leaving dead space below a short table. */
	flex: 1;
	min-height: 0;
	overflow: auto;
	margin-bottom: 4px;
}

.distributors-table[b-31dzr83fbg] {
	width: 100%;
	border-collapse: collapse;
}

.distributors-table thead th[b-31dzr83fbg] {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: #fafbfc;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.distributors-table thead tr:first-child th:first-child[b-31dzr83fbg] { border-top-left-radius: 12px; }
.distributors-table thead tr:first-child th:last-child[b-31dzr83fbg] { border-top-right-radius: 12px; }
.distributors-table tbody tr:last-child td:first-child[b-31dzr83fbg] { border-bottom-left-radius: 12px; }
.distributors-table tbody tr:last-child td:last-child[b-31dzr83fbg] { border-bottom-right-radius: 12px; }

.distributors-table tbody td[b-31dzr83fbg] {
	padding: 14px 18px;
	font-size: 14px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}

.distributors-table tbody tr:last-child td[b-31dzr83fbg] { border-bottom: none; }
.distributors-table tbody tr:hover[b-31dzr83fbg] { background: #f8fafc; }

.cell-name[b-31dzr83fbg] { font-weight: 600; }
.cell-phone[b-31dzr83fbg] { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Row actions */

.row-actions[b-31dzr83fbg] {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}

.btn-load-more[b-31dzr83fbg] {
	min-width: 160px;
}

/* Mobile card list: hidden on desktop, shown instead of the table on mobile */

.mobile-list[b-31dzr83fbg] {
	display: none;
}

.m-card[b-31dzr83fbg] {
	display: block;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
	text-decoration: none;
	color: inherit;
}

.m-card:hover[b-31dzr83fbg] {
	border-color: var(--accent);
}

.m-card-top[b-31dzr83fbg] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.m-card-title[b-31dzr83fbg] {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	color: var(--accent);
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-sub[b-31dzr83fbg] {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	color: var(--ink-soft);
	font-size: 12.5px;
	margin-top: 4px;
}

.m-card-sub span[b-31dzr83fbg] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-notes[b-31dzr83fbg] {
	margin-top: 6px;
	color: var(--ink-soft);
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Mobile layout: compact single-column view, closer to the original simple
   list. Breakpoint is 1400px - deliberately much wider than any phone or
   opened foldable (which top out around 430px / 900px respectively) - it
   also covers an ordinary desktop browser window simply resized narrower, so
   shrinking the window itself switches to the compact card view instead of
   squeezing the desktop table layout. See ComplaintList.razor.css. */

@media (max-width: 1400px) {
	.topbar[b-31dzr83fbg] {
		align-items: flex-start;
	}

	.btn-new[b-31dzr83fbg] {
		width: 100%;
		justify-content: center;
	}

	.table-card[b-31dzr83fbg] {
		display: none;
	}

	.mobile-list[b-31dzr83fbg] {
		display: block;
	}

	.toolbar-row[b-31dzr83fbg] {
		gap: 10px 16px;
	}
}

/* Extra-narrow tier: foldable cover screens (Galaxy Z Fold/Flip closed, Pixel
   Fold closed) run as narrow as ~280px, well below any normal phone. Tighten
   spacing further so nothing wraps awkwardly or overflows. */

@media (max-width: 349px) {
	.toolbar[b-31dzr83fbg] {
		padding: 14px 14px;
	}

	.m-card[b-31dzr83fbg] {
		padding: 10px 12px;
	}

	.m-card-title[b-31dzr83fbg] {
		font-size: 13.5px;
	}

	.btn-new[b-31dzr83fbg] {
		font-size: 12.5px;
	}

	.total-count[b-31dzr83fbg] {
		font-size: 12px;
	}
}
/* /Components/Pages/EmailPickerSettings.razor.rz.scp.css */
.email-picker-settings-page[b-ejuzjqib0m] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
	max-width: 640px;
}

.eyebrow[b-ejuzjqib0m] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.card[b-ejuzjqib0m] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 16px;
}

.card h2[b-ejuzjqib0m] {
	font-size: 14px;
	margin: 0 0 16px;
	font-weight: 700;
}

.card h2 small[b-ejuzjqib0m] {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.field-row[b-ejuzjqib0m] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}

.field-row.cols-1[b-ejuzjqib0m] {
	grid-template-columns: minmax(0, 1fr);
}

.field-row input[b-ejuzjqib0m],
.field-row select[b-ejuzjqib0m] {
	box-sizing: border-box;
	width: 100%;
}

.value-box[b-ejuzjqib0m] {
	box-sizing: border-box;
	width: 100%;
	min-height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	display: flex;
	align-items: center;
	background: var(--line-soft);
	border: 1px solid var(--line);
	border-radius: 6px;
	color: var(--ink-soft);
	font-size: 0.95rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Collapse to 1 column well before the mobile tier - at this 640px-max-width container, a
   2-column row's labels (e.g. "Poll interval (minutes)") can wrap and misalign against a
   shorter sibling label once each column narrows past ~280px. */
@media (max-width: 600px) {
	.field-row[b-ejuzjqib0m] {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 480px) {
	.email-picker-settings-page[b-ejuzjqib0m] {
		max-width: 100%;
	}
}
/* /Components/Pages/Enumerations/EnumerationDetail.razor.rz.scp.css */
.enumeration-detail-page[b-1ec2sfxinn] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
}

.eyebrow[b-1ec2sfxinn] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 4px;
}

.back-link[b-1ec2sfxinn] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	margin-bottom: 8px;
}

.back-link:hover[b-1ec2sfxinn] {
	color: var(--accent);
}

/* Sticky header, similar to a spreadsheet's frozen panes */

.topbar[b-1ec2sfxinn] {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 22px;
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--canvas);
	/* Bleed to the edge of MainLayout's content padding - kept in sync with that
	   padding at each breakpoint, see the 640px and 349px overrides below. */
	margin-left: -24px;
	margin-right: -24px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--line);
	box-shadow: 0 4px 14px rgba(15, 23, 32, 0.04);
}

.title-row[b-1ec2sfxinn] {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.title-row h1[b-1ec2sfxinn] {
	font-size: 22px;
	margin: 0;
	letter-spacing: -0.01em;
	min-width: 0;
	overflow-wrap: anywhere;
}

.badge[b-1ec2sfxinn] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.badge-admin[b-1ec2sfxinn] {
	background: #fef3e6;
	color: #93590c;
}

.actions[b-1ec2sfxinn] {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.actions .btn[b-1ec2sfxinn] {
	white-space: nowrap;
}

.btn-danger-ghost[b-1ec2sfxinn] {
	background: var(--surface);
	border-color: #f3c9cb;
	color: #a3262b;
}

.btn-danger-ghost:hover[b-1ec2sfxinn] {
	background: #fbeaea;
}

.btn-outline[b-1ec2sfxinn] {
	background: var(--surface);
	border-color: var(--line);
	color: var(--ink-soft);
}

.btn-outline:hover[b-1ec2sfxinn] {
	border-color: var(--accent);
	color: var(--accent);
}

/* Layout */

.card[b-1ec2sfxinn] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 16px;
}

.card h2[b-1ec2sfxinn] {
	font-size: 14px;
	margin: 0 0 16px;
	font-weight: 700;
}

.card h2 small[b-1ec2sfxinn] {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 2px;
}

.field-row[b-1ec2sfxinn] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}

.field-row.cols-1[b-1ec2sfxinn] {
	grid-template-columns: minmax(0, 1fr);
}

.field[b-1ec2sfxinn] {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.form-check[b-1ec2sfxinn] {
	display: flex;
	align-items: center;
	gap: 8px;
}

.form-check .form-check-input[b-1ec2sfxinn] {
	margin: 0;
}

.form-check .form-check-label[b-1ec2sfxinn] {
	margin: 0;
}

/* Same breakpoint rationale as ComplaintDetail.razor.css/DistributorDetail.razor.css:
   1400px is wide enough that resizing an ordinary desktop browser window down
   (not just real phones/foldables) switches this page to its compact
   single-column layout too. */

@media (max-width: 1400px) {
	.field-row[b-1ec2sfxinn] {
		grid-template-columns: minmax(0, 1fr);
	}

	.topbar[b-1ec2sfxinn] {
		flex-direction: column;
	}

	.actions[b-1ec2sfxinn] {
		width: 100%;
	}

	.actions .btn[b-1ec2sfxinn] {
		flex: 1;
		justify-content: center;
	}
}

/* MainLayout.razor.css drops .content padding to 16px at this same
   breakpoint (max-width: 640.98px) - keep the topbar bleed in sync so it
   doesn't overflow the content box and cause a page-level horizontal
   scrollbar on normal phones. */
@media (max-width: 640px) {
	.topbar[b-1ec2sfxinn] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 16px;
	}
}

@media (max-width: 349px) {
	.topbar[b-1ec2sfxinn] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 12px 16px;
	}

	.title-row h1[b-1ec2sfxinn] {
		font-size: 18px;
	}

	.actions .btn[b-1ec2sfxinn] {
		font-size: 12px;
		padding: 0 10px;
		height: 32px;
	}
}
/* /Components/Pages/Enumerations/EnumerationList.razor.rz.scp.css */
.enumerations-page[b-53wqjxiwc2] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
	/* Fill the remaining viewport height (MainLayout's .content is a flex
	   column, see MainLayout.razor.css) so the table below can grow all the
	   way to the bottom of the screen and scroll internally instead of the
	   whole page scrolling. */
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.eyebrow[b-53wqjxiwc2] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.btn-new[b-53wqjxiwc2] {
	white-space: nowrap;
}

/* Toolbar: just Search + a total-count readout - Enumeration has no
   state/priority-style dimension worth a stat-card grid or chip filters (see
   razor-page-design-system's guidance to skip stat cards rather than invent
   fake categories). */

.toolbar[b-53wqjxiwc2] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 18px 20px;
}

.toolbar-row[b-53wqjxiwc2] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

.toolbar-row .search-wrap[b-53wqjxiwc2] {
	flex: 1 1 260px;
	max-width: 420px;
}

.search-wrap[b-53wqjxiwc2] {
	position: relative;
}

/* IconSearch is a separate child component, so its rendered <svg> does not
   carry this file's CSS-isolation scope attribute - crossing that component
   boundary requires ::deep, otherwise this rule silently never matches and
   the icon falls back to normal static-flow positioning. */
.search-wrap[b-53wqjxiwc2]  .icon-search {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-faint);
	pointer-events: none;
}

/* Small functional icons (plus, pencil) rendered as inline SVG instead of an
   icon font - see razor-page-design-system's Icons section. currentColor lets
   each pick up its surrounding text/link color automatically. icon-plus and
   icon-pencil are CssClass values handed to child icon components, so (like
   icon-search above) reaching their rendered <svg> requires ::deep. */
[b-53wqjxiwc2] .icon-plus,
[b-53wqjxiwc2] .icon-pencil,
[b-53wqjxiwc2] .sort-icon {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

.search-input[b-53wqjxiwc2] {
	padding-left: 36px;
}

.total-count[b-53wqjxiwc2] {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	white-space: nowrap;
}

/* Table */

.table-card[b-53wqjxiwc2] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	max-width: 100%;
	/* Grow to fill the rest of the page (enumerations-page is a flex column
	   that fills the viewport) instead of only being as tall as its rows,
	   then scroll its own content - both horizontally (wide table) and
	   vertically (many rows) - only when it doesn't fit, rather than the
	   whole page scrolling and leaving dead space below a short table. */
	flex: 1;
	min-height: 0;
	overflow: auto;
	margin-bottom: 4px;
}

.enumerations-table[b-53wqjxiwc2] {
	width: 100%;
	border-collapse: collapse;
}

.enumerations-table thead th[b-53wqjxiwc2] {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: #fafbfc;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.enumerations-table thead tr:first-child th:first-child[b-53wqjxiwc2] { border-top-left-radius: 12px; }
.enumerations-table thead tr:first-child th:last-child[b-53wqjxiwc2] { border-top-right-radius: 12px; }
.enumerations-table tbody tr:last-child td:first-child[b-53wqjxiwc2] { border-bottom-left-radius: 12px; }
.enumerations-table tbody tr:last-child td:last-child[b-53wqjxiwc2] { border-bottom-right-radius: 12px; }

.enumerations-table tbody td[b-53wqjxiwc2] {
	padding: 14px 18px;
	font-size: 14px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}

.enumerations-table tbody tr:last-child td[b-53wqjxiwc2] { border-bottom: none; }
.enumerations-table tbody tr:hover[b-53wqjxiwc2] { background: #f8fafc; }

.cell-table[b-53wqjxiwc2] { font-weight: 600; }
.cell-detail[b-53wqjxiwc2] {
	color: var(--ink-soft);
	max-width: 320px;
}

.notes-wrap[b-53wqjxiwc2] {
	position: relative;
	display: inline-block;
	max-width: 260px;
	vertical-align: middle;
}

.cell-notes-text[b-53wqjxiwc2] {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ink-soft);
}

.notes-tooltip[b-53wqjxiwc2] {
	position: absolute;
	top: calc(100% + 9px);
	left: 0;
	min-width: 220px;
	max-width: 320px;
	background: #1f2933;
	color: #fff;
	font-size: 12.5px;
	line-height: 1.5;
	padding: 10px 13px;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(15, 23, 32, 0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.12s ease, transform 0.12s ease;
	z-index: 40;
	white-space: normal;
	pointer-events: none;
}

.notes-tooltip[b-53wqjxiwc2]::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 16px;
	border: 6px solid transparent;
	border-bottom-color: #1f2933;
}

.notes-wrap:hover .notes-tooltip[b-53wqjxiwc2] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Admin-only badge - same badge shape/scale as the design system's state/
   priority pills (razor-page-design-system's "State & priority badges"),
   reused here for a boolean flag instead of an enum. */

.badge[b-53wqjxiwc2] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.badge-admin[b-53wqjxiwc2] {
	background: #fef3e6;
	color: #93590c;
}

/* Row actions */

.row-actions[b-53wqjxiwc2] {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}

.btn-load-more[b-53wqjxiwc2] {
	min-width: 160px;
}

/* Mobile card list: hidden on desktop, shown instead of the table on mobile */

.mobile-list[b-53wqjxiwc2] {
	display: none;
}

.m-card[b-53wqjxiwc2] {
	display: block;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
	text-decoration: none;
	color: inherit;
}

.m-card:hover[b-53wqjxiwc2] {
	border-color: var(--accent);
}

.m-card-top[b-53wqjxiwc2] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.m-card-title[b-53wqjxiwc2] {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	color: var(--accent);
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-sub[b-53wqjxiwc2] {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	color: var(--ink-soft);
	font-size: 12.5px;
	margin-top: 4px;
}

.m-card-sub span[b-53wqjxiwc2] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-notes[b-53wqjxiwc2] {
	margin-top: 6px;
	color: var(--ink-soft);
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Mobile layout: compact single-column view, closer to the original simple
   list. Breakpoint is 1400px - deliberately much wider than any phone or
   opened foldable (which top out around 430px / 900px respectively) - it
   also covers an ordinary desktop browser window simply resized narrower, so
   shrinking the window itself switches to the compact card view instead of
   squeezing the desktop table layout. See ComplaintList.razor.css. */

@media (max-width: 1400px) {
	.topbar[b-53wqjxiwc2] {
		align-items: flex-start;
	}

	.btn-new[b-53wqjxiwc2] {
		width: 100%;
		justify-content: center;
	}

	.table-card[b-53wqjxiwc2] {
		display: none;
	}

	.mobile-list[b-53wqjxiwc2] {
		display: block;
	}

	.toolbar-row[b-53wqjxiwc2] {
		gap: 10px 16px;
	}
}

/* Extra-narrow tier: foldable cover screens (Galaxy Z Fold/Flip closed, Pixel
   Fold closed) run as narrow as ~280px, well below any normal phone. Tighten
   spacing further so nothing wraps awkwardly or overflows. */

@media (max-width: 349px) {
	.toolbar[b-53wqjxiwc2] {
		padding: 14px 14px;
	}

	.m-card[b-53wqjxiwc2] {
		padding: 10px 12px;
	}

	.m-card-title[b-53wqjxiwc2] {
		font-size: 13.5px;
	}

	.btn-new[b-53wqjxiwc2] {
		font-size: 12.5px;
	}

	.total-count[b-53wqjxiwc2] {
		font-size: 12px;
	}
}
/* /Components/Pages/Help/HelpWiki.razor.rz.scp.css */
.help-wiki-page[b-rg6y6a2oh3] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);

	/* Full-height opt-in (razor-page-design-system's "Full-height layout"
	   section): fill the rest of MainLayout's .content flex column instead
	   of taking only natural height, so the TOC/content panes below can
	   scroll internally rather than the whole document scrolling. */
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.eyebrow[b-rg6y6a2oh3] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.topbar[b-rg6y6a2oh3] {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
	flex-shrink: 0;
}

.btn-outline[b-rg6y6a2oh3] {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink-soft);
}

.btn-outline:hover[b-rg6y6a2oh3] {
	border-color: var(--accent);
	color: var(--accent);
}

[b-rg6y6a2oh3] .icon-paperclip {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

/* Mobile "Contents" toggle - same pattern as the list pages' mobile filters
   toggle (razor-page-design-system): hidden on desktop, shown only below
   the collapse breakpoint below. */
.btn-mobile-toc-toggle[b-rg6y6a2oh3] {
	display: none;
	align-items: center;
	gap: 6px;
}

.icon-chevron[b-rg6y6a2oh3] {
	display: inline-flex;
	align-items: center;
}

.card[b-rg6y6a2oh3] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
}

.card h2[b-rg6y6a2oh3] {
	font-size: 14px;
	margin: 0 0 14px;
	font-weight: 700;
}

.card h2 small[b-rg6y6a2oh3] {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 2px;
}

/* Layout: TOC sidebar + content pane, each scrolling internally instead of
   the whole page scrolling (min-height:0 required at every flex/grid level
   to let a child shrink below its content size - see the design system's
   "Full-height layout" note on this). */
.grid[b-rg6y6a2oh3] {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 16px;
	flex: 1;
	min-height: 0;
}

.toc-card[b-rg6y6a2oh3],
.content-card[b-rg6y6a2oh3] {
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
}

.toc-list[b-rg6y6a2oh3] {
	list-style: none;
	margin: 0;
	padding: 0;
}

.toc-item[b-rg6y6a2oh3] {
	margin-bottom: 2px;
}

.toc-link[b-rg6y6a2oh3] {
	display: block;
	padding: 7px 10px;
	border-radius: 8px;
	font-size: 13.5px;
	color: var(--ink-soft);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.toc-link:hover[b-rg6y6a2oh3] {
	background: var(--line-soft);
	color: var(--ink);
}

.toc-link.active[b-rg6y6a2oh3] {
	background: var(--accent-soft);
	color: var(--accent);
	font-weight: 700;
}

.toc-chapter-no[b-rg6y6a2oh3] {
	color: var(--ink-faint);
	font-weight: 600;
}

.toc-link.active .toc-chapter-no[b-rg6y6a2oh3] {
	color: var(--accent);
}

/* Class-based indent scheme (in place of the old inline
   style="padding-left:...px" hack) - a handful of fixed levels is enough
   for a help wiki's chapter tree; HelpWiki.razor.cs clamps to this range. */
.toc-level-0[b-rg6y6a2oh3] { padding-left: 0; }
.toc-level-1[b-rg6y6a2oh3] { padding-left: 14px; }
.toc-level-2[b-rg6y6a2oh3] { padding-left: 28px; }
.toc-level-3[b-rg6y6a2oh3] { padding-left: 42px; }
.toc-level-4[b-rg6y6a2oh3] { padding-left: 56px; }
.toc-level-5[b-rg6y6a2oh3] { padding-left: 70px; }

.content-title[b-rg6y6a2oh3] {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 4px;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.content-subtitle[b-rg6y6a2oh3] {
	color: var(--ink-soft);
	font-size: 13px;
	margin: 0 0 14px;
}

.btn-attachment[b-rg6y6a2oh3] {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* Collapse the two-column split below this width - narrower than the
   1400px detail-grid switch used elsewhere, since a nav sidebar this
   compact doesn't need nearly as much room as a dense field grid before
   it starts cramping the content pane. Covers real phones/foldables and
   an ordinary desktop window resized down to this width alike. */
@media (max-width: 780px) {
	.grid[b-rg6y6a2oh3] {
		grid-template-columns: 1fr;
	}

	.btn-mobile-toc-toggle[b-rg6y6a2oh3] {
		display: inline-flex;
	}

	/* TOC starts collapsed on mobile (see HelpWiki.razor.cs) so the
	   auto-selected chapter's content is visible without scrolling past
	   a potentially long table of contents first. */
	.toc-card.mobile-collapsed[b-rg6y6a2oh3] {
		display: none;
	}

	.toc-card[b-rg6y6a2oh3],
	.content-card[b-rg6y6a2oh3] {
		max-height: none;
		overflow-y: visible;
	}
}

@media (max-width: 349px) {
	.card[b-rg6y6a2oh3] {
		padding: 16px 14px;
	}

	.content-title[b-rg6y6a2oh3] {
		font-size: 17px;
	}
}
/* /Components/Pages/Machines/MachineDetail.razor.rz.scp.css */
.machine-detail-page[b-usiqdtz8hh] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
}

.eyebrow[b-usiqdtz8hh] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 4px;
}

.back-link[b-usiqdtz8hh] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	margin-bottom: 8px;
}

.back-link:hover[b-usiqdtz8hh] {
	color: var(--accent);
}

/* Sticky header, similar to a spreadsheet's frozen panes */

.topbar[b-usiqdtz8hh] {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 22px;
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--canvas);
	/* Bleed to the edge of MainLayout's content padding - kept in sync with that
	   padding at each breakpoint, see the 640px and 349px overrides below. */
	margin-left: -24px;
	margin-right: -24px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--line);
	box-shadow: 0 4px 14px rgba(15, 23, 32, 0.04);
}

.title-row[b-usiqdtz8hh] {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.title-row h1[b-usiqdtz8hh] {
	font-size: 22px;
	margin: 0;
	letter-spacing: -0.01em;
	min-width: 0;
	overflow-wrap: anywhere;
}

.actions[b-usiqdtz8hh] {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.actions .btn[b-usiqdtz8hh] {
	white-space: nowrap;
}

.btn-danger-ghost[b-usiqdtz8hh] {
	background: var(--surface);
	border-color: #f3c9cb;
	color: #a3262b;
}

.btn-danger-ghost:hover[b-usiqdtz8hh] {
	background: #fbeaea;
}

.btn-outline[b-usiqdtz8hh] {
	background: var(--surface);
	border-color: var(--line);
	color: var(--ink-soft);
}

.btn-outline:hover[b-usiqdtz8hh] {
	border-color: var(--accent);
	color: var(--accent);
}

.btn-sm[b-usiqdtz8hh] {
	height: 30px;
	padding: 0 11px;
	font-size: 12.5px;
}

/* Small functional icons (pencil, plus, calendar) rendered as inline SVG atoms
   instead of an icon font - see razor-page-design-system's Icons section.
   Reaching a child icon component's rendered <svg> from this page's scoped
   CSS requires ::deep. */
[b-usiqdtz8hh] .icon-pencil,
[b-usiqdtz8hh] .icon-plus {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

/* Badges (address status + complaint state), shared palette with the
   Complaints/Customers modules */

.badge[b-usiqdtz8hh] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.badge .dot[b-usiqdtz8hh] {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	flex-shrink: 0;
}

.badge-new[b-usiqdtz8hh] { background: #eaf2fb; color: #14548f; }
.badge-progress[b-usiqdtz8hh] { background: #fef3e6; color: #93590c; }
.badge-done[b-usiqdtz8hh] { background: #e8f6ee; color: #1c7a45; }
.badge-confirm[b-usiqdtz8hh] { background: #e9f6fa; color: #196c85; }
.badge-rejected[b-usiqdtz8hh] { background: #fbeaea; color: #a3262b; }
.badge-default[b-usiqdtz8hh] { background: #eef1f3; color: var(--ink-soft); }
.priority-medium[b-usiqdtz8hh] { background: #eaf2fb; color: #14548f; }

/* Layout */

.grid[b-usiqdtz8hh] {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.card[b-usiqdtz8hh] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 16px;
}

.card h2[b-usiqdtz8hh] {
	font-size: 14px;
	margin: 0 0 16px;
	font-weight: 700;
}

.card h2 small[b-usiqdtz8hh] {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 2px;
}

.field-row[b-usiqdtz8hh] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}

.field-row.cols-1[b-usiqdtz8hh] {
	grid-template-columns: minmax(0, 1fr);
}

.field-row.cols-4[b-usiqdtz8hh] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field[b-usiqdtz8hh] {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.field .value-box[b-usiqdtz8hh] {
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 14px;
	background: #fafbfc;
	color: var(--ink-soft);
	box-sizing: border-box;
	width: 100%;
	min-height: 38px;
	display: flex;
	align-items: center;
}

/* RAL code input group: input + optional swatch-edit button */

.input-group .btn-outline[b-usiqdtz8hh] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Machine address box (opens AddressPickerModal) */

.address-box[b-usiqdtz8hh] {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	min-height: 44px;
}

.address-box .address-text[b-usiqdtz8hh] {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ink);
	font-weight: 600;
}

.address-box:hover[b-usiqdtz8hh] {
	border-color: var(--accent);
}

/* Date fields: overlay a calendar icon on the browser date/time picker input.
   The icon lives in its own row (sibling of the label, not stacked under it),
   so it centers on the input itself regardless of label height/wrapping. */

.date-field[b-usiqdtz8hh] {
	position: relative;
	display: flex;
	align-items: center;
}

.date-field .cal-icon[b-usiqdtz8hh] {
	position: absolute;
	left: 11px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	pointer-events: none;
	z-index: 1;
}

.date-field[b-usiqdtz8hh]  input {
	padding-left: 32px !important;
	width: 100%;
}

/* The browser's own datetime-local input already renders a built-in calendar
   icon at the right edge, which duplicated our custom calendar icon on the
   left. Hide the native one (Chromium/Edge/Safari) so there's only a single
   calendar icon per field. */
.date-field[b-usiqdtz8hh]  input::-webkit-calendar-picker-indicator {
	display: none;
	-webkit-appearance: none;
}

/* Complaints badge (title row) + count pill in the sticky header */

.badge-callissues[b-usiqdtz8hh] {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--accent);
	text-decoration: none;
	cursor: pointer;
}

.badge-callissues:hover[b-usiqdtz8hh] {
	border-color: var(--accent);
}

.count-pill[b-usiqdtz8hh] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 11px;
	font-weight: 700;
}

/* Offset the Complaints anchor so the sticky header doesn't cover its heading
   when jumped to from the header's "Complaints" badge link. */
#complaints-card[b-usiqdtz8hh] {
	scroll-margin-top: 96px;
}

/* Same rationale as ComplaintDetail.razor.css: 1400px is wide enough that
   resizing an ordinary desktop browser window down (not just real phones/
   foldables) switches this page to its compact single-column layout too. */

@media (max-width: 1400px) {
	.grid[b-usiqdtz8hh] {
		grid-template-columns: minmax(0, 1fr);
	}

	.field-row[b-usiqdtz8hh] {
		grid-template-columns: minmax(0, 1fr);
	}

	.field-row.cols-4[b-usiqdtz8hh] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.topbar[b-usiqdtz8hh] {
		flex-direction: column;
	}

	.actions[b-usiqdtz8hh] {
		width: 100%;
	}

	.actions .btn[b-usiqdtz8hh] {
		flex: 1;
		justify-content: center;
	}
}

/* MainLayout.razor.css drops .content padding to 16px at this same
   breakpoint (max-width: 640.98px) - keep the topbar bleed in sync so it
   doesn't overflow the content box and cause a page-level horizontal
   scrollbar on normal phones. */
@media (max-width: 640px) {
	.topbar[b-usiqdtz8hh] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 16px;
	}
}

@media (max-width: 349px) {
	.topbar[b-usiqdtz8hh] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 12px 16px;
	}

	.title-row h1[b-usiqdtz8hh] {
		font-size: 18px;
	}

	.actions .btn[b-usiqdtz8hh] {
		font-size: 12px;
		padding: 0 10px;
		height: 32px;
	}

	.field-row.cols-4[b-usiqdtz8hh] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Related-records table (Complaints) */

.table-card-head[b-usiqdtz8hh] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.related-table-wrap[b-usiqdtz8hh] {
	overflow-x: auto;
	max-width: 100%;
}

.related-table[b-usiqdtz8hh] {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
}

.related-table thead th[b-usiqdtz8hh] {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: #fafbfc;
	padding: 11px 14px;
	border-bottom: 1px solid var(--line);
	border-top: 1px solid var(--line);
	white-space: nowrap;
}

.related-table tbody td[b-usiqdtz8hh] {
	padding: 12px 14px;
	font-size: 13.5px;
	border-bottom: 1px solid var(--line-soft);
}

.related-table tbody tr:last-child td[b-usiqdtz8hh] {
	border-bottom: none;
}

.related-table tbody tr:hover[b-usiqdtz8hh] {
	background: #f8fafc;
}

.empty-ci[b-usiqdtz8hh] {
	padding: 20px 4px;
	color: var(--ink-faint);
	font-size: 13px;
}

/* Sidebar cards */

.side-card .kv[b-usiqdtz8hh] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 13px;
}

.side-card .kv:last-child[b-usiqdtz8hh] {
	border-bottom: none;
}

.side-card .kv .k[b-usiqdtz8hh] {
	color: var(--ink-faint);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.side-card .kv .v[b-usiqdtz8hh] {
	font-weight: 600;
	text-align: right;
}

/* RAL code swatch picker - same .picker-* classes/values as RalCodeDetail.razor.css's own RAL
   picker (see that file), including the box-sizing:border-box + mobile breakpoint so this
   picker doesn't overflow un-shrunk on a phone. Swatch background/text color still has to be
   inline - it's per-record RGB data, not a fixed design token. */

.picker-grid[b-usiqdtz8hh] {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.picker-swatch[b-usiqdtz8hh] {
	width: 120px;
	height: 80px;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 12.5px;
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
	padding: 8px;
	box-sizing: border-box;
}

.picker-swatch:hover[b-usiqdtz8hh] {
	transform: scale(1.05);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	z-index: 10;
}

.picker-swatch-category[b-usiqdtz8hh] {
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.picker-swatch-code[b-usiqdtz8hh] {
	margin-top: 2px;
}

@media (max-width: 767.98px) {
	.picker-swatch[b-usiqdtz8hh] {
		width: 100px;
		height: 60px;
	}
}
/* /Components/Pages/Machines/MachineList.razor.rz.scp.css */
.machines-page[b-0qf6qsrem3] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
	/* Fill the remaining viewport height (MainLayout's .content is a flex
	   column, see MainLayout.razor.css) so the table below can grow all the
	   way to the bottom of the screen and scroll internally instead of the
	   whole page scrolling. */
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.eyebrow[b-0qf6qsrem3] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.btn-new[b-0qf6qsrem3] {
	white-space: nowrap;
}

/* Toolbar */

.toolbar[b-0qf6qsrem3] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 18px 20px;
}

.toolbar-row[b-0qf6qsrem3] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

.toolbar-row .search-wrap[b-0qf6qsrem3] {
	flex: 1 1 260px;
	max-width: 420px;
}

.search-wrap[b-0qf6qsrem3] {
	position: relative;
}

/* IconSearch is a separate child component, so its rendered <svg> does not
   carry this file's CSS-isolation scope attribute - crossing that component
   boundary requires ::deep, otherwise this rule silently never matches and
   the icon falls back to normal static-flow positioning. */
.search-wrap[b-0qf6qsrem3]  .icon-search {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-faint);
	pointer-events: none;
}

/* Small functional icons (plus, pencil, sort direction) rendered as inline SVG
   atoms instead of an icon font - see razor-page-design-system's Icons
   section. currentColor lets each pick up its surrounding text/link color
   (and hover state) automatically. Reaching a child icon component's rendered
   <svg> from this page's scoped CSS requires ::deep. */
[b-0qf6qsrem3] .icon-plus,
[b-0qf6qsrem3] .icon-pencil,
[b-0qf6qsrem3] .sort-icon {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

.search-input[b-0qf6qsrem3] {
	padding-left: 36px;
}

/* Badges (Distributor tag on mobile cards) */

.badge[b-0qf6qsrem3] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.badge .dot[b-0qf6qsrem3] {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	flex-shrink: 0;
}

.badge-default[b-0qf6qsrem3] {
	background: #eef1f3;
	color: var(--ink-soft);
}

/* Table */

.table-card[b-0qf6qsrem3] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	max-width: 100%;
	/* Grow to fill the rest of the page (machines-page is a flex column that
	   fills the viewport) instead of only being as tall as its rows, then
	   scroll its own content - both horizontally (wide table) and vertically
	   (many rows) - only when it doesn't fit, rather than the whole page
	   scrolling and leaving dead space below a short table. */
	flex: 1;
	min-height: 0;
	overflow: auto;
	margin-bottom: 4px;
}

.machines-table[b-0qf6qsrem3] {
	width: 100%;
	border-collapse: collapse;
}

.machines-table thead th[b-0qf6qsrem3] {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: #fafbfc;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.machines-table thead tr:first-child th:first-child[b-0qf6qsrem3] { border-top-left-radius: 12px; }
.machines-table thead tr:first-child th:last-child[b-0qf6qsrem3] { border-top-right-radius: 12px; }
.machines-table tbody tr:last-child td:first-child[b-0qf6qsrem3] { border-bottom-left-radius: 12px; }
.machines-table tbody tr:last-child td:last-child[b-0qf6qsrem3] { border-bottom-right-radius: 12px; }

.machines-table tbody td[b-0qf6qsrem3] {
	padding: 14px 18px;
	font-size: 14px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}

.machines-table tbody tr:last-child td[b-0qf6qsrem3] { border-bottom: none; }
.machines-table tbody tr:hover[b-0qf6qsrem3] { background: #f8fafc; }

.cell-model[b-0qf6qsrem3] { font-weight: 600; }
.cell-serial[b-0qf6qsrem3] { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cell-date[b-0qf6qsrem3] { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Notes hover tooltip */

.notes-wrap[b-0qf6qsrem3] {
	position: relative;
	display: inline-block;
	max-width: 260px;
	vertical-align: middle;
}

.cell-notes-text[b-0qf6qsrem3] {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ink-soft);
}

.notes-tooltip[b-0qf6qsrem3] {
	position: absolute;
	top: calc(100% + 9px);
	left: 0;
	min-width: 220px;
	max-width: 320px;
	background: #1f2933;
	color: #fff;
	font-size: 12.5px;
	line-height: 1.5;
	padding: 10px 13px;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(15, 23, 32, 0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.12s ease, transform 0.12s ease;
	z-index: 40;
	white-space: normal;
	pointer-events: none;
}

.notes-tooltip[b-0qf6qsrem3]::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 16px;
	border: 6px solid transparent;
	border-bottom-color: #1f2933;
}

.notes-wrap:hover .notes-tooltip[b-0qf6qsrem3] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Row actions */

.row-actions[b-0qf6qsrem3] {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}

.btn-load-more[b-0qf6qsrem3] {
	min-width: 160px;
}

/* Mobile card list: hidden on desktop, shown instead of the table on mobile */

.mobile-list[b-0qf6qsrem3] {
	display: none;
}

.m-card[b-0qf6qsrem3] {
	display: block;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
	text-decoration: none;
	color: inherit;
}

.m-card:hover[b-0qf6qsrem3] {
	border-color: var(--accent);
}

.m-card-top[b-0qf6qsrem3] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.m-card-title[b-0qf6qsrem3] {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	color: var(--accent);
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-sn[b-0qf6qsrem3] {
	flex-shrink: 0;
	color: var(--ink-soft);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

.m-card-sub[b-0qf6qsrem3] {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	color: var(--ink-soft);
	font-size: 12.5px;
	margin-top: 4px;
}

.m-card-sub span[b-0qf6qsrem3] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-meta[b-0qf6qsrem3] {
	margin-top: 6px;
}

.m-card-notes[b-0qf6qsrem3] {
	margin-top: 6px;
	color: var(--ink-soft);
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Mobile layout: compact single-column view, closer to the original simple
   list. Breakpoint is 1400px - deliberately much wider than any phone or
   opened foldable, so it also covers an ordinary desktop browser window
   simply resized narrower. See ComplaintList.razor.css. */

@media (max-width: 1400px) {
	.topbar[b-0qf6qsrem3] {
		align-items: flex-start;
	}

	.btn-new[b-0qf6qsrem3] {
		width: 100%;
		justify-content: center;
	}

	.table-card[b-0qf6qsrem3] {
		display: none;
	}

	.mobile-list[b-0qf6qsrem3] {
		display: block;
	}
}

/* Extra-narrow tier: foldable cover screens (Galaxy Z Fold/Flip closed, Pixel
   Fold closed) run as narrow as ~280px, well below any normal phone. Tighten
   spacing further so nothing wraps awkwardly or overflows. */

@media (max-width: 349px) {
	.toolbar[b-0qf6qsrem3] {
		padding: 14px 14px;
	}

	.m-card[b-0qf6qsrem3] {
		padding: 10px 12px;
	}

	.m-card-title[b-0qf6qsrem3] {
		font-size: 13.5px;
	}

	.btn-new[b-0qf6qsrem3] {
		font-size: 12.5px;
	}
}
/* /Components/Pages/Map/MapDashboard.razor.rz.scp.css */
.map-dashboard-page[b-czzaej2bgf] {
    --ink: #16202b;
    --ink-soft: #55636f;
    --ink-faint: #8996a1;
    --line: #e4e8ec;
    --line-soft: #eef1f3;
    --surface: #ffffff;
    --canvas: #f4f6f8;
    --accent: #1b6ec2;
    --accent-soft: #eaf2fb;
    --accent-ring: rgba(27, 110, 194, 0.16);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    /* --map-page-top-offset is measured in real pixels by updateMapPageTopOffset() in
       MapDashboard.razor.js (set on <html>, re-measured on load and on every debounced resize) - the
       actual rendered height of whatever chrome sits above this page (top nav bar, mobile hamburger
       toggle row, etc.), which cannot be known from CSS alone. This element previously hardcoded a
       guessed constant here instead (a flat "1.5rem"/mobile "1.1rem") - on desktop that guess happened
       to match the real chrome height (article's own 1.5rem top padding) by coincidence, but on mobile
       it did not (~82px of real nav chrome vs. the guessed ~18px), leaving the whole page taller than
       the viewport and pushing the map canvas - and the pincushion tray sitting at its bottom edge -
       partly below the fold with no visible gap (user-reported, issue #65 follow-up). Measuring the
       real value instead of guessing self-corrects regardless of how that chrome renders. The 1.5rem
       fallback only matters before the JS module's first measurement lands (progressive enhancement)
       or if JS is unavailable - it reproduces the old (correct-on-desktop) desktop behavior in that
       narrow window.
       --map-bottom-gap (below) reserves the same visual breathing room below the canvas as this page's
       own left/right gutter, so the box reads as evenly inset on every side rather than flush to the
       bottom - it matches MainLayout.razor.css's article/.content side padding at each breakpoint
       (1.5rem desktop, 1rem mobile) exactly. */
    --map-bottom-gap: 1.5rem;
    height: calc(100vh - var(--map-page-top-offset, 1.5rem) - var(--map-bottom-gap));
    min-height: 0;
}

@media (max-width: 640.98px) {
    .map-dashboard-page[b-czzaej2bgf] {
        --map-bottom-gap: 1rem;
    }
}

/* Header row: title + search + legend toggle + zoom controls. Fixed-size, never squeezed by the
   flex column layout below (see the flex-shrink rule further down). */
.map-header[b-czzaej2bgf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.map-title[b-czzaej2bgf] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
}

.map-header-actions[b-czzaej2bgf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.search-wrap[b-czzaej2bgf] {
    position: relative;
}

/* IconSearch is a separate child component, so its rendered <svg> does not carry this file's
   CSS-isolation scope attribute - crossing that component boundary requires ::deep, otherwise this
   rule silently never matches (see razor-page-design-system's Icons section). */
.search-wrap[b-czzaej2bgf]  .icon-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
    pointer-events: none;
}

.map-search-input[b-czzaej2bgf] {
    width: 240px;
    max-width: 100%;
    height: 32px;
    padding: 0 10px 0 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
}

.map-search-input:focus[b-czzaej2bgf] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.btn-outline[b-czzaej2bgf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.1s ease, color 0.1s ease;
}

.btn-outline:hover[b-czzaej2bgf] {
    border-color: var(--accent);
    color: var(--accent);
}

[b-czzaej2bgf] .icon-list,
[b-czzaej2bgf] .icon-reset {
    display: inline-flex;
}

.zoom-controls[b-czzaej2bgf] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.btn-icon[b-czzaej2bgf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}

.btn-icon:hover[b-czzaej2bgf] {
    background: var(--accent-soft);
    color: var(--accent);
}

.map-canvas-wrapper[b-czzaej2bgf] {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    /* Required so this flex child can shrink below its content size instead of forcing the page
       taller than the viewport; a fixed min-height here also left svg-pan-zoom's fit() computed
       against a size smaller than the final settled layout, causing the map to not fill the box. */
    min-height: 0;
    /* No margin-bottom here (previously 1rem) - .map-canvas-wrapper is .map-dashboard-page's last flex
       child, so a margin here only ever created the gap between it and the page's own bottom edge.
       That gap is now reserved once, at the page level, via --map-bottom-gap (see .map-dashboard-page
       above) so it equals the page's own left/right gutter exactly instead of stacking on top of it -
       keeping both here would double it. */
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden;
    background-color: #eef2f5;
}

.map-svg[b-czzaej2bgf] {
    width: 100%;
    height: 100%;
    display: block;
    /* Declared here (rather than relying solely on the var(...) fallback below) so tooling that
       flags undeclared custom properties has something to resolve; the real value is overwritten
       on every zoom tick by updateLabelScale() in MapDashboard.razor.js via style.setProperty on
       this same element. */
    --place-label-scale: 1;
    /* Counter-scale for incident pin icons (issue #62), same pattern as --place-label-scale above:
       the real value is overwritten on every zoom tick by updatePinIconScale() in
       MapDashboard.razor.js so the pushpin icon stays a roughly constant screen size across the
       map's 0.5-60 relative zoom range instead of growing/shrinking with the canvas. */
    --pin-icon-scale: 1;
    /* Issue #46: the raw, unfitted full-canvas SVG paints immediately on render, before the async
       initMap()/fitBounds() JS-interop round-trip (over SignalR on InteractiveServer) applies the
       real pan/zoom fit. Stay hidden until MapDashboard.razor.js adds .map-ready once that fit has
       been applied, then fade in. */
    opacity: 0;
    transition: opacity 0.2s ease;
}

.map-svg.map-ready[b-czzaej2bgf] {
    opacity: 1;
}

/* Phase A (pins not yet loaded) and Phase B (SVG present but not yet fitted, opacity: 0 above):
   this placeholder fills the same reserved footprint as the map itself so nothing jumps in layout
   when the real map fades in. Hidden once the sibling .map-svg carries .map-ready. */
.map-placeholder[b-czzaej2bgf] {
    position: absolute;
    inset: 0;
    background-color: var(--canvas);
    opacity: 1;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.map-svg.map-ready ~ .map-placeholder[b-czzaej2bgf] {
    opacity: 0;
}

/* Faint whole-continent backdrop (issue #40 follow-up): drawn under .map-countries so it never
   visually competes with the affected/neighbor countries' own outlines, only fills in the
   surrounding context (visible once the user zooms out past the affected+neighbor set, or on
   wide/short viewports where the fitted view already shows some margin around them). */
.map-continent-context[b-czzaej2bgf] {
    pointer-events: none;
}

.map-continent-country[b-czzaej2bgf] {
    fill: #e8edf1;
    stroke: #d3dade;
    stroke-width: 0.75px;
}

.map-countries[b-czzaej2bgf] {
    pointer-events: none;
}

.map-country[b-czzaej2bgf] {
    fill: #dde5ea;
    stroke: #c3ccd1;
    stroke-width: 1px;
}

/* Cities are a static, non-interactive reference layer drawn under the incident/base pins, so
   pointer events pass straight through to whatever pin/country is beneath them. */
.map-cities[b-czzaej2bgf] {
    pointer-events: none;
}

.map-city .city-marker[b-czzaej2bgf] {
    fill: #94a3b8;
    stroke: #ffffff;
    stroke-width: 0.4px;
}

/* A country's capital (see CapitalCityByCountryCode in MapDashboard.razor.cs) always renders with
   a bigger, accent-colored marker, and always wins declutterPlaces() in MapDashboard.razor.js
   regardless of population data - useful since none of the currently committed per-country data
   carries a real population value yet. */
.map-city .capital-marker[b-czzaej2bgf] {
    fill: var(--accent);
}

/* --place-label-scale is set by declutterPlaces() in MapDashboard.razor.js on every zoom tick to
   counter the natural growth of canvas-unit font sizes as the user zooms in - without it, labels
   would keep growing with the zoom and leave no room for more towns/villages to appear; with it,
   labels stay roughly the same screen size (or shrink a little further) as the view zooms in.
   Defaults to 1 (no scaling) before the first zoom tick. Base size tuned to user feedback (10px
   reads better in the default view than the smaller sizes originally tried). */
.map-city .city-label[b-czzaej2bgf] {
    font-size: calc(10px * var(--place-label-scale, 1));
    fill: #475569;
    user-select: none;
}

.map-city .capital-label[b-czzaej2bgf] {
    font-weight: 700;
    fill: var(--accent);
}

/* Towns/villages (issue #40) are static reference layers loaded on demand as the user zooms into an
   affected country, exactly like .map-cities above: no overlap resolution/filtering, always render
   once loaded, and never intercept pointer events (clicks pass through to pins/countries below). */
.map-towns[b-czzaej2bgf],
.map-villages[b-czzaej2bgf] {
    pointer-events: none;
}

.map-town .town-marker[b-czzaej2bgf] {
    fill: #b7c3cd;
    stroke: #ffffff;
    stroke-width: 0.3px;
}

.map-town .town-label[b-czzaej2bgf] {
    font-size: calc(4.2px * var(--place-label-scale, 1));
    fill: #64748b;
    user-select: none;
}

.map-village .village-marker[b-czzaej2bgf] {
    fill: #cdd5db;
    stroke: #ffffff;
    stroke-width: 0.2px;
}

.map-village .village-label[b-czzaej2bgf] {
    font-size: calc(3.5px * var(--place-label-scale, 1));
    fill: #7c8a97;
    user-select: none;
}

/* Set by declutterPlaces() in MapDashboard.razor.js when this city/town/village marker's rendered
   box (dot + label together) collides with a higher-priority one (higher tier, then bigger
   population) already kept at the current zoom. Unlike an earlier version of this pass that only
   hid the text, the whole marker is hidden here - a dot with no visible name is exactly what issue
   #26's follow-up review asked to remove, not just declutter. */
.map-city.place-hidden[b-czzaej2bgf],
.map-town.place-hidden[b-czzaej2bgf],
.map-village.place-hidden[b-czzaej2bgf] {
    display: none;
}

/* Set by declutterPlaceMarkers() in MapDashboard.razor.js when this town/village marker's rendered
   circle overlaps a higher-priority one already kept at the current zoom - thins the dense dot-
   clouds a flat per-country cap alone can't prevent (e.g. Czechia's villages tier). Unlike
   .label-hidden above, there's no separate label to keep visible here, so the whole marker <g> is
   hidden. */
.map-town.place-hidden[b-czzaej2bgf],
.map-village.place-hidden[b-czzaej2bgf] {
    display: none;
}

.map-pin[b-czzaej2bgf] {
    cursor: pointer;
}

/* Pushpin icon (issue #62): counter-scaled by --pin-icon-scale (set by updatePinIconScale() in
   MapDashboard.razor.js on every zoom tick, mirroring the --place-label-scale pattern above) around
   its own local origin - the needle tip at (0,0), which is also the pin's true anchor point (see the
   .pin-needle path's coordinates in MapDashboard.razor) - so the icon's on-screen size stays
   roughly constant across zoom while its tip never drifts off the real projected coordinate.
   transform-origin must be pinned explicitly to that same local (0,0) (issue #65 follow-up) - without
   it, the browser's default origin is the element's own bounding-box center, which for an SVG <g>
   under CSS transform-box:view-box (the default) sits at whatever the shape's visual bounds compute
   to. #62's short pin (tip-to-head-top ~31 local units, tip near the box's vertical center) hid this,
   but #65's taller pin (~47.7 units, tip far below the box's center) made the resulting drift/scale
   error obvious: as --pin-icon-scale changed with zoom, the pin visibly grew/shrank asymmetrically
   around that off-anchor center instead of scaling cleanly around the tip, making it look like the
   pin "gets bigger" when zooming out toward the default view. transform-box on an SVG element resolves
   percentage/keyword origins against its own local user-coordinate system by default, so "0 0" here
   is exactly the tip - the same origin FormatCoord's translate(x,y) already anchors on. */
.map-pin .pin-icon[b-czzaej2bgf] {
    transform-origin: 0 0;
    transform: scale(var(--pin-icon-scale, 1));
}

.map-pin .pin-hit-area[b-czzaej2bgf] {
    fill: transparent;
    pointer-events: all;
}

/* Redesigned pin body (issue #65, replacing #62's short-triangle-needle + trapezoid-collar shape
   with a longer continuous shaft-and-tip needle flowing into the head, per the design pass shared on
   the issue) - the needle/collar/tip-highlight stay a fixed neutral color across every status; only
   the head's fill is status-driven below. Needle/collar share the same dark slate (#1e293b, unifying
   what used to be two different darks) for a single seamless shaft; .pin-needle-tip is a lighter
   overlay on just the tapered tip for a subtle metal-glint read, at a low enough opacity that it
   never competes with the needle's own contrast against the map's pale backgrounds (#eef2f5/#dde5ea)
   - the exact contrast problem #62/PR #64 hit with a light needle color.
   .mini-pin (the pincushion tray's fanned pins, issue #63) and .legend-pin (the legend's own true-
   miniature pin swatch, issue #65) share these same rules so their silhouette/colors stay identical
   to a real map pin's, without sharing the .map-pin class itself - the three intentionally never
   overlap (a mini-pin/legend-pin is never rendered on the map canvas and a .map-pin is never
   rendered in the pincushion or legend), keeping .map-pin semantically exclusive to "a real pin
   actually on the map" while still sharing the visual styling via comma-separated selectors. */
.map-pin .pin-needle[b-czzaej2bgf],
.mini-pin .pin-needle[b-czzaej2bgf],
.legend-pin .pin-needle[b-czzaej2bgf] {
    fill: #1e293b;
}

.map-pin .pin-needle-tip[b-czzaej2bgf],
.mini-pin .pin-needle-tip[b-czzaej2bgf],
.legend-pin .pin-needle-tip[b-czzaej2bgf] {
    fill: #94a3b8;
    opacity: 0.55;
}

.map-pin .pin-collar[b-czzaej2bgf],
.mini-pin .pin-collar[b-czzaej2bgf],
.legend-pin .pin-collar[b-czzaej2bgf] {
    fill: #1e293b;
}

.map-pin .pin-head[b-czzaej2bgf],
.mini-pin .pin-head[b-czzaej2bgf],
.legend-pin .pin-head[b-czzaej2bgf] {
    stroke: #ffffff;
    stroke-width: 1.2px;
    fill: #64748b;
}

/* Neutral (non-status-colored) grounding/depth cues (issue #65's "grounding" ask) - a soft ground
   shadow under the tip so a flat pin doesn't read as floating on the flat map, plus a small gloss
   highlight on the head for a touch of dimensionality without reintroducing the reference SVG's full
   gradient/gloss treatment. Map-pin only: at the pincushion/legend's much smaller render sizes these
   would be imperceptible clutter, so .mini-pin/.legend-pin keep the plain flat head instead. */
.map-pin .pin-shadow[b-czzaej2bgf] {
    fill: rgba(15, 23, 42, 0.22);
    pointer-events: none;
}

.map-pin .pin-head-gloss[b-czzaej2bgf] {
    fill: #ffffff;
    opacity: 0.28;
    pointer-events: none;
}

.map-pin .pin-head-highlight[b-czzaej2bgf] {
    fill: #ffffff;
    opacity: 0.55;
    pointer-events: none;
}

/* Status colors below drive only the pin head's fill and are kept byte-for-byte identical to the
   matching ::deep .kpi-badge.status-* border-color further down this file - see that section's own
   comment for the legend-swatch pairing convention this extends to incident pins.
   .legend-pin.status-* (issue #65) is included on every status this codebase's legend actually
   renders (see LegendPinStatuses in MapDashboard.razor.cs) so the legend's inline-SVG pin swatch
   picks up the exact same color as the real map pin/pincushion mini-pin, instead of silently
   falling back to the base .legend-pin .pin-head gray defined above. */
.map-pin.status-new .pin-head[b-czzaej2bgf],
.mini-pin.status-new .pin-head[b-czzaej2bgf],
.legend-pin.status-new .pin-head[b-czzaej2bgf] {
    fill: #EF4444;
}

.map-pin.status-open .pin-head[b-czzaej2bgf],
.mini-pin.status-open .pin-head[b-czzaej2bgf] {
    fill: #F97316;
}

.map-pin.status-inprogress .pin-head[b-czzaej2bgf],
.mini-pin.status-inprogress .pin-head[b-czzaej2bgf],
.legend-pin.status-inprogress .pin-head[b-czzaej2bgf] {
    fill: #EAB308;
}

.map-pin.status-done .pin-head[b-czzaej2bgf],
.map-pin.status-confirm .pin-head[b-czzaej2bgf],
.mini-pin.status-done .pin-head[b-czzaej2bgf],
.mini-pin.status-confirm .pin-head[b-czzaej2bgf],
.legend-pin.status-done .pin-head[b-czzaej2bgf] {
    fill: #22C55E;
}

.map-pin.status-rejected .pin-head[b-czzaej2bgf],
.mini-pin.status-rejected .pin-head[b-czzaej2bgf],
.legend-pin.status-rejected .pin-head[b-czzaej2bgf] {
    fill: #64748B;
}

/* KpiStatus.ToSupplement counterpart (see ::deep .kpi-badge.status-tosupplement below) - completes
   the full incident status set on the map, which previously had no pin color for it and silently
   fell back to the default .pin-head gray above. */
.map-pin.status-tosupplement .pin-head[b-czzaej2bgf],
.mini-pin.status-tosupplement .pin-head[b-czzaej2bgf] {
    fill: #14B8A6;
}

.map-pin.status-kraftman-base .base-marker[b-czzaej2bgf] {
    /* Diamond marker keeps technician bases visually distinct from the round incident pins. */
    fill: #64748B;
    stroke: #ffffff;
    stroke-width: 1.5px;
}

/* Service Plan pins (user feedback, 2026-09-11: every status-driven marker on the map should render
   as a pin, matching the incident pushpin shape rather than a family-specific square) - only the
   head color is status-driven, reusing the same .pin-head/.pin-needle/.pin-collar rules above.
   Colors unchanged from the previous square marker's fills. */
.map-pin.status-serviceplan-new .pin-head[b-czzaej2bgf],
.mini-pin.status-serviceplan-new .pin-head[b-czzaej2bgf],
.legend-pin.status-serviceplan-new .pin-head[b-czzaej2bgf] {
    fill: #EF4444;
}

.map-pin.status-serviceplan-commited .pin-head[b-czzaej2bgf],
.mini-pin.status-serviceplan-commited .pin-head[b-czzaej2bgf],
.legend-pin.status-serviceplan-commited .pin-head[b-czzaej2bgf] {
    fill: #0EA5E9;
}

.map-pin.status-serviceplan-active .pin-head[b-czzaej2bgf],
.mini-pin.status-serviceplan-active .pin-head[b-czzaej2bgf],
.legend-pin.status-serviceplan-active .pin-head[b-czzaej2bgf] {
    fill: #8B5CF6;
}

.map-pin.status-serviceplan-pending .pin-head[b-czzaej2bgf],
.mini-pin.status-serviceplan-pending .pin-head[b-czzaej2bgf],
.legend-pin.status-serviceplan-pending .pin-head[b-czzaej2bgf] {
    fill: #F97316;
}

/* ServicePlanStatus.ToSuplement counterpart (issue #63's no-location service plans can carry this
   status, same as the incident-side ToSupplement rule above) - previously had no color rule at all
   for either a real map pin or the pincushion, silently falling back to the browser's default black
   fill. */
.map-pin.status-serviceplan-tosuplement .pin-head[b-czzaej2bgf],
.mini-pin.status-serviceplan-tosuplement .pin-head[b-czzaej2bgf] {
    fill: #14B8A6;
}

.map-pin.pin-hidden[b-czzaej2bgf] {
    display: none;
}

.map-dashboard-page > .map-header[b-czzaej2bgf],
.map-dashboard-page > .map-mobile-filters-toggle[b-czzaej2bgf],
.map-dashboard-page > .map-filters-panel[b-czzaej2bgf] {
    flex-shrink: 0;
}

/* Mobile "Filters" toggle (razor-page-design-system's collapsible-toggle pattern): hidden on
   desktop, shown only below the narrow-phone breakpoint the map canvas itself already uses (see
   .map-dashboard-page's own max-width: 640.98px rule above) so the KPI bar and legend card don't
   push the canvas off the bottom of a phone screen. */
.map-mobile-filters-toggle[b-czzaej2bgf] {
    display: none;
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}

.icon-chevron[b-czzaej2bgf] {
    display: inline-flex;
    align-items: center;
    vertical-align: -1px;
}

.map-filters-panel[b-czzaej2bgf] {
    margin-bottom: 12px;
}

@media (max-width: 640.98px) {
    /* Below this width the header's own Legend toggle is replaced by the unified Filters toggle
       above, which shows/hides the KPI bar and legend card together. */
    .legend-toggle-btn[b-czzaej2bgf] {
        display: none;
    }

    .map-mobile-filters-toggle[b-czzaej2bgf] {
        display: flex;
    }

    .map-filters-panel.mobile-collapsed[b-czzaej2bgf] {
        display: none;
    }
}

/* The KPI buttons are rendered by the child KpiFilterBar component, so Blazor's CSS isolation
   scope attribute from this file is not applied to them directly — ::deep is required to reach
   into child component markup. */
[b-czzaej2bgf] .kpi-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

[b-czzaej2bgf] .kpi-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
    transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

[b-czzaej2bgf] .kpi-badge .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--line-soft);
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
}

[b-czzaej2bgf] .kpi-badge.active .badge {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

[b-czzaej2bgf] .kpi-badge.status-new {
    border-color: #EF4444;
    color: #EF4444;
}

[b-czzaej2bgf] .kpi-badge.status-new.active {
    background-color: #EF4444;
    color: #ffffff;
}

[b-czzaej2bgf] .kpi-badge.status-inprogress {
    border-color: #EAB308;
    color: #EAB308;
}

[b-czzaej2bgf] .kpi-badge.status-inprogress.active {
    background-color: #EAB308;
    color: #ffffff;
}

/* Service-plan-only statuses (Commited/Active/Pending). Completed/Removed plans are never
   "active" server-side, so they never reach the KPI bar and have no bucket here. */
[b-czzaej2bgf] .kpi-badge.status-commited {
    border-color: #0EA5E9;
    color: #0EA5E9;
}

[b-czzaej2bgf] .kpi-badge.status-commited.active {
    background-color: #0EA5E9;
    color: #ffffff;
}

[b-czzaej2bgf] .kpi-badge.status-active {
    border-color: #8B5CF6;
    color: #8B5CF6;
}

[b-czzaej2bgf] .kpi-badge.status-active.active {
    background-color: #8B5CF6;
    color: #ffffff;
}

[b-czzaej2bgf] .kpi-badge.status-pending {
    border-color: #F97316;
    color: #F97316;
}

[b-czzaej2bgf] .kpi-badge.status-pending.active {
    background-color: #F97316;
    color: #ffffff;
}

[b-czzaej2bgf] .kpi-badge.status-done {
    border-color: #22C55E;
    color: #22C55E;
}

[b-czzaej2bgf] .kpi-badge.status-done.active {
    background-color: #22C55E;
    color: #ffffff;
}

[b-czzaej2bgf] .kpi-badge.status-rejected {
    border-color: #64748B;
    color: #64748B;
}

[b-czzaej2bgf] .kpi-badge.status-rejected.active {
    background-color: #64748B;
    color: #ffffff;
}

/* KpiStatus.ToSupplement - low-confidence Complaint/ServicePlan rows created by the email agent
   (issue #32/#48/#49) that need a human to fill in missing details before they're actionable. */
[b-czzaej2bgf] .kpi-badge.status-tosupplement {
    border-color: #14B8A6;
    color: #14B8A6;
}

[b-czzaej2bgf] .kpi-badge.status-tosupplement.active {
    background-color: #14B8A6;
    color: #ffffff;
}

/* Legend card chrome (border/radius/padding/typography) - restyled to the design system's tokens.
   The swatch colors below (.legend-swatch.status-*) are a matched pair with the live pin colors
   (.map-pin.status-* above) and must stay byte-for-byte identical - do not edit their hex values. */
.legend-card[b-czzaej2bgf] {
    margin-top: 10px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.legend-items[b-czzaej2bgf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.legend-item[b-czzaej2bgf] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 13px;
    color: var(--ink-soft);
}

.legend-swatch[b-czzaej2bgf] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Legend pin swatch (issue #65): a true inline-SVG miniature of the real map pin shape (see the
   shared .pin-head/.pin-needle/.pin-collar color rules above), replacing the old CSS-trick rotated-
   square-corner teardrop approximation - the legend now shows the exact same silhouette that renders
   on the map, just scaled down, instead of a different shape that merely looked pin-ish. */
.legend-pin[b-czzaej2bgf] {
    display: inline-block;
    width: 10px;
    height: 24px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Status-driven pin swatches (issue #62; extended to Service Plan statuses on 2026-09-11 user
   feedback so every status badge's marker renders as the same pin shape on the map): a teardrop
   "map pin" outline (circle with one corner square, rotated -45deg to point down) via the classic
   CSS pin trick, replacing the plain dot/square so the legend matches the pushpin icon's silhouette
   on the map. Technician Base and City are reference/location markers, not statuses, and keep their
   own distinct shapes below. */
.legend-swatch.status-new[b-czzaej2bgf],
.legend-swatch.status-open[b-czzaej2bgf],
.legend-swatch.status-inprogress[b-czzaej2bgf],
.legend-swatch.status-done[b-czzaej2bgf],
.legend-swatch.status-rejected[b-czzaej2bgf],
.legend-swatch.status-tosupplement[b-czzaej2bgf],
.legend-swatch.status-serviceplan-new[b-czzaej2bgf],
.legend-swatch.status-serviceplan-commited[b-czzaej2bgf],
.legend-swatch.status-serviceplan-active[b-czzaej2bgf],
.legend-swatch.status-serviceplan-pending[b-czzaej2bgf],
.legend-swatch.status-serviceplan-tosuplement[b-czzaej2bgf] {
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

.legend-swatch.status-new[b-czzaej2bgf] {
    background-color: #EF4444;
}

.legend-swatch.status-open[b-czzaej2bgf] {
    background-color: #F97316;
}

.legend-swatch.status-inprogress[b-czzaej2bgf] {
    background-color: #EAB308;
}

.legend-swatch.status-done[b-czzaej2bgf] {
    background-color: #22C55E;
}

.legend-swatch.status-rejected[b-czzaej2bgf] {
    background-color: #64748B;
}

.legend-swatch.status-tosupplement[b-czzaej2bgf] {
    background-color: #14B8A6;
}

.legend-swatch.status-kraftman-base[b-czzaej2bgf] {
    background-color: #64748B;
    border-radius: 2px;
    transform: rotate(45deg);
}


.legend-swatch.status-serviceplan-new[b-czzaej2bgf] {
    background-color: #EF4444;
}

.legend-swatch.status-serviceplan-commited[b-czzaej2bgf] {
    background-color: #0EA5E9;
}

.legend-swatch.status-serviceplan-active[b-czzaej2bgf] {
    background-color: #8B5CF6;
}

.legend-swatch.status-serviceplan-pending[b-czzaej2bgf] {
    background-color: #F97316;
}

/* ServicePlanStatus.ToSuplement counterpart - see the matching .mini-pin/.map-pin rule above for why
   this was previously missing entirely. Used by the pincushion picker's status swatch (issue #63). */
.legend-swatch.status-serviceplan-tosuplement[b-czzaej2bgf] {
    background-color: #14B8A6;
}

.legend-swatch-city[b-czzaej2bgf] {
    background-color: #94a3b8;
    width: 8px;
    height: 8px;
}

#map-tooltip-container[b-czzaej2bgf] {
    position: fixed;
    /* Clickable so the popup itself can be clicked (not just the pin underneath it) to navigate to
       the incident/service-plan detail page - see handleTooltipClick() in MapDashboard.razor.js.
       Technician-base popups have no click handler, so pointer-events here is harmless for them. */
    pointer-events: auto;
    z-index: 2000;
    display: none;
    max-width: 260px;
}

/* Tooltip content is injected client-side via JS (not compiled by Blazor), so descendant
   selectors need ::deep to keep matching without the component's scope attribute. */
#map-tooltip-container[b-czzaej2bgf]  .card {
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Only incident/service-plan popups navigate on click (see handleTooltipClick in
   MapDashboard.razor.js); the technician-base popup has no click handler, so it keeps the
   default cursor instead of misleadingly looking clickable. */
#map-tooltip-container[b-czzaej2bgf]  .map-tooltip-clickable {
    cursor: pointer;
}

#map-tooltip-container[b-czzaej2bgf]  .map-tooltip-photo {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 0.375rem 0.375rem 0 0;
}

/* Pincushion tray (issue #63): plain CSS position:absolute overlay on .map-canvas-wrapper (which is
   itself position:relative - see above), sitting outside the pannable/zoomable <svg id="map-dashboard-svg">
   entirely so it never moves with svg-pan-zoom regardless of pan/zoom/reset. Below the tooltip's
   z-index (2000) so a hovered pin's popup still draws over it, but above the map/legend chrome. */
.pincushion[b-czzaej2bgf] {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1500;
    cursor: pointer;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
}

.pincushion:focus-visible[b-czzaej2bgf] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Height grown 72px -> 81px (issue #65 follow-up), matching the viewBox's own 519 -> 584 unit growth
   (same units-per-px ratio, ~7.2) so the cushion body/seam render at their original size - only the
   restored-to-3.2 mini-pins actually use the extra headroom this creates above the cushion body. */
.pincushion-icon[b-czzaej2bgf] {
    display: block;
    width: 78px;
    height: 81px;
}

/* Flattened to a single solid fill (no gradient/gloss), matching #62's flat-fill pin direction -
   geometry taken from the pincushion_1.svg reference asset attached to issue #63. */
.pincushion-body[b-czzaej2bgf] {
    fill: #c83d3a;
    stroke: #7a1f1d;
    stroke-width: 4px;
    stroke-linejoin: round;
}

.pincushion-seam[b-czzaej2bgf] {
    fill: none;
    stroke: #8f2622;
    stroke-width: 3px;
    stroke-linecap: round;
    opacity: 0.55;
}

/* Plain, invisible click-catcher (no JS) that closes the picker on any outside click without
   navigating anywhere - the picker/pincushion themselves sit above it via z-index and stop the click
   from reaching it (@onclick:stopPropagation on .pincushion; the picker's own buttons handle their
   own clicks directly). */
.pincushion-backdrop[b-czzaej2bgf] {
    position: fixed;
    inset: 0;
    z-index: 1490;
    background: transparent;
}

/* position: fixed (not absolute within .map-canvas-wrapper) so the picker is never clipped by that
   wrapper's own "overflow: hidden" (load-bearing for containing svg-pan-zoom's canvas, so it can't
   just be removed) - a short window/viewport left an absolutely-positioned picker anchored to the
   wrapper's bottom edge growing upward past the wrapper's own top edge and disappearing entirely
   (baler-responsive-reviewer finding, issue #63). top/left are computed in JS from the pincushion
   icon's actual on-screen position (positionPincushionPicker in MapDashboard.razor.js, called from
   OnAfterRenderAsync right after the picker enters the DOM) - the same escape-the-clipping-ancestor
   approach #map-tooltip-container already uses for the hover tooltip. Starts transparent so the
   unpositioned (0,0-anchored) flash before that JS call runs is never visible. */
.pincushion-picker[b-czzaej2bgf] {
    position: fixed;
    z-index: 1500;
    width: 260px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    opacity: 0;
}

.pincushion-picker.pincushion-picker-positioned[b-czzaej2bgf] {
    opacity: 1;
    transition: opacity 0.1s ease;
}

.pincushion-picker-header[b-czzaej2bgf] {
    position: sticky;
    top: 0;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
}

.pincushion-picker-list[b-czzaej2bgf] {
    list-style: none;
    margin: 0;
    padding: 4px;
}

.pincushion-picker-item[b-czzaej2bgf] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 8px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    color: var(--ink);
}

.pincushion-picker-item:hover[b-czzaej2bgf],
.pincushion-picker-item:focus-visible[b-czzaej2bgf] {
    background: var(--accent-soft);
}

.pincushion-picker-swatch[b-czzaej2bgf] {
    flex-shrink: 0;
}

.pincushion-picker-text[b-czzaej2bgf] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pincushion-picker-title[b-czzaej2bgf] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pincushion-picker-subtitle[b-czzaej2bgf] {
    font-size: 11px;
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Defensive truncation, matching .pincushion-picker-title above - no current ComplaintState/
   ServicePlanStatus value is long enough to actually overflow this (baler-responsive-reviewer
   checked), but nothing stops a future status name from being longer or two words. */
.pincushion-picker-status[b-czzaej2bgf] {
    flex-shrink: 0;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--ink-soft);
}

@media (max-width: 640.98px) {
    .pincushion[b-czzaej2bgf] {
        left: 10px;
        bottom: 10px;
    }

    .pincushion-icon[b-czzaej2bgf] {
        width: 58px;
        height: 61px;
    }

    .pincushion-picker[b-czzaej2bgf] {
        width: 220px;
    }
}
/* /Components/Pages/RalCodes/RalCodeDetail.razor.rz.scp.css */
.ral-code-detail-page[b-5svzx0j8os] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
}

.eyebrow[b-5svzx0j8os] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 4px;
}

.back-link[b-5svzx0j8os] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	margin-bottom: 8px;
}

.back-link:hover[b-5svzx0j8os] {
	color: var(--accent);
}

/* Sticky header, similar to a spreadsheet's frozen panes */

.topbar[b-5svzx0j8os] {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 22px;
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--canvas);
	/* Bleed to the edge of MainLayout's content padding - kept in sync with that
	   padding at each breakpoint, see the 640px and 349px overrides below. */
	margin-left: -24px;
	margin-right: -24px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--line);
	box-shadow: 0 4px 14px rgba(15, 23, 32, 0.04);
}

.title-row[b-5svzx0j8os] {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.title-row h1[b-5svzx0j8os] {
	font-size: 22px;
	margin: 0;
	letter-spacing: -0.01em;
	min-width: 0;
	overflow-wrap: anywhere;
}

.actions[b-5svzx0j8os] {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.actions .btn[b-5svzx0j8os] {
	white-space: nowrap;
}

.btn-danger-ghost[b-5svzx0j8os] {
	background: var(--surface);
	border-color: #f3c9cb;
	color: #a3262b;
}

.btn-danger-ghost:hover[b-5svzx0j8os] {
	background: #fbeaea;
}

.btn-outline[b-5svzx0j8os] {
	background: var(--surface);
	border-color: var(--line);
	color: var(--ink-soft);
}

.btn-outline:hover[b-5svzx0j8os] {
	border-color: var(--accent);
	color: var(--accent);
}

/* Layout */

.card[b-5svzx0j8os] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 16px;
}

.card h2[b-5svzx0j8os] {
	font-size: 14px;
	margin: 0 0 16px;
	font-weight: 700;
}

.card h2 small[b-5svzx0j8os] {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 2px;
}

.field-row[b-5svzx0j8os] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}

.field-row.cols-1[b-5svzx0j8os] {
	grid-template-columns: minmax(0, 1fr);
}

.field-row.cols-4[b-5svzx0j8os] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field[b-5svzx0j8os] {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Code field: text input + "Open RAL Picker" button (IconPalette) sharing one row */

.code-input-group[b-5svzx0j8os] {
	display: flex;
	gap: 8px;
}

.code-input-group input[b-5svzx0j8os] {
	flex: 1;
	min-width: 0;
}

.btn-icon[b-5svzx0j8os] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-soft);
	cursor: pointer;
	flex-shrink: 0;
}

.btn-icon:hover[b-5svzx0j8os] {
	border-color: var(--accent);
	color: var(--accent);
}

/* Live color preview: swatch + native color input side by side, matching the
   38px height of the other fields' text inputs in the same row. The swatch's
   background is per-record RGB data, so - like the list page's swatches -
   it can only be set inline, never via a CSS class. */

.color-preview-row[b-5svzx0j8os] {
	display: flex;
	gap: 8px;
	align-items: center;
}

.color-swatch[b-5svzx0j8os] {
	flex: 1;
	height: 38px;
	border-radius: 8px;
	border: 1px solid var(--line);
	box-sizing: border-box;
}

.color-native-input[b-5svzx0j8os] {
	width: 48px;
	height: 38px;
	padding: 2px;
	border: 1px solid var(--line);
	border-radius: 8px;
	cursor: pointer;
	box-sizing: border-box;
}

/* RAL Picker modal: Bootstrap's modal/modal-dialog/modal-content wrapper is
   kept as-is (same convention as ComplaintDetail's and AddressPickerModal's
   modals - none of them restyle the Bootstrap wrapper). Only the swatch
   grid content inside modal-body is restyled here, using this page's own
   CSS custom properties instead of the many inline style="..." attributes
   the pre-redesign version used for structure/spacing (the per-swatch
   background/text color still has to be inline - it's per-record RGB data,
   not a fixed design token). */

.picker-search-wrap[b-5svzx0j8os] {
	position: relative;
	margin-bottom: 16px;
}

.picker-search-wrap[b-5svzx0j8os]  .icon-search {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-faint);
	pointer-events: none;
}

.picker-search-input[b-5svzx0j8os] {
	padding-left: 36px;
}

.picker-grid[b-5svzx0j8os] {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.picker-swatch[b-5svzx0j8os] {
	width: 120px;
	height: 80px;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 12.5px;
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
	padding: 8px;
	box-sizing: border-box;
}

.picker-swatch:hover[b-5svzx0j8os] {
	transform: scale(1.05);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	z-index: 10;
}

.picker-swatch-category[b-5svzx0j8os] {
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.picker-swatch-code[b-5svzx0j8os] {
	margin-top: 2px;
}

@media (max-width: 767.98px) {
	.picker-swatch[b-5svzx0j8os] {
		width: 100px;
		height: 60px;
	}
}

/* Same breakpoint rationale as ComplaintDetail.razor.css/DistributorDetail.razor.css:
   1400px is wide enough that resizing an ordinary desktop browser window down
   (not just real phones/foldables) switches this page to its compact
   single-column layout too. */

@media (max-width: 1400px) {
	.field-row[b-5svzx0j8os] {
		grid-template-columns: minmax(0, 1fr);
	}

	.field-row.cols-4[b-5svzx0j8os] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.topbar[b-5svzx0j8os] {
		flex-direction: column;
	}

	.actions[b-5svzx0j8os] {
		width: 100%;
	}

	.actions .btn[b-5svzx0j8os] {
		flex: 1;
		justify-content: center;
	}
}

/* MainLayout.razor.css drops .content padding to 16px at this same
   breakpoint (max-width: 640.98px) - keep the topbar bleed in sync so it
   doesn't overflow the content box and cause a page-level horizontal
   scrollbar on normal phones. */
@media (max-width: 640px) {
	.topbar[b-5svzx0j8os] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 16px;
	}
}

@media (max-width: 349px) {
	.topbar[b-5svzx0j8os] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 12px 16px;
	}

	.title-row h1[b-5svzx0j8os] {
		font-size: 18px;
	}

	.actions .btn[b-5svzx0j8os] {
		font-size: 12px;
		padding: 0 10px;
		height: 32px;
	}

	.field-row.cols-4[b-5svzx0j8os] {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* /Components/Pages/RalCodes/RalCodeList.razor.rz.scp.css */
.ral-codes-page[b-naph9mqolt] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
	/* Fill the remaining viewport height (MainLayout's .content is a flex
	   column, see MainLayout.razor.css) so the table below can grow all the
	   way to the bottom of the screen and scroll internally instead of the
	   whole page scrolling. */
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.eyebrow[b-naph9mqolt] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.btn-new[b-naph9mqolt] {
	white-space: nowrap;
}

/* Toolbar: just Search + a total-count readout - RalCode has no
   state/priority-style dimension worth a stat-card grid or chip filters (see
   razor-page-design-system's guidance to skip stat cards rather than invent
   fake categories). Mirrors DistributorList.razor.css. */

.toolbar[b-naph9mqolt] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 18px 20px;
}

.toolbar-row[b-naph9mqolt] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

.toolbar-row .search-wrap[b-naph9mqolt] {
	flex: 1 1 260px;
	max-width: 420px;
}

.search-wrap[b-naph9mqolt] {
	position: relative;
}

/* IconSearch is a separate child component, so its rendered <svg> does not
   carry this file's CSS-isolation scope attribute - crossing that component
   boundary requires ::deep, otherwise this rule silently never matches and
   the icon falls back to normal static-flow positioning. */
.search-wrap[b-naph9mqolt]  .icon-search {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-faint);
	pointer-events: none;
}

/* Small functional icons (plus, pencil, sort direction) rendered as inline
   SVG instead of an icon font - see razor-page-design-system's Icons
   section. currentColor lets each pick up its surrounding text/link color
   automatically. icon-plus/icon-pencil/sort-icon are CssClass values handed
   to child icon components, so (like icon-search above) reaching their
   rendered <svg> requires ::deep. */
[b-naph9mqolt] .icon-plus,
[b-naph9mqolt] .icon-pencil,
[b-naph9mqolt] .sort-icon {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

.search-input[b-naph9mqolt] {
	padding-left: 36px;
}

.total-count[b-naph9mqolt] {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	white-space: nowrap;
}

/* Table */

.table-card[b-naph9mqolt] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	max-width: 100%;
	/* Grow to fill the rest of the page (ral-codes-page is a flex column
	   that fills the viewport) instead of only being as tall as its rows,
	   then scroll its own content - both horizontally (wide table) and
	   vertically (many rows) - only when it doesn't fit, rather than the
	   whole page scrolling and leaving dead space below a short table. */
	flex: 1;
	min-height: 0;
	overflow: auto;
	margin-bottom: 4px;
}

.ral-codes-table[b-naph9mqolt] {
	width: 100%;
	border-collapse: collapse;
}

.ral-codes-table thead th[b-naph9mqolt] {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: #fafbfc;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.ral-codes-table thead tr:first-child th:first-child[b-naph9mqolt] { border-top-left-radius: 12px; cursor: default; }
.ral-codes-table thead tr:first-child th:last-child[b-naph9mqolt] { border-top-right-radius: 12px; cursor: default; }
.ral-codes-table tbody tr:last-child td:first-child[b-naph9mqolt] { border-bottom-left-radius: 12px; }
.ral-codes-table tbody tr:last-child td:last-child[b-naph9mqolt] { border-bottom-right-radius: 12px; }

.ral-codes-table tbody td[b-naph9mqolt] {
	padding: 14px 18px;
	font-size: 14px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}

.ral-codes-table tbody tr:last-child td[b-naph9mqolt] { border-bottom: none; }
.ral-codes-table tbody tr:hover[b-naph9mqolt] { background: #f8fafc; }
.ral-codes-table tbody tr.clickable-row[b-naph9mqolt] { cursor: pointer; }

.cell-category[b-naph9mqolt] { font-weight: 600; }
.cell-code[b-naph9mqolt] { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cell-rgb[b-naph9mqolt] { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Color swatch - the whole point of this page, so it stays prominent in
   both the table row and the mobile card below. The background color is
   per-row data (any RGB combination), so it can only be set inline - never
   driven by a CSS class the way status colors are elsewhere in the app. */

.swatch[b-naph9mqolt] {
	display: inline-block;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: 1px solid var(--line);
}

/* Row actions */

.row-actions[b-naph9mqolt] {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}

.btn-load-more[b-naph9mqolt] {
	min-width: 160px;
}

/* Mobile card list: hidden on desktop, shown instead of the table on mobile */

.mobile-list[b-naph9mqolt] {
	display: none;
}

.m-card[b-naph9mqolt] {
	display: block;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
	text-decoration: none;
	color: inherit;
}

.m-card:hover[b-naph9mqolt] {
	border-color: var(--accent);
}

.m-card-top[b-naph9mqolt] {
	display: flex;
	align-items: center;
	gap: 10px;
}

.m-card-swatch[b-naph9mqolt] {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 1px solid var(--line);
	flex-shrink: 0;
}

.m-card-title[b-naph9mqolt] {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	color: var(--accent);
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-sub[b-naph9mqolt] {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	color: var(--ink-soft);
	font-size: 12.5px;
	margin-top: 6px;
}

.m-card-sub span[b-naph9mqolt] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Mobile layout: compact single-column view. Breakpoint is 1400px -
   deliberately much wider than any phone or opened foldable (which top out
   around 430px / 900px respectively) - it also covers an ordinary desktop
   browser window simply resized narrower, so shrinking the window itself
   switches to the compact card view instead of squeezing the desktop table
   layout. See ComplaintList.razor.css / DistributorList.razor.css. */

@media (max-width: 1400px) {
	.topbar[b-naph9mqolt] {
		align-items: flex-start;
	}

	.btn-new[b-naph9mqolt] {
		width: 100%;
		justify-content: center;
	}

	.table-card[b-naph9mqolt] {
		display: none;
	}

	.mobile-list[b-naph9mqolt] {
		display: block;
	}

	.toolbar-row[b-naph9mqolt] {
		gap: 10px 16px;
	}
}

/* Extra-narrow tier: foldable cover screens (Galaxy Z Fold/Flip closed, Pixel
   Fold closed) run as narrow as ~280px, well below any normal phone. Tighten
   spacing further so nothing wraps awkwardly or overflows. */

@media (max-width: 349px) {
	.toolbar[b-naph9mqolt] {
		padding: 14px 14px;
	}

	.m-card[b-naph9mqolt] {
		padding: 10px 12px;
	}

	.m-card-title[b-naph9mqolt] {
		font-size: 13.5px;
	}

	.btn-new[b-naph9mqolt] {
		font-size: 12.5px;
	}

	.total-count[b-naph9mqolt] {
		font-size: 12px;
	}
}
/* /Components/Pages/ServicePlanning/Absence.razor.rz.scp.css */
.absence-page[b-njraplfo2v] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--surface: #ffffff;
}

.hover-available:hover[b-njraplfo2v] {
	background-color: rgba(25, 135, 84, 0.08) !important;
	border-color: rgba(25, 135, 84, 0.25) !important;
}

/* Absence.Status visual treatment: a small corner status-chip overlaid on the
   Type-colored badge, reusing razor-page-design-system's badge-token hex
   values verbatim (see docs/design/absence-mobile/31-1-absence-weekly-timetable-mobile-design.md).
   Approved has no chip at all - the absence of a chip is itself the
   "approved/normal" signal. */
.absence-badge[b-njraplfo2v] {
	position: relative;
}

.status-chip[b-njraplfo2v] {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 15px;
	height: 15px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	line-height: 1;
	border: 1.5px solid var(--surface, #fff);
	box-shadow: 0 1px 2px rgba(15, 23, 32, 0.15);
}

.status-chip-pending[b-njraplfo2v] { background: #fef3e6; color: #93590c; } /* == .badge-progress */
.status-chip-rejected[b-njraplfo2v] { background: #fbeaea; color: #a3262b; } /* == .badge-rejected */

/* Legend preview: the same .status-chip classes/colors as the grid, but shown
   as a small standalone inline icon instead of a corner overlay - .legend-chip-demo
   supplies the positioned box the (normally absolutely-positioned) chip needs. */
.legend-chip-demo[b-njraplfo2v] {
	position: relative;
	display: inline-flex;
	width: 15px;
	height: 15px;
	vertical-align: -3px;
}

.legend-chip-demo .status-chip[b-njraplfo2v] {
	position: static;
	border: none;
	box-shadow: none;
}

/* Mobile agenda cards: one card per employee, hidden on desktop and shown
   instead of the table below 1024px (see media query below). Reuses the
   .mobile-list/.m-card pattern already established in ComplaintList.razor.css. */

.mobile-list[b-njraplfo2v] {
	display: none;
}

.m-card[b-njraplfo2v] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
}

.m-card-title[b-njraplfo2v] {
	min-width: 0;
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-sub[b-njraplfo2v] {
	min-width: 0;
	color: var(--ink-soft);
	font-size: 12.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Each employee card holds two 7-column grids (one per week) instead of the
   desktop table's single 14-column row - same 14 cells, just reflowed. */
.m-card-day-week[b-njraplfo2v] {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
	margin-top: 8px;
}

.m-card-day-chip[b-njraplfo2v] {
	min-width: 0;
	position: relative;
	text-align: center;
	border-radius: 6px;
	cursor: pointer;
}

.m-card-day-label[b-njraplfo2v] {
	min-width: 0;
	font-size: 0.6rem;
	color: var(--ink-faint);
	text-transform: uppercase;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-day-pill[b-njraplfo2v] {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 32px;
	margin-top: 2px;
	padding: 3px 2px;
	border-radius: 6px;
	font-size: 0.55rem;
	line-height: 1.15;
}

.m-card-day-pill-text[b-njraplfo2v] {
	min-width: 0;
	display: block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
}

.m-card-day-empty[b-njraplfo2v] {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	margin-top: 2px;
	border-radius: 6px;
	border: 1px dashed rgba(0, 0, 0, 0.08);
	background-color: rgba(25, 135, 84, 0.02);
	color: #198754;
	opacity: 0.75;
}

/* Switch from the horizontally-scrollable 14-column table to the agenda card
   list at 1024px, not the app's usual 1400px list-page tier: the table
   already hardcodes min-width:1200px and scrolls (with a mouse) well before
   1400px, so 1024-1400px stays a tolerable resized-desktop-window experience;
   below ~1024px (touch-primary tablet portrait and narrower) a vertical card
   list is materially better than horizontal scroll. See the #31.1 design doc
   for the full breakpoint rationale. */
@media (max-width: 1024px) {
	.table-responsive[b-njraplfo2v] {
		display: none;
	}

	.mobile-list[b-njraplfo2v] {
		display: block;
	}
}

/* Extra-narrow tier: foldable cover screens run as narrow as ~280px. */
@media (max-width: 349px) {
	.m-card[b-njraplfo2v] {
		padding: 10px 12px;
	}

	.m-card-day-week[b-njraplfo2v] {
		gap: 2px;
	}

	.m-card-day-label[b-njraplfo2v] {
		font-size: 0.55rem;
	}

	.m-card-day-pill[b-njraplfo2v],
	.m-card-day-empty[b-njraplfo2v] {
		min-height: 28px;
	}

	/* The narrower 2px grid gap at this tier isn't enough room for the
	   15px/-4px corner chip - shrink it to match, or it visually spills
	   into the neighboring day cell. */
	.status-chip[b-njraplfo2v] {
		width: 12px;
		height: 12px;
		top: -3px;
		right: -3px;
	}
}
/* /Components/Pages/ServicePlanning/BusinessTrips.razor.rz.scp.css */
.business-trips-page[b-8ygdmtw2b8] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
	/* Fill the remaining viewport height (MainLayout's .content is a flex
	   column, see MainLayout.razor.css) so the table below can grow all the
	   way to the bottom of the screen and scroll internally instead of the
	   whole page scrolling. */
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.eyebrow[b-8ygdmtw2b8] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.btn-new[b-8ygdmtw2b8] {
	white-space: nowrap;
}

[b-8ygdmtw2b8] .icon-plus,
[b-8ygdmtw2b8] .icon-pencil {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

.btn-outline[b-8ygdmtw2b8] {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink-soft);
}

.btn-outline:hover[b-8ygdmtw2b8] {
	border-color: var(--accent);
	color: var(--accent);
}

.btn-danger-ghost[b-8ygdmtw2b8] {
	background: var(--surface);
	border: 1px solid #f3c9cb;
	color: #a3262b;
}

.btn-danger-ghost:hover[b-8ygdmtw2b8] {
	background: #fbeaea;
}

.btn-sm[b-8ygdmtw2b8] {
	height: 30px;
	padding: 0 11px;
	font-size: 12.5px;
}

/* Table */

.table-card[b-8ygdmtw2b8] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	max-width: 100%;
	/* Grow to fill the rest of the page instead of only being as tall as its
	   rows, then scroll its own content only when it doesn't fit, rather
	   than the whole page scrolling and leaving dead space below a short
	   table. */
	flex: 1;
	min-height: 0;
	overflow: auto;
	margin-bottom: 4px;
}

.trips-table[b-8ygdmtw2b8] {
	width: 100%;
	border-collapse: collapse;
}

.trips-table thead th[b-8ygdmtw2b8] {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: #fafbfc;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

.trips-table thead tr:first-child th:first-child[b-8ygdmtw2b8] { border-top-left-radius: 12px; }
.trips-table thead tr:first-child th:last-child[b-8ygdmtw2b8] { border-top-right-radius: 12px; }
.trips-table tbody tr:last-child td:first-child[b-8ygdmtw2b8] { border-bottom-left-radius: 12px; }
.trips-table tbody tr:last-child td:last-child[b-8ygdmtw2b8] { border-bottom-right-radius: 12px; }

.trips-table tbody td[b-8ygdmtw2b8] {
	padding: 14px 18px;
	font-size: 14px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}

.trips-table tbody tr:last-child td[b-8ygdmtw2b8] { border-bottom: none; }
.trips-table tbody tr:hover[b-8ygdmtw2b8] { background: #f8fafc; }

.cell-person[b-8ygdmtw2b8] { font-weight: 600; }
.cell-date[b-8ygdmtw2b8] { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-destination[b-8ygdmtw2b8] { font-weight: 500; }

/* Purpose hover tooltip - same pattern as ComplaintList's Notes column */

.notes-wrap[b-8ygdmtw2b8] {
	position: relative;
	display: inline-block;
	max-width: 260px;
	vertical-align: middle;
}

.cell-notes-text[b-8ygdmtw2b8] {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ink-soft);
}

.notes-tooltip[b-8ygdmtw2b8] {
	position: absolute;
	top: calc(100% + 9px);
	left: 0;
	min-width: 220px;
	max-width: 320px;
	background: #1f2933;
	color: #fff;
	font-size: 12.5px;
	line-height: 1.5;
	padding: 10px 13px;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(15, 23, 32, 0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.12s ease, transform 0.12s ease;
	z-index: 40;
	white-space: normal;
	pointer-events: none;
}

.notes-tooltip[b-8ygdmtw2b8]::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 16px;
	border: 6px solid transparent;
	border-bottom-color: #1f2933;
}

.notes-wrap:hover .notes-tooltip[b-8ygdmtw2b8] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Row actions */

.row-actions[b-8ygdmtw2b8] {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}

.btn-icon[b-8ygdmtw2b8] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 7px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-soft);
	cursor: pointer;
	flex-shrink: 0;
	font-size: 16px;
	line-height: 1;
}

.btn-icon:hover[b-8ygdmtw2b8] {
	border-color: var(--accent);
	color: var(--accent);
}

.btn-icon-danger:hover[b-8ygdmtw2b8] {
	border-color: #f3c9cb;
	color: #a3262b;
	background: #fbeaea;
}

/* Modal form (Bootstrap modal wrapper kept as-is, same convention as
   RalCodeDetail's RAL Picker - only the field grid inside modal-body is
   restyled here). */

.field-row[b-8ygdmtw2b8] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}

.field-row.cols-1[b-8ygdmtw2b8] {
	grid-template-columns: minmax(0, 1fr);
}

.field[b-8ygdmtw2b8] {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Date fields: overlay a calendar icon, same convention as
   ComplaintDetail.razor.css/ServicePlanDetail.razor.css. */

.date-field[b-8ygdmtw2b8] {
	position: relative;
	display: flex;
	align-items: center;
}

.date-field .cal-icon[b-8ygdmtw2b8] {
	position: absolute;
	left: 11px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	pointer-events: none;
	z-index: 1;
}

.date-field input[b-8ygdmtw2b8] {
	padding-left: 32px !important;
	width: 100%;
}

.date-field input[b-8ygdmtw2b8]::-webkit-calendar-picker-indicator {
	display: none;
	-webkit-appearance: none;
}

/* Mobile card list: hidden on desktop, shown instead of the table on mobile */

.mobile-list[b-8ygdmtw2b8] {
	display: none;
}

.m-card[b-8ygdmtw2b8] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
}

.m-card-top[b-8ygdmtw2b8] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.m-card-title[b-8ygdmtw2b8] {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	color: var(--ink);
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-dates[b-8ygdmtw2b8] {
	flex-shrink: 0;
	color: var(--ink-soft);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.m-card-sub[b-8ygdmtw2b8] {
	display: flex;
	color: var(--ink-soft);
	font-size: 12.5px;
	margin-top: 4px;
}

.m-card-sub span[b-8ygdmtw2b8] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-notes[b-8ygdmtw2b8] {
	margin-top: 6px;
	color: var(--ink-soft);
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-actions[b-8ygdmtw2b8] {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.m-card-actions .btn[b-8ygdmtw2b8] {
	flex: 1;
	justify-content: center;
}

/* Mobile layout: compact single-column view. Breakpoint is 1400px -
   deliberately much wider than any phone or opened foldable so an ordinary
   desktop browser window resized down also switches to the compact card
   view (see razor-page-design-system's Breakpoint values section). */

@media (max-width: 1400px) {
	.topbar[b-8ygdmtw2b8] {
		align-items: flex-start;
	}

	.btn-new[b-8ygdmtw2b8] {
		width: 100%;
		justify-content: center;
	}

	.table-card[b-8ygdmtw2b8] {
		display: none;
	}

	.mobile-list[b-8ygdmtw2b8] {
		display: block;
	}

	.field-row[b-8ygdmtw2b8] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Extra-narrow tier: foldable cover screens (Galaxy Z Fold/Flip closed, Pixel
   Fold closed) run as narrow as ~280px, well below any normal phone. */

@media (max-width: 349px) {
	.m-card[b-8ygdmtw2b8] {
		padding: 10px 12px;
	}

	.m-card-title[b-8ygdmtw2b8] {
		font-size: 13.5px;
	}

	.btn-new[b-8ygdmtw2b8] {
		font-size: 12.5px;
	}
}
/* /Components/Pages/ServicePlanning/CarManagement.razor.rz.scp.css */
.car-management-page[b-0ocp2lig4j] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
}

.eyebrow[b-0ocp2lig4j] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.btn-new[b-0ocp2lig4j] {
	white-space: nowrap;
}

[b-0ocp2lig4j] .icon-plus,
[b-0ocp2lig4j] .icon-pencil {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

.btn-outline[b-0ocp2lig4j] {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink-soft);
}

.btn-outline:hover[b-0ocp2lig4j] {
	border-color: var(--accent);
	color: var(--accent);
}

/* Fleet card grid: not paginated (a small, bounded list), so this stays a
   responsive card grid rather than converting to a table+mobile-card-list
   pattern - but reflows sensibly all the way down to foldable-cover width. */

.cars-grid[b-0ocp2lig4j] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.card[b-0ocp2lig4j] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin: 0;
}

.car-card-head[b-0ocp2lig4j] {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 4px;
}

.car-card-head h2[b-0ocp2lig4j] {
	font-size: 14px;
	margin: 0;
	font-weight: 700;
	min-width: 0;
	flex: 1;
}

.car-card-head h2 small[b-0ocp2lig4j] {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 2px;
}

.car-name[b-0ocp2lig4j] {
	overflow-wrap: anywhere;
}

.car-card-actions[b-0ocp2lig4j] {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.btn-icon[b-0ocp2lig4j] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 7px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-soft);
	cursor: pointer;
	flex-shrink: 0;
	font-size: 16px;
	line-height: 1;
}

.btn-icon:hover[b-0ocp2lig4j] {
	border-color: var(--accent);
	color: var(--accent);
}

.btn-icon-danger:hover[b-0ocp2lig4j] {
	border-color: #f3c9cb;
	color: #a3262b;
	background: #fbeaea;
}

/* Spec rows - same key/value convention as ComplaintDetail.razor.css's
   .side-card .kv (small uppercase eyebrow label + right-aligned value)
   instead of Bootstrap's .row/.col-6 split. */

.kv[b-0ocp2lig4j] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 13px;
}

.kv:last-of-type[b-0ocp2lig4j] {
	border-bottom: none;
}

.kv .k[b-0ocp2lig4j] {
	color: var(--ink-faint);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	flex-shrink: 0;
}

.kv .v[b-0ocp2lig4j] {
	font-weight: 600;
	text-align: right;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.car-info[b-0ocp2lig4j] {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--line-soft);
	font-size: 13px;
	color: var(--ink-soft);
}

/* Modal form (Bootstrap modal wrapper kept as-is, same convention as
   RalCodeDetail's RAL Picker - only the field grid inside modal-body is
   restyled here). */

.field-row[b-0ocp2lig4j] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}

.field-row.cols-1[b-0ocp2lig4j] {
	grid-template-columns: minmax(0, 1fr);
}

.field-row.cols-4[b-0ocp2lig4j] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field[b-0ocp2lig4j] {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pallet-check[b-0ocp2lig4j] {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
}

/* Same breakpoint rationale as ComplaintDetail.razor.css/RalCodeDetail.razor.css:
   1400px is wide enough that resizing an ordinary desktop browser window down
   (not just real phones/foldables) switches this page to its compact layout too. */

@media (max-width: 1400px) {
	.topbar[b-0ocp2lig4j] {
		align-items: flex-start;
	}

	.btn-new[b-0ocp2lig4j] {
		width: 100%;
		justify-content: center;
	}

	.field-row[b-0ocp2lig4j] {
		grid-template-columns: minmax(0, 1fr);
	}

	.field-row.cols-4[b-0ocp2lig4j] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Extra-narrow tier: foldable cover screens (Galaxy Z Fold/Flip closed, Pixel
   Fold closed) run as narrow as ~280px, well below any normal phone. */

@media (max-width: 349px) {
	.card[b-0ocp2lig4j] {
		padding: 16px 14px;
	}

	.btn-new[b-0ocp2lig4j] {
		font-size: 12.5px;
	}

	.field-row.cols-4[b-0ocp2lig4j] {
		grid-template-columns: minmax(0, 1fr);
	}

	/* A 280px-wide minimum column (fine down to 349px) can force a
	   page-level horizontal scrollbar on the narrowest foldable cover
	   screens (as little as ~280px CSS width - see razor-page-design-system's
	   real device viewport reference). Shrink the minimum column further at
	   this tier so the grid still fits a single column without overflow. */
	.cars-grid[b-0ocp2lig4j] {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 10px;
	}
}
/* /Components/Pages/ServicePlanning/ServicePlanDetail.razor.rz.scp.css */
.service-plan-detail-page[b-jlrq3ib75q] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
}

.eyebrow[b-jlrq3ib75q] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 4px;
}

.back-link[b-jlrq3ib75q] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	margin-bottom: 8px;
}

.back-link:hover[b-jlrq3ib75q] {
	color: var(--accent);
}

.link-plain[b-jlrq3ib75q] {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}

.link-plain:hover[b-jlrq3ib75q] {
	text-decoration: underline;
}

/* Sticky header, similar to a spreadsheet's frozen panes */

.topbar[b-jlrq3ib75q] {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 22px;
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--canvas);
	margin-left: -24px;
	margin-right: -24px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--line);
	box-shadow: 0 4px 14px rgba(15, 23, 32, 0.04);
}

.title-row[b-jlrq3ib75q] {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.title-row h1[b-jlrq3ib75q] {
	font-size: 22px;
	margin: 0;
	letter-spacing: -0.01em;
	min-width: 0;
	overflow-wrap: anywhere;
}

.actions[b-jlrq3ib75q] {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.actions .btn[b-jlrq3ib75q] {
	white-space: nowrap;
}

.btn-danger-ghost[b-jlrq3ib75q] {
	background: var(--surface);
	border-color: #f3c9cb;
	color: #a3262b;
}

.btn-danger-ghost:hover[b-jlrq3ib75q] {
	background: #fbeaea;
}

.btn-outline[b-jlrq3ib75q] {
	background: var(--surface);
	border-color: var(--line);
	color: var(--ink-soft);
}

.btn-outline:hover[b-jlrq3ib75q] {
	border-color: var(--accent);
	color: var(--accent);
}

.btn-sm[b-jlrq3ib75q] {
	height: 30px;
	padding: 0 11px;
	font-size: 12.5px;
}

[b-jlrq3ib75q] .icon-plus,
[b-jlrq3ib75q] .icon-pencil,
[b-jlrq3ib75q] .icon-search {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

/* Badges (status), shared palette with the Complaints module */

.badge[b-jlrq3ib75q] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.badge .dot[b-jlrq3ib75q] {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	flex-shrink: 0;
}

.badge-new[b-jlrq3ib75q] { background: #eaf2fb; color: #14548f; }
.badge-progress[b-jlrq3ib75q] { background: #fef3e6; color: #93590c; }
.badge-done[b-jlrq3ib75q] { background: #e8f6ee; color: #1c7a45; }
.badge-confirm[b-jlrq3ib75q] { background: #e9f6fa; color: #196c85; }
.badge-rejected[b-jlrq3ib75q] { background: #fbeaea; color: #a3262b; }
.badge-default[b-jlrq3ib75q] { background: #eef1f3; color: var(--ink-soft); }

.priority-low[b-jlrq3ib75q] { background: #e8f6ee; color: #1c7a45; }
.priority-medium[b-jlrq3ib75q] { background: #eaf2fb; color: #14548f; }
.priority-high[b-jlrq3ib75q] { background: #fef3e6; color: #93590c; }
.priority-critical[b-jlrq3ib75q] { background: #fbeaea; color: #a3262b; }
.priority-none[b-jlrq3ib75q] { background: #eef1f3; color: var(--ink-soft); }

.badge-callissues[b-jlrq3ib75q] {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--accent);
	text-decoration: none;
	cursor: pointer;
}

.badge-callissues:hover[b-jlrq3ib75q] {
	border-color: var(--accent);
}

/* Email source info icon (title row) - issue #52 */

.icon-btn-info[b-jlrq3ib75q] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-soft);
	cursor: pointer;
	flex-shrink: 0;
}

.icon-btn-info:hover[b-jlrq3ib75q] {
	border-color: var(--accent);
	color: var(--accent);
}

/* Layout */

.grid[b-jlrq3ib75q] {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.sub-grid[b-jlrq3ib75q] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.card[b-jlrq3ib75q] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 16px;
}

.card h2[b-jlrq3ib75q] {
	font-size: 14px;
	margin: 0 0 16px;
	font-weight: 700;
}

.card h2 small[b-jlrq3ib75q] {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 2px;
}

.table-card-head[b-jlrq3ib75q] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.field-row[b-jlrq3ib75q] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}

.field-row.cols-1[b-jlrq3ib75q] {
	grid-template-columns: minmax(0, 1fr);
}

.field-row.cols-4[b-jlrq3ib75q] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field[b-jlrq3ib75q] {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.field .value-box[b-jlrq3ib75q],
.value-box[b-jlrq3ib75q] {
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 14px;
	background: #fafbfc;
	color: var(--ink-soft);
	box-sizing: border-box;
	width: 100%;
	min-height: 38px;
	display: flex;
	align-items: center;
}

/* Address box (opens AddressPickerModal) */

.address-box[b-jlrq3ib75q] {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	min-height: 44px;
}

.address-box .address-text[b-jlrq3ib75q] {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ink);
	font-weight: 600;
}

.address-box:hover[b-jlrq3ib75q] {
	border-color: var(--accent);
}

/* Date fields: overlay a calendar icon on the plan date input. The icon lives
   in its own row (sibling of the label, not stacked under it), so it centers
   on the input itself regardless of label height/wrapping. */

.date-field[b-jlrq3ib75q] {
	position: relative;
	display: flex;
	align-items: center;
}

.date-field .cal-icon[b-jlrq3ib75q] {
	position: absolute;
	left: 11px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	pointer-events: none;
	z-index: 1;
}

.date-field[b-jlrq3ib75q]  input {
	padding-left: 32px !important;
	width: 100%;
}

.date-field[b-jlrq3ib75q]  input::-webkit-calendar-picker-indicator {
	display: none;
	-webkit-appearance: none;
}

/* Accommodation checkbox row - matches the height/alignment of its sibling fields */

.accommodation-check[b-jlrq3ib75q] {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
}

.accommodation-check .form-check-input[b-jlrq3ib75q] {
	margin: 0;
}

.accommodation-check .form-check-label[b-jlrq3ib75q] {
	font-size: 13px;
	color: var(--ink-soft);
}

/* Mini add-forms (Requested Dates / Time Log) */

.mini-form[b-jlrq3ib75q] {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.mini-form-stacked[b-jlrq3ib75q] {
	flex-direction: column;
}

.mini-form-row[b-jlrq3ib75q] {
	display: flex;
	gap: 8px;
}

.empty-hint[b-jlrq3ib75q] {
	color: var(--ink-faint);
	font-size: 13px;
	padding: 8px 0;
	margin: 0;
}

/* Requested dates list */

.req-date-list[b-jlrq3ib75q] {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 220px;
	overflow-y: auto;
}

.req-date-row[b-jlrq3ib75q] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 2px;
	font-size: 13.5px;
	border-bottom: 1px solid var(--line-soft);
}

.req-date-row:last-child[b-jlrq3ib75q] {
	border-bottom: none;
}

/* Time log list */

.time-log-list[b-jlrq3ib75q] {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 250px;
	overflow-y: auto;
}

.time-log-row[b-jlrq3ib75q] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 9px 2px;
	border-bottom: 1px solid var(--line-soft);
}

.time-log-row:last-child[b-jlrq3ib75q] {
	border-bottom: none;
}

.time-log-who[b-jlrq3ib75q] {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.time-log-worker[b-jlrq3ib75q] {
	font-weight: 600;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.time-log-date[b-jlrq3ib75q] {
	color: var(--ink-faint);
	font-size: 11.5px;
}

.time-log-actions[b-jlrq3ib75q] {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.row-remove[b-jlrq3ib75q] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	border: none;
	background: transparent;
	color: var(--ink-faint);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.row-remove:hover[b-jlrq3ib75q] {
	background: #fbeaea;
	color: #a3262b;
}

/* Sidebar cards */

.side-card .kv[b-jlrq3ib75q] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 13px;
}

.side-card .kv:last-child[b-jlrq3ib75q] {
	border-bottom: none;
}

.side-card .kv .k[b-jlrq3ib75q] {
	color: var(--ink-faint);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.side-card .kv .v[b-jlrq3ib75q] {
	font-weight: 600;
	text-align: right;
}

/* Worker selection panel */

.worker-toolbar[b-jlrq3ib75q] {
	padding-bottom: 12px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--line-soft);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.search-wrap[b-jlrq3ib75q] {
	position: relative;
}

.search-wrap[b-jlrq3ib75q]  .icon-search {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-faint);
	pointer-events: none;
}

.search-input[b-jlrq3ib75q] {
	padding-left: 30px;
}

.worker-filter-toggle[b-jlrq3ib75q] {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--ink-soft);
	margin: 0;
}

.worker-filter-toggle input[b-jlrq3ib75q] {
	margin: 0;
}

.worker-tip[b-jlrq3ib75q] {
	font-size: 11.5px;
	color: var(--ink-faint);
	margin: 0;
}

.worker-list[b-jlrq3ib75q] {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 420px;
	overflow-y: auto;
}

.worker-row[b-jlrq3ib75q] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	cursor: pointer;
	user-select: none;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.worker-row:hover:not(:disabled)[b-jlrq3ib75q] {
	border-color: var(--accent);
}

.worker-row:disabled[b-jlrq3ib75q] {
	cursor: default;
	opacity: 0.85;
}

.worker-row-selected[b-jlrq3ib75q] {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.worker-row-main[b-jlrq3ib75q] {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.worker-row-name[b-jlrq3ib75q] {
	font-weight: 600;
	font-size: 13.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.worker-row-role[b-jlrq3ib75q] {
	font-size: 11.5px;
	color: var(--ink-faint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Same rationale as ComplaintDetail.razor.css: 1400px is wide enough that
   resizing an ordinary desktop browser window down (not just real phones/
   foldables) switches this page to its compact single-column layout too. */

@media (max-width: 1400px) {
	.grid[b-jlrq3ib75q] {
		grid-template-columns: minmax(0, 1fr);
	}

	.sub-grid[b-jlrq3ib75q] {
		grid-template-columns: minmax(0, 1fr);
	}

	.field-row[b-jlrq3ib75q] {
		grid-template-columns: minmax(0, 1fr);
	}

	.field-row.cols-4[b-jlrq3ib75q] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.topbar[b-jlrq3ib75q] {
		flex-direction: column;
	}

	.actions[b-jlrq3ib75q] {
		width: 100%;
	}

	.actions .btn[b-jlrq3ib75q] {
		flex: 1;
		justify-content: center;
	}
}

/* MainLayout.razor.css drops .content padding to 16px at this same
   breakpoint (max-width: 640.98px) - keep the topbar bleed in sync so it
   doesn't overflow the content box and cause a page-level horizontal
   scrollbar on normal phones. */
@media (max-width: 640px) {
	.topbar[b-jlrq3ib75q] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 16px;
	}
}

/* Extra-narrow tier: foldable cover screens (Galaxy Z Fold/Flip closed, Pixel
   Fold closed) run as narrow as ~280px. Tighten further so the header's badges
   and action buttons wrap cleanly instead of overflowing. */

@media (max-width: 349px) {
	.topbar[b-jlrq3ib75q] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 12px 16px;
	}

	.title-row h1[b-jlrq3ib75q] {
		font-size: 18px;
	}

	.actions .btn[b-jlrq3ib75q] {
		font-size: 12px;
		padding: 0 10px;
		height: 32px;
	}

	.field-row.cols-4[b-jlrq3ib75q] {
		grid-template-columns: minmax(0, 1fr);
	}

	.mini-form-row[b-jlrq3ib75q] {
		flex-direction: column;
	}
}
/* /Components/Pages/ServicePlanning/ServicePlanList.razor.rz.scp.css */
.service-plan-list-page[b-pw45m2b0o5] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
	/* Fill the remaining viewport height (MainLayout's .content is a flex
	   column, see MainLayout.razor.css) so the table below can grow all the
	   way to the bottom of the screen and scroll internally instead of the
	   whole page scrolling. */
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.eyebrow[b-pw45m2b0o5] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.btn-new[b-pw45m2b0o5] {
	white-space: nowrap;
}

[b-pw45m2b0o5] .icon-plus,
[b-pw45m2b0o5] .icon-pencil,
[b-pw45m2b0o5] .icon-eye {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

.link-plain[b-pw45m2b0o5] {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}

.link-plain:hover[b-pw45m2b0o5] {
	text-decoration: underline;
}

/* Table */

.table-card[b-pw45m2b0o5] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	max-width: 100%;
	/* Grow to fill the rest of the page instead of only being as tall as its
	   rows, then scroll its own content (both axes) only when it doesn't
	   fit, rather than the whole page scrolling and leaving dead space. */
	flex: 1;
	min-height: 0;
	overflow: auto;
	margin-bottom: 4px;
}

.plans-table[b-pw45m2b0o5] {
	width: 100%;
	border-collapse: collapse;
}

.plans-table thead th[b-pw45m2b0o5] {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: #fafbfc;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

.plans-table thead tr:first-child th:first-child[b-pw45m2b0o5] { border-top-left-radius: 12px; }
.plans-table thead tr:first-child th:last-child[b-pw45m2b0o5] { border-top-right-radius: 12px; }
.plans-table tbody tr:last-child td:first-child[b-pw45m2b0o5] { border-bottom-left-radius: 12px; }
.plans-table tbody tr:last-child td:last-child[b-pw45m2b0o5] { border-bottom-right-radius: 12px; }

.plans-table tbody td[b-pw45m2b0o5] {
	padding: 14px 18px;
	font-size: 14px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}

.plans-table tbody tr:last-child td[b-pw45m2b0o5] { border-bottom: none; }
.plans-table tbody tr:hover[b-pw45m2b0o5] { background: #f8fafc; }

.cell-id[b-pw45m2b0o5] { font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cell-date[b-pw45m2b0o5] { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Address hover tooltip (same pattern as ComplaintList's Notes column) */

.notes-wrap[b-pw45m2b0o5] {
	position: relative;
	display: inline-block;
	max-width: 240px;
	vertical-align: middle;
}

.cell-notes-text[b-pw45m2b0o5] {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ink-soft);
}

.notes-tooltip[b-pw45m2b0o5] {
	position: absolute;
	top: calc(100% + 9px);
	left: 0;
	min-width: 220px;
	max-width: 320px;
	background: #1f2933;
	color: #fff;
	font-size: 12.5px;
	line-height: 1.5;
	padding: 10px 13px;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(15, 23, 32, 0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.12s ease, transform 0.12s ease;
	z-index: 40;
	white-space: normal;
	pointer-events: none;
}

.notes-tooltip[b-pw45m2b0o5]::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 16px;
	border: 6px solid transparent;
	border-bottom-color: #1f2933;
}

.notes-wrap:hover .notes-tooltip[b-pw45m2b0o5] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Badges (status), shared palette with the Complaints module */

.badge[b-pw45m2b0o5] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.badge .dot[b-pw45m2b0o5] {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	flex-shrink: 0;
}

.badge-new[b-pw45m2b0o5] { background: #eaf2fb; color: #14548f; }
.badge-progress[b-pw45m2b0o5] { background: #fef3e6; color: #93590c; }
.badge-done[b-pw45m2b0o5] { background: #e8f6ee; color: #1c7a45; }
.badge-confirm[b-pw45m2b0o5] { background: #e9f6fa; color: #196c85; }
.badge-rejected[b-pw45m2b0o5] { background: #fbeaea; color: #a3262b; }
.badge-default[b-pw45m2b0o5] { background: #eef1f3; color: var(--ink-soft); }

/* Assigned worker chips */

.worker-chip-row[b-pw45m2b0o5] {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.worker-chip[b-pw45m2b0o5] {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}

/* Row actions */

.row-actions[b-pw45m2b0o5] {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}

.btn-outline[b-pw45m2b0o5] {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink-soft);
}

.btn-outline:hover[b-pw45m2b0o5] {
	border-color: var(--accent);
	color: var(--accent);
}

.btn-load-more[b-pw45m2b0o5] {
	min-width: 160px;
}

/* Sorting logic callout */

.sorting-info[b-pw45m2b0o5] {
	font-size: 13px;
	margin-top: 12px;
	margin-bottom: 4px;
}

/* Mobile card list: hidden on desktop, shown instead of the table on mobile */

.mobile-list[b-pw45m2b0o5] {
	display: none;
}

.m-card[b-pw45m2b0o5] {
	display: block;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
	text-decoration: none;
	color: inherit;
}

.m-card:hover[b-pw45m2b0o5] {
	border-color: var(--accent);
}

.m-card-top[b-pw45m2b0o5] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.m-card-title[b-pw45m2b0o5] {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	color: var(--accent);
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-sub[b-pw45m2b0o5] {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	color: var(--ink-soft);
	font-size: 12.5px;
	margin-top: 4px;
}

.m-card-sub span[b-pw45m2b0o5] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-sub span:first-child[b-pw45m2b0o5] {
	flex: 1 1 auto;
}

.m-card-sub span:last-child[b-pw45m2b0o5] {
	flex: 0 0 auto;
}

.m-card-meta[b-pw45m2b0o5] {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.m-card-extra[b-pw45m2b0o5] {
	color: var(--ink-soft);
	font-size: 12.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Mobile layout: compact single-column view. Breakpoint is 1400px - deliberately
   much wider than any phone or opened foldable so an ordinary desktop browser
   window resized down also switches to the compact card view (see
   razor-page-design-system's Breakpoint values section). */

@media (max-width: 1400px) {
	.topbar[b-pw45m2b0o5] {
		align-items: flex-start;
	}

	.btn-new[b-pw45m2b0o5] {
		width: 100%;
		justify-content: center;
	}

	.table-card[b-pw45m2b0o5] {
		display: none;
	}

	.mobile-list[b-pw45m2b0o5] {
		display: block;
	}
}

/* Extra-narrow tier: foldable cover screens (Galaxy Z Fold/Flip closed, Pixel
   Fold closed) run as narrow as ~280px, well below any normal phone. */

@media (max-width: 349px) {
	.m-card[b-pw45m2b0o5] {
		padding: 10px 12px;
	}

	.m-card-title[b-pw45m2b0o5] {
		font-size: 13.5px;
	}

	.btn-new[b-pw45m2b0o5] {
		font-size: 12.5px;
	}
}
/* /Components/Pages/ServicePlanning/ServicePlanOverview.razor.rz.scp.css */
.service-plan-overview-page[b-zfz3irglvb] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
}

.eyebrow[b-zfz3irglvb] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

/* Stat cards - exact classes/values reused from ComplaintList.razor.css's
   .stat-card/.stats-row (razor-page-design-system). These aren't click
   filters here (no list below them to filter), so they're plain divs
   instead of buttons - same visual, no cursor/hover affordance. */

.stats-row[b-zfz3irglvb] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 8px;
}

.stat-card[b-zfz3irglvb] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 9px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
}

.stat-num[b-zfz3irglvb] {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.stat-label[b-zfz3irglvb] {
	font-size: 11px;
	color: var(--ink-soft);
	font-weight: 500;
	line-height: 1.1;
}

.stat-hint[b-zfz3irglvb] {
	font-size: 10px;
	color: var(--ink-faint);
	line-height: 1.1;
}

.text-state-progress[b-zfz3irglvb] { color: #93590c; }
.text-state-pending[b-zfz3irglvb] { color: var(--ink-soft); }
.text-state-done[b-zfz3irglvb] { color: #1c7a45; }

/* Layout */

.grid[b-zfz3irglvb] {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.card[b-zfz3irglvb] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 16px;
}

.card h2[b-zfz3irglvb] {
	font-size: 14px;
	margin: 0 0 16px;
	font-weight: 700;
}

.card h2 small[b-zfz3irglvb] {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 2px;
}

.card-hint[b-zfz3irglvb] {
	font-size: 13px;
	color: var(--ink-soft);
	margin: -6px 0 18px;
}

.empty-hint[b-zfz3irglvb] {
	color: var(--ink-faint);
	font-size: 13px;
	text-align: center;
	padding: 40px 0;
}

/* Worker utilization rows */

.util-list[b-zfz3irglvb] {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.util-row-head[b-zfz3irglvb] {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 6px;
}

/* CustomerList.razor.css-style truncation fix: the worker name/role block
   sits in a flex row alongside the figure text, so it needs flex:1 and
   min-width:0 to shrink and ellipsize instead of pushing the figure off
   the card or overflowing on a long name. */
.util-worker[b-zfz3irglvb] {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.util-name[b-zfz3irglvb] {
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.util-role[b-zfz3irglvb] {
	font-size: 12.5px;
	color: var(--ink-soft);
	white-space: nowrap;
}

.util-figure[b-zfz3irglvb] {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink-soft);
	white-space: nowrap;
	flex-shrink: 0;
}

.util-bar-track[b-zfz3irglvb] {
	background: var(--line-soft);
	border-radius: 999px;
	height: 22px;
	overflow: hidden;
}

.util-bar-fill[b-zfz3irglvb] {
	height: 100%;
	display: flex;
	align-items: center;
	padding-left: 10px;
	border-radius: 999px;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
	transition: width 0.3s ease;
}

/* Same hex values as the badge/priority palette (priority-low/priority-high/
   priority-critical) so "low/moderate/high utilization" reads consistently
   with the rest of the app's color language, instead of Bootstrap's
   bg-success/bg-warning/bg-danger. */
.bar-low[b-zfz3irglvb] { background: #1c7a45; }
.bar-high[b-zfz3irglvb] { background: #93590c; }
.bar-critical[b-zfz3irglvb] { background: #a3262b; }
.bar-none[b-zfz3irglvb] { background: var(--line); }

.util-meta[b-zfz3irglvb] {
	display: flex;
	gap: 16px;
	margin-top: 8px;
	font-size: 12px;
	color: var(--ink-soft);
	flex-wrap: wrap;
}

.util-meta span[b-zfz3irglvb] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.util-meta .dot[b-zfz3irglvb] {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	flex-shrink: 0;
}

.util-meta-absence[b-zfz3irglvb] { color: #a3262b; }
.util-meta-plans[b-zfz3irglvb] { color: #1c7a45; }

/* Sidebar card */

.side-subheading[b-zfz3irglvb] {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 10px;
}

.overall-box[b-zfz3irglvb] {
	background: var(--canvas);
	border-radius: 10px;
	padding: 16px;
	text-align: center;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.overall-percent[b-zfz3irglvb] {
	font-size: 28px;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: -0.01em;
}

.overall-rating[b-zfz3irglvb] {
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-soft);
}

.legend-list[b-zfz3irglvb] {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.legend-row[b-zfz3irglvb] {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--ink-soft);
}

.legend-dot[b-zfz3irglvb] {
	width: 12px;
	height: 12px;
	border-radius: 999px;
	flex-shrink: 0;
}

.legend-dot-low[b-zfz3irglvb] { background: #1c7a45; }
.legend-dot-high[b-zfz3irglvb] { background: #93590c; }
.legend-dot-critical[b-zfz3irglvb] { background: #a3262b; }

/* Same breakpoint rationale as ComplaintDetail.razor.css: 1400px is wide
   enough that resizing an ordinary desktop browser window down (not just
   real phones/foldables) switches this page to its compact single-column
   layout too. */

@media (max-width: 1400px) {
	.grid[b-zfz3irglvb] {
		grid-template-columns: minmax(0, 1fr);
	}

	.util-row-head[b-zfz3irglvb] {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

@media (max-width: 349px) {
	.card[b-zfz3irglvb] {
		padding: 16px 14px;
	}

	.overall-percent[b-zfz3irglvb] {
		font-size: 24px;
	}

	.util-meta[b-zfz3irglvb] {
		gap: 10px;
	}
}
/* /Components/Pages/Settings/Settings.razor.rz.scp.css */
.language-settings-page[b-8pcffolbzw] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
	max-width: 640px;
}

.eyebrow[b-8pcffolbzw] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.card[b-8pcffolbzw] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 16px;
}

.card h2[b-8pcffolbzw] {
	font-size: 14px;
	margin: 0 0 16px;
	font-weight: 700;
}

.card h2 small[b-8pcffolbzw] {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.field-row[b-8pcffolbzw] {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin-bottom: 14px;
}

.field-row select[b-8pcffolbzw] {
	box-sizing: border-box;
	width: 100%;
}

@media (max-width: 480px) {
	.language-settings-page[b-8pcffolbzw] {
		max-width: 100%;
	}
}
/* /Components/Pages/Staff/StaffDetail.razor.rz.scp.css */
.staff-detail-page[b-tyvu0dmp54] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
}

.eyebrow[b-tyvu0dmp54] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 4px;
}

.back-link[b-tyvu0dmp54] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	margin-bottom: 8px;
}

.back-link:hover[b-tyvu0dmp54] {
	color: var(--accent);
}

/* Sticky header, similar to a spreadsheet's frozen panes */

.topbar[b-tyvu0dmp54] {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 22px;
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--canvas);
	/* Bleed to the edge of MainLayout's content padding - kept in sync with that
	   padding at each breakpoint, see the 640px and 349px overrides below. */
	margin-left: -24px;
	margin-right: -24px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--line);
	box-shadow: 0 4px 14px rgba(15, 23, 32, 0.04);
}

.title-row[b-tyvu0dmp54] {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.title-row h1[b-tyvu0dmp54] {
	font-size: 22px;
	margin: 0;
	letter-spacing: -0.01em;
	min-width: 0;
	overflow-wrap: anywhere;
}

.badge[b-tyvu0dmp54] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.badge-admin[b-tyvu0dmp54] {
	background: var(--accent-soft);
	color: var(--accent);
}

.actions[b-tyvu0dmp54] {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.actions .btn[b-tyvu0dmp54] {
	white-space: nowrap;
}

.btn-danger-ghost[b-tyvu0dmp54] {
	background: var(--surface);
	border-color: #f3c9cb;
	color: #a3262b;
}

.btn-danger-ghost:hover[b-tyvu0dmp54] {
	background: #fbeaea;
}

.btn-outline[b-tyvu0dmp54] {
	background: var(--surface);
	border-color: var(--line);
	color: var(--ink-soft);
}

.btn-outline:hover[b-tyvu0dmp54] {
	border-color: var(--accent);
	color: var(--accent);
}

/* Layout */

.grid[b-tyvu0dmp54] {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.card[b-tyvu0dmp54] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	margin-bottom: 16px;
}

.card h2[b-tyvu0dmp54] {
	font-size: 14px;
	margin: 0 0 16px;
	font-weight: 700;
}

.card h2 small[b-tyvu0dmp54] {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 2px;
}

.field-row[b-tyvu0dmp54] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}

.field-row.cols-1[b-tyvu0dmp54] {
	grid-template-columns: minmax(0, 1fr);
}

.field-row.cols-4[b-tyvu0dmp54] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field-row:last-child[b-tyvu0dmp54] {
	margin-bottom: 0;
}

.field[b-tyvu0dmp54] {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.field-checkbox[b-tyvu0dmp54] {
	flex-direction: row;
	align-items: center;
}

.field-checkbox .form-check[b-tyvu0dmp54] {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 0;
}

/* Same breakpoint rationale as ComplaintDetail.razor.css/CustomerDetail.razor.css/
   DistributorDetail.razor.css: 1400px is wide enough that resizing an ordinary
   desktop browser window down (not just real phones/foldables) switches this
   page to its compact single-column layout too. */

@media (max-width: 1400px) {
	.grid[b-tyvu0dmp54] {
		grid-template-columns: minmax(0, 1fr);
	}

	.field-row[b-tyvu0dmp54] {
		grid-template-columns: minmax(0, 1fr);
	}

	.field-row.cols-4[b-tyvu0dmp54] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.topbar[b-tyvu0dmp54] {
		flex-direction: column;
	}

	.actions[b-tyvu0dmp54] {
		width: 100%;
	}

	.actions .btn[b-tyvu0dmp54] {
		flex: 1;
		justify-content: center;
	}
}

/* MainLayout.razor.css drops .content padding to 16px at this same
   breakpoint (max-width: 640.98px) - keep the topbar bleed in sync so it
   doesn't overflow the content box and cause a page-level horizontal
   scrollbar on normal phones. */
@media (max-width: 640px) {
	.topbar[b-tyvu0dmp54] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 16px;
	}
}

@media (max-width: 349px) {
	.topbar[b-tyvu0dmp54] {
		margin-left: -16px;
		margin-right: -16px;
		padding: 12px 16px;
	}

	.title-row h1[b-tyvu0dmp54] {
		font-size: 18px;
	}

	.actions .btn[b-tyvu0dmp54] {
		font-size: 12px;
		padding: 0 10px;
		height: 32px;
	}

	.field-row.cols-4[b-tyvu0dmp54] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Sidebar summary card */

.side-card .kv[b-tyvu0dmp54] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 13px;
}

.side-card .kv:last-child[b-tyvu0dmp54] {
	border-bottom: none;
}

.side-card .kv .k[b-tyvu0dmp54] {
	color: var(--ink-faint);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.side-card .kv .v[b-tyvu0dmp54] {
	font-weight: 600;
	text-align: right;
}
/* /Components/Pages/Staff/StaffList.razor.rz.scp.css */
.staff-page[b-iwalwi78qe] {
	--ink: #16202b;
	--ink-soft: #55636f;
	--ink-faint: #8996a1;
	--line: #e4e8ec;
	--line-soft: #eef1f3;
	--surface: #ffffff;
	--canvas: #f4f6f8;
	--accent: #1b6ec2;
	--accent-soft: #eaf2fb;
	--accent-ring: rgba(27, 110, 194, 0.16);
	color: var(--ink);
	/* Fill the remaining viewport height (MainLayout's .content is a flex
	   column, see MainLayout.razor.css) so the table below can grow all the
	   way to the bottom of the screen and scroll internally instead of the
	   whole page scrolling. */
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.eyebrow[b-iwalwi78qe] {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.btn-new[b-iwalwi78qe] {
	white-space: nowrap;
}

/* Toolbar: just Search + a total-count readout - Staff has no state/priority-style
   dimension worth a stat-card grid or chip filters (see razor-page-design-system's
   guidance to skip stat cards rather than invent fake categories). */

.toolbar[b-iwalwi78qe] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 18px 20px;
}

.toolbar-row[b-iwalwi78qe] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

.toolbar-row .search-wrap[b-iwalwi78qe] {
	flex: 1 1 260px;
	max-width: 480px;
}

.search-wrap[b-iwalwi78qe] {
	position: relative;
}

/* IconSearch is a separate child component, so its rendered <svg> does not
   carry this file's CSS-isolation scope attribute - crossing that component
   boundary requires ::deep, otherwise this rule silently never matches and
   the icon falls back to normal static-flow positioning. */
.search-wrap[b-iwalwi78qe]  .icon-search {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-faint);
	pointer-events: none;
}

/* Small functional icons (plus, pencil) rendered as inline SVG instead of an
   icon font - see razor-page-design-system's Icons section. currentColor lets
   each pick up its surrounding text/link color automatically. icon-plus and
   icon-pencil are CssClass values handed to child icon components, so (like
   icon-search above) reaching their rendered <svg> requires ::deep. */
[b-iwalwi78qe] .icon-plus,
[b-iwalwi78qe] .icon-pencil,
[b-iwalwi78qe] .sort-icon {
	display: inline-flex;
	align-items: center;
	vertical-align: -1px;
}

.search-input[b-iwalwi78qe] {
	padding-left: 36px;
}

.total-count[b-iwalwi78qe] {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	white-space: nowrap;
}

/* Badges */

.badge[b-iwalwi78qe] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.badge-admin[b-iwalwi78qe] {
	background: var(--accent-soft);
	color: var(--accent);
}

/* Table */

.table-card[b-iwalwi78qe] {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	max-width: 100%;
	/* Grow to fill the rest of the page (staff-page is a flex column that
	   fills the viewport) instead of only being as tall as its rows, then
	   scroll its own content - both horizontally (wide table) and
	   vertically (many rows) - only when it doesn't fit, rather than the
	   whole page scrolling and leaving dead space below a short table. */
	flex: 1;
	min-height: 0;
	overflow: auto;
	margin-bottom: 4px;
}

.staff-table[b-iwalwi78qe] {
	width: 100%;
	border-collapse: collapse;
}

.staff-table thead th[b-iwalwi78qe] {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: #fafbfc;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.staff-table thead tr:first-child th:first-child[b-iwalwi78qe] { border-top-left-radius: 12px; }
.staff-table thead tr:first-child th:last-child[b-iwalwi78qe] { border-top-right-radius: 12px; }
.staff-table tbody tr:last-child td:first-child[b-iwalwi78qe] { border-bottom-left-radius: 12px; }
.staff-table tbody tr:last-child td:last-child[b-iwalwi78qe] { border-bottom-right-radius: 12px; }

.staff-table tbody td[b-iwalwi78qe] {
	padding: 14px 18px;
	font-size: 14px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}

.staff-table tbody tr:last-child td[b-iwalwi78qe] { border-bottom: none; }
.staff-table tbody tr:hover[b-iwalwi78qe] { background: #f8fafc; }

.cell-code[b-iwalwi78qe] { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cell-name[b-iwalwi78qe] { font-weight: 600; }

/* Row actions */

.row-actions[b-iwalwi78qe] {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}

.btn-load-more[b-iwalwi78qe] {
	min-width: 160px;
}

/* Mobile card list: hidden on desktop, shown instead of the table on mobile */

.mobile-list[b-iwalwi78qe] {
	display: none;
}

.m-card[b-iwalwi78qe] {
	display: block;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
	text-decoration: none;
	color: inherit;
}

.m-card:hover[b-iwalwi78qe] {
	border-color: var(--accent);
}

.m-card-top[b-iwalwi78qe] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.m-card-title[b-iwalwi78qe] {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	color: var(--accent);
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-sub[b-iwalwi78qe] {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	color: var(--ink-soft);
	font-size: 12.5px;
	margin-top: 4px;
}

.m-card-sub span[b-iwalwi78qe] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.m-card-notes[b-iwalwi78qe] {
	margin-top: 6px;
	color: var(--ink-soft);
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Mobile layout: compact single-column view, closer to the original simple
   list. Breakpoint is 1400px - deliberately much wider than any phone or
   opened foldable (which top out around 430px / 900px respectively) - it
   also covers an ordinary desktop browser window simply resized narrower, so
   shrinking the window itself switches to the compact card view instead of
   squeezing the desktop table layout. See ComplaintList.razor.css. */

@media (max-width: 1400px) {
	.topbar[b-iwalwi78qe] {
		align-items: flex-start;
	}

	.btn-new[b-iwalwi78qe] {
		width: 100%;
		justify-content: center;
	}

	.table-card[b-iwalwi78qe] {
		display: none;
	}

	.mobile-list[b-iwalwi78qe] {
		display: block;
	}

	.toolbar-row[b-iwalwi78qe] {
		gap: 10px 16px;
	}
}

/* Extra-narrow tier: foldable cover screens (Galaxy Z Fold/Flip closed, Pixel
   Fold closed) run as narrow as ~280px, well below any normal phone. Tighten
   spacing further so nothing wraps awkwardly or overflows. */

@media (max-width: 349px) {
	.toolbar[b-iwalwi78qe] {
		padding: 14px 14px;
	}

	.m-card[b-iwalwi78qe] {
		padding: 10px 12px;
	}

	.m-card-title[b-iwalwi78qe] {
		font-size: 13.5px;
	}

	.btn-new[b-iwalwi78qe] {
		font-size: 12.5px;
	}

	.total-count[b-iwalwi78qe] {
		font-size: 12px;
	}
}
/* /Components/Shared/Molecules/EmailSourceDrawer.razor.rz.scp.css */
.email-drawer-backdrop[b-hliuezd9b3] {
	position: fixed;
	inset: 0;
	background: rgba(14, 42, 71, 0.45);
	z-index: 1050;
}

.email-drawer[b-hliuezd9b3] {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 460px;
	background: #ffffff;
	box-shadow: -8px 0 24px rgba(14, 42, 71, 0.18);
	z-index: 1051;
	display: flex;
	flex-direction: column;
	animation: email-drawer-slide-in-b-hliuezd9b3 0.2s ease-out;
}

@keyframes email-drawer-slide-in-b-hliuezd9b3 {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}

.email-drawer-header[b-hliuezd9b3] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid #e4e8ec;
	flex-shrink: 0;
}

.email-drawer-header h5[b-hliuezd9b3] {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #0e2a47;
}

.email-drawer-close[b-hliuezd9b3] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	color: #55636f;
	cursor: pointer;
	padding: 0;
}

.email-drawer-close:hover[b-hliuezd9b3] {
	color: #0e2a47;
}

.email-drawer-body[b-hliuezd9b3] {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.email-drawer-field[b-hliuezd9b3] {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.email-drawer-label[b-hliuezd9b3] {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8996a1;
}

.email-drawer-value[b-hliuezd9b3] {
	font-size: 14px;
	color: #16202b;
	word-break: break-word;
}

.email-drawer-body-field[b-hliuezd9b3] {
	flex: 1 1 auto;
}

.email-drawer-bodytext[b-hliuezd9b3] {
	margin: 0;
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.5;
	color: #16202b;
	white-space: pre-wrap;
	word-break: break-word;
	background: #f4f6f8;
	border: 1px solid #eef1f3;
	border-radius: 8px;
	padding: 12px;
}