.customer-center {
    max-width: 1440px;
    margin: 0 auto;
    color: var(--enterprise-ink, #17352b);
}

.customer-center-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 18px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--enterprise-line, #d7e2dc);
}

.customer-center-eyebrow {
    margin: 0 0 5px;
    color: var(--enterprise-green, #007f4f);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.customer-center-page-header h1 {
    margin: 0;
    color: var(--enterprise-ink, #17352b);
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    line-height: 1.1;
}

.customer-center-page-subtitle {
    margin: 7px 0 0;
    color: var(--enterprise-muted, #60756b);
    font-size: .95rem;
}

.customer-center-primary-action {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 7px;
    background: var(--enterprise-green, #007f4f);
    color: #fff;
    font-size: .82rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.customer-center-primary-action:hover,
.customer-center-primary-action:focus-visible {
    background: var(--enterprise-green-bright, #008a57);
    color: #fff;
    text-decoration: none;
}

.customer-center-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .9fr);
    gap: 16px;
    align-items: start;
}

.customer-center-side {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.customer-center-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--enterprise-line, #d7e2dc);
    border-radius: 12px;
    background: var(--enterprise-surface, #fff);
    box-shadow: 0 8px 22px rgba(23, 53, 43, .055);
}

.customer-center-card__header {
    padding: 13px 16px;
    border-bottom: 1px solid #cfe2d8;
    background: #edf7f1;
    color: var(--enterprise-ink, #17352b);
    font-size: 1rem;
    font-weight: 800;
}

.customer-center-card__body {
    padding: 14px 16px;
}

.customer-center-card__body h3 {
    margin: 0 0 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--enterprise-line, #d7e2dc);
    color: var(--enterprise-ink, #17352b);
    font-size: .92rem;
    font-weight: 800;
}

.customer-center-details {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    font-size: .88rem;
}

.customer-center-details th,
.customer-center-details td {
    padding: 8px 0;
    border-bottom: 1px solid #edf2ef;
    vertical-align: top;
    line-height: 1.4;
}

.customer-center-details th {
    width: 38%;
    padding-right: 18px;
    color: var(--enterprise-muted, #60756b);
    font-weight: 650;
    text-align: left;
}

.customer-center-details td {
    color: var(--enterprise-ink, #17352b);
    font-weight: 550;
}

.customer-center-contact {
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid #e1ece6;
    border-radius: 8px;
    background: #fbfdfc;
}

.customer-center-contact:last-child { margin-bottom: 0; }

.customer-center-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 11px 16px;
    border-top: 1px solid var(--enterprise-line, #d7e2dc);
    background: #f7faf8;
}

.customer-center-card__footer a {
    color: var(--enterprise-green, #007f4f);
    font-size: .84rem;
    font-weight: 750;
}

.customer-center-ageing-form {
    display: grid;
    grid-template-columns: auto minmax(140px, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.customer-center-ageing-form label {
    color: var(--enterprise-muted, #60756b);
    font-size: .82rem;
    font-weight: 650;
}

.customer-center-ageing-form select,
.customer-center-ageing-form button,
.customer-center-notes__form textarea {
    box-sizing: border-box;
    min-height: 36px;
    border: 1px solid #bdd5c8;
    border-radius: 7px;
    background: #fff;
    color: var(--enterprise-ink, #17352b);
    font: inherit;
}

.customer-center-ageing-form select { width: 100%; padding: 7px 9px; }
.customer-center-ageing-form button { padding: 7px 12px; background: var(--enterprise-green, #007f4f); color: #fff; font-size: .82rem; font-weight: 750; cursor: pointer; }

.customer-center-ageing-table { max-height: 240px; overflow: auto; }
.customer-center-ageing-table table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.customer-center-ageing-table th, .customer-center-ageing-table td { padding: 8px 9px; border-bottom: 1px solid #e5eee9; }
.customer-center-ageing-table th { color: var(--enterprise-muted, #60756b); text-align: left; }
.customer-center-ageing-table td { color: var(--enterprise-ink, #17352b); text-align: right; font-weight: 700; }

.customer-center-notes__subject {
    padding: 11px 16px;
    border-bottom: 1px solid var(--enterprise-line, #d7e2dc);
    color: var(--enterprise-muted, #60756b);
    font-size: .84rem;
    font-weight: 650;
}

.customer-center-notes__list { max-height: 270px; overflow: auto; }
.customer-center-note { display: grid; gap: 3px; padding: 11px 16px; border-bottom: 1px solid #e5eee9; }
.customer-center-note:nth-child(even) { background: #fbfdfc; }
.customer-center-note strong { font-size: .84rem; }
.customer-center-note small { color: var(--enterprise-muted, #60756b); }
.customer-center-note span { white-space: pre-wrap; font-size: .86rem; line-height: 1.45; }
.customer-center-notes__list > p { margin: 0; padding: 16px; color: var(--enterprise-muted, #60756b); }

.customer-center-notes__form { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: end; padding: 12px 16px 16px; border-top: 1px solid var(--enterprise-line, #d7e2dc); }
.customer-center-notes__form textarea { width: 100%; min-height: 76px; padding: 9px; resize: vertical; }
.customer-center-notes__form button { min-height: 36px; padding: 7px 12px; border: 0; border-radius: 7px; background: var(--enterprise-green, #007f4f); color: #fff; font-size: .82rem; font-weight: 750; cursor: pointer; }

.customer-center-transactions { margin-top: 18px; }
.customer-center-transactions > h2 { margin: 0 0 10px; color: var(--enterprise-ink, #17352b); font-size: 1.15rem; }

@media (max-width: 980px) {
    .customer-center-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .customer-center-page-header { align-items: flex-start; flex-direction: column; gap: 12px; }
    .customer-center-primary-action { width: 100%; justify-content: center; }
    .customer-center-notes__form { grid-template-columns: 1fr; }
    .customer-center-details th { width: 42%; }
}