/**
 * Dealer Page Styles
 *
 * @package Vanstep_Dealers
 */

/* Login container */
.dealer-login-container {
	max-width: 400px;
	margin: 2rem auto;
	padding: 2rem;
}

.dealer-login-form h2 {
	margin-bottom: 1.5rem;
}

/* Access denied */
.dealer-access-denied {
	max-width: 600px;
	margin: 2rem auto;
	padding: 2rem;
	text-align: center;
}

/* Portal content (editor content - white background) */
.dealer-portal-content {
	margin-top: 25px;
	margin-bottom: 2rem;
}

/* Dealer section wrapper (full width with gray background) */
.dealer-section-wrapper {
	background-color: #eeeeee !important;
	padding-top: 0 !important;
	padding-bottom: 2rem;
	padding-left: 0;
	padding-right: 0;
	margin-top: 0 !important;
	margin-bottom: 0;
}

.dealer-portal-tabs {
	width: 100%;
	position: relative;
}

/* Heading tab (not clickable) - above tabs on the left */
.dealer-portal-tabs .tabcontainer {
	position: relative;
}

/* Ensure heading appears first in the sidebar, before tab_titles */
.dealer-portal-tabs .tabcontainer.sidebar_tab_left .tab_heading {
	background-color: #333333 !important;
	color: #b5b5b5 !important;
	font-weight: 900 !important; /* Extra bold */
	padding: 15px 20px !important; /* Match other tabs */
	margin: 0 !important;
	border-bottom: 3px solid #444 !important;
	display: flex !important;
	align-items: center !important;
	cursor: default !important;
	user-select: none !important;
	position: absolute !important; /* Use absolute to place it at the top */
	top: 0 !important;
	left: 0 !important;
	/* Match sidebar width exactly - Enfold uses ~25-30% for sidebar_tab_left */
	width: 25% !important;
	max-width: 300px !important;
	box-sizing: border-box !important; /* Ensure padding is included in width */
	z-index: 10 !important;
	/* Ensure it's visible and positioned */
	visibility: visible !important;
	opacity: 1 !important;
	min-height: 50px !important;
	/* Prevent heading from becoming too tall - allow text wrapping */
	overflow: hidden !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}

/* Icon via ::before with unicode (like child theme) */
.dealer-portal-tabs .tab_heading .tab_heading-icon {
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	line-height: 1.2em;
	text-align: center;
	vertical-align: middle;
	margin-right: 0.5em;
	position: relative;
	/* font-size: 0 removed - it breaks ::before pseudo-element */
	overflow: hidden;
}

.dealer-portal-tabs .tab_heading .tab_heading-icon::before {
	font-family: 'fontawesome5pro-solid', 'Font Awesome 5 Pro', 'Font Awesome 5 Free', sans-serif !important;
	font-weight: 900 !important;
	font-style: normal !important;
	font-size: 1em !important; /* Use 1em relative to parent's 1.2em */
	line-height: 1.2em !important;
	color: #b5b5b5 !important;
	display: inline-block !important;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}

/* Admin icon (shield) */
.dealer-portal-tabs .tab_heading .tab_heading-icon.icon-admin::before {
	content: "\f3ed";
}

/* Dealer Admin icon (star) */
.dealer-portal-tabs .tab_heading .tab_heading-icon.icon-dealer-admin::before {
	content: "\f005";
}

/* Dealer icon (user) */
.dealer-portal-tabs .tab_heading .tab_heading-icon.icon-dealer::before {
	content: "\f007";
}

/* Role label styling */
.dealer-portal-tabs .tab_heading .heading-role {
	font-weight: normal;
	font-size: 0.9em;
	opacity: 0.8;
}

/* Tooltip removed - role is now shown in text */

.dealer-portal-tabs .tab_heading .heading-name {
	font-size: 1em;
	font-weight: 900; /* Extra bold */
}

/* Form wrapper - left align content */
.dealer-form-wrapper {
	text-align: left;
}

/* Form title and description - limited width and left aligned */
.dealer-form-title {
	margin-bottom: 1rem;
	max-width: 800px;
	width: 100%;
	text-align: left;
	margin-left: 0;
	margin-right: auto;
}

.dealer-form-description {
	margin-bottom: 1.5rem;
	max-width: 800px;
	width: 100%;
	text-align: left;
	margin-left: 0;
	margin-right: auto;
}

/* Form container - ensure form is left aligned */
.dealer-form-container {
	max-width: 800px;
	width: 100%;
	text-align: left;
	margin-left: 0;
	margin-right: auto;
}

/* Override Gravity Forms centering for dealer form */
.dealer-form-container .gform_wrapper {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.dealer-form-container .gform_wrapper .assemble-product {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Tab content visibility - hide all by default EXCEPT first one (for initial load) */
.dealer-portal-tabs .tabcontainer .tab_content:not(.active_tab_content):not(:first-of-type) {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

/* First tab should be visible by default (before JS loads) - this takes precedence over everything */
.dealer-portal-tabs:not(.js-initialized) .tabcontainer .tab_content:first-of-type {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* First tab should also be visible if it has active_tab_content class (even without js-initialized) */
.dealer-portal-tabs .tabcontainer .tab_content:first-of-type.active_tab_content {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* But if first tab is not active and we have JS running, hide it */
.dealer-portal-tabs.js-initialized .tabcontainer .tab_content:first-of-type:not(.active_tab_content) {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

/* Active tab content should always be visible */
.dealer-portal-tabs .tabcontainer .tab_content.active_tab_content {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Ensure tab content is visible when aria-hidden is false */
.dealer-portal-tabs .tabcontainer .tab_content[aria-hidden="false"] {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Override any Enfold tab styles */
.dealer-portal-tabs .tabcontainer .av_tab_section .tab_content.active_tab_content {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Ensure heading appears above tabs in sidebar - positioned before tab_titles */
.dealer-portal-tabs .tabcontainer.sidebar_tab_left {
	/* Ensure container respects float layout */
	overflow: visible;
	/* Ensure heading is positioned at the top */
	position: relative;
	/* Don't use flexbox - it breaks Enfold's float layout for tab content */
	/* Reset any top margin/padding that might push heading down */
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Ensure tab_titles comes after heading and respects float */
.dealer-portal-tabs .tabcontainer.sidebar_tab_left .tab_titles {
	clear: both !important;
	margin: 0 !important;
	/* Position below heading - add margin-top to account for heading height */
	margin-top: 60px !important; /* Approximate height of heading (padding + content) */
	/* Match heading width exactly */
	width: 25% !important;
	max-width: 300px !important;
	box-sizing: border-box !important; /* Ensure padding is included in width */
	float: left !important;
	position: relative;
}

/* Subtle hover effect: underline on non-active tabs */
.dealer-portal-tabs .tabcontainer.sidebar_tab_left .tab_titles .tab:not(.active_tab) {
	transition: text-decoration 0.2s ease;
}

.dealer-portal-tabs .tabcontainer.sidebar_tab_left .tab_titles .tab:not(.active_tab):hover {
	text-decoration: underline;
}

/* Ensure tab content appears on the right side of sidebar (Enfold layout) */
.dealer-portal-tabs .tabcontainer.sidebar_tab_left .tab_content {
	position: relative;
	z-index: 1;
}

/* Gravity Forms section styling (only on dealer portal) - specific selectors to override defaults */
.dealer-portal-tabs .gform_wrapper .assemble-product .gform_fields .gfield.gfield--type-section.gsection {
	margin: 2rem 0 1.5rem !important;
	margin-bottom: -20px !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	overflow: visible !important;
}

.dealer-portal-tabs .gform_wrapper .assemble-product .gform_fields .gfield.gfield--type-section.gsection .gsection_title {
	margin: 0 !important;
	padding: 0 0 0.75rem !important;
	border-bottom: 2px solid #000 !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	text-align: left !important;
	font-size: 1.5rem !important;
	font-weight: 600 !important;
}

/* Pipe-choice grid: [checkbox] [links + opvullen][rechts][rechts].
   Column 1 = radio/checkbox; column 2 = first span (fills); columns 3–4 = second/third span (content width, right-aligned).
   ul/li = classic GF; .gchoice--pipe-parts (no li) = GF with div.gfield_radio / div.gchoice. */
.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts,
.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts,
.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts,
.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts,
.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts {
	display: grid !important;
	grid-template-columns: auto 1fr auto auto;
	gap: 0 1em;
	align-items: center;
	width: 100%;
	min-width: 0;
}

/* Put hidden input and label::before (radio/checkbox circle) both in column 1. */
.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts > input[type="radio"],
.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts > input[type="checkbox"],
.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts > input[type="checkbox"],
.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts label::before,
.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts label::before,
.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts > input[type="radio"],
.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts > input[type="checkbox"],
.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts label::before,
.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts > input[type="radio"],
.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts > input[type="checkbox"],
.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts > input[type="checkbox"],
.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts label::before,
.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts label::before {
	grid-column: 1;
}

/* Label must not be a box so the three spans become grid cells (override theme flex). */
.dealer-portal-tabs .dealer-form-container .gform_wrapper .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts label,
.dealer-portal-tabs .dealer-form-container .gform_wrapper .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts label,
.dealer-portal-tabs .dealer-form-container .gform_wrapper ul.gfield_choice_pipe_grid li.gchoice--pipe-parts label,
.dealer-portal-tabs .dealer-form-container .gform_wrapper .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts label,
.dealer-portal-tabs .dealer-form-container .gform_wrapper .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts label {
	display: contents !important;
}

/* Column 2: first span left, fills (opvullen). Column 3: left. Column 4: rechts. */
.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--1,
.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--1,
.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--1,
.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts .choice-part--1,
.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts .choice-part--1 {
	min-width: 0;
}

.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--3,
.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--3,
.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--3,
.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts .choice-part--3,
.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts .choice-part--3 {
	text-align: right;
}

/* Hide part--2 and part--3 until JS has set min-widths (prevents layout shift). */
.dealer-portal-tabs .dealer-form-container.pipe-choice-columns-pending .gfield_choice_pipe_grid .choice-part--2,
.dealer-portal-tabs .dealer-form-container.pipe-choice-columns-pending .gfield_choice_pipe_grid .choice-part--3 {
	visibility: hidden;
}

/* Mobile: no columns, inline text with pipe separator; wrapped lines align under first text (≤700px). */
@media (max-width: 700px) {
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts,
	.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts,
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts {
		display: flex !important;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
		grid-template-columns: unset;
		gap: 0 0.25em;
	}

	/* Li has two items: hidden input, then label. */
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts > input[type="radio"],
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts > input[type="checkbox"],
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts > input[type="checkbox"],
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts label::before,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts label::before,
	.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts > input[type="radio"],
	.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts > input[type="checkbox"],
	.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts label::before,
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts > input[type="radio"],
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts > input[type="checkbox"],
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts > input[type="checkbox"],
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts label::before,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts label::before {
		grid-column: unset;
	}

	/* Label = block, neemt resterende ruimte in li zodat inline content kan wrappen; radio circle absolute left. */
	.dealer-portal-tabs .dealer-form-container .gform_wrapper .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts label,
	.dealer-portal-tabs .dealer-form-container .gform_wrapper .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts label,
	.dealer-portal-tabs .dealer-form-container .gform_wrapper ul.gfield_choice_pipe_grid li.gchoice--pipe-parts label,
	.dealer-portal-tabs .dealer-form-container .gform_wrapper .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts label,
	.dealer-portal-tabs .dealer-form-container .gform_wrapper .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts label {
		display: block !important;
		position: relative;
		padding-left: 2.5em;
		min-width: 0;
		flex: 1 1 0%;
		overflow-wrap: break-word;
	}

	/* Radio circle in top-left of label so all label text starts at padding-left. */
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts label::before,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts label::before,
	.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts label::before,
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts label::before,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts label::before {
		position: absolute;
		left: 0;
	}

	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--1,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--1,
	.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--1,
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts .choice-part--1,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts .choice-part--1 {
		min-width: 0 !important;
		text-align: left;
	}

	/* Parts mogen afzonderlijk naar de volgende regel; inhoud breekt alleen bij overflow (overflow-wrap). */
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--2,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--2,
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--3,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--3,
	.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--2,
	.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--3,
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts .choice-part--2,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts .choice-part--2,
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts .choice-part--3,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts .choice-part--3 {
		min-width: 0 !important;
		text-align: left;
		overflow-wrap: anywhere;
	}

	/* Pipe centered between words: equal margin so gap (left) doesn’t outweigh space (right). */
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--2::before,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--2::before,
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--3::before,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--3::before,
	.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--2::before,
	.dealer-portal-tabs .dealer-form-container ul.gfield_choice_pipe_grid li.gchoice--pipe-parts .choice-part--3::before,
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts .choice-part--2::before,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts .choice-part--2::before,
	.dealer-portal-tabs .dealer-form-container .gfield_radio.gfield_choice_pipe_grid .gchoice--pipe-parts .choice-part--3::before,
	.dealer-portal-tabs .dealer-form-container .gfield_checkbox.gfield_choice_pipe_grid .gchoice--pipe-parts .choice-part--3::before {
		content: " | ";
		white-space: pre;
		margin-left: 0.25em;
		margin-right: 0.25em;
	}

	/* On mobile no column widths are used, so show part--2 and part--3 immediately. */
	.dealer-portal-tabs .dealer-form-container.pipe-choice-columns-pending .gfield_choice_pipe_grid .choice-part--2,
	.dealer-portal-tabs .dealer-form-container.pipe-choice-columns-pending .gfield_choice_pipe_grid .choice-part--3 {
		visibility: visible;
	}
}

/* Tab content headings */
.dealer-portal-tabs .tab_inner_content h2 {
	margin-top: 0;
	margin-bottom: 1.5rem;
	font-size: 1.75rem;
	font-weight: 600;
}

/* Entries table */
.dealer-entries-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1rem;
	table-layout: auto;
}

.dealer-entries-table th,
.dealer-entries-table td {
	padding: 0.75rem;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

.dealer-entries-table th {
	font-weight: bold;
	background-color: #f5f5f5;
}

.dealer-entry-toggle {
	background: none;
	border: 1px solid #ddd;
	padding: 0.5rem 1rem;
	cursor: pointer;
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.dealer-entry-toggle:hover {
	background-color: #f5f5f5;
}

.dealer-entry-details {
	background-color: #f9f9f9;
}

.dealer-entry-details-content {
	padding: 1rem;
}

.dealer-entry-details-table {
	width: 100%;
	border-collapse: collapse;
}

.dealer-entry-details-table th {
	text-align: left;
	padding: 0.5rem 1rem 0.5rem 1rem;
	font-weight: 600;
	width: 30%;
}

.dealer-entry-details-table td {
	padding: 0.5rem 1rem;
}

/* Consistent button styling for Beheerder and Uitloggen tabs */
.dealer-admin-button,
.dealer-logout-button {
	margin-top: 1rem;
	padding: 0.75rem 1.5rem;
	color: #fff;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	font-size: 1rem;
	text-decoration: none;
	display: inline-block;
}

.dealer-admin-button {
	background-color: #0073aa;
}

.dealer-admin-button:hover {
	background-color: #005a87;
	color: #fff;
}

.dealer-logout-button {
	background-color: #dc3232;
}

.dealer-logout-button:hover {
	background-color: #a00;
	color: #fff;
}

/* Ensure consistent spacing in Beheerder and Uitloggen tabcontents */
.dealer-portal-tabs .tab_inner_content h2 + p {
	margin-top: 0;
	margin-bottom: 1rem;
}

/* Downloads list */
.dealer-downloads-list {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1.5rem;
}

@media screen and (min-width: 769px) {
	.dealer-downloads-list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.dealer-download-item {
	margin: 0;
	min-width: 0;
	display: flex;
	align-items: stretch;
}

.dealer-download-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1rem;
	background-color: #fff;
	border-radius: 4px;
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	min-width: 0;
	width: 100%;
	flex: 1;
	min-height: 0;
}

.dealer-download-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.dealer-download-thumbnail {
	width: auto;
	max-height: 200px;
	height: auto;
	object-fit: contain;
	margin-bottom: 0.75rem;
}

.dealer-download-icon {
	font-size: 4rem;
	margin-bottom: 0.75rem;
	line-height: 1;
}

.dealer-download-label {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 0 0.25rem;
	box-sizing: border-box;
	color: #333;
	font-weight: 500;
	overflow-wrap: break-word;
	word-break: break-word;
	margin-top: auto;
}

/* Intermediate viewports - prevent heading from being too tall */
@media screen and (min-width: 769px) and (max-width: 1100px) {
	/* Limit heading height to prevent overlap with first tab */
	.dealer-portal-tabs .tabcontainer.sidebar_tab_left .tab_heading {
		max-height: 70px !important;
		overflow: hidden !important;
		padding: 12px 15px !important;
		font-size: 0.9em !important;
		line-height: 1.3 !important;
	}

	/* Ensure heading text wraps properly and doesn't overflow */
	.dealer-portal-tabs .tab_heading .heading-name {
		word-wrap: break-word;
		overflow-wrap: break-word;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.3;
	}

	.dealer-portal-tabs .tab_heading .heading-role {
		font-size: 0.85em;
		line-height: 1.2;
	}

	/* Adjust tab_titles margin to account for potentially taller heading */
	.dealer-portal-tabs .tabcontainer.sidebar_tab_left .tab_titles {
		margin-top: 75px !important; /* Slightly more than max-height to prevent overlap */
	}

	/* Ensure icon doesn't take too much space */
	.dealer-portal-tabs .tab_heading .tab_heading-icon {
		flex-shrink: 0;
		margin-right: 0.4em;
	}
}

/* Mobile responsive styles */
@media screen and (max-width: 768px) {
	/* Make heading and tabs full width on mobile */
	.dealer-portal-tabs .tabcontainer.sidebar_tab_left .tab_heading {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		left: auto !important;
		top: auto !important;
		margin-bottom: 0 !important;
	}

	/* Adjust tab titles for mobile */
	.dealer-portal-tabs .tabcontainer.sidebar_tab_left .tab_titles {
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 0 !important;
		float: none !important;
		clear: both !important;
	}

	/* Ensure tab content is full width on mobile */
	.dealer-portal-tabs .tabcontainer.sidebar_tab_left .tab_content {
		width: 100% !important;
		margin-left: 0 !important;
		float: none !important;
		clear: both !important;
	}

	/* Adjust container to stack vertically on mobile */
	.dealer-portal-tabs .tabcontainer.sidebar_tab_left {
		display: flex !important;
		flex-direction: column !important;
	}

	/* Ensure heading text wraps properly */
	.dealer-portal-tabs .tab_heading .heading-name {
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	/* Make sure heading text doesn't overflow */
	.dealer-portal-tabs .tab_heading {
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
	}

	/* Make entries table more compact on mobile */
	.dealer-entries-table {
		font-size: 0.85em;
		table-layout: fixed;
		width: 100%;
	}

	.dealer-entries-table th,
	.dealer-entries-table td {
		padding: 0.5rem 0.4rem;
		vertical-align: top;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.dealer-entries-table th {
		font-size: 0.9em;
		padding: 0.5rem 0.4rem;
		white-space: normal;
		line-height: 1.2;
	}

	/* Make date column more compact - allow wrapping but keep compact */
	.dealer-entries-table td:first-child {
		font-size: 0.8em;
		line-height: 1.3;
		width: 30%;
		word-break: break-word;
	}

	/* Compact reference column */
	.dealer-entries-table td:nth-child(2) {
		font-size: 0.85em;
		width: 35%;
		word-break: break-word;
	}

	/* Details column - keep button compact */
	.dealer-entries-table td:last-child {
		width: 35%;
		text-align: center;
	}

	/* Compact details button */
	.dealer-entry-toggle {
		padding: 0.4rem 0.6rem;
		font-size: 0.85em;
		white-space: nowrap;
		min-width: auto;
	}

	.dealer-entry-toggle .toggle-text {
		display: none; /* Hide "Bekijken" text, only show icon on mobile */
	}

	.dealer-entry-toggle .toggle-icon {
		font-size: 0.9em;
		margin: 0;
	}
}

/* Extra small mobile devices */
@media screen and (max-width: 480px) {
	/* Reduce padding on very small screens */
	.dealer-portal-tabs .tabcontainer.sidebar_tab_left .tab_heading {
		padding: 12px 15px !important;
		font-size: 0.9em;
	}

	/* Ensure icon and text fit on small screens */
	.dealer-portal-tabs .tab_heading .tab_heading-icon {
		flex-shrink: 0;
	}

	.dealer-portal-tabs .tab_heading .heading-name {
		font-size: 0.9em;
	}

	.dealer-portal-tabs .tab_heading .heading-role {
		font-size: 0.85em;
	}

	/* Even more compact table on very small screens */
	.dealer-entries-table {
		font-size: 0.75em;
	}

	.dealer-entries-table th,
	.dealer-entries-table td {
		padding: 0.4rem 0.3rem;
	}

	.dealer-entries-table th {
		font-size: 0.85em;
		padding: 0.4rem 0.3rem;
	}

	.dealer-entries-table td:first-child {
		font-size: 0.7em;
		width: 28%;
	}

	.dealer-entries-table td:nth-child(2) {
		font-size: 0.75em;
		width: 37%;
	}

	.dealer-entries-table td:last-child {
		width: 35%;
	}

	.dealer-entry-toggle {
		padding: 0.3rem 0.5rem;
		font-size: 0.8em;
		min-width: auto;
	}

	/* Details table also more compact */
	.dealer-entry-details-table th,
	.dealer-entry-details-table td {
		padding: 0.4rem 0.5rem;
		font-size: 0.85em;
	}

	.dealer-entry-details-content {
		padding: 0.75rem;
	}
}