/* Car Details Page Styling */
.cdv-car-detail-view {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Page Title */
.cdv-car-detail-view h2 {
    font-size: 28px;
    color: #333;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
}

.cdv-car-detail-view h2::before {
    content: "\f502"; /* Dashicon car */
    font-family: dashicons;
    margin-right: 12px;
    color: #0073aa;
    font-size: 32px;
}

/* Vehicle Image and Transfer Ownership combined section */
.cdv-car-image-and-transfer-section { /* New wrapper for image and transfer */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 20px;
    align-items: start;
    margin-bottom: 20px; /* Space before the specs section */
}

/* Vehicle Image Section - within the new wrapper */
.cdv-car-image-section {
    background-color: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    padding: 20px;
    text-align: center;
    /* Removed flex and gap as it's now simpler */
}

.cdv-car-image-section .cdv-detail-item {
    display: block;
}

.cdv-car-image-section .cdv-detail-label {
    display: none; /* Hide the "Vehicle Image" label */
}

.cdv-vehicle-image {
    max-width: 100% !important;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.cdv-vehicle-image:hover {
    transform: scale(1.02);
}

/* Transfer Ownership Section Styling - within the new wrapper */
.cdv-transfer-ownership-section {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px; /* Reduced padding */
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    /* height: 100%; Removed to allow natural height */
}

.cdv-transfer-ownership-section h4 {
    font-size: 18px;
    color: #0073aa;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.cdv-transfer-ownership-section p {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.cdv-transfer-ownership-section strong {
    color: #333;
}

.cdv-transfer-ownership-section small {
    font-size: 12px;
    color: #777;
    display: block;
    margin-top: 15px;
}

#cdv-generate-security-code-btn {
    background-color: #0073aa;
    color: white;
    border: none;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#cdv-generate-security-code-btn:hover {
    background-color: #005a87;
}

.cdv-security-code-message {
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 14px;
}

.cdv-security-code-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.cdv-security-code-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Section Styling */
.cdv-car-details-section {
    grid-column: 1 / -1; /* Make specs section span full width if cdv-main-info-grid was multi-column */
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Detailed Specifications Section - Full width below image/transfer */
.cdv-car-details-section {
    grid-column: 1 / -1; /* Make specs section span full width if cdv-main-info-grid was multi-column */
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* New Two-Column Grid for Specifications Tables */
.cdv-specifications-columns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive two columns */
    gap: 20px;
}

.cdv-spec-column {
    /* Each column will contain tables */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between tables within a column */
}

/* Main Car Details Grid - Updated for overall structure */
.cdv-main-info-grid {
    display: grid; /* Changed from flex to grid for overall layout */
    grid-template-columns: 1fr; /* Single column for the top section (image/transfer) */
    gap: 30px; 
    margin-bottom: 30px;
}

/* Two Column Grid Layout for Details */
.cdv-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

/* Main Info Cards Grid */
.cdv-main-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.cdv-card-item {
    display: flex;
    margin-bottom: 8px;
}

.cdv-card-label {
    font-weight: 600;
    min-width: 120px;
    color: #666;
}

.cdv-card-value {
    color: #333;
}

/* Document Manager Section */
.cdv-document-manager-section {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    margin-top: 30px;
}

.cdv-document-manager-section h3 {
    font-size: 20px;
    color: #0073aa;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* Back to Dashboard Button */
.cdv-back-button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.cdv-back-button:hover {
    background-color: #e0e0e0;
    color: #000;
}

/* Collapsible Sections Styling */
.cdv-collapsible-header {
    background-color: #f1f1f1;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.1em;
    margin-top: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cdv-collapsible-header:hover {
    background-color: #e9e9e9;
}

.cdv-collapsible-header .toggle-icon {
    font-size: 1.2em;
    transition: transform 0.3s ease;
}

.cdv-collapsible-header .toggle-icon.open {
    transform: rotate(90deg);
}

.cdv-collapsible-content {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    border: 1px solid #ddd;
    border-top: none;
}

/* Car Information Table */
.cdv-details-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e0e0e0; /* Add border to the table itself */
    border-radius: 4px; /* Optional: rounded corners for tables */
    overflow: hidden; /* Ensures border-radius clips content */
}

.cdv-details-table tr:nth-child(even) {
    background-color: #f8f8f8;
}

.cdv-details-table th {
    text-align: left;
    padding: 12px 15px;
    background-color: #f0f7fb;
    color: #333;
    font-weight: 600;
    border: 1px solid #e0e0e0;
}

.cdv-details-table td {
    padding: 10px 15px;
    border: 1px solid #e0e0e0;
    vertical-align: middle;
}

/* Individual Detail Items (for compatibility with old styling) */
.cdv-detail-item {
    margin-bottom: 8px;
    padding: 5px 0;
    display: flex;
    align-items: baseline;
}

.cdv-detail-label {
    font-weight: 600;
    color: #555;
    width: 240px;
    flex-shrink: 0;
}

.cdv-detail-value {
    color: #333;
    flex-grow: 1;
}

/* Section Cards for Visual Categories */
.cdv-info-card {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.cdv-info-card h4 {
    font-size: 18px;
    color: #0073aa;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

/* Tax Details Specific Styling */
.cdv-tax-status-taxed {
    color: #28a745; /* Green */
    font-weight: bold;
}

.cdv-tax-status-not-taxed,
.cdv-tax-status-unknown {
    color: #dc3545; /* Red */
    font-weight: bold;
}

.cdv-tax-days-ok {
    color: #28a745; /* Green */
}

.cdv-tax-days-warning {
    color: #ffc107; /* Yellow */
    font-weight: bold;
}

.cdv-tax-days-critical {
    color: #dc3545; /* Red */
    font-weight: bold;
}

.cdv-renew-tax-link {
    margin-left: 10px;
    font-size: 0.9em;
}

/* MOT History Item Styling */
.cdv-mot-history-item {
    border: 1px solid #e0e0e0;
    padding: 15px;
    margin-bottom: 20px; /* Increased margin for better separation */
    border-radius: 5px;
    background-color: #fff; /* White background for each item */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.cdv-mot-history-item.mot-passed {
    border-left: 4px solid #28a745; /* Green left border for PASSED */
}

.cdv-mot-history-item.mot-failed {
    border-left: 4px solid #dc3545; /* Red left border for FAILED */
}

.cdv-mot-item-header {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0; /* Lighter border */
}

.cdv-mot-item-header .mot-result {
    font-weight: bold;
}
.cdv-mot-history-item.mot-passed .mot-result {
    color: #28a745; /* Green */
}
.cdv-mot-history-item.mot-failed .mot-result {
    color: #dc3545; /* Red */
}

.cdv-mot-item-body p {
    margin: 8px 0; /* Adjusted margin for paragraphs */
    font-size: 0.95em;
    color: #555;
}
.cdv-mot-item-body p strong {
    color: #333;
}

/* MOT Annotations List Styling */
.cdv-mot-annotations-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 10px;
}

.cdv-mot-annotations-list li {
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: 4px;
    font-size: 0.9em;
    line-height: 1.6; /* Improved readability */
}

/* Styling for the prefix text (e.g., "Fail:", "Advisory:") */
.cdv-mot-annotation-prefix-fail { /* For FAIL, DANGEROUS types */
    color: #dc3545; /* Red */
    font-weight: bold;
}

.cdv-mot-annotation-prefix-other { /* For ADVISORY, MINOR, PRS etc. */
    color: #ffc107; /* Amber/Yellow */
    font-weight: bold;
}

/* Styling for the annotation list items themselves (background, border) */
/* These provide context to the defect type */
.cdv-mot-annotations-list li.dangerous-defect { /* Applied if annotation.is_dangerous is true */
    background-color: #f8d7da; /* Light red background */
    border: 1px solid #f5c6cb; /* Reddish border */
}
/* Ensure prefix inside a dangerous defect list item is red */
.cdv-mot-annotations-list li.dangerous-defect .cdv-mot-annotation-prefix-other,
.cdv-mot-annotations-list li.dangerous-defect .cdv-mot-annotation-prefix-fail {
    color: #721c24; /* Darker red for prefix text */
}

.cdv-mot-annotations-list li.fail-defect { /* Applied if annotation_type_raw is 'FAIL' AND not dangerous */
    background-color: #f8d7da; /* Light red background */
    border: 1px solid #f5c6cb; /* Reddish border */
}
.cdv-mot-annotations-list li.fail-defect .cdv-mot-annotation-prefix-fail {
    color: #721c24; /* Darker red for prefix text */
}

.cdv-mot-annotations-list li.advisory-defect { /* Applied if annotation_type_raw is 'ADVISORY' AND not dangerous */
    background-color: #fff3cd; /* Light yellow background */
    border: 1px solid #ffeeba; /* Yellowish border */
}
.cdv-mot-annotations-list li.advisory-defect .cdv-mot-annotation-prefix-other {
    color: #856404; /* Darker amber for prefix text */
}

.cdv-mot-annotations-list li.minor-defect { /* Applied if annotation_type_raw is 'MINOR' AND not dangerous */
    background-color: #d1ecf1; /* Light blue background */
    border: 1px solid #bee5eb; /* Bluish border */
}
.cdv-mot-annotations-list li.minor-defect .cdv-mot-annotation-prefix-other {
    color: #0c5460; /* Darker blue/cyan for prefix text */
}

.cdv-mot-annotations-list li.prs-defect { /* Applied if annotation_type_raw is 'PRS' AND not dangerous */
    background-color: #e2e3e5; /* Light grey background */
    border: 1px solid #d6d8db; /* Greyish border */
}
.cdv-mot-annotations-list li.prs-defect .cdv-mot-annotation-prefix-other {
    color: #383d41; /* Darker grey for prefix text */
}

.cdv-mot-annotations-list li.other-defect { /* Default for unknown types, not dangerous */
    background-color: #f0f0f0; /* Neutral background */
    border: 1px solid #cccccc;
}
.cdv-mot-annotations-list li.other-defect .cdv-mot-annotation-prefix-other {
    color: #555555;
}


.cdv-mot-annotations-list li .dangerous-tag { /* For the "(Dangerous)" text itself */
    color: #721c24;
    font-weight: bold;
    margin-left: 5px;
    font-size: 0.9em;
}

/* Responsive Adjustments */
@media (max-width: 992px) { 
    .cdv-car-image-and-transfer-section {
        grid-template-columns: 1fr; /* Stack image and transfer on smaller screens */
    }
    .cdv-specifications-columns-grid {
        grid-template-columns: 1fr; /* Stack spec columns */
    }
}

@media (max-width: 768px) {
    .cdv-details-grid,
    .cdv-main-info /* This was for a different structure, .cdv-main-info-grid is now used */
    {
        grid-template-columns: 1fr;
    }
    
    .cdv-detail-item {
        flex-direction: column;
    }
    
    .cdv-detail-label {
        width: 100%;
        margin-bottom: 5px;
    }

    .mot-details-grid {
        grid-template-columns: 1fr; /* Stack on smaller screens */
    }
    .cdv-collapsible-header {
        font-size: 1em;
        padding: 15px;
    }
}