/*
 * AUconnection customer workspace
 * A lighter, calmer visual layer for signed-in customer pages only.
 * Public marketing pages and the administrator portal are not restyled here.
 */

.customer-workspace-nav {
    position: relative;
    z-index: 900;
    background: #ffffff;
    border-bottom: 1px solid #dce6f2;
    box-shadow: 0 5px 18px rgba(25, 54, 91, .05);
}
.customer-workspace-nav-inner {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.customer-workspace-nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.customer-workspace-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 9px;
    color: #53657d;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.customer-workspace-nav-link > span { color: #1685d8; font-size: 16px; }
.customer-workspace-nav-link:hover,
.customer-workspace-nav-link.is-active {
    color: #123b68;
    background: #eaf4ff;
}
.customer-workspace-nav-link.is-active { box-shadow: inset 0 -2px 0 #1685d8; }
.customer-workspace-new-request {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 9px;
    background: linear-gradient(110deg, #0878f9, #08aeca);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}
.customer-workspace-new-request:hover { filter: brightness(1.05); }

.customer-portal-page,
.customer-proposal-page,
.au-customer-invoice-page,
.au-receipt-page {
    background: #f3f7fc !important;
    color: #182b43 !important;
}
.customer-portal-welcome {
    background:
        radial-gradient(circle at 85% 0%, rgba(31, 153, 230, .12), transparent 34%),
        linear-gradient(120deg, #eaf3ff, #f7faff) !important;
    border-bottom: 1px solid #e0eaf5;
}
.customer-portal-welcome h1,
.customer-portal-welcome h2 { color: #12365c !important; }
.customer-portal-welcome p { color: #5c6f86 !important; }
.customer-portal-dashboard-section { background: #f3f7fc !important; }
.customer-portal-panel,
.customer-portal-stat-card,
.customer-portal-shortcut,
.customer-payment-row {
    color: #1b3049 !important;
    background: #ffffff !important;
    border: 1px solid #dfe8f2 !important;
    box-shadow: 0 8px 24px rgba(31, 61, 96, .055);
}
.customer-portal-panel h2,
.customer-portal-panel h3,
.customer-portal-shortcut strong,
.customer-payment-main strong,
.customer-payment-side strong { color: #17395f !important; }
.customer-portal-panel p,
.customer-portal-panel small,
.customer-portal-stat-card small,
.customer-portal-shortcut small,
.customer-payment-row small { color: #65778e !important; }
.customer-portal-stat-card > span { color: #5a6f88 !important; }
.customer-portal-stat-card > strong { color: #0878d9 !important; }
.customer-portal-panel-heading a:not(.btn),
.customer-portal-panel a:not(.btn),
.customer-payment-side a { color: #0878c9 !important; }
.customer-request-row {
    border-color: #e4ebf3 !important;
    background: #fbfdff !important;
}
.customer-request-row:hover { background: #eef6ff !important; }
.customer-request-row-main strong { color: #18395d !important; }
.customer-request-row-main small { color: #687b91 !important; }
.customer-portal-empty h3 { color: #17395f !important; }
.customer-portal-empty p { color: #667991 !important; }
.customer-portal-alert-info {
    color: #244e77 !important;
    background: #e8f4ff !important;
    border-color: #c9e3fb !important;
}
.customer-portal-status { color: #285477 !important; }

.customer-portal-shortcuts {
    margin: 28px 0 30px;
}
.customer-portal-shortcuts-heading { margin-bottom: 15px; }
.customer-portal-shortcuts-heading h2 {
    margin: 5px 0;
    color: #17395f;
    font-size: 1.35rem;
}
.customer-portal-shortcuts-heading p { color: #65778e; }
.customer-portal-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.customer-portal-shortcut {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 88px;
    padding: 15px;
    border-radius: 13px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.customer-portal-shortcut:hover {
    transform: translateY(-2px);
    border-color: #b7d8f7 !important;
    box-shadow: 0 12px 26px rgba(31, 90, 150, .10);
}
.customer-portal-shortcut > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.customer-portal-shortcut-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #0878d9;
    background: #eaf4ff;
    font-size: 19px;
    font-weight: 800;
}
.customer-portal-shortcut-arrow {
    margin-left: auto;
    color: #1685d8;
    font-size: 18px;
}
.customer-portal-shortcut strong { font-size: .94rem; }
.customer-portal-shortcut small { font-size: .78rem; line-height: 1.4; }

.customer-payment-list { display: grid; gap: 10px; }
.customer-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border-radius: 12px;
}
.customer-payment-main,
.customer-payment-side { display: grid; gap: 5px; }
.customer-payment-side { justify-items: end; text-align: right; }
.customer-payment-side a { font-size: .82rem; font-weight: 700; }

.customer-portal-page .customer-request-requirements,
.customer-portal-page .customer-request-meta-grid > div {
    color: #263f5b !important;
    background: #f8fbff !important;
    border-color: #e0e9f3 !important;
}
.customer-portal-page .customer-request-meta-grid small { color: #687b91 !important; }
.customer-portal-page .customer-request-meta-grid strong { color: #1c3b5c !important; }
.customer-portal-page .customer-request-timeline strong { color: #1c3b5c !important; }
.customer-portal-page .customer-request-timeline p,
.customer-portal-page .customer-request-timeline small { color: #65778e !important; }

/* Proposal and invoice templates contain inline dark styles; override only their customer-facing surfaces. */
.customer-proposal-page .customer-proposal-letterhead,
.customer-proposal-page .customer-proposal-heading,
.customer-proposal-page .customer-proposal-panel,
.au-customer-invoice-page .au-customer-invoice-card,
.au-receipt-page .au-receipt-card {
    color: #1b3049 !important;
    background: #ffffff !important;
    border-color: #dfe8f2 !important;
    box-shadow: 0 8px 24px rgba(31, 61, 96, .055) !important;
}
.customer-proposal-page .customer-proposal-letterhead h2,
.customer-proposal-page .customer-proposal-heading h1,
.customer-proposal-page .customer-proposal-panel h2,
.customer-proposal-page .customer-proposal-panel h3,
.au-customer-invoice-page .au-customer-invoice-card h1,
.au-customer-invoice-page .au-customer-invoice-card h2,
.au-receipt-page .au-receipt-card h1,
.au-receipt-page .au-receipt-card h2 { color: #17395f !important; }
.customer-proposal-page .customer-proposal-letterhead p,
.customer-proposal-page .customer-proposal-letterhead small,
.customer-proposal-page .customer-proposal-copy,
.customer-proposal-page .customer-proposal-muted,
.au-customer-invoice-page .au-customer-invoice-muted,
.au-customer-invoice-page .au-customer-invoice-brand small,
.au-receipt-page .au-receipt-head p,
.au-receipt-page .au-receipt-head small { color: #65778e !important; }
.customer-proposal-page .customer-proposal-table th,
.au-customer-invoice-page .au-customer-invoice-table th { color: #0878c9 !important; }
.customer-proposal-page .customer-proposal-table td,
.au-customer-invoice-page .au-customer-invoice-table td { color: #263f5b !important; }
.customer-proposal-page .customer-proposal-comment {
    color: #203850 !important;
    background: #f8fbff !important;
    border-color: #d7e4f1 !important;
}
.customer-proposal-page .customer-proposal-accept-check { color: #405a75 !important; }
.au-customer-invoice-page .au-customer-invoice-meta div {
    background: #f7faff !important;
    border-color: #e0e9f3 !important;
}
.au-customer-invoice-page .au-customer-invoice-meta strong { color: #1b3a5c !important; }
.au-customer-invoice-page .au-customer-invoice-meta small { color: #65778e !important; }
.au-customer-invoice-page .au-customer-invoice-totals { color: #263f5b !important; }
.au-customer-invoice-page .au-customer-invoice-totals .balance { color: #0878c9 !important; }
.au-customer-invoice-page .au-customer-invoice-payment-note { color: #65778e !important; }
.au-receipt-page .au-receipt-amount {
    color: #1b3049 !important;
    background: #eaf4ff !important;
    border-color: #cfe3f7 !important;
}
.au-receipt-page .au-receipt-amount strong { color: #0878c9 !important; }

@media (max-width: 900px) {
    .customer-workspace-nav-inner { align-items: stretch; flex-direction: column; padding-top: 9px; padding-bottom: 9px; gap: 8px; }
    .customer-workspace-nav-links { overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
    .customer-workspace-new-request { align-self: flex-start; }
    .customer-portal-shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .customer-workspace-nav-link { padding: 8px 10px; font-size: 12px; }
    .customer-portal-shortcut-grid { grid-template-columns: 1fr; }
    .customer-portal-shortcut { min-height: 76px; }
    .customer-payment-row { align-items: flex-start; flex-direction: column; }
    .customer-payment-side { justify-items: start; text-align: left; }
}

/* ======================================================================
   AUCONNECTION CUSTOMER PORTAL - CONTRAST AND COMFORT REFINEMENT
   Applied only to signed-in customer pages and printable receipts.
   ====================================================================== */

/* Use calm blue-grey surfaces rather than bright white panels everywhere. */
.customer-portal-page,
.customer-proposal-page,
.au-customer-invoice-page,
.au-receipt-page {
    background: #eaf1f9 !important;
    color: #172d49 !important;
}

.customer-portal-panel,
.customer-portal-stat-card,
.customer-portal-shortcut,
.customer-payment-row,
.customer-proposal-page .customer-proposal-letterhead,
.customer-proposal-page .customer-proposal-heading,
.customer-proposal-page .customer-proposal-panel,
.au-customer-invoice-page .au-customer-invoice-card,
.au-receipt-page .au-receipt-card {
    background: #f8fbff !important;
    color: #172d49 !important;
    border-color: #d2dfed !important;
}

/* Keep secondary copy readable against the blue-tinted surfaces. */
.customer-portal-panel p,
.customer-portal-panel small,
.customer-portal-stat-card small,
.customer-portal-shortcut small,
.customer-payment-row small,
.customer-proposal-page .customer-proposal-copy,
.customer-proposal-page .customer-proposal-muted,
.au-customer-invoice-page .au-customer-invoice-muted,
.au-receipt-page .au-receipt-head p,
.au-receipt-page .au-receipt-head small {
    color: #526982 !important;
}

/* Proposal-list status pills: accepted/sent/revision/rejected must be readable. */
.customer-proposals-page .customer-request-status,
.customer-proposal-page .customer-request-status,
.customer-portal-page .customer-request-status,
.customer-request-status.status-accepted,
.customer-request-status.status-sent,
.customer-request-status.status-viewed,
.customer-request-status.status-revision_requested,
.customer-request-status.status-rejected,
.customer-request-status.status-expired,
.customer-request-status.status-draft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 5px 10px;
    border: 1px solid transparent !important;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    opacity: 1 !important;
    text-shadow: none !important;
}

.customer-request-status.status-accepted {
    color: #17633e !important;
    background: #dff3e8 !important;
    border-color: #a8ddbf !important;
}
.customer-request-status.status-sent,
.customer-request-status.status-viewed {
    color: #174f86 !important;
    background: #e0efff !important;
    border-color: #b7d5f5 !important;
}
.customer-request-status.status-revision_requested {
    color: #80520b !important;
    background: #fff1cf !important;
    border-color: #f0d58e !important;
}
.customer-request-status.status-rejected,
.customer-request-status.status-expired {
    color: #923b3b !important;
    background: #fde8e8 !important;
    border-color: #efbcbc !important;
}
.customer-request-status.status-draft {
    color: #4e6075 !important;
    background: #e9eef4 !important;
    border-color: #cbd6e2 !important;
}

/* The accepted-proposal confirmation was pale mint text on pale mint fill.
   Give it a strong green text colour and a slightly deeper green surface. */
.customer-proposal-page .customer-proposal-alert,
.customer-proposal-page .customer-proposal-alert:not(.error) {
    color: #175b3b !important;
    background: #e0f2e8 !important;
    border: 1px solid #a9d9bd !important;
}

.customer-proposal-page .customer-proposal-alert.error {
    color: #8c3030 !important;
    background: #fdeaea !important;
    border-color: #edbcbc !important;
}

/* Keep proposal action buttons consistent with the AUconnection blue/cyan brand. */
.customer-proposal-page .customer-proposal-button {
    color: #ffffff !important;
    background: #123b60 !important;
    border-color: #123b60 !important;
}
.customer-proposal-page .customer-proposal-button.primary {
    color: #ffffff !important;
    background: linear-gradient(110deg, #0878f9, #00aeca) !important;
    border-color: transparent !important;
}
.customer-proposal-page .customer-proposal-button:hover {
    filter: brightness(1.08);
}

/* Receipt printing: remove navigation and controls from the printed document.
   The on-screen receipt remains styled by the normal customer portal rules. */
@media print {
    .site-header,
    .site-footer,
    .customer-workspace-nav,
    .au-receipt-action,
    .service-back-link {
        display: none !important;
    }

    .au-receipt-page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        color: #111827 !important;
    }

    .au-receipt-card {
        background: #ffffff !important;
        color: #111827 !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .au-receipt-card h1,
    .au-receipt-card h2,
    .au-receipt-card strong,
    .au-receipt-card p,
    .au-receipt-card small,
    .au-receipt-card span {
        color: #111827 !important;
    }

    .au-receipt-card .section-label {
        color: #0878c9 !important;
    }

    .au-receipt-amount {
        background: #eef5fc !important;
        border-color: #cbdced !important;
    }

    .au-receipt-amount strong {
        color: #123b60 !important;
    }
}

/* ======================================================================
   AUCONNECTION CUSTOMER PORTAL - TARGETED READABILITY FIX
   These selectors match the actual customer dashboard and invoice markup.
   The palette is medium blue-grey, not stark white and not full dark mode.
   ====================================================================== */

/* A calmer, slightly deeper blue-grey canvas across customer pages. */
.customer-portal-page,
.customer-proposal-page,
.au-customer-invoice-page,
.au-receipt-page {
    background: #e3edf8 !important;
    color: #183653 !important;
}

.customer-portal-dashboard-section {
    background: #e3edf8 !important;
}

.customer-portal-panel,
.customer-portal-stat-card,
.customer-portal-shortcut,
.customer-payment-row,
.customer-proposal-page .customer-proposal-letterhead,
.customer-proposal-page .customer-proposal-heading,
.customer-proposal-page .customer-proposal-panel,
.au-customer-invoice-page .au-customer-invoice-card,
.au-receipt-page .au-receipt-card {
    background: #f1f6fc !important;
    color: #183653 !important;
    border-color: #c6d7e9 !important;
}

/* Dashboard quick-action links: this is the real class in the dashboard PHP. */
.customer-quick-action {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 0 !important;
    color: #183653 !important;
    background: transparent !important;
    border-bottom: 1px solid #d2dfed !important;
    text-decoration: none !important;
}

.customer-quick-action > span:first-child {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #0878c9 !important;
    background: #dceafa !important;
    border: 1px solid #c3d9f1;
}

.customer-quick-action > span:last-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.customer-quick-action strong {
    color: #183653 !important;
    font-weight: 800;
}

.customer-quick-action small {
    color: #536b86 !important;
}

.customer-quick-action:hover strong {
    color: #006fc9 !important;
}

.customer-portal-logout-form button {
    color: #36516f !important;
}

/* Make all request and proposal status pills readable, including Approved. */
.customer-request-status {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    font-size: 12px;
    font-weight: 800 !important;
    line-height: 1.2;
    opacity: 1 !important;
    text-shadow: none !important;
}

.customer-request-status.status-approved,
.customer-request-status.status-accepted,
.customer-request-status.status-completed,
.customer-request-status.status-successful {
    color: #155b3b !important;
    background: #d4eddf !important;
    border-color: #9bcdb0 !important;
}

.customer-request-status.status-in_progress,
.customer-request-status.status-under_review,
.customer-request-status.status-pending,
.customer-request-status.status-sent,
.customer-request-status.status-viewed {
    color: #174d80 !important;
    background: #d9e9fb !important;
    border-color: #aac9ed !important;
}

.customer-request-status.status-revision_requested,
.customer-request-status.status-awaiting_payment {
    color: #79500b !important;
    background: #f9edcf !important;
    border-color: #e6cf91 !important;
}

.customer-request-status.status-rejected,
.customer-request-status.status-expired,
.customer-request-status.status-failed,
.customer-request-status.status-cancelled {
    color: #8a3030 !important;
    background: #f8dddd !important;
    border-color: #e6b0b0 !important;
}

.customer-request-status.status-draft,
.customer-request-status.status-new {
    color: #435a73 !important;
    background: #e4ebf3 !important;
    border-color: #c5d2e0 !important;
}

/* Invoice alerts use their own .au-customer-invoice-alert class.
   The original inline stylesheet used pale text; override it directly. */
.au-customer-invoice-page .au-customer-invoice-alert {
    color: #174d70 !important;
    background: #dcecf7 !important;
    border: 1px solid #a9cde3 !important;
    opacity: 1 !important;
}

.au-customer-invoice-page .au-customer-invoice-alert.success {
    color: #155b3b !important;
    background: #d9eee2 !important;
    border-color: #9bcdb0 !important;
}

.au-customer-invoice-page .au-customer-invoice-alert.error {
    color: #842f2f !important;
    background: #f8e1e1 !important;
    border-color: #e4b0b0 !important;
}

/* Proposal response confirmation: strong readable green on a soft green fill. */
.customer-proposal-page .customer-proposal-alert {
    color: #155b3b !important;
    background: #d9eee2 !important;
    border: 1px solid #9bcdb0 !important;
    opacity: 1 !important;
}

.customer-proposal-page .customer-proposal-alert.error {
    color: #842f2f !important;
    background: #f8e1e1 !important;
    border-color: #e4b0b0 !important;
}

/* Keep secondary copy comfortably readable on tinted surfaces. */
.customer-portal-panel p,
.customer-portal-panel small,
.customer-portal-stat-card small,
.customer-portal-shortcut small,
.customer-payment-row small,
.customer-proposal-page .customer-proposal-copy,
.customer-proposal-page .customer-proposal-muted,
.au-customer-invoice-page .au-customer-invoice-muted,
.au-customer-invoice-page .au-customer-invoice-payment-note {
    color: #536b86 !important;
}

/* Invoice and proposal buttons: clear contrast, consistent with brand colours. */
.au-customer-invoice-page .au-customer-invoice-button,
.customer-proposal-page .customer-proposal-button {
    color: #ffffff !important;
    background: #123b60 !important;
    border-color: #123b60 !important;
}

.au-customer-invoice-page .au-customer-invoice-button:hover,
.customer-proposal-page .customer-proposal-button:hover {
    filter: brightness(1.08);
}

.customer-proposal-page .customer-proposal-button.primary {
    color: #ffffff !important;
    background: linear-gradient(110deg, #0878f9, #00aeca) !important;
    border-color: transparent !important;
}

/* Preserve clean print output for receipts and invoices. */
@media print {
    .site-header,
    .site-footer,
    .customer-workspace-nav {
        display: none !important;
    }
}

/* ======================================================================
   FINAL CUSTOMER PORTAL STATUS CONTRAST PATCH
   The request-history screenshot exposed the missing "submitted" state.
   All status labels now have a dark, readable default text colour.
   ====================================================================== */

/* Default treatment protects any future/unmapped status from pale text. */
.customer-request-status {
    color: #173b5e !important;
    background: #dce8f5 !important;
    border: 1px solid #b8cbe0 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

/* Submitted means the request has been received and is awaiting review. */
.customer-request-status.status-submitted {
    color: #174d80 !important;
    background: #d8e9fb !important;
    border-color: #a9c9ed !important;
}

/* New and under-review requests use the same clear information-blue family. */
.customer-request-status.status-new,
.customer-request-status.status-under_review,
.customer-request-status.status-in_review,
.customer-request-status.status-pending {
    color: #174d80 !important;
    background: #d8e9fb !important;
    border-color: #a9c9ed !important;
}

/* Make primary actions readable on the blue/cyan brand gradient. */
.customer-portal-page a.btn.btn-primary,
.customer-portal-page .customer-portal-panel-heading a.btn.btn-primary,
.customer-portal-page .customer-portal-empty a.btn.btn-primary {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: linear-gradient(110deg, #0878f9, #009fbd) !important;
    border-color: transparent !important;
    text-shadow: none !important;
}

.customer-portal-page a.btn.btn-primary:hover,
.customer-portal-page .customer-portal-panel-heading a.btn.btn-primary:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    filter: brightness(1.06);
}

/* ======================================================================
   FINAL CUSTOMER ALERT AND INVOICE STATUS CONTRAST CORRECTION
   Targets the exact classes used by the current customer PHP templates.
   ====================================================================== */

/* Service request submitted successfully: readable dark green text. */
.customer-portal-alert-success {
    color: #145a3a !important;
    background: #d9eee2 !important;
    border: 1px solid #9bcdb0 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Customer invoice status (Paid, Issued, Partially paid, etc.).
   The invoice template defines this style inline, so use !important here. */
.au-customer-invoice-page .au-customer-invoice-status {
    color: #174d80 !important;
    background: #d8e9fb !important;
    border: 1px solid #a9c9ed !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Payment confirmation and invoice alerts, including the inline page styles. */
.au-customer-invoice-page .au-customer-invoice-alert {
    color: #174d70 !important;
    background: #dcecf7 !important;
    border: 1px solid #a9cde3 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.au-customer-invoice-page .au-customer-invoice-alert.success {
    color: #145a3a !important;
    background: #d9eee2 !important;
    border-color: #9bcdb0 !important;
}

.au-customer-invoice-page .au-customer-invoice-alert.error {
    color: #842f2f !important;
    background: #f8e1e1 !important;
    border-color: #e4b0b0 !important;
}


/* Customer Project Portal — additive styles, scoped to project pages. */
.customer-projects-page .customer-project-back{display:inline-block;margin:0 0 15px;color:#2476b9;font-size:13px;font-weight:700}
.customer-projects-page .customer-portal-welcome .container{padding-top:28px;padding-bottom:30px}
.customer-project-detail-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.customer-project-detail-heading>div{min-width:0}
.customer-project-detail-heading .customer-project-status{flex:0 0 auto;margin-top:8px}
.customer-projects-summary{display:flex;align-items:baseline;gap:10px;margin:0 0 18px;color:#62758c}
.customer-projects-summary strong{font-size:27px;color:#17395f}
.customer-projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.customer-project-card,.customer-project-info-grid>.customer-portal-panel,.customer-project-content-grid>.customer-portal-panel{background:#fff;border:1px solid #dfe8f2;border-radius:14px;padding:20px;box-shadow:0 8px 24px rgba(31,61,96,.055);min-width:0}
.customer-project-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.customer-project-number{font-size:10px;font-weight:800;letter-spacing:.7px;color:#287bb9}
.customer-project-status{display:inline-flex;padding:6px 10px;border-radius:999px;background:#e9f1f8;color:#4b6680;font-size:10px;font-weight:800;white-space:nowrap}
.customer-project-status.status-in_progress{background:#e2f5fb;color:#087c9d}
.customer-project-status.status-completed{background:#e2f7ed;color:#18784f}
.customer-project-status.status-awaiting_payment,.customer-project-status.status-on_hold{background:#fff3dc;color:#94620c}
.customer-project-status.status-cancelled{background:#fde9eb;color:#a83e4c}
.customer-project-card h2{font-size:18px;color:#17395f;margin:15px 0 8px}
.customer-project-card>p{font-size:13px;line-height:1.65;color:#65778e;min-height:42px}
.customer-project-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:15px 0;color:#61758d;font-size:11px}
.customer-project-progress-label{display:flex;justify-content:space-between;gap:10px;margin:12px 0 7px;color:#60748b;font-size:11px}
.customer-project-progress-label strong{color:#1c527f}
.customer-project-progress{height:8px;border-radius:99px;background:#e7eef5;overflow:hidden}
.customer-project-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1685d8,#08aeca)}
.customer-project-card-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #e8eef5;margin-top:17px;padding-top:14px;color:#7a8ba0;font-size:11px}
.customer-project-card-footer a,.customer-project-primary-link,.customer-project-help a{color:#087fbd;font-size:12px;font-weight:800}
.customer-project-empty{text-align:center;padding:42px 24px}
.customer-project-empty h2{color:#17395f;margin:8px 0}
.customer-project-empty p,.customer-project-empty-compact p{color:#667a91;line-height:1.65;font-size:13px}
.customer-project-primary-link{display:inline-flex;margin-top:12px;padding:10px 15px;border-radius:8px;background:#e8f4ff}
.customer-project-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.customer-project-info-grid>.customer-portal-panel{padding:18px}
.customer-project-info-grid strong{display:block;color:#17395f;font-size:13px;margin:12px 0 4px}
.customer-project-info-grid p{color:#687b91;font-size:12px;line-height:1.55;overflow-wrap:anywhere}
.customer-project-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.customer-project-content-grid h2{font-size:18px;color:#17395f;margin:8px 0 18px}
.customer-project-milestones,.customer-project-updates{display:grid;gap:0}
.customer-project-milestone{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid #e8eef5}
.customer-project-milestone:last-child,.customer-project-update:last-child{border-bottom:0}
.customer-project-milestone-marker{flex:0 0 25px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#edf3f8;color:#7290a8;font-weight:800}
.customer-project-milestone-marker.is-complete{background:#e0f6eb;color:#168251}
.customer-project-milestone strong,.customer-project-milestone small{display:block}
.customer-project-milestone strong{font-size:13px;color:#234665}
.customer-project-milestone small{margin-top:5px;color:#73869b;font-size:11px}
.customer-project-update{padding:14px 0;border-bottom:1px solid #e8eef5}
.customer-project-update-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.customer-project-update-meta strong{color:#234665;font-size:13px}
.customer-project-update-meta time,.customer-project-update small{color:#8494a7;font-size:10px}
.customer-project-update p{color:#5e7188;font-size:12px;line-height:1.7;overflow-wrap:anywhere}
.customer-project-update small{display:block}
.customer-project-empty-compact{padding:22px 4px;color:#234665}
.customer-project-empty-compact strong{font-size:13px}
.customer-project-help{margin-top:16px;padding:20px;border:1px solid #dce8f3;border-radius:12px;background:#edf6ff}
.customer-project-help strong{color:#17395f}
.customer-project-help p{color:#63788f;font-size:12px;line-height:1.6}
@media(max-width:800px){.customer-projects-grid,.customer-project-info-grid,.customer-project-content-grid{grid-template-columns:1fr}}
@media(max-width:560px){.customer-project-detail-heading{display:block}.customer-project-detail-heading .customer-project-status{margin:0 0 10px}.customer-project-meta{display:grid}.customer-project-card{padding:16px}}

/* Customer support ticket workspace */
.customer-support-page{color:#19324d}
.customer-support-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:18px;align-items:start}
.customer-support-alert{padding:12px 15px;margin:0 0 16px;border:1px solid #c9e3fb;border-radius:9px;background:#e8f4ff;color:#244e77}
.customer-support-list{display:grid;gap:9px}
.customer-support-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid #e0e9f3;border-radius:10px;background:#fbfdff;text-decoration:none;color:#193a5d}
.customer-support-row:hover{background:#eef6ff;border-color:#b7d8f7}
.customer-support-row strong,.customer-support-row small{display:block}.customer-support-row strong{font-size:13px}.customer-support-row small{margin-top:5px;color:#687b91;font-size:11px}
.customer-support-status{display:inline-flex;padding:6px 9px;border-radius:999px;background:#e8f4ff;color:#285477;font-size:10px;font-weight:800;white-space:nowrap}
.customer-support-status.status-open{background:#e4f6ff;color:#0878b9}.customer-support-status.status-in_progress{background:#eaf1ff;color:#315fa5}.customer-support-status.status-waiting_customer{background:#fff4dd;color:#8a5a00}.customer-support-status.status-resolved,.customer-support-status.status-closed{background:#e4f7ee;color:#167347}
.customer-support-form{display:grid;gap:13px;margin-top:14px}
.customer-support-form label{display:grid;gap:7px;color:#36516e;font-size:12px;font-weight:700}
.customer-support-form input,.customer-support-form select,.customer-support-form textarea{width:100%;min-width:0;padding:11px 12px;border:1px solid #d5e1ed;border-radius:8px;background:#fff;color:#19324d;font:inherit;font-size:13px}
.customer-support-form textarea{resize:vertical;line-height:1.55}.customer-support-form small{color:#71849a;font-size:10px;font-weight:400}
.customer-support-form button{justify-self:start;border:0;border-radius:8px;padding:11px 16px;background:linear-gradient(110deg,#0878f9,#08aeca);color:#fff;font-weight:800;cursor:pointer}
.customer-support-back{display:inline-block;margin:0 0 15px;color:#0878c9;font-size:13px;font-weight:700;text-decoration:none}
.customer-support-conversation{max-width:1000px;margin:0 auto}
.customer-support-message{padding:16px 0;border-bottom:1px solid #e5edf5}
.customer-support-message>div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.customer-support-message strong{color:#17395f;font-size:13px}.customer-support-message time{color:#71849a;font-size:11px}
.customer-support-message p{color:#344e69;font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.customer-support-attachments{display:flex;flex-wrap:wrap;gap:10px}.customer-support-attachments a{color:#0878c9;font-size:12px;font-weight:700}
.customer-support-reply-form{padding-top:18px;border-top:1px solid #e2ebf4}
.customer-support-closed{margin-top:18px;padding:13px;border-radius:9px;background:#f1f5f9;color:#5f7186;font-size:13px}
@media(max-width:900px){.customer-support-grid{grid-template-columns:1fr}}
@media(max-width:600px){.customer-support-row{align-items:flex-start;flex-direction:column}.customer-support-page .customer-portal-panel{padding:16px}}
