/* CakePHP 2.x customer profile design */
.customer-profile-page { max-width: 1240px; margin: 24px auto 45px; color: #243247; }
.customer-profile-page * { box-sizing: border-box; }
.profile-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:22px; }
.profile-toolbar h1 { margin:5px 0 6px; font-size:29px; font-weight:750; color:#172b46; }
.profile-toolbar p { margin:0; color:#77859a; }
.profile-eyebrow,.section-kicker { font-size:11px; letter-spacing:1.5px; font-weight:800; color:#16809a; }
.toolbar-actions { display:flex; gap:9px; flex-wrap:wrap; }
.cp-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:9px; padding:11px 15px; font-weight:700; font-size:13px; text-decoration:none!important; border:1px solid transparent; cursor:pointer; transition:all .18s ease; }
.cp-btn-primary { background:#176b87; color:#fff!important; box-shadow:0 5px 12px rgba(23,107,135,.16); }
.cp-btn-primary:hover { background:#10556d; color:#fff; transform:translateY(-1px); }
.cp-btn-light { background:#fff; color:#263c55!important; border-color:#dce5ed; }
.company-banner { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:25px 28px; border-radius:17px; color:#fff; background:linear-gradient(115deg,#142b49 0%,#174c6a 65%,#197b8d 100%); box-shadow:0 12px 30px rgba(22,52,80,.12); }
.company-brand { display:flex; align-items:center; gap:18px; min-width:0; }
.company-logo,.company-logo-placeholder { width:78px; height:78px; flex:0 0 78px; border-radius:13px; object-fit:contain; background:#fff; padding:5px; }
.company-logo-placeholder { display:flex; align-items:center; justify-content:center; color:#176b87; font-size:25px; font-weight:800; }
.company-brand h2 { margin:0 0 8px; font-size:22px; color:#fff; font-weight:750; }
.company-brand p { margin:4px 0; color:#d6e7ef; font-size:12px; overflow-wrap:anywhere; }
.profile-photo { width:112px; height:112px; flex:0 0 112px; padding:5px; border:1px solid rgba(255,255,255,.35); border-radius:15px; background:rgba(255,255,255,.12); }
.profile-photo img { width:100%; height:100%; object-fit:cover; border-radius:10px; background:#fff; }
.photo-placeholder { width:100%; height:100%; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#fff; color:#7b8ba0; font-size:12px; }
.identity-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:10px 0 12px; padding:20px; background:#fff; border:1px solid #e6edf3; border-radius:14px; box-shadow:0 4px 15px rgba(23,45,72,.035); }
.identity-strip>div { min-width:0; padding-left:14px; border-left:3px solid #d9edf2; }
.identity-label { display:block; margin-bottom:7px; color:#8390a1; font-size:11px; text-transform:uppercase; letter-spacing:.7px; }
.identity-strip strong { display:block; color:#253952; font-size:14px; overflow-wrap:anywhere; }
.status-pill { display:inline-block!important; border-radius:20px; padding:5px 10px; color:#19734a!important; background:#e5f7ed; font-size:11px!important; }
.profile-section { margin:10px 0 10px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:5px; }
.section-heading h3 { margin:5px 0 0; color:#1d3048; font-size:21px; font-weight:750; }
.section-heading p { margin:7px 0 0; color:#77859a; font-size:13px; }
.info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.info-card { min-width:0; padding:20px; border:1px solid #e4ebf1; border-radius:13px; background:#fff; box-shadow:0 4px 16px rgba(23,45,72,.035); }
.info-card h4 { margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid #edf1f5; color:#176b87; font-size:14px; font-weight:750; }
.info-card dl { display:grid; grid-template-columns:minmax(95px,.85fr) minmax(0,1.15fr); gap:11px 10px; margin:0; font-size:12px; }
.info-card dt { color:#8290a2; font-weight:500; }
.info-card dd { margin:0; color:#2c3d53; font-weight:650; overflow-wrap:anywhere; }
.info-card-wide { grid-column:span 2; }
.documents-section { padding:23px; border:1px solid #e2ebf0; border-radius:16px; background:#f8fbfd; }
.documents-heading { margin-bottom:19px; }
.documents-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.document-card { display:flex; align-items:center; gap:13px; min-width:0; padding:16px; border:1px solid #e0e9ef; border-radius:12px; background:#fff; transition:box-shadow .18s ease,transform .18s ease; }
.document-card:hover { box-shadow:0 8px 22px rgba(24,65,88,.07); transform:translateY(-1px); }
.document-icon { display:flex; align-items:center; justify-content:center; width:46px; height:46px; flex:0 0 46px; border-radius:12px; background:#eaf5f8; font-size:22px; }
.document-copy { flex:1; min-width:0; }
.document-copy h4 { margin:0 0 5px; color:#24374f; font-size:14px; font-weight:750; }
.document-copy p { margin:0; color:#8491a1; font-size:11px; }
.document-download { flex:0 0 auto; display:inline-block; padding:9px 11px; border:1px solid #d4e8ee; border-radius:8px; color:#176b87!important; background:#f2fafc; font-size:12px; font-weight:750; text-decoration:none!important; }
.document-download:hover { background:#176b87; color:#fff!important; }
.privacy-note { margin:17px 0 0; padding:12px 14px; border-radius:9px; background:#fff8e9; color:#87642c; font-size:12px; }
.profile-footer { display:flex; justify-content:space-between; gap:15px; padding:16px 2px; border-top:1px solid #e4ebf1; color:#8b97a6; font-size:11px; }
@media(max-width:900px) { .info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .identity-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .customer-profile-page { margin:12px auto 25px; } .profile-toolbar,.company-banner,.section-heading { align-items:flex-start; flex-direction:column; } .profile-toolbar h1 { font-size:24px; } .company-banner { padding:20px; } .company-brand { align-items:flex-start; } .company-brand h2 { font-size:18px; } .profile-photo { width:90px; height:90px; } .identity-strip,.info-grid,.documents-grid { grid-template-columns:1fr; } .info-card-wide { grid-column:auto; } .documents-section { padding:15px; } .document-card { flex-wrap:wrap; } .document-download { margin-left:59px; } .profile-footer { flex-direction:column; } }
@media print {
    .no-print,.hk-breadcrumb { display:none!important; }
    body { background:#fff!important; }
    .customer-profile-page { max-width:none; margin:0; }
    .company-banner { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .info-card,.identity-strip,.documents-section { box-shadow:none; break-inside:avoid; }
    .document-download { display:none; }
}

.document-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.document-card {
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.document-icon {
    font-size: 28px;
    margin-bottom: 10px;
}

.document-copy h4 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
}

.document-copy p {
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 15px;
}

.document-thumbnail {
    width: 100%;
    max-width: 360px;
    height: 180px;
    object-fit: contain;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.document-status {
    color: #15803d;
    font-size: 12px;
    margin-top: 8px;
}

.document-missing {
    padding: 24px 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    text-align: center;
}

.document-missing span {
    font-size: 30px;
}

.document-missing p {
    color: #64748b;
    margin: 8px 0 0;
    font-size: 13px;
}

.btn-document-view {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 14px;
    color: #fff;
    background: #2563eb;
    text-decoration: none;
    border-radius: 7px;
}

.btn-document-view:hover {
    background: #1d4ed8;
    color: #fff;
}

@media (max-width: 600px) {
    .document-grid {
        grid-template-columns: 1fr;
    }
}