/* TOP1 CRM settings workspace.
 * Product-facing layer for the frontend settings section only.
 */

.top1-app-shell[data-top1-section="settings"] {
	--top1-settings-accent: #dc1933;
	--top1-settings-accent-strong: #b90f28;
	--top1-settings-accent-soft: #fff1f3;
	--top1-settings-ink: #111827;
	--top1-settings-muted: #64748b;
	--top1-settings-line: #dce4ed;
	--top1-settings-soft: #f7f9fc;
	--top1-settings-card: #ffffff;
	background: #f3f6fa !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-app-content {
	padding: 14px 16px 82px !important;
	background:
		radial-gradient(circle at 92% 2%, rgba(220, 25, 51, 0.055), transparent 30%),
		linear-gradient(180deg, #f7f9fc 0, #f3f6fa 100%) !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-workspace {
	max-width: 1560px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background: transparent !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-main {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	align-items: start !important;
	gap: 14px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-main > * {
	grid-column: 1 / -1 !important;
	min-width: 0 !important;
}

.top1-app-shell[data-top1-section="settings"] [hidden] {
	display: none !important;
}

/* Page identity. */
.top1-app-shell[data-top1-section="settings"] .top1-settings-page-header {
	position: relative !important;
	display: grid !important;
	grid-template-columns: 58px minmax(0, 1fr) auto !important;
	align-items: center !important;
	gap: 16px !important;
	min-height: 126px !important;
	padding: 20px 22px !important;
	overflow: hidden !important;
	border: 1px solid #d9e2ec !important;
	border-radius: 16px !important;
	background:
		linear-gradient(115deg, rgba(255, 255, 255, 0.99), rgba(255, 248, 249, 0.97)),
		#ffffff !important;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.075) !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-page-header::after {
	position: absolute !important;
	top: -85px !important;
	right: -30px !important;
	width: 240px !important;
	height: 240px !important;
	border: 42px solid rgba(220, 25, 51, 0.055) !important;
	border-radius: 50% !important;
	content: "" !important;
	pointer-events: none !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-hero-mark {
	position: relative !important;
	z-index: 1 !important;
	display: inline-grid !important;
	place-items: center !important;
	width: 58px !important;
	height: 58px !important;
	border: 1px solid #fecdd3 !important;
	border-radius: 17px !important;
	background: linear-gradient(145deg, #fff8f9, #ffe8ec) !important;
	color: var(--top1-settings-accent-strong) !important;
	font-size: 21px !important;
	font-weight: 900 !important;
	box-shadow: inset 0 1px 0 #ffffff, 0 8px 18px rgba(185, 15, 40, 0.1) !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-page-heading {
	position: relative !important;
	z-index: 1 !important;
	display: grid !important;
	gap: 4px !important;
	min-width: 0 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-eyebrow {
	color: var(--top1-settings-accent-strong) !important;
	font-size: 11px !important;
	font-weight: 850 !important;
	letter-spacing: 0.075em !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-page-heading h1 {
	margin: 0 !important;
	color: var(--top1-settings-ink) !important;
	font-size: clamp(24px, 2vw, 31px) !important;
	font-weight: 900 !important;
	letter-spacing: -0.035em !important;
	line-height: 1.08 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-page-heading p {
	max-width: 780px !important;
	margin: 0 !important;
	color: var(--top1-settings-muted) !important;
	font-size: 13px !important;
	font-weight: 650 !important;
	line-height: 1.45 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-access-badge {
	position: relative !important;
	z-index: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	min-height: 34px !important;
	padding: 0 12px !important;
	border: 1px solid #fecdd3 !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.9) !important;
	color: #9f1239 !important;
	font-size: 11px !important;
	font-weight: 850 !important;
	white-space: nowrap !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-access-badge i {
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	background: var(--top1-settings-accent) !important;
	box-shadow: 0 0 0 4px rgba(220, 25, 51, 0.1) !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-header-state {
	position: relative !important;
	z-index: 1 !important;
	display: grid !important;
	justify-items: end !important;
	gap: 7px !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-save-state {
	padding: 6px 9px !important;
	border: 1px solid #fde68a !important;
	border-radius: 999px !important;
	background: #fffbeb !important;
	color: #92400e !important;
	font-size: 10px !important;
	font-weight: 850 !important;
	white-space: nowrap !important;
}

/* Section navigation. */
.top1-app-shell[data-top1-section="settings"] .top1-settings-header-tabs {
	display: grid !important;
	grid-template-columns: repeat(7, minmax(132px, 1fr)) !important;
	gap: 7px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 7px !important;
	overflow-x: auto !important;
	border: 1px solid var(--top1-settings-line) !important;
	border-radius: 14px !important;
	background: rgba(255, 255, 255, 0.92) !important;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.045) !important;
	scrollbar-width: thin !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-header-tabs .top1-dashboard-segment {
	display: grid !important;
	grid-template-columns: 30px minmax(0, 1fr) !important;
	align-items: center !important;
	gap: 8px !important;
	min-height: 52px !important;
	padding: 7px 9px !important;
	border: 1px solid transparent !important;
	border-radius: 10px !important;
	background: transparent !important;
	color: #475569 !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-header-tabs .top1-dashboard-segment:hover {
	border-color: #dce4ed !important;
	background: #f8fafc !important;
	color: var(--top1-settings-ink) !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-header-tabs .top1-dashboard-segment.is-active {
	border-color: #fecdd3 !important;
	background: linear-gradient(135deg, #fff1f3, #fff8f9) !important;
	color: #9f1239 !important;
	box-shadow: inset 0 0 0 1px rgba(220, 25, 51, 0.025) !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-tab-mark {
	display: inline-grid !important;
	place-items: center !important;
	width: 30px !important;
	height: 30px !important;
	border: 1px solid #dce4ed !important;
	border-radius: 9px !important;
	background: #ffffff !important;
	color: #64748b !important;
	font-size: 11px !important;
	font-weight: 900 !important;
}

.top1-app-shell[data-top1-section="settings"] .is-active .top1-settings-tab-mark {
	border-color: #fda4af !important;
	background: #ffffff !important;
	color: var(--top1-settings-accent-strong) !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-tab-copy {
	display: grid !important;
	gap: 2px !important;
	min-width: 0 !important;
	text-align: left !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-tab-copy strong,
.top1-app-shell[data-top1-section="settings"] .top1-settings-tab-copy small {
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-tab-copy strong {
	font-size: 11px !important;
	font-weight: 850 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-tab-copy small {
	color: #94a3b8 !important;
	font-size: 9px !important;
	font-weight: 700 !important;
}

/* Cards and information hierarchy. */
.top1-app-shell[data-top1-section="settings"] .top1-content-card.top1-clients-card,
.top1-app-shell[data-top1-section="settings"] .top1-settings-section-intro {
	display: grid !important;
	align-content: start !important;
	gap: 13px !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 18px !important;
	overflow: visible !important;
	border: 1px solid var(--top1-settings-line) !important;
	border-radius: 14px !important;
	background: var(--top1-settings-card) !important;
	color: var(--top1-settings-ink) !important;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.055) !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-card-header,
.top1-app-shell[data-top1-section="settings"] .top1-legal-profile-subheader {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 14px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 0 12px !important;
	border: 0 !important;
	border-bottom: 1px solid #e7edf3 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-card-header h2,
.top1-app-shell[data-top1-section="settings"] .top1-legal-profile-subheader h2,
.top1-app-shell[data-top1-section="settings"] .top1-settings-section-intro h2 {
	margin: 0 !important;
	color: var(--top1-settings-ink) !important;
	font-size: 18px !important;
	font-weight: 900 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.2 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-card-header p,
.top1-app-shell[data-top1-section="settings"] .top1-settings-section-intro p {
	max-width: 900px !important;
	margin: 4px 0 0 !important;
	color: var(--top1-settings-muted) !important;
	font-size: 12px !important;
	font-weight: 650 !important;
	line-height: 1.45 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-clients-status {
	flex: 0 0 auto !important;
	min-height: 28px !important;
	padding: 0 10px !important;
	border-radius: 999px !important;
	font-size: 10px !important;
	font-weight: 850 !important;
	white-space: nowrap !important;
}

/* Overview is a working index, not a decorative dashboard. */
.top1-app-shell[data-top1-section="settings"] .top1-settings-overview-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 10px !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-overview-tile {
	display: grid !important;
	grid-template-columns: 40px minmax(0, 1fr) !important;
	gap: 10px !important;
	min-height: 96px !important;
	padding: 12px !important;
	border: 1px solid #dfe6ee !important;
	border-radius: 11px !important;
	background: linear-gradient(145deg, #ffffff, #fafbfd) !important;
	color: var(--top1-settings-ink) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-overview-tile:hover {
	border-color: #fda4af !important;
	background: #fffafb !important;
	transform: translateY(-1px) !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-overview-mark {
	display: inline-grid !important;
	place-items: center !important;
	width: 40px !important;
	height: 40px !important;
	border: 1px solid #dfe6ee !important;
	border-radius: 11px !important;
	background: #f8fafc !important;
	color: #475569 !important;
	font-size: 13px !important;
	font-weight: 900 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-overview-copy {
	display: grid !important;
	align-content: start !important;
	gap: 3px !important;
	min-width: 0 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-overview-copy strong {
	font-size: 13px !important;
	font-weight: 900 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-overview-copy small {
	color: var(--top1-settings-muted) !important;
	font-size: 10px !important;
	font-weight: 650 !important;
	line-height: 1.35 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-overview-status {
	grid-column: 1 / -1 !important;
	width: fit-content !important;
	max-width: 100% !important;
	padding: 4px 8px !important;
	overflow: hidden !important;
	border-radius: 999px !important;
	background: #eef2f7 !important;
	color: #475569 !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-policy-details {
	padding: 10px 12px !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	background: #f8fafc !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-policy-details summary {
	cursor: pointer !important;
	color: #334155 !important;
	font-size: 11px !important;
	font-weight: 850 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-policy-details p {
	margin: 8px 0 0 !important;
	color: var(--top1-settings-muted) !important;
	font-size: 11px !important;
	line-height: 1.45 !important;
}

/* Integrations are rendered as a real page, not a nested advanced accordion. */
.top1-app-shell[data-top1-section="settings"] .top1-settings-integrations {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	align-items: start !important;
	gap: 14px !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-integrations[hidden] {
	display: none !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-integrations > .top1-settings-section-intro,
.top1-app-shell[data-top1-section="settings"] .top1-settings-integrations > .top1-supplier-price-import-card,
.top1-app-shell[data-top1-section="settings"] .top1-settings-integrations > .top1-manual-targets-card {
	grid-column: 1 / -1 !important;
}

/* Forms and controls. */
.top1-app-shell[data-top1-section="settings"] :is(
	.top1-client-form,
	.top1-supplier-price-import-form,
	.top1-manual-targets-form,
	.top1-legal-profile-form,
	.top1-supplier-markup-form
) {
	display: grid !important;
	gap: 12px !important;
	min-width: 0 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-client-form-grid,
.top1-app-shell[data-top1-section="settings"] .top1-supplier-price-mapping-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 10px !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-client-form-field {
	display: grid !important;
	align-content: start !important;
	gap: 6px !important;
	min-width: 0 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-client-form-field-wide {
	grid-column: span 2 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-client-form-field > span,
.top1-app-shell[data-top1-section="settings"] .top1-supplier-price-mapping-grid label > span {
	color: #475569 !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
}

.top1-app-shell[data-top1-section="settings"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
	width: 100% !important;
	min-height: 40px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	color: var(--top1-settings-ink) !important;
	font-size: 12px !important;
	box-shadow: none !important;
}

.top1-app-shell[data-top1-section="settings"] textarea {
	min-height: 78px !important;
	resize: vertical !important;
}

.top1-app-shell[data-top1-section="settings"] :is(input, select, textarea, button, a, summary):focus-visible {
	outline: 3px solid rgba(220, 25, 51, 0.18) !important;
	outline-offset: 2px !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-client-form-actions,
.top1-app-shell[data-top1-section="settings"] .top1-legal-profile-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 8px !important;
}

.top1-app-shell[data-top1-section="settings"] :is(.top1-app-button, .top1-secondary-button) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 38px !important;
	height: auto !important;
	padding: 8px 13px !important;
	border-radius: 8px !important;
	font-size: 11px !important;
	font-weight: 850 !important;
	box-shadow: none !important;
}

/* Compact readable data blocks. */
.top1-app-shell[data-top1-section="settings"] .top1-inspector-list,
.top1-app-shell[data-top1-section="settings"] .top1-partsapi-status-strip,
.top1-app-shell[data-top1-section="settings"] .top1-settings-remote-diagnostics-card .top1-partsapi-status-strip {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 8px !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-inspector-row,
.top1-app-shell[data-top1-section="settings"] .top1-partsapi-status-strip > div {
	display: grid !important;
	align-content: start !important;
	gap: 4px !important;
	min-height: 64px !important;
	padding: 10px !important;
	border: 1px solid #e1e7ef !important;
	border-radius: 9px !important;
	background: #f8fafc !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-inspector-row span,
.top1-app-shell[data-top1-section="settings"] .top1-partsapi-status-strip span {
	color: var(--top1-settings-muted) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-inspector-row strong,
.top1-app-shell[data-top1-section="settings"] .top1-partsapi-status-strip strong {
	color: var(--top1-settings-ink) !important;
	font-size: 12px !important;
	font-weight: 900 !important;
	line-height: 1.3 !important;
	white-space: normal !important;
}

.top1-app-shell[data-top1-section="settings"] :is(.top1-inline-note, .top1-inline-notice) {
	margin: 0 !important;
	padding: 10px 12px !important;
	border: 1px solid #dbe4ee !important;
	border-left: 3px solid #3b82f6 !important;
	border-radius: 9px !important;
	background: #f8fbff !important;
	color: #334155 !important;
	font-size: 11px !important;
	font-weight: 650 !important;
	line-height: 1.45 !important;
	box-shadow: none !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-inline-notice.is-success {
	border-color: #bbf7d0 !important;
	border-left-color: #16a34a !important;
	background: #f0fdf4 !important;
	color: #166534 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-inline-notice.is-error {
	border-color: #fecdd3 !important;
	border-left-color: #e11d48 !important;
	background: #fff1f2 !important;
	color: #9f1239 !important;
}

/* PartsAPI and list editors. */
.top1-app-shell[data-top1-section="settings"] .top1-partsapi-filter-bar {
	display: grid !important;
	grid-template-columns: minmax(220px, 1.4fr) minmax(190px, 0.8fr) auto !important;
	align-items: end !important;
	gap: 10px !important;
	padding: 10px !important;
	border: 1px solid #dfe6ee !important;
	border-radius: 10px !important;
	background: #f8fafc !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-partsapi-filter-bar label {
	display: grid !important;
	gap: 5px !important;
	min-width: 0 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-partsapi-filter-bar label > span {
	color: #64748b !important;
	font-size: 10px !important;
	font-weight: 800 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-partsapi-filter-bar :is(input, select) {
	width: 100% !important;
	min-height: 38px !important;
	border: 1px solid #cfd9e5 !important;
	border-radius: 9px !important;
	background: #ffffff !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-partsapi-filter-bar > strong {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 38px !important;
	padding: 0 12px !important;
	border-radius: 999px !important;
	background: #eaf2ff !important;
	color: #1d4ed8 !important;
	font-size: 11px !important;
	white-space: nowrap !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-partsapi-scenario-card small {
	display: block !important;
	margin-top: 4px !important;
	color: #64748b !important;
	font-size: 10px !important;
	font-weight: 650 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-partsapi-module-panel,
.top1-app-shell[data-top1-section="settings"] .top1-manual-targets-list,
.top1-app-shell[data-top1-section="settings"] .top1-legal-profile-list {
	display: grid !important;
	gap: 8px !important;
	min-width: 0 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-partsapi-module-head,
.top1-app-shell[data-top1-section="settings"] .top1-partsapi-module-row {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 130px 48px !important;
	align-items: center !important;
	gap: 10px !important;
	min-width: 0 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-partsapi-module-row {
	height: auto !important;
	min-height: auto !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-partsapi-module-head {
	padding: 0 10px !important;
	color: #64748b !important;
	font-size: 10px !important;
	font-weight: 850 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-partsapi-module-row,
.top1-app-shell[data-top1-section="settings"] .top1-manual-target-row,
.top1-app-shell[data-top1-section="settings"] .top1-legal-profile-item {
	padding: 11px !important;
	border: 1px solid #dfe6ee !important;
	border-radius: 10px !important;
	background: #ffffff !important;
	box-shadow: none !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-manual-target-fields {
	display: grid !important;
	grid-template-columns: minmax(160px, 1fr) minmax(240px, 2fr) minmax(120px, 0.8fr) minmax(90px, 0.6fr) !important;
	gap: 10px !important;
}

/* Tables remain exact on desktop and become horizontal only when necessary. */
.top1-app-shell[data-top1-section="settings"] :is(.top1-table-placeholder, .top1-order-detail-table, .top1-supplier-price-preview-table) {
	max-width: 100% !important;
	overflow-x: auto !important;
	border: 1px solid #dfe6ee !important;
	border-radius: 10px !important;
	background: #ffffff !important;
	box-shadow: none !important;
	-webkit-overflow-scrolling: touch !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-table-row {
	min-height: 42px !important;
	padding: 9px 11px !important;
	border: 0 !important;
	border-top: 1px solid #e7edf3 !important;
	border-radius: 0 !important;
	background: #ffffff !important;
	font-size: 11px !important;
	box-shadow: none !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-table-row-head {
	border-top: 0 !important;
	background: #f1f5f9 !important;
	color: #475569 !important;
	font-size: 10px !important;
	font-weight: 850 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-supplier-markup-form .top1-table-row {
	grid-template-columns: 150px 140px minmax(180px, 1fr) minmax(220px, 1.2fr) !important;
	min-width: 760px !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-number-field {
	display: flex !important;
	align-items: center !important;
	gap: 7px !important;
	min-width: 0 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-number-field input {
	width: min(112px, 100%) !important;
	min-height: 36px !important;
	border: 1px solid #cfd9e5 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-number-field > span:not(.top1-settings-open-tail) {
	color: #64748b !important;
	font-weight: 800 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-open-tail {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 32px !important;
	padding: 0 10px !important;
	border-radius: 999px !important;
	background: #eef2f7 !important;
	color: #334155 !important;
	font-size: 10px !important;
	font-weight: 850 !important;
}

/* Remote diagnostics setup. */
.top1-app-shell[data-top1-section="settings"] .top1-settings-remote-diagnostics-card {
	width: 100% !important;
	max-width: none !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-remote-diagnostics-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 10px !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-remote-diagnostics-tile {
	display: grid !important;
	align-content: start !important;
	gap: 5px !important;
	min-height: 112px !important;
	padding: 14px !important;
	border: 1px solid #dfe6ee !important;
	border-radius: 11px !important;
	background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
	color: var(--top1-settings-ink) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-remote-diagnostics-tile:hover {
	border-color: #93c5fd !important;
	background: #f8fbff !important;
	transform: translateY(-1px) !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-remote-diagnostics-tile span {
	color: #64748b !important;
	font-size: 10px !important;
	font-weight: 850 !important;
	text-transform: uppercase !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-remote-diagnostics-tile strong {
	font-size: 14px !important;
	font-weight: 900 !important;
}

.top1-app-shell[data-top1-section="settings"] .top1-settings-remote-diagnostics-tile small {
	color: #64748b !important;
	font-size: 11px !important;
	font-weight: 650 !important;
	line-height: 1.4 !important;
}

@media (max-width: 1220px) {
	.top1-app-shell[data-top1-section="settings"] .top1-settings-header-tabs {
		grid-template-columns: repeat(7, minmax(150px, 1fr)) !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-settings-overview-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 920px) {
	.top1-app-shell[data-top1-section="settings"] .top1-settings-page-header {
		grid-template-columns: 54px minmax(0, 1fr) !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-settings-access-badge {
		justify-self: start !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-settings-header-state {
		grid-column: 1 / -1 !important;
		justify-items: start !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-settings-integrations {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-settings-integrations > * {
		grid-column: 1 !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-client-form-grid,
	.top1-app-shell[data-top1-section="settings"] .top1-supplier-price-mapping-grid,
	.top1-app-shell[data-top1-section="settings"] .top1-inspector-list,
	.top1-app-shell[data-top1-section="settings"] .top1-partsapi-status-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-manual-target-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-partsapi-filter-bar {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 680px) {
	.top1-app-shell[data-top1-section="settings"] .top1-app-content {
		padding: 9px 7px 76px !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-settings-main {
		gap: 10px !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-settings-page-header {
		grid-template-columns: 44px minmax(0, 1fr) !important;
		gap: 11px !important;
		min-height: 0 !important;
		padding: 14px !important;
		border-radius: 13px !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-settings-page-header::after {
		display: none !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-settings-hero-mark {
		width: 44px !important;
		height: 44px !important;
		border-radius: 13px !important;
		font-size: 17px !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-settings-page-heading h1 {
		font-size: 21px !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-settings-page-heading p {
		font-size: 11px !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-settings-header-tabs {
		grid-template-columns: none !important;
		grid-auto-flow: column !important;
		grid-auto-columns: 150px !important;
		padding: 5px !important;
		border-radius: 11px !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-settings-header-tabs .top1-dashboard-segment {
		min-height: 46px !important;
		padding: 6px 8px !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-content-card.top1-clients-card,
	.top1-app-shell[data-top1-section="settings"] .top1-settings-section-intro {
		gap: 10px !important;
		padding: 12px !important;
		border-radius: 12px !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-card-header {
		flex-direction: column !important;
		gap: 8px !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-settings-overview-grid,
	.top1-app-shell[data-top1-section="settings"] .top1-settings-remote-diagnostics-grid,
	.top1-app-shell[data-top1-section="settings"] .top1-client-form-grid,
	.top1-app-shell[data-top1-section="settings"] .top1-supplier-price-mapping-grid,
	.top1-app-shell[data-top1-section="settings"] .top1-inspector-list,
	.top1-app-shell[data-top1-section="settings"] .top1-partsapi-status-strip,
	.top1-app-shell[data-top1-section="settings"] .top1-manual-target-fields {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-partsapi-filter-bar {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-client-form-field-wide {
		grid-column: 1 !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-partsapi-module-head {
		display: none !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-partsapi-module-row {
		grid-template-columns: minmax(0, 1fr) auto !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-partsapi-module-edit-cell {
		grid-column: 2 !important;
		grid-row: 1 / span 2 !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-client-form-actions,
	.top1-app-shell[data-top1-section="settings"] .top1-legal-profile-actions,
	.top1-app-shell[data-top1-section="settings"] .top1-legal-profile-actions form {
		align-items: stretch !important;
		flex-direction: column !important;
	}

	.top1-app-shell[data-top1-section="settings"] .top1-client-form-actions :is(.top1-app-button, .top1-secondary-button),
	.top1-app-shell[data-top1-section="settings"] .top1-legal-profile-actions :is(.top1-app-button, .top1-secondary-button) {
		width: 100% !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.top1-app-shell[data-top1-section="settings"] * {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}