.vehicle-list-item {
	cursor: pointer;
}

.vehicle-thumbnail, .vehicle-image {
	cursor: pointer;
}

.part-thumbnail, .part-image {
	cursor: pointer;
}

.flyout > .close.icon {
	cursor: pointer;
}

/* Make the right sidebar solid background */
.ui.right.sidebar {
	background-color: #ffffff !important; /* solid white background */
	box-shadow: -2px 0 5px rgba(0,0,0,0.2);
	padding: 2em;
	overflow-y: auto;
	z-index: 1000;
}

/* Optional: prevent body scroll when sidebar is open */
body.sidebar-visible {
	overflow: hidden;
}

body {
	margin: 0;
}

.main-content {
	margin-top: 2rem;
	padding: 2rem;
}

/* FOR MOBILE ONLY */
@media only screen 
   and (max-width : 990px) {

	.main-content {
		margin-top: 0;
	}

	.mobile-only {
		display: block;
	}

	td.mobile-only {
		display: table-cell;
	}

	tr.mobile-only {
		display: table-row;
	}

	.computer-only {
		display: none;
	}
}

/* FOR COMPUTER ONLY */
@media only screen
   and (min-width : 991px) {

	.computer-only {
		display: block;
	}

	td.computer-only {
		display: table-cell;
	}

	tr.computer-only {
		display: table-row;
	}

	table.computer-only {
		display: table;
	}

	.mobile-only {
		display: none !important;
	}
}


/* Style for the vehicle image */
.vehicle-image {
	width: 100%;
	height: auto;
	border-radius: 8px;
	max-height: 300px;
	object-fit: cover;
}

.part-image {
	width: 100%;
	height: auto;
	border-radius: 8px;
	max-height: 300px;
	object-fit: cover;
}

.extra.content.image-error {
	color:red;
}

/* Two-column detail layout */
.details-grid .row {
	padding: 5px 0;
}



/* Full-screen modal adjustments */
.ui.modal.fullscreen {
	width: 100vw !important;
	height: 100vh !important;
	max-width: none !important;
	top: 0 !important;
	left: 0 !important;
	margin: 0 !important;
	border-radius: 0;
	display: flex;
	flex-direction: column;
}

.ui.modal .content {
	flex-grow: 1;
	overflow-y: auto;
}

/* Two-column layout */
.details-grid .row {
	padding: 5px 0;
}

.dvla-panel-info {
	color: #fff;
	background: #00703c;
	padding: 30px;
	text-align:center;
}

.dvla-panel-info > .status {
	display: inline-block;
	padding:20px;
	font-size: x-large;
	font-weight: bold;
}


.is-invalid {
	background: #d4351c !important;
}


.desktop-menu {
	background-color: #2185d0; /* dark background */
	color: white !important;
}

.desktop-menu .ui.dropdown.item {
	background-color: #2185d0; /* dark background */
	color: white !important;
}

.menu.desktop-menu .ui.item .ui.menu  {
	background-color: #2185d0; /* dark background */
	color: white !important;
}

.menu.desktop-menu .ui.dropdown.item .ui.menu>.ui.item  {
	background-color: #2185d0; /* dark background */
	color: white !important;
}

/***********************/


.mobile-menu .ui.menu .ui.dropdown .menu>.item { 
	background-color: #2185d0; /* dark background */
	color: white !important;
}

.mobile-menu .ui.menu .ui.dropdown .menu>.item:hover {
	color: white !important;
}

.mobile-menu>.item {
	color: white !important;
}

.title.selected {
	border: black 1px solid;
}

.title.is-new {
	color: green!important;
}
.dropdown.icon.invisible {
  visibility: hidden; /* keeps spacing, hides icon */
}

/**********************************************/

.inventory-record-item.sku {
	color: #c0c0c0
}

/**********************************************/
/* Settings Mobile Card Styles */
/**********************************************/

/* Setting card styling - applies to both mobile and desktop */
.setting-card {
	margin-bottom: 1em !important;
}

.setting-card .header {
	font-size: 1.1em !important;
	margin-bottom: 0.3em !important;
}

.setting-card .meta {
	color: rgba(0, 0, 0, 0.5) !important;
	font-size: 0.9em !important;
}

.setting-card .description {
	margin-top: 0.8em !important;
}

.setting-card .description .item {
	padding: 0.3em 0 !important;
}

.setting-card.editing {
	border-left: 3px solid #2185d0 !important;
}

.setting-card .ui.form .field {
	margin-bottom: 1em;
}

.setting-card .extra.content {
	padding: 0.75em 1em !important;
}

/* Mobile-specific styles */
@media only screen and (max-width: 990px) {
	/* Ensure buttons are touch-friendly on mobile */
	.setting-card .ui.button {
		padding: 0.9em 1.2em !important;
	}

	/* Two button layout spacing */
	.setting-card .ui.two.buttons .button {
		margin: 0 !important;
	}

	/* Mobile cards container */
	.vfm-setting-cards-container {
		margin-top: 1em;
	}

	/* Ensure cards stack properly */
	.vfm-setting-cards-container .setting-card {
		width: 100% !important;
	}
}

/* Desktop: ensure table displays properly */
@media only screen and (min-width: 991px) {
	.setting-table {
		display: table !important;
	}
}