/* Car Document Vault Frontend Styles */

/* Image Redaction Modal Styles */
#cdv-redaction-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6); /* Dim background */
}

.cdv-modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* Centered, with space from top */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Responsive width */
    max-width: 700px; /* Max width */
    border-radius: 5px;
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

.cdv-modal-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}

.cdv-modal-header h2 {
    margin: 0;
    font-size: 1.5em;
}

.cdv-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 15px;
    right: 25px;
}

.cdv-modal-close:hover,
.cdv-modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#cdv-redaction-editor-area {
    margin-bottom: 15px;
    text-align: center; /* Center the canvas */
}

#redaction-canvas {
    border: 1px solid #ccc;
    cursor: crosshair;
    max-width: 100%; /* Ensure canvas is responsive */
    height: auto;   /* Maintain aspect ratio */
    background-color: #fff; /* Ensure canvas background is white if image is transparent or smaller */
}

.cdv-redaction-controls {
    text-align: center; /* Center buttons */
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.cdv-redaction-controls button {
    margin: 0 5px; /* Spacing between buttons */
    padding: 10px 20px; /* Increased padding */
    font-size: 1em;
}

/* General Button Style (used by redaction controls and others) */
.cdv-button {
    background-color: #0073aa; /* WordPress blue */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.cdv-button:hover {
    background-color: #005177; /* Darker WordPress blue */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cdv-button:focus {
    outline: 2px solid #005177;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.5);
}

.cdv-button.secondary {
    background-color: #6c757d;
}
.cdv-button.secondary:hover {
    background-color: #5a6268;
}

.cdv-button.danger {
    background-color: #dc3545;
}
.cdv-button.danger:hover {
    background-color: #c82333;
}


/* Timeline item action buttons */
.cdv-document-item .doc-actions .cdv-button {
    padding: 6px 10px;
    font-size: 0.9em;
    margin-right: 5px;
}

/* General message styling */
.cdv-message {
    padding: 15px; /* Increased padding */
    margin-bottom: 20px; /* Increased margin */
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.95em;
}

.cdv-message.success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}

.cdv-message.error {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}
.cdv-message.info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}

/* Loading spinner/message for AJAX operations */
.cdv-loading-message {
    display: none; /* Hidden by default */
    padding: 10px;
    text-align: center;
    color: #555;
    font-style: italic;
}

/* Document Manager & Upload Form */
#cdv-document-upload-form-container {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    border-radius: 4px;
}

#cdv-document-upload-form-container h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
}

/* Document Timeline */
.cdv-document-timeline {
    margin-top: 20px;
    position: relative; /* For timeline line */
}
.cdv-document-timeline:before {
    content: '';
    position: absolute;
    left: 40px; /* Adjusted to align with the new document item positioning */
    top: 0;
    bottom: 0;
    width: 4px;
    background: #ddd; /* Timeline color */
    z-index: 0; /* Lower z-index to ensure dots and dates appear above */
}

.cdv-document-list {
    list-style: none;
    padding-left: 0;
}

.cdv-document-item {
    padding: 18px; /* Slightly increased padding */
    margin-bottom: 25px; /* More spacing between items for better readability */
    border: 1px solid #e0e0e0;
    border-radius: 6px; /* Slightly more rounded corners */
    background-color: #fff;
    display: flex; /* Align date and content side-by-side */
    align-items: flex-start; /* Align items to the top */
    position: relative; /* For timeline pseudo-elements */
    padding-bottom: 20px; /* Space for timeline connector */
    margin-left: 55px; /* Space for the timeline line and dot */
    padding-left: 65px; /* Balanced padding for layout */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.cdv-document-item:before {
    content: '';
    position: absolute;
    left: -39px; /* Adjusted to align with the repositioned timeline line */
    top: 19px; /* Aligned with the dot's top position */
    bottom: -5px; /* Extend line to connect to the next item */
    width: 2px;
    background-color: #0073aa;
    z-index: 1; /* Ensure it's above the main timeline but below the dots */
}

.cdv-document-item:last-child:before {
    bottom: auto; /* For the last item, line doesn't extend further */
    height: 15px; /* Or adjust to end at the dot */
}

.cdv-document-item:after {
    content: '';
    position: absolute;
    left: -41px; /* Further adjusted to center the dot on the timeline line and avoid date overlap */
    top: 19px; /* Increased top position to move dot further down */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #0073aa;
    border: 2px solid white;
    z-index: 2; /* Increased z-index to ensure dot appears above timeline */
}

.cdv-event-date {
    position: absolute;
    left: -150px; /* Further increased to ensure no overlap with timeline dots */
    top: 15px; /* Aligned vertically with the timeline dot */
    min-width: 100px; /* Ensures date has enough space */
    margin-right: 25px; /* Increased space between date and content */
    width: auto; /* Accommodates longer dates */
    text-align: right;
    font-weight: bold;
    color: #555;    white-space: nowrap; /* Prevents dates from wrapping */
    z-index: 1; /* Ensures dates are properly layered */
    font-size: 0.9em;
    padding: 6px 12px;
    background-color: #f5f5f5; /* Slightly lighter background */
    border-radius: 4px;
    border: 1px solid #e0e0e0; /* Added border for better visibility */
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.cdv-document-details {
    flex-grow: 1; /* Ensure details section takes available space */
    /* Add other specific styles for details here if needed */
}

.cdv-document-details strong {
    font-size: 1.1em;
    color: #333;
}

.cdv-document-description {
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
    display: block;
}

.cdv-document-meta {
    font-size: 0.8em;
    color: #777;
    margin-top: 8px;
    display: block;
}

.cdv-document-actions {
    margin-top: 10px;
}

.cdv-document-actions .button,
.cdv-document-actions a.button {
    margin-right: 5px;
    font-size: 0.9em !important; /* Ensure small buttons */
    padding: 4px 8px !important;
}

.cdv-item-content-wrapper {
    display: flex; /* Align thumbnail and details horizontally */
    flex-grow: 1;
    background-color: #fff;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.cdv-document-thumbnail {
    margin-right: 15px;
    flex-shrink: 0; /* Prevent thumbnail from shrinking */
}

.cdv-document-thumbnail img {
    width: 100px; /* Fixed width for consistency */
    height: 100px;
    object-fit: cover; /* Crop image to fit, maintaining aspect ratio */
    border-radius: 4px;
    border: 1px solid #ddd;
}

/* Responsive adjustments for timeline */
@media (max-width: 768px) {    .cdv-document-timeline:before {
        left: 25px; /* Fine-tuned for perfect alignment on mobile screens */
    }    .cdv-document-item {
        padding-left: 45px; /* Increased padding */
        margin-left: 30px; /* Adjusted margin for small screens */
    }
    .cdv-document-item:before {
        left: -25px; /* Fine-tuned to match timeline position */
        top: 10px; /* Better positioning on mobile */
    }
    .cdv-document-item:after {
        left: -30px; /* Fine-tuned dot position for smaller screens */
        top: 10px; /* Better positioning on mobile */
    }    .cdv-event-date {
        /* Display date above content on small screens */
        position: static; /* Stack date above content */
        width: auto;
        text-align: left;
        margin-bottom: 10px;
        padding: 4px 10px;
        font-size: 0.85em;
        left: auto;
        top: auto;
        display: inline-block; /* Better control of padding */
        white-space: normal; /* Allow wrapping on very small screens if necessary */
        margin-right: 0; /* Remove right margin on small screens */
        background-color: #f8f8f8; /* Slightly different background on mobile */
        border: 1px solid #e5e5e5;
    }
    .cdv-document-details {
        margin-left: 0;
    }
}

/* Required field asterisk */
.cdv-upload-document-form .required {
    color: red;
    font-weight: bold;
    margin-left: 2px;
}

/* General form styling improvements */
.cdv-upload-document-form p {
    margin-bottom: 10px;
}
.cdv-upload-document-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.cdv-upload-document-form input[type="text"],
.cdv-upload-document-form input[type="file"],
.cdv-upload-document-form input[type="date"],
.cdv-upload-document-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* So padding doesn't add to width */
}
.cdv-upload-document-form textarea {
    min-height: 80px;
}

.cdv-upload-message.cdv-success {
    color: green;
    border: 1px solid green;
    padding: 10px;
    margin-top: 10px;
    background-color: #f0fff0;
}
.cdv-upload-message.cdv-error {
    color: red;
    border: 1px solid red;
    padding: 10px;
    margin-top: 10px;
    background-color: #fff0f0;
}

/* General Form Styles */
.cdv-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.cdv-form input[type="text"],
.cdv-form input[type="email"],
.cdv-form input[type="password"],
.cdv-form input[type="file"],
.cdv-form textarea,
.cdv-form select {
    width: 100%;
    padding: 12px; /* Slightly Increased padding */
    margin-bottom: 15px; /* Increased margin */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.cdv-form input:focus,
.cdv-form textarea:focus,
.cdv-form select:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.25);
    outline: none;
}

.cdv-form input[type="submit"] { /* Also covered by .cdv-button */
    font-size: 1em;
    padding: 10px 20px;
}

.cdv-form .form-field-group {
    margin-bottom: 15px;
}

/* Car Dashboard */
.cdv-car-list {
    list-style: none;
    padding: 0;
}
.cdv-car-list li {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease-in-out;
}

.cdv-car-list li:hover {
    background-color: #f9f9f9;
}

.cdv-car-list li:last-child {
    border-bottom: none;
}
.cdv-car-list .car-info {
    font-size: 1.1em;
}
.cdv-car-list .car-actions a {
    margin-left: 10px;
}

/* Utility */
.cdv-text-center {
    text-align: center;
}
.cdv-mt-1 { margin-top: 1rem !important; }
.cdv-mb-1 { margin-bottom: 1rem !important; }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .cdv-modal-content {
        width: 90%;
        margin: 10% auto;
    }

    .cdv-form input[type="text"],
    .cdv-form input[type="email"],
    .cdv-form input[type="password"],
    .cdv-form input[type="file"],
    .cdv-form textarea,
    .cdv-form select {
        font-size: 0.95em; /* Slightly smaller font on mobile for inputs */
    }

    .cdv-car-list li {
        flex-direction: column;
        align-items: flex-start;
    }

    .cdv-car-list .car-actions {
        margin-top: 10px;
        width: 100%;
        display: flex;
    }

    .cdv-car-list .car-actions a {
        margin-left: 0;
        margin-right: 10px;
        flex-grow: 1; /* Make buttons take available space if desired */
        text-align: center;
    }

    .cdv-document-item {
        padding: 10px;
    }

    .cdv-document-preview img,
    .cdv-document-preview iframe {
        max-width: 150px; /* Adjust preview for smaller screens */
    }
}

@media (max-width: 480px) {
    .cdv-modal-header h2 {
        font-size: 1.3em;
    }
    .cdv-redaction-controls button {
        padding: 8px 15px;
        font-size: 0.9em;
        margin-bottom: 5px; /* Stack buttons if they wrap */
        display: block; /* Make buttons full width for easier tapping */
        width: calc(100% - 10px); /* Adjust width considering margins */
    }
    .cdv-redaction-controls button:last-child {
        margin-bottom: 0;
    }
}

/* Image editor specific styles */
.cdv-image-editor-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
}

.cdv-image-editor-main-area {
    position: relative;
    margin: 20px 0;
    max-height: 70vh;
    overflow: auto;
    background: #f0f0f0;
    border: 1px solid #ddd;
    text-align: center;
}

#cdv-redaction-canvas {
    position: absolute;
    top: 0;
    left: 0;
    cursor: crosshair;
}

.cdv-modal-close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.cdv-modal-close-btn:hover {
    color: black;
    text-decoration: none;
}

.cdv-image-editor-controls {
    margin: 15px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cdv-edit-instructions {
    flex-grow: 1;
    margin: 0 0 0 15px;
    color: #666;
    font-style: italic;
}

.cdv-edit-message {
    padding: 10px;
    border-radius: 3px;
}

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

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

/* Security Code Display */
.cdv-security-code {
    font-family: monospace;
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: 1px;
    background: #f5f5f5;
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
    color: #444;
    display: inline-block;
}

.cdv-code-info {
    margin-top: 5px;
    color: #666;
    font-style: italic;
}

/* Transfer Car Form */
.cdv-transfer-form-container {
    max-width: 600px;
    margin: 0 auto;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #e3e3e3;
}

.cdv-transfer-info {
    margin-bottom: 20px;
    color: #555;
}

.cdv-form input[type="text"]#cdv_security_code {
    font-family: monospace;
    letter-spacing: 2px;
    text-align: center;
    font-size: 1.2em;
    padding: 10px;
}

.cdv-success {
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #3c763d;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.cdv-error {
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    color: #a94442;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

/* Transfer Code Container Under Car Image */
.cdv-transfer-code-container {
    margin-top: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    text-align: center;
}

.cdv-transfer-code-container .cdv-card-label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.cdv-transfer-code-container .cdv-security-code {
    margin: 8px 0;
    padding: 8px 12px;
    font-size: 1.2em;
    width: auto;
    display: inline-block;
}

.cdv-transfer-code-container .cdv-code-info {
    margin-top: 8px;
    color: #666;
}