/* Custom styles for Patrimoine Gabon */

/* Color Variables */
:root {
    --gabon-blue: #0d048e;
    --gabon-yellow: #FF6600;
    --gabon-green: #054b31;

    /* Palette HIKIMA */
    --bleu-officiel: #003366; /* Confiance, stabilité */
    --orange-innovation: #FF6600; /* Énergie, innovation */
    --vert-espoir: #009933; /* Croissance, développement */
    --blanc: #FFFFFF;

    --primary-color: var(--gabon-blue); 
    --secondary-color: var(--orange-innovation); 
    --tertiary-color: var(--gabon-green); 
    --primary-color-transparent: rgba(58, 117, 196, 0.1);

    --white-color: #FFFFFF; /* Texte */
    --light-gray-color: #F8F9FA; /* Fond dropdown, body background */
    --medium-gray-color: #e9ecef; /* Backgrounds légers, bordures */
    --dark-gray-color: #343A40; /* Card headers, footer text */
    --text-color: #212529; /* Couleur de texte générale */
    --text-muted: #6c757d; /* Texte secondaire ou désactivé */
    
    /* RGB values for transparent colors */
    --primary-color-rgb: 5, 75, 49; /* gabon-green RGB */
    --secondary-color-rgb: 252, 209, 22; /* gabon-yellow RGB */
    --tertiary-color-rgb: 2, 32, 71; /* gabon-blue RGB */

    --accent-color-1: #007bff; /* Bleu Bootstrap */
    --accent-color-2: #6f42c1; /* Violet */
    --accent-color-3: #fd7e14; /* Orange */

    --success-color: #28a745;
    --info-color: #17a2b8;
    --warning-color: #ffc107;
    --danger-color: #dc3545;

    --hover-background-light: rgba(255, 255, 255, 0.1); /* Sidebar link hover */
    --inter-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Base styles */
html, body {
    height: 100%; /* Ensure html and body take full height */
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    font-family: var(--inter-font);
    background-color: var(--light-gray-color);
    color: var(--text-color);
    line-height: 1.6;
    /* min-height: 100vh; */ /* Removed as height: 100% and flex will manage it */
    display: flex;
    flex-direction: column;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--dark-gray-color);
    font-weight: 700;
    line-height: 1.3;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* Forms */
.form-control {
    border-radius: 8px;
    border: 1px solid var(--medium-gray-color);
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}

.form-label {
    font-weight: 600;
    color: var(--text-color);
}


/* Specific body styles for login page or general */
body:not(.login-page) {
    padding-top: 60px; /* Header height */
}

body.login-page {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/BACK.png'); /* Darker overlay for better contrast */
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* Ensure content is still flex for centering */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    padding: 20px; /* Add some padding for smaller screens */
    padding-top: 0; /* Remove padding-top from general body rule for login page */
    overflow-y: auto; /* Allow scrolling if content is taller than viewport */
}

@media (max-width: 992px) {
    body.login-page {
        background-size: cover;
        background-position: center;
    }
}

.header-login {
    background-color: var(--gabon-blue); /* Use gabon-green for the header */
    color: var(--white-color);
    padding: 15px 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* Softer shadow for elegance */
    z-index: 1000;
}
.header-login h1 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--white-color); /* Ensure text is white */
}


.login-container {
    background-color: rgba(255, 255, 255, 0.2); /* Slightly more transparent white background */
    padding: 40px 50px; /* Slightly more horizontal padding */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* More subtle and spread shadow */
    border: 1px solid var(--medium-gray-color); /* Subtle border */
    max-width: 450px;
    width: 100%;
    animation: fadeInScale 0.5s ease-out forwards;
}

.login-container h2 {
    color: var(--gabon-green); /* Changed to gabon-green for consistency */
    font-weight: 700;
    margin-bottom: 30px;
    text-shadow: -1px -1px 0 var(--gabon-yellow), 1px -1px 0 var(--gabon-yellow), -1px 1px 0 var(--gabon-yellow), 1px 1px 0 var(--gabon-yellow); /* Yellow outline */
}

.login-container .form-label {
    font-weight: 600; /* Bolder labels */
    color: var(--gabon-yellow); /* Change label color to gabon-yellow */
}

.login-container .form-control {
    border-radius: 8px;
    border: 1px solid var(--gabon-yellow); /* Border gabon-yellow at rest */
    background-color: var(--white-color); /* Ensure white background */
    padding: 12px 15px;
    transition: all 0.3s ease;
}

.login-container .form-control:focus {
    border-color: var(--gabon-yellow); /* Use gabon-yellow for focus border */
    box-shadow: 0 0 0 0.25rem rgba(227, 166, 13, 0.25), 0 0 8px rgba(227, 166, 13, 0.3); /* Add subtle glow with gabon-yellow */
}

/* Alerts within login container */
.login-container .alert {
    margin-bottom: 20px; /* Space below alert */
    border-radius: 8px;
    padding: 15px 20px;
    font-weight: 500;
}
.login-container .alert-danger {
    background-color: #f8d7da; /* Bootstrap default */
    border-color: #f5c2c7; /* Bootstrap default */
    color: #842029; /* Bootstrap default */
}


/* Override Bootstrap colors for buttons */
.btn-primary-custom {
    background-color: var(--gabon-green); /* Use gabon-green for button */
    border-color: var(--gabon-green); /* Use gabon-green for button border */
    color: var(--white-color); /* Ensure text is white */
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 2px var(--gabon-yellow), 0 5px 15px rgba(var(--primary-color-rgb), 0.2); /* Yellow outline + subtle initial shadow */
}
.btn-primary-custom:hover {
    background-color: var(--gabon-yellow); /* Use gabon-yellow for hover */
    border-color: var(--gabon-yellow); /* Use gabon-yellow for hover border */
    color: var(--dark-gray-color); /* Change text color for better contrast on hover */
    box-shadow: 0 0 0 2px var(--gabon-yellow), 0 8px 20px rgba(var(--secondary-color-rgb), 0.4); /* Yellow outline + more pronounced hover shadow */
    transform: translateY(-2px);
}

/* Header & Main Navigation (from includes/header.php) */
.header-patrimoine {
    background-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* More professional shadow */
    z-index: 1030;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Explicit height */
    padding-top: 5px; /* Slightly more vertical padding */
    padding-bottom: 5px;
}

.header-patrimoine .navbar {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.header-patrimoine .navbar-brand {
    display: flex;
    align-items: center;
    color: var(--white-color);
    font-weight: 700; /* Bolder brand text */
    font-size: 1.35rem; /* Slightly larger brand text */
    padding-right: 15px;
}

.header-patrimoine .navbar-brand .logo-gabon {
    height: 38px; /* Slightly larger logo */
    margin-right: 10px;
    border-radius: 4px; /* Slightly more rounded logo */
}

/* Main Navigation Links */
.header-patrimoine .navbar-nav > .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.9); /* Slightly less white for better contrast */
    font-size: 16px;
    font-weight: 500;
    padding: 8px 15px; /* Adjusted padding */
    position: relative;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    border-radius: 6px; /* Rounded corners for nav items */
}

.header-patrimoine .navbar-nav > .nav-item > .nav-link i {
    margin-right: 8px;
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.7); /* Lighter icons */
}

.header-patrimoine .navbar-nav > .nav-item > .nav-link:hover,
.header-patrimoine .navbar-nav > .nav-item > .nav-link.active {
    color: var(--white-color);
    background-color: rgba(var(--secondary-color-rgb), 0.2); /* Subtle hover/active */
    border-radius: 6px;
}

/* Dropdown Menu Styling */
.header-patrimoine .dropdown-menu {
    background-color: var(--white-color);
    border: 1px solid var(--medium-gray-color);
    border-radius: 10px; /* More rounded */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); /* More professional shadow */
    padding: 8px 0; /* Adjusted padding */
    animation: fadeIn 0.3s ease-out;
    min-width: 280px; /* Adjusted min-width for better balance */
}

.header-patrimoine .dropdown-menu .dropdown-item {
    color: var(--text-color);
    font-size: 14px; /* Slightly larger font */
    padding: 10px 20px; /* Comfortable padding */
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    border-radius: 6px; /* Rounded corners for items */
    margin: 0 5px; /* Small horizontal margin */
}

.header-patrimoine .dropdown-menu .dropdown-item:hover,
.header-patrimoine .dropdown-menu .dropdown-item:focus {
    background-color: var(--light-gray-color);
    color: var(--primary-color);
}

.header-patrimoine .dropdown-menu .dropdown-item i {
    margin-right: 10px; /* More space for icons */
    color: var(--text-muted); /* Subtler icon color */
}

.header-patrimoine .dropdown-menu .dropdown-header {
    color: var(--primary-color);
    font-weight: 700; /* Bolder header */
    padding: 10px 20px 8px; /* Adjusted padding */
    font-size: 0.9rem; /* Slightly larger font */
    border-bottom: 1px solid var(--medium-gray-color);
    margin-bottom: 8px; /* Adjusted margin */
}

.header-patrimoine .dropdown-menu .dropdown-divider {
    margin: 10px 0;
    border-top-color: var(--medium-gray-color);
}

/* Mega Menu */
@media (min-width: 992px) {
    .header-patrimoine .mega-menu {
        position: fixed !important;
        top: 60px !important; /* Adjust to refined navbar height */
        width: 1100px; /* Increased width */
        max-width: 95vw; /* Responsive fallback */
        padding: 20px; /* More padding */
        left: 50% !important;
        transform: translateX(-50%) !important;
        background-color: var(--white-color);
        border-radius: 10px; /* Consistent rounded corners */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); /* Consistent shadow */
    }
}

.header-patrimoine .mega-menu .col-md-3 { /* Changed from lg-3 to md-3 for wider application */
    padding-left: 15px; /* Wider gutter */
    padding-right: 15px;
}

.header-patrimoine .mega-menu .dropdown-header {
    color: var(--tertiary-color); /* Use tertiary color for mega menu headers */
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--primary-color); /* Subtle underline */
    padding-bottom: 5px;
}

.header-patrimoine .mega-menu .dropdown-item {
    padding: 5px 0;
    font-weight: 500;
    color: var(--text-color);
}

.header-patrimoine .mega-menu .dropdown-item:hover {
    color: var(--primary-color);
    background-color: transparent; /* Ensure no background on hover */
}

.header-patrimoine .mega-menu .dropdown-item ul {
    padding-left: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}

.header-patrimoine .mega-menu .dropdown-item ul li {
    padding-left: 15px; /* Indent for sub-items */
}

.header-patrimoine .mega-menu .dropdown-item .sub-item {
    font-size: 13px; /* Slightly larger sub-item font */
    font-weight: 400;
    padding: 3px 0;
    color: var(--text-muted);
}
.header-patrimoine .mega-menu .dropdown-item .sub-item:hover {
    color: var(--primary-color);
    background-color: transparent;
}


/* Badges */
.header-patrimoine .badge.bg-orange {
    background-color: var(--secondary-color) !important;
    color: var(--white-color);
    font-size: 0.75em; /* Slightly larger */
    padding: 0.3em 0.7em; /* More padding */
    border-radius: 0.3rem; /* Slightly more rounded */
    margin-left: 8px; /* More margin */
}

/* User Menu */
.header-patrimoine .user-menu .user-avatar {
    width: 38px; /* Slightly larger avatar */
    height: 38px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.6); /* Slightly more opaque border */
    transition: all 0.3s ease-in-out;
}

.header-patrimoine .user-menu .user-avatar:hover {
    border-color: var(--secondary-color);
}

.header-patrimoine .user-menu .dropdown-toggle::after {
    display: none;
}

.header-patrimoine .user-menu .dropdown-menu .dropdown-header {
    text-align: center;
    padding-top: 15px;
    padding-bottom: 10px;
    color: var(--text-color);
    border-bottom: 1px solid var(--medium-gray-color);
}

.header-patrimoine .user-menu .dropdown-menu .dropdown-item {
    font-size: 14px;
}

.header-patrimoine .dropdown-menu .dropdown-item i {
    margin-right: 10px;
    color: var(--primary-color);
}

/* Geographical Indicator */
.header-patrimoine .geo-indicator {
    color: var(--white-color);
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.header-patrimoine .geo-indicator i {
    margin-right: 8px; /* More space */
    color: var(--secondary-color);
}

/* Dropdown Arrow Indicator */
.header-patrimoine .nav-item.dropdown .nav-link::after {
    display: inline-block;
    margin-left: 0.35em; /* More space */
    vertical-align: 0.15em; /* Adjusted vertical align */
    content: "";
    border-top: 0.35em solid; /* Slightly larger arrow */
    border-right: 0.35em solid transparent;
    border-bottom: 0;
    border-left: 0.35em solid transparent;
    transition: transform 0.3s ease-in-out;
}

.header-patrimoine .nav-item.dropdown .nav-link[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Hamburger Menu Icon */
.navbar-toggler {
    border: none;
    padding: 0.25rem 0.75rem;
}

.navbar-toggler .hamburger {
    display: block;
    width: 28px; /* Slightly larger hamburger */
    height: 3px; /* Thicker lines */
    background-color: var(--white-color);
    position: relative;
    transition: all 0.3s ease-in-out;
}

.navbar-toggler .hamburger::before,
.navbar-toggler .hamburger::after {
    content: '';
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--white-color);
    position: absolute;
    left: 0;
    transition: all 0.3s ease-in-out;
}

.navbar-toggler .hamburger::before {
    top: -9px; /* More spacing */
}

.navbar-toggler .hamburger::after {
    bottom: -9px; /* More spacing */
}

/* Hamburger animation for active state */
.navbar-toggler[aria-expanded="true"] .hamburger {
    background-color: transparent;
}

.navbar-toggler[aria-expanded="true"] .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .hamburger::after {
    bottom: 0;
    transform: rotate(-45deg);
}

/* Existing Sidebar styles (from original style.css) */
.sidebar {
    width: 260px; /* Slightly wider sidebar */
    background-color: var(--primary-color);
    color: var(--white-color);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    padding-top: 60px; /* Adjust for refined navbar height */
    transition: all 0.3s;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1020; /* Ensure sidebar is below top navbar but above content */
    box-shadow: 2px 0 10px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}
.sidebar.collapsed {
    width: 60px; /* Slightly wider when collapsed */
}
.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.85); /* Slightly brighter text */
    padding: 12px 20px; /* Adjusted padding */
    display: flex;
    align-items: center;
    border-radius: 6px; /* Rounded corners for nav links */
    margin: 5px 10px; /* Add some margin */
    transition: all 0.3s ease;
}
.sidebar.collapsed .nav-link {
    padding: 12px 10px;
    justify-content: center;
    margin: 5px auto; /* Center when collapsed */
    width: 40px; /* Specific width for collapsed icon */
}
.sidebar .nav-link:hover {
    color: var(--white-color);
    background-color: rgba(var(--secondary-color-rgb), 0.2); /* Subtle hover/active */
}
.sidebar .nav-link.active {
    color: var(--white-color);
    background-color: rgba(var(--secondary-color-rgb), 0.3); /* Stronger active state */
    font-weight: 600; /* Bolder active text */
}
.sidebar .nav-link i {
    margin-right: 10px;
    font-size: 1.15rem; /* Slightly larger icons */
    color: rgba(255, 255, 255, 0.7); /* Lighter icons */
}
.sidebar .nav-link.active i {
    color: var(--white-color);
}
.sidebar.collapsed .nav-link span {
    display: none;
}
.sidebar.collapsed .nav-link i {
    margin-right: 0;
    text-align: center;
    width: 100%;
}
.sidebar-header {
    padding: 10px 20px 20px 20px;
    justify-content: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Slightly more prominent divider */
}
.sidebar-header h5 {
    color: var(--white-color);
    margin-bottom: 0;
}

/* Main content adjustments for fixed header and sidebar */
.main-content {
    margin-left: 260px; /* Default for expanded sidebar */
    transition: all 0.3s;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 20px; /* General padding for content */
    background-color: var(--light-gray-color);
}
.main-content.sidebar-collapsed {
    margin-left: 60px; /* Adjust for collapsed sidebar */
}

.main-content.right-panel-collapsed {
    margin-right: 0px;
}

/* Right Panel Styles */
#right-panel {
    height: 100vh; /* Full viewport height */
    width: 40px; /* Define a width for the right panel */
    position: fixed;
    top: 60px; /* Adjust for header height */
    right: 0 !important; /* Ensure it's absolutely stuck to the right */
    background-color: var(--white-color); /* White background for the panel */
    box-shadow: -2px 0 10px rgba(0,0,0,0.1); /* Shadow for visual separation */
    overflow-y: auto; /* Allow scrolling if content overflows */
    z-index: 1020; /* Ensure it's above main content but below top navbar */
    padding: 15px; /* Add some padding inside the panel */
}

/* Table Styling for Professional Look and Compactness */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    color: var(--text-color);
}

table thead th {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid var(--medium-gray-color);
    background-color: var(--light-gray-color); /* Light background for header */
}

table tbody td {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--medium-gray-color);
    background-color: var(--white-color); /* Default background for all rows */
}





table tbody tr:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1); /* Subtle hover effect */
    cursor: pointer;
}

#left-panel table tbody tr:hover:not(.table-selected-row) {
    background-color: var(--light-gray-color); /* Light gray hover effect for left panel table, not applied to selected row */
}

/* Table styling for the left panel */
#left-panel table thead th {
    background-color: var(--gabon-blue); /* Blue background for headers */
    color: var(--white-color); /* White text for headers */
    font-weight: 600; /* Ensure boldness */
    padding: 0.5rem 0.75rem; /* Consistent padding */
    font-size: 0.85rem; /* Slightly smaller font for compactness */
}

#left-panel table tbody tr {
    background-color: var(--white-color) !important; /* Ensure all rows are white */
}

#left-panel table tbody tr:hover {
    background-color: rgba(var(--gabon-yellow-rgb), 0.1) !important; /* Subtle yellow hover effect */
    cursor: pointer;
}

/* Style for text in table cells within the left panel */
#left-panel table tbody td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0; /* Important for text-overflow to work */
}

/* Style for the "Date 1e" column (assuming it's the first column) */
#left-panel table thead th:nth-child(1),
#left-panel table tbody td:nth-child(1) {
    width: 80px; /* Adjust this width as needed */
}

/* Style for selected table row in left panel */
#left-panel table tbody tr.table-selected-row td {
    background-color: var(--gabon-blue) !important; /* Solid blue background for selection */
    color: var(--white-color) !important; /* Ensure text is clearly visible */
    font-weight: 600; /* Make text bolder for selected row */
}

/* Custom styles for vehicules_legers.php form fields */
#center-panel-header {
    margin-bottom: 20px;
}
#center-panel-header .form-control,
#center-panel-detail .form-control {
    border-color: var(--gabon-yellow) !important; /* Orange border at rest */
    height: 30px !important; /* Reduced height */
    padding: 5px 10px !important; /* Adjusted padding */
    font-size: 0.875rem !important; /* Adjusted font size */
    border-radius: 4px !important; /* Consistent radius */
}

#center-panel-header .form-control:focus,
#center-panel-detail .form-control:focus {
    border-color: var(--gabon-yellow) !important;
    box-shadow: 0 0 0 0.15rem rgba(227, 166, 13, 0.2) !important; /* Reduced and orange focus shadow */
}

#center-panel-header .form-label,
#center-panel-detail .form-label {
    font-size: 0.75rem; /* Smaller font size */
    font-weight: 600; /* Slightly bolder */
    color: var(--dark-gray-color); /* Muted color */
    margin-bottom: 0.2rem; /* Reduced margin */
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 0.5px; /* Add some letter spacing */
}

/* Appliquer le même style aux listes déroulantes */
#center-panel-header .form-select,
#center-panel-detail .form-select {
    border-color: var(--gabon-yellow) !important;
    height: 30px !important;
    padding: 5px 10px !important;
    font-size: 0.875rem !important;
    border-radius: 4px !important;
}

/* Appliquer l'ombrage du focus aussi aux listes déroulantes */
#center-panel-header .form-select:focus,
#center-panel-detail .form-select:focus {
    box-shadow: 0 0 0 0.15rem rgba(227, 166, 13, 0.2) !important;
}

/* Custom styles for the search input and button in the left panel */
#left-panel .input-group .form-control {
    border: 1px solid var(--gabon-yellow); /* Orange border at rest */
    height: 30px; /* Reduced height */
    padding: 5px 10px; /* Adjusted padding */
    font-size: 0.875rem; /* Adjusted font size */
    border-radius: 4px 0 0 4px; /* Consistent radius with button */
}

#left-panel .input-group .form-control:focus {
    border-color: var(--gabon-yellow);
    box-shadow: 0 0 0 0.15rem rgba(227, 166, 13, 0.2); /* Reduced and orange focus shadow */
}

#left-panel .input-group .btn {
    height: 30px; /* Reduced height to match input */
    padding: 5px 10px; /* Adjusted padding */
    font-size: 0.875rem; /* Adjusted font size */
    border-radius: 0 4px 4px 0; /* Consistent radius with input */
    border-color: var(--gabon-yellow); /* Orange border */
    color: var(--gabon-yellow); /* Orange icon color */
}
#left-panel .input-group .btn:hover {
    background-color: var(--gabon-yellow);
    color: var(--white-color);
}

/* Custom styles for vehicle tabs */
#center-panel-detail .nav-tabs {
    border-bottom: 1px solid var(--medium-gray-color); /* A single line for the whole tab set */
}

#center-panel-detail .nav-tabs .nav-item .nav-link {
    border: 1px solid transparent;
    border-bottom: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: var(--light-gray-color);
    color: var(--text-muted);
    font-weight: 600;
    padding: 10px 20px 10px 0;
    transition: all 0.3s ease;
}

#center-panel-detail .nav-tabs .nav-item .nav-link:hover {
    background-color: var(--medium-gray-color);
    color: var(--dark-gray-color);
}

#center-panel-detail .nav-tabs .nav-item .nav-link.active {
    background-color: var(--white-color);
    color: var(--primary-color);
    border: 1px solid var(--medium-gray-color);
    border-bottom: 1px solid var(--white-color); /* Hide bottom border to merge with content */
    margin-bottom: -1px; /* Overlap the main border line */
}

#center-panel-detail .tab-content {
    background-color: var(--white-color);
    border: 1px solid var(--medium-gray-color);
    border-top: none;
    padding: 2px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
/* Footer styles adjusted for fixed header and sidebar */
.footer {
    margin-left: 260px; /* Align with main content */
    margin-right: 0px; /* Account for right panel (40px width + 5px gutter) */
    transition: all 0.3s;
}

/* Style for disabled buttons in the right panel */
#right-panel .btn-app:disabled,
#right-panel .btn-app.disabled {
    background-color: #f0f0f0 !important;
    color: #aaa !important;
    border-color: #ddd !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important; /* Override bootstrap's opacity */
}

#right-panel .btn-app:disabled i,
#right-panel .btn-app.disabled i {
    color: #aaa !important;
}
/* Adjustments for the three-panel layout template */
body.three-panel-layout {
    overflow: hidden;
}

body.three-panel-layout .main-content {
    padding: 10px; /* A bit of padding around the panels */
}

body.three-panel-layout .footer {
}