/* Vessto Dashboard Styles v2.1 - Correctly Scoped */

/* --- GLOBAL & STAT CARD STYLES --- */
.vcp-stat-card { background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1.5rem; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); text-align: left; }
.vcp-stat-card .stat-number { font-size: 2.25rem; font-weight: 700; color: #1a202c; line-height: 1.2; }
.vcp-stat-card .stat-meta { font-size: 0.875rem; color: #718096; }

/* --- FILTER NAVIGATION STYLES --- */
.vcp-filter-nav { display: flex; flex-wrap: wrap; gap: 1.9rem; margin-bottom: 2rem !important; padding-bottom: 1rem !important; border-bottom: 1px solid #e2e8f0 !important; }
.vcp-filter-nav a { text-decoration: none !important; color: #4a5568 !important; font-weight: 600 !important; font-size: 1.5rem !important; padding-bottom: 0.25rem !important; border-bottom: 2px solid transparent !important; transition: color 0.2s, border-color 0.2s; }
.vcp-filter-nav a:hover { color: #1a202c !important; }
.vcp-filter-nav a.active { color: #1a202c !important; border-bottom-color: #3182ce !important; }
#vcp_invoice_list_container, #vcp_task_list_container, #vcp_approval_list_container { transition: opacity 0.3s ease-in-out; }

/* --- MAIN LIST WRAPPER & EMPTY STATE --- */
.vcp-list { display: flex; flex-direction: column; gap: 1rem; }
.vcp-list-empty { background-color: #f7fafc; border: 1px dashed #e2e8f0; border-radius: 0.5rem; padding: 2rem; text-align: center; color: #718096; }

/* --- INVOICE-SPECIFIC STYLES --- */
.vcp-invoice-list .vcp-list-item { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 0.5rem; }
.vcp-invoice-list .vcp-list-item-main { display: flex; flex-direction: column; gap: 0.6rem; }
.vcp-invoice-list .vcp-item-meta { color: #a6a6a6; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.05em; }
.vcp-invoice-list .vcp-item-title { margin: 0; font-size: 1.6rem; text-transform: uppercase; font-weight: 700; color: #1a202c; }
.vcp-invoice-list .vcp-button-group { margin-top: 0.5rem; display: flex; gap: 0.75rem; align-items: center; }
.vcp-invoice-list .vcp-list-item-right { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex-shrink: 0; }
.vcp-invoice-list .vcp-item-amount { font-size: 2rem; font-weight: 700; color: #1a202c; }
.vcp-invoice-list .vcp-button { background-color: #1a202c; color: #ffffff; padding: 0.6rem 1.25rem; font-size: 1rem; font-weight: 700; text-decoration: none; text-transform: uppercase; border-radius: 9999px; transition: opacity 0.2s ease-in-out; }
.vcp-invoice-list .vcp-button:hover { opacity: 0.8; color: #ffffff; }
.vcp-invoice-list .vcp-due-status { font-size: 1rem; font-weight: 700; letter-spacing: 0.05em; }
.vcp-invoice-list .vcp-status { display: inline-block; padding: 0.3rem 0.8rem; font-size: 1rem; font-weight: 700; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.05em; }
.vcp-invoice-list .vcp-status.status-paid { background-color: #c6f6d5; color: #2f855a; }
.vcp-invoice-list .vcp-status.status-not_paid { background-color: #fed7d7; color: #c53030; }
.vcp-invoice-list .vcp-status.status-canceled { background-color: #e2e8f0; color: #4a5568; }

/* --- TASK-SPECIFIC STYLES --- */
.vcp-task-list .vcp-list-item { display: block; padding: 1.5rem; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 0.5rem; transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out; }
.vcp-task-list .vcp-list-item:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); border-color: #cbd5e0;}
.vcp-task-list .vcp-item-top, .vcp-task-list .vcp-item-bottom { display: flex; justify-content: space-between; align-items: flex-start; }
.vcp-task-list .vcp-item-bottom { align-items: flex-end; margin-top: 1.25rem; }
.vcp-task-list .vcp-item-middle { margin: 0.75rem 0; padding: 0.75rem 0; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
.vcp-task-list .vcp-item-title-group { display: flex; flex-direction: column; }
.vcp-task-list .vcp-item-pretitle { font-size: 1.1rem; font-weight: 600; color: #718096; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.vcp-task-list .vcp-item-title { font-size: 1.9rem; font-weight: 700; color: #1a202c; margin: 0; }
.vcp-task-list .vcp-item-description p { margin: 0; color: #4a5568; }
.vcp-task-list .vcp-item-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vcp-task-list .vcp-list-item-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; }
.vcp-task-list .vcp-item-details-left { display: flex; flex-direction: column; gap: 0.75rem; }
.vcp-task-list .vcp-item-details-right { display: flex; align-items: flex-end; }
.vcp-task-list .vcp-item-meta { font-size: 1.2rem; color: #4a5568; }
.vcp-task-list .vcp-days-due { font-weight: 600; }
.vcp-task-list .vcp-days-due.due-soon { color: #dd6b20; font-weight: 600; }
.vcp-task-list .vcp-days-due.due-critical { color: #c53030; font-weight: 600; }
.vcp-task-list .vcp-button-group { display: flex; gap: 0.75rem; align-items: center; }
.vcp-task-list .vcp-button, .vcp-task-list .vcp-button-secondary { padding: 0.6rem 1.25rem; font-size: 1rem; font-weight: 700; text-decoration: none; text-transform: uppercase; border-radius: 9999px; border: 1px solid transparent; cursor: pointer; transition: all 0.2s ease-in-out; }
.vcp-task-list .vcp-button { background-color: #1a202c !important; color: #ffffff !important; border-color: #1a202c !important; }
.vcp-task-list .vcp-button:hover { background-color: #4a5568 !important; border-color: #4a5568 !important; }
.vcp-task-list .vcp-button.vcp-approve-btn:hover { background-color: #73A433 !important; border-color: #73A433 !important; }
.vcp-task-list .vcp-button.vcp-request-change-btn:hover { background-color: #E1B801 !important; border-color: #E1B801 !important; }
.vcp-task-list .vcp-button-secondary { background-color: #e2e8f0 !important; color: #2d3748 !important; border-color: #e2e8f0 !important; }
.vcp-task-list .vcp-button-secondary:hover { background-color: #cbd5e0 !important; border-color: #cbd5e0 !important; }
.vcp-task-list .vcp-item-actions { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; }
.vcp-task-list .vcp-status { display: inline-block; padding: 0.3rem 0.8rem; font-size: 1.2rem; font-weight: 700; border-radius: 9999px; text-transform: uppercase; }
.vcp-task-list .vcp-status.status-pending { background-color: #fff; color: #dd6b20; }
.vcp-task-list .vcp-status.status-in-progress, .vcp-task-list .vcp-status.status-change-requested { background-color: #fff; color: #E1B801; }
.vcp-task-list .vcp-status.status-completed { background-color: #fff; color: #2f855a; }
.vcp-task-list .vcp-status.status-waiting-approval { background-color: #fff; color: #E60101; }
.vcp-task-list .vcp-status.status-approved { background-color: #fff; color: #2f855a; }
.vcp-task-list .vcp-asset-pretitle { font-size: 1.2rem; font-weight: 600; color: #4a5568; margin-right: 0.5rem; }
.vcp-task-list .vcp-task-assets { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.vcp-task-list .vcp-asset-link { font-size: 1.2rem; font-weight: 400; color: #4a5568; text-decoration: none; padding-bottom: -10px; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; }
.vcp-task-list .vcp-asset-link:hover { color: #1a202c; border-bottom-color: #cbd5e0; }
.vcp-task-list .vcp-task-thumbnails { margin-top: 1rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.vcp-task-list .vcp-asset-thumbnail { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; border: 1px solid #e2e8f0; transition: transform 0.2s; }
.vcp-task-list .vcp-asset-thumbnail:hover { transform: scale(1.1); }
/* --- SIMPLE TASK LIST STYLES (v2) --- */
.vcp-task-list-simple .vcp-list-item-simple {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.vcp-task-list-simple .vcp-list-item-simple:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    border-color: #cbd5e0;
}
.vcp-task-list-simple .vcp-list-item-main {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
    padding-right: 1rem;
}
.vcp-task-list-simple .vcp-item-pretitle {
    font-size: 1rem;
    font-weight: 600;
    color: #718096;
    text-transform: uppercase;
    margin: 0;
}
.vcp-task-list-simple .vcp-item-title {
    font-size: 1.7rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
}
.vcp-task-list-simple .vcp-item-title:hover { color: #727272 !important; }
.vcp-task-list-simple .vcp-item-title-link {
    text-decoration: none;
}
.vcp-task-list-simple .vcp-item-meta {
    font-size: 1rem;
    font-weight: 500;
    
}
.vcp-task-list-simple .vcp-list-item-right {
    flex-shrink: 0;
}
.vcp-task-list-simple .vcp-status {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 2rem 2rem;
    text-transform: uppercase;
}
.vcp-task-list-simple .vcp-status.status-pending { background-color: #fff; color: #dd6b20; }
.vcp-task-list-simple .vcp-status.status-in-progress, .vcp-task-list-simple .vcp-status.status-change-requested { background-color: #fff; color: #E1B801; }
.vcp-task-list-simple .vcp-status.status-completed { background-color: #fff; color: #2f855a; }
.vcp-task-list-simple .vcp-status.status-waiting-approval { background-color: #fff; color: #E60101; }
.vcp-task-list-simple .vcp-status.status-approved { background-color: #fff; color: #2f855a; }

.vcp-list-empty.simple {
    padding: 1rem;
    font-size: 0.9rem;
}
.vcp-progress-bar-wrapper.simple {
    height: 6px;
    margin-top: 0.25rem;
}
/* --- NEW: PROGRESS BAR STYLES --- */
.vcp-item-progress-area {margin-top: 1.5rem; padding-top: 0.5rem; border-top: 1px solid #e2e8f0;}
.vcp-progress-bar-wrapper {background-color: #e2e8f0; border-radius: 9999px; height: 8px; width: 100%; overflow: hidden;}
.vcp-progress-bar {height: 100%; background-color: #38a169; border-radius: 9999px; transition: width 0.5s ease-in-out;}
.vcp-progress-text {display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: 600; color: #4a5568; margin-top: 0rem;}
.vcp-progress-subtext {font-size: 1.2rem; color: #4a5568; margin-top: 0.5rem;}
/* --- RED PROGRESS BAR FOR OVER-BUDGET --- */
.vcp-progress-bar.over-budget { background-color: #c53030 !important; }

/* --- NEW: MODERN TASK REQUEST FORM STYLES --- */
.vcp-task-form {
    max-width: 900px;
    margin: 2rem auto;
}

.vcp-task-form .vcp-form-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.vcp-task-form .vcp-form-field {
    margin-bottom: 1.5rem;
}

/* --- Column Widths --- */
.vcp-task-form .vcp-col-100 { width: 100%; }
.vcp-task-form .vcp-col-50 { width: 48%; }
.vcp-task-form .vcp-col-30 { width: 28%; }
.vcp-task-form .vcp-col-20 { width: 18%; }

/* --- General Field Styles --- */
.vcp-task-form label {
    display: block;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.vcp-task-form input[type="text"],
.vcp-task-form input[type="date"],
.vcp-task-form select,
.vcp-task-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #cbd5e0;
    border-radius: 0.375rem;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.vcp-task-form input[type="text"]:focus,
.vcp-task-form input[type="date"]:focus,
.vcp-task-form select:focus,
.vcp-task-form textarea:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 1px #3182ce;
}

/* --- Inline Radio Buttons --- */
.vcp-task-form .vcp-radio-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    padding-top: 10px; /* Adjust for vertical alignment */
}
.vcp-task-form .vcp-radio-group label {
    margin-bottom: 0;
    font-weight: normal;
}
.vcp-task-form .vcp-radio-group input[type="radio"] {
    margin-right: 0.25rem;
}

/* --- Inline Confirmation Checkbox --- */
.vcp-task-form .vcp-confirmation {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.vcp-task-form .vcp-confirmation label {
    margin: 0;
    font-weight: normal;
}
.vcp-task-form .vcp-confirmation input[type="checkbox"] {
    width: 1.2em;
    height: 1.2em;
}

/* --- Submit Button --- */
.vcp-task-form button[type="submit"] {
    background-color: #1a202c !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    padding: 0.75rem 1.75rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: none !important;
    cursor: pointer;
    margin-top: 1rem;
    transition: background-color 0.2s;
}
.vcp-task-form button[type="submit"]:hover {
    background-color: #4a5568 !important;
}

/* --- Success Message --- */
.vcp-form-success {
    padding: 1.5rem;
    background-color: #c6f6d5;
    color: #2f855a;
    border-left: 5px solid #38a169;
    border-radius: 0.375rem;
    margin-bottom: 2rem;
}

/* --- PAGINATION STYLES --- */
.vcp-pagination { margin-top: 2rem; display: flex; justify-content: center; gap: 0.5rem; }
.vcp-pagination .page-numbers { display: inline-block; padding: 0.5rem 1rem; background-color: #ededed; border-radius: 0.375rem; text-decoration: none; color: #000; font-weight: 600; transition: background-color 0.2s, color 0.2s; }
.vcp-pagination .page-numbers:hover { background-color: #0e0e0e; color: #fff; }
.vcp-pagination .page-numbers.current { background-color: #0e0e0e; color: #fff; }

/* --- MODAL, ADMIN, ETC. --- */
#vcp-change-request-modal { opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99998; transition: opacity 0.3s, visibility 0s 0.3s; }
#vcp-change-request-modal.is-visible { opacity: 1; visibility: visible; transition: opacity 0.3s; }
.vcp-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
.vcp-modal-content { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999; background: #ffffff; padding: 2rem; border-radius: 0.75rem; width: 90%; max-width: 500px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.vcp-modal-content h3 { margin-top: 0; font-size: 1.5rem; }
.vcp-modal-content textarea { width: 100%; min-height: 120px; border: 1px solid #cbd5e0; border-radius: 0.5rem; padding: 0.75rem; font-family: inherit; font-size: 1rem; margin: 1rem 0; }
.vcp-modal-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1rem; }
#vcp-cancel-change-request { background-color: #e2e8f0 !important; color: #2d3748 !important; border-color: #e2e8f0 !important; border-radius: 9999px !important; }
#vcp-cancel-change-request:hover { background-color: #cbd5e0 !important; border-color: #cbd5e0 !important; }
#vcp-submit-change-request { background-color: #1a202c !important; color: #ffffff !important; border-color: #1a202c !important; border-radius: 9999px !important; }
#vcp-submit-change-request:hover { background-color: #4a5568 !important; border-color: #4a5568 !important; }
#vcp-files-preview-container { margin: 0.75rem 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.vcp-file-preview-item { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.4rem; background-color: #f0f0f1; border-radius: 4px; position: relative; width: 100px; }
.vcp-file-thumbnail { width: 80px; height: 80px; object-fit: cover; border-radius: 3px; background-color: #ffffff; border: 1px solid #ddd; }
.vcp-file-name { font-size: 12px; font-weight: 500; word-break: break-all; text-align: center; color: #333; }
.vcp-remove-file-button { position: absolute; top: -8px; right: -8px; background: #d63638; color: white; border: 2px solid white; border-radius: 50%; width: 24px; height: 24px; line-height: 20px; text-align: center; cursor: pointer; font-weight: bold; font-size: 16px; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.2); z-index: 10; }
.vcp-remove-file-button:hover { background: #b62d2f; }
.vcp-add-file-button { border-color: #d63638 !important; color: #d63638 !important; }
.vcp-add-file-button:hover, .vcp-add-file-button:focus { background-color: #fef2f2 !important; box-shadow: none !important; border-color: #d63638 !important; color: #d63638 !important; }