body {
    font-family: 'Roboto', sans-serif; /* Fallback to sans-serif if the font fails to load */
}

/* Optional: Additional padding or margin for the content */
.container {
    padding: 10px 5px;
}

/* Optional: Customize the appearance of buttons, tables, or other elements if needed */
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-tiny {
  padding: .1rem .4rem;
  font-size: 0.875rem; 
  line-height: .5;
}

.table {
    margin-bottom: 0;
}

.table th, .table td {
    padding: 12px;
    vertical-align: middle;
}

/* Remove underline on hover for the collapsible headers */
.btn-link {
    text-decoration: none;
}

/* Ensure no underline appears on hover */
.btn-link:hover,
.btn-link:focus {
    text-decoration: none;
}

/* Add some space between the section title and the arrow */
.btn-link .rotate-icon {
    margin-left: 10px; /* Adjust this value as needed */
}

/* Optional: Make the button appearance a little cleaner */
.btn-link {
    font-weight: bold;  /* Optional: Make the header title bold */
    color: #007bff;     /* Optional: Customize the color */
    padding-left: 0;
}
.card-header {
    cursor: pointer;
}
.spec-row {
    display: flex;
    justify-content: space-between; /* Distribute columns evenly */
}
.spec-col {
    width: 25%; /* Adjust this to leave empty space on the right */
    padding-right: 15px; /* Space between columns */
}

/* Styles for the Settings menu page */
.settings-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
}
.settings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px;
	width: 100%;
	max-width: 800px;
}
.settings-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15px;
	text-align: center;
	background: #f8f9fa;
	border: 1px solid #ddd;
	border-radius: 8px;
	transition: transform 0.2s;
}
.settings-card:hover {
	transform: scale(1.05);
}
.settings-card i {
	font-size: 24px;
	color: #007bff;
}
.settings-card h5 {
	margin-top: 10px;
	font-size: 16px;
}

.dropdown-menu {
    position: absolute; /* Take it out of the flow */
    top: 100%; /* Align just below the button */
    right: 0; /* Align to the right edge */
    z-index: 1050; /* Ensure it appears above other elements */
    min-width: 200px; /* Set a default width */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}

/* Attachment styles used on vehicle attachments list screen */
.attachment-group {
    align-items: center; /* Ensures all elements align vertically */
    gap: 10px; /* Adds space between elements */
}

#add-attachment {
    padding: 5px 10px; /* Reduces vertical padding to match input */
    margin-bottom: 0; /* Ensures alignment is consistent */
    position: relative; /* Enables the use of top positioning */
    top: 3px; /* Shifts the button down by 2px */
}

.delete-attachment {
    height: 30px; /* Fixed height for the button */
    width: 100%; /* Match the width of the image */
    font-size: 0.85rem; /* Adjust font size to fit the smaller button */
    text-align: center; /* Horizontal text alignment */
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center text horizontally */
    align-items: center; /* Center text vertically */
	line-height: normal !important;
	padding: 0 !important;
	margin: 0 !important;
    box-sizing: border-box; /* Include borders in height calculation */
}

.delete-button {
	width: 30px; 
	height: 30px; 
	display: flex; 
	align-items: center; 
	justify-content: center;
}


.gallery {
    margin-top: 20px; /* Adds space between the new file form and gallery */
}

.gallery-item-header {
	background-color: #e0e0e0;	
    text-transform: uppercase;
    height: 20px; /* Fixed height for the button */
    width: 100%; /* Match the width of the image */
    font-size: 0.75rem; /* Adjust font size to fit the smaller button */
	font-weight: bold;
    text-align: center; /* Horizontal text alignment */
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center text horizontally */
    align-items: center; /* Center text vertically */
	line-height: normal !important;
	padding: 0 !important;
	margin: 0 !important;
    box-sizing: border-box; /* Include borders in height calculation */
}

.gallery-item {
	margin: 3px;
}

/* Narrow mode settings */
@media (max-width: 767px) {
	.hide-sm {
        display: none;
    }
}

/* Flash Message Styles */
.flash {
    width: 100%;
    padding: 12px 20px;
    margin: 0;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border: none;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    animation: slideDown 0.3s ease-out;
}

.flash-success {
    background-color: #d4edda;
    color: #155724;
    border-left: 4px solid #28a745;
}

.flash-error {
    background-color: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.flash-warning {
    background-color: #fff3cd;
    color: #856404;
    border-left: 4px solid #ffc107;
}

.flash-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-left: 4px solid #17a2b8;
}

/* Optional: Add an icon before the message */
.flash::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
}

.flash-success::before {
    content: "\f00c"; /* checkmark */
}

.flash-error::before {
    content: "\f071"; /* exclamation triangle */
}

.flash-warning::before {
    content: "\f071"; /* exclamation triangle */
}

.flash-info::before {
    content: "\f05a"; /* info circle */
}

/* Slide down animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Optional: Auto-dismiss after 5 seconds */
.flash {
    transition: opacity 0.3s ease-out;
}

.flash.fade-out {
    opacity: 0;
}