/* ============================================================
   Client Area Invoices Page Styles
   Template: templates/cloudpedia/assets/css/clientarea-invoices.css
   ============================================================ */

/* ---- Tab Navigation ---- */
.cp-invoice-tabs {
    background: #ffffff;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}

.cp-invoice-tabs-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 16px 0;
    overflow-x: auto;
}

.cp-invoice-tab-nav {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.cp-invoice-tab-link {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.cp-invoice-tab-link:hover {
    color: #304166;
    background: #f0f3f8;
    text-decoration: none;
}

.cp-invoice-tab-link.active {
    color: #304166;
    background: #e8edf5;
    font-weight: 600;
}

/* ---- Status Filter Badges ---- */
.cp-invoice-status-badges {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.cp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border-radius: 0;
    background: transparent;
    color: #6c757d;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cp-status-badge:hover {
    color: #304166;
}

.cp-status-badge.cp-badge-active {
    color: #304166;
    font-weight: 600;
}

.cp-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    border-radius: 4px;
    background: #304166;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

/* ---- Invoice Card ---- */
.cp-invoice-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px 24px 24px 24px;
}

/* ---- Status Labels in Table ---- */
.cp-status-label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cp-status-label.status-paid {
    background: #e6f7ef;
    color: #1a7a3a;
}

.cp-status-label.status-unpaid {
    background: #fff3cd;
    color: #856404;
}

.cp-status-label.status-cancelled {
    background: #f8d7da;
    color: #721c24;
}

.cp-status-label.status-refunded,
.cp-status-label.status-refund {
    background: #e2e8f0;
    color: #475569;
}

/* ---- Date Column Colors ---- */
.cp-date-created {
    color: #2BB372;
    font-weight: 500;
    font-size: 13px;
}

.cp-date-due {
    color: #F44336;
    font-weight: 500;
    font-size: 13px;
}

/* ---- Action Column ---- */
.cp-invoice-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

#tableInvoicesList thead th:last-child::after,
#tableInvoicesList thead th:last-child::before {
    display: none;
    content: none;
}

.cp-invoice-action a.cp-btn-view-invoice,
a.cp-btn-view-invoice,
.cp-btn-view-invoice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    border: none;
    background: #F2F0F0;
    color: #6c757d;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

#tableInvoicesList .cp-btn-view-invoice {
    color: #6c757d;
    text-decoration: none;
}

.cp-btn-view-invoice:hover,
#tableInvoicesList .cp-btn-view-invoice:hover {
    background: #e5e3e3;
    color: #374151;
    text-decoration: none;
}

.cp-btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: none;
    background: transparent;
    text-decoration: none;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.cp-btn-download:hover {
    background: #f9fafb;
    text-decoration: none;
}

.cp-btn-download img {
    display: block;
    opacity: 1;
    width: 22px;
    height: 22px;
}

/* ---- Table Overrides ---- */
#tableInvoicesList thead th {
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e9ecef;
    background: #f8f9fa;
    padding: 12px 16px;
}

#tableInvoicesList tbody td {
    padding: 16px;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
    color: #374151;
    font-size: 14px;
}

#tableInvoicesList tbody tr:hover {
    background: #f9fafb;
}

#tableInvoicesList tbody tr:last-child td {
    border-bottom: none;
}

/* Invoice ID link color */
#tableInvoicesList tbody td:first-child a {
    color: #6c757d;
    text-decoration: none;
}

#tableInvoicesList tbody td:first-child a:hover {
    color: #374151;
    text-decoration: underline;
}

/* Remove vertical borders */
#tableInvoicesList td,
#tableInvoicesList th {
    border-left: none;
    border-right: none;
    border-top: none;
}

/* DataTable search and pagination */
.dataTables_filter input {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.dataTables_filter input:focus {
    border-color: #304166;
}

#tableInvoicesList_info.dataTables_info {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1b2559;
    margin-bottom: 30px;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.5px;
}

.paginate_button {
    border-radius: 6px;
    font-size: 13px;
}

.paginate_button.current,
.paginate_button.current:hover {
    background: #304166;
    border-color: #304166;
    color: #ffffff;
}

/* ---- Quotes Table Overrides ---- */
#tableQuotesList thead th {
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e9ecef;
    background: #f8f9fa;
    padding: 12px 16px;
}

#tableQuotesList tbody td {
    padding: 16px;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
    color: #374151;
    font-size: 14px;
}

#tableQuotesList tbody tr:hover {
    background: #f9fafb;
}

#tableQuotesList tbody tr:last-child td {
    border-bottom: none;
}

#tableQuotesList tbody td:first-child a {
    color: #6c757d;
    text-decoration: none;
}

#tableQuotesList tbody td:first-child a:hover {
    color: #374151;
    text-decoration: underline;
}

#tableQuotesList td,
#tableQuotesList th {
    border-left: none;
    border-right: none;
    border-top: none;
}

#tableQuotesList thead th:last-child::after,
#tableQuotesList thead th:last-child::before {
    display: none;
    content: none;
}

#tableQuotesList_info.dataTables_info {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1b2559;
    margin-bottom: 30px;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.5px;
}

/* Quote stage status colors */
.cp-status-label.status-draft {
    background: #e2e8f0;
    color: #475569;
}

.cp-status-label.status-delivered {
    background: #e8edf5;
    color: #304166;
}

.cp-status-label.status-accepted {
    background: #e6f7ef;
    color: #1a7a3a;
}

.cp-status-label.status-declined {
    background: #f8d7da;
    color: #721c24;
}

/* Add Funds description */
.cp-addfunds-description {
    color: #6c757d;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}