/* css/customer_card.css — Kundkort-vyn */

#page-customer-card { padding: 0; }

.cc-toolbar {
    display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.cc-toolbar .page-title { margin: 0; }
.cc-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: 1px solid #e5e7eb; border-radius: 8px;
    background: #fff; color: #475569; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.cc-back-btn:hover { background: #f8fafc; border-color: #cbd5e1; }

.cc-header {
    background: linear-gradient(135deg, #024550 0%, #0a5a68 100%);
    color: #fff; padding: 22px 26px; border-radius: 14px; margin-bottom: 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.cc-head-name { font-size: 22px; font-weight: 700; margin-bottom: 2px; }
.cc-head-addr { font-size: 13px; opacity: .85; }
.cc-head-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; opacity: .85; margin-top: 8px; }
.cc-head-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.cc-head-status {
    padding: 6px 14px; border-radius: 20px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}

.cc-grid {
    display: grid; grid-template-columns: minmax(340px, 1fr) 1.2fr;
    gap: 18px; margin-bottom: 18px;
    align-items: stretch;
}
@media (max-width: 900px) { .cc-grid { grid-template-columns: 1fr; } }

.cc-map-wrap {
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.05); border: 1px solid #f1f5f9;
    display: flex;
}
.cc-map { width: 100%; min-height: 240px; flex: 1; }

.cc-info {
    background: #fff; border-radius: 14px; padding: 22px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05); border: 1px solid #f1f5f9;
    display: flex; flex-direction: column;
}
.cc-two-col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    border-bottom: 1px solid #f1f5f9; padding-bottom: 6px;
}
.cc-two-col + .cc-two-col { margin-top: 18px; }
@media (max-width: 700px) { .cc-two-col { grid-template-columns: 1fr; gap: 8px; } }
.cc-col h3 { margin-top: 0 !important; border-bottom: none !important; padding-bottom: 0 !important; }
.cc-col > h3:first-child { margin-top: 0; }
.cc-col .cc-info-row { border-bottom-color: #f8fafc; }

/* Block — varje sektion får egen ram så de syns separat */
.cc-row {
    display: flex; gap: 14px;
    align-items: stretch;
}
@media (max-width: 700px) { .cc-row { flex-direction: column; } }
.cc-row + .cc-row, .cc-row + .cc-block, .cc-block + .cc-row, .cc-block + .cc-block { margin-top: 14px; }

.cc-block {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    box-sizing: border-box;
    margin: 0;
}
.cc-row > .cc-block {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    align-self: stretch;
}
.cc-row > .cc-block > *:first-child { margin-top: 0 !important; }
.cc-block h3 {
    margin: 0 0 10px !important; padding-bottom: 8px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 11px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .8px;
}

.cc-info h3 {
    font-size: 11px; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .8px;
    margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid #f1f5f9;
}
.cc-info h3:first-child { margin-top: 0; }
.cc-info-row {
    display: flex; justify-content: space-between; padding: 7px 0;
    font-size: 13px; border-bottom: 1px solid #f8fafc;
}
.cc-info-row > span:first-child { color: #64748b; font-weight: 500; }
.cc-info-row > span:last-child { color: #1a1a1a; font-weight: 600; text-align: right; }
.cc-info-empty { color: #cbd5e1; font-style: italic; }

.cc-resident-chip {
    display: inline-block; background: #f1f5f9; color: #334155;
    padding: 4px 10px; border-radius: 12px; font-size: 12px; margin: 2px 4px 2px 0;
}
.cc-resident-chip .cc-age { color: #94a3b8; font-weight: 500; margin-left: 4px; }

.cc-section-tile {
    display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 10px;
    padding: 6px 0; font-size: 12px; align-items: center;
    border-bottom: 1px solid #f8fafc;
}
.cc-section-tile .cc-sec-num { color: #94a3b8; font-weight: 700; min-width: 24px; }
.cc-section-tile .cc-sec-dir { font-weight: 700; color: #024550; min-width: 24px; }

.cc-log-card {
    background: #fff; border-radius: 14px; padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05); border: 1px solid #f1f5f9;
}
.cc-log-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cc-log-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.cc-log-count { font-size: 12px; color: #94a3b8; }

.cc-log { display: flex; flex-direction: column; gap: 2px; }
.cc-log-row {
    display: grid; grid-template-columns: 130px 28px 1fr auto;
    gap: 10px; padding: 10px 6px; align-items: start;
    border-bottom: 1px solid #f8fafc; font-size: 13px;
}
.cc-log-row:hover { background: #fafbfc; }
.cc-log-time { color: #64748b; font-size: 12px; font-weight: 600; }
.cc-log-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    font-size: 12px; font-weight: 700; color: #fff; background: #024550;
}
.cc-log-icon.ev-checkin { background: #10b981; }
.cc-log-icon.ev-calc_created, .cc-log-icon.ev-offer_created, .cc-log-icon.ev-offer_sent { background: #7c3aed; }
.cc-log-icon.ev-quote_status_changed { background: #dc2626; }
.cc-log-icon.ev-lead_status_changed, .cc-log-icon.ev-revisit_booked { background: #f97316; }
.cc-log-body { line-height: 1.4; }
.cc-log-title { font-weight: 700; color: #1a1a1a; }
.cc-log-title .cc-log-staff { font-weight: 500; color: #64748b; margin-left: 6px; }
.cc-log-meta { font-size: 11px; color: #64748b; margin-top: 2px; }
.cc-log-amount { font-weight: 700; color: #024550; font-size: 13px; white-space: nowrap; }
.cc-log-empty { color: #94a3b8; text-align: center; padding: 24px 0; font-style: italic; }