/* ============================================================
   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;
}

@media (max-width: 576px) {
    .cp-invoice-tabs-inner {
        gap: 8px;
        padding: 8px 0;
    }

    .cp-invoice-tab-nav {
        gap: 4px;
    }

    .cp-invoice-tab-link {
        padding: 8px 12px;
    }

    .cp-invoice-status-badges {
        gap: 8px;
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    .cp-status-badge {
        flex: 0 0 auto;
    }

    .cp-invoice-tab-link:focus-visible,
    .cp-products-tab-link:focus-visible,
    .cp-status-badge:focus-visible {
        outline: 2px solid var(--cp-primary-500);
        outline-offset: -2px;
    }
}

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

/* 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;
}

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

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

/* ============================================================
   Invoices and Quotes lists, Vercel-style (#284)
   Scoped to .cp-billing-list (the wrapper on clientareainvoices and
   clientareaquotes) and to the chips of the invoices/quotes tab bar
   (.cp-list-chips), so Add Funds, account, tickets, KB, announcements,
   downloads and server status, which load this file, are unchanged.
   The shared list chrome (chips, bordered list, header, rows, controls) is
   in clientarea-list.css; only the cells below are specific.
   ============================================================ */
.cp-billing-list {
    padding-top: 24px;
}

/* Quote subject and any other plain cell text. */
.cp-billing-list #tableInvoicesList tbody td,
.cp-billing-list #tableQuotesList tbody td {
    color: var(--cp-gray-900);
}

/* Number is the link: near-black, 600, no underline. */
.cp-billing-list #tableInvoicesList tbody td:first-child a,
.cp-billing-list #tableQuotesList tbody td:first-child a {
    border-radius: 4px;
    color: var(--cp-gray-900);
    font-weight: 600;
    text-decoration: none;
}

.cp-billing-list #tableInvoicesList tbody td:first-child a:hover,
.cp-billing-list #tableQuotesList tbody td:first-child a:hover {
    color: var(--cp-primary-500);
    text-decoration: none;
}

.cp-billing-list #tableInvoicesList tbody td:first-child a:focus-visible,
.cp-billing-list #tableQuotesList tbody td:first-child a:focus-visible {
    outline: 2px solid var(--cp-primary-500);
    outline-offset: 2px;
}

/* Dates: muted, normal weight, tabular numbers (no green/red). */
.cp-billing-list .cp-date-created,
.cp-billing-list .cp-date-due {
    color: var(--cp-gray-600);
    font-size: 13px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* Total: mono, tabular. */
.cp-billing-list #tableInvoicesList tbody td.cp-invoice-total {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* ---- Status / stage: dot + plain text ----
   Invoice statusClass: paid, unpaid, cancelled, refunded (refund), collections,
   payment-pending, draft. Quote stageClass: draft, delivered, onhold (hold),
   accepted, declined, lost, dead. The parent theme tints .status-* labels inside
   .dataTables_wrapper, so the label resets its fill and colour explicitly. */
.cp-billing-list .dataTables_wrapper .cp-status-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cp-gray-900);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.cp-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cp-gray-600);
    flex: none;
}

.cp-status-label.status-paid .cp-status-dot,
.cp-status-label.status-accepted .cp-status-dot {
    background: #16a34a;
}

.cp-status-label.status-unpaid .cp-status-dot,
.cp-status-label.status-onhold .cp-status-dot,
.cp-status-label.status-on-hold .cp-status-dot,
.cp-status-label.status-hold .cp-status-dot {
    background: #d97706;
}

.cp-status-label.status-cancelled .cp-status-dot,
.cp-status-label.status-collections .cp-status-dot,
.cp-status-label.status-declined .cp-status-dot,
.cp-status-label.status-lost .cp-status-dot {
    background: var(--cp-danger);
}

.cp-status-label.status-payment-pending .cp-status-dot,
.cp-status-label.status-paymentpending .cp-status-dot,
.cp-status-label.status-delivered .cp-status-dot {
    background: var(--cp-primary-400);
}

.cp-status-label.status-refunded .cp-status-dot,
.cp-status-label.status-refund .cp-status-dot,
.cp-status-label.status-draft .cp-status-dot,
.cp-status-label.status-dead .cp-status-dot {
    background: var(--cp-gray-600);
    opacity: 0.5;
}

/* ---- Action column: quiet View link + ghost PDF icon button ---- */
.cp-billing-list #tableInvoicesList td.cp-invoice-action,
.cp-billing-list #tableQuotesList td.cp-invoice-action {
    text-align: center;
    white-space: nowrap;
}

.cp-billing-list .cp-invoice-action a.cp-btn-view-invoice {
    display: inline-block;
    margin-right: 8px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--cp-gray-600);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    vertical-align: middle;
}

.cp-billing-list .cp-invoice-action a.cp-btn-view-invoice:hover {
    background: transparent;
    color: var(--cp-primary-500);
    text-decoration: none;
}

.cp-billing-list .cp-invoice-action .cp-btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--cp-gray-600);
    vertical-align: middle;
    cursor: pointer;
}

.cp-billing-list .cp-invoice-action .cp-btn-download:hover {
    border-color: var(--cp-border-neutral);
    background: var(--cp-surface-muted);
    color: var(--cp-gray-900);
    text-decoration: none;
}

.cp-billing-list .cp-invoice-action a.cp-btn-view-invoice:focus-visible,
.cp-billing-list .cp-invoice-action .cp-btn-download:focus-visible {
    outline: 2px solid var(--cp-primary-500);
    outline-offset: 2px;
}

/* Add Funds description */

/* ============================================================
   Support Tickets list, Vercel-style (#286)
   Scoped to .cp-tickets-wrap (the wrapper in supportticketslist.tpl) and to
   the ticket / network-status chips (.cp-list-chips). Announcements,
   Knowledgebase, Download, viewticket and the ticket submit steps, which also
   load this file, are unchanged. The shared list chrome (chips, bordered
   list, header, rows, hover tint, DataTables controls) is in
   clientarea-list.css. The table also carries .table-list, so the parent
   cloudx rules for .dataTables_wrapper table.table-list apply; every selector
   below leads with #tableTicketsList so plain specificity outranks them.
   Real status classes (WHMCS): open, answered, customer-reply, inprogress,
   onhold, closed; admin-coloured statuses use status-custom with an inline
   background-color.
   ============================================================ */
.cp-tickets-wrap {
    padding-top: 24px;
}

/* Department: muted. */
.cp-tickets-wrap #tableTicketsList tbody td.cp-ticket-dept {
    color: var(--cp-gray-600);
}

/* Subject: small mono #tid, then the subject in near-black. */
.cp-tickets-wrap #tableTicketsList .cp-ticket-link {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    border-radius: 4px;
    color: var(--cp-gray-900);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
}

.cp-tickets-wrap #tableTicketsList .cp-ticket-link:hover {
    color: var(--cp-primary-500);
    text-decoration: none;
}

.cp-tickets-wrap #tableTicketsList .cp-ticket-link:focus-visible {
    outline: 2px solid var(--cp-primary-500);
    outline-offset: 2px;
}

.cp-tickets-wrap #tableTicketsList .ticket-number {
    color: var(--cp-gray-600);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
}

.cp-tickets-wrap #tableTicketsList .ticket-subject {
    color: inherit;
    font-weight: 400;
}

.cp-tickets-wrap #tableTicketsList .ticket-subject.unread {
    font-weight: 700;
}

.cp-tickets-wrap #tableTicketsList .ticket-subject.unread::before {
    content: "";
    display: inline-block;
    position: relative;
    top: -1px;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--cp-primary-400);
    vertical-align: middle;
}

/* ---- Status: dot + plain text ----
   The parent theme tints .label.status inside .dataTables_wrapper, so the label
   resets its fill, padding and colour. A custom admin colour is an inline
   background-color on the label itself (an inline style outranks any normal
   stylesheet rule), so status-custom clips that fill to the text glyphs, which
   the text colour paints over, and the dot carries the admin colour instead. */
.cp-tickets-wrap #tableTicketsList .label.status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cp-gray-900);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.5;
    text-transform: none;
}

.cp-tickets-wrap #tableTicketsList .label.status.status-custom {
    -webkit-background-clip: text;
    background-clip: text;
}

.cp-tickets-wrap #tableTicketsList .cp-ticket-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cp-gray-600);
    flex: none;
}

.cp-tickets-wrap #tableTicketsList .status-open .cp-ticket-dot {
    background: #16a34a;
}

.cp-tickets-wrap #tableTicketsList .status-answered .cp-ticket-dot,
.cp-tickets-wrap #tableTicketsList .status-inprogress .cp-ticket-dot,
.cp-tickets-wrap #tableTicketsList .status-in-progress .cp-ticket-dot {
    background: var(--cp-primary-400);
}

.cp-tickets-wrap #tableTicketsList .status-customer-reply .cp-ticket-dot,
.cp-tickets-wrap #tableTicketsList .status-customerreply .cp-ticket-dot,
.cp-tickets-wrap #tableTicketsList .status-onhold .cp-ticket-dot,
.cp-tickets-wrap #tableTicketsList .status-on-hold .cp-ticket-dot {
    background: #d97706;
}

.cp-tickets-wrap #tableTicketsList .status-closed .cp-ticket-dot {
    background: var(--cp-gray-600);
    opacity: 0.5;
}

/* ---- Last updated: muted, tabular, right-aligned, chevron revealed on row hover ----
   (the hover reveal lives in clientarea-list.css with the other row rules) */
.cp-tickets-wrap #tableTicketsList tbody td.text-center {
    color: var(--cp-gray-600);
}

.cp-tickets-wrap #tableTicketsList .cp-ticket-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.cp-tickets-wrap #tableTicketsList .cp-ticket-date {
    color: var(--cp-gray-600);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.cp-tickets-wrap #tableTicketsList .cp-ticket-chevron {
    width: 12px;
    color: var(--cp-gray-600);
    font-size: 20px;
    line-height: 1;
    text-align: center;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.cp-tickets-wrap #tableTicketsList .cp-ticket-chevron::before {
    content: "\203A";
}

/* ---- Small screens: the list scrolls sideways inside itself ---- */
@media (max-width: 767.98px) {
    .cp-tickets-wrap #tableTicketsList {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-tickets-wrap #tableTicketsList .cp-ticket-chevron {
        transition: none;
    }
}