/* =====================================================
   Vital Guidance Life Assessment – Stylesheet
   ===================================================== */

:root {
    --vga-rel:      #e63946;
    --vga-health:   #0077b6;
    --vga-finance:  #2d6a4f;
    --vga-giving:   #e76f51;
    --vga-dark:     #1a1a2e;
    --vga-light-bg: #f4f6f9;
    --vga-white:    #ffffff;
    --vga-radius:   10px;
    --vga-shadow:   0 4px 20px rgba(0,0,0,0.08);
    --vga-border:   #e2e8f0;
}

/* ── Wrapper ── */
.vga-wrapper {
    max-width: 900px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #333;
}

/* ── Header ── */
.vga-header {
    background: #051D43;
    color: var(--vga-white);
    padding: 40px 36px;
    border-radius: var(--vga-radius) var(--vga-radius) 0 0;
    text-align: center;
}
.vga-header h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 10px;
    color: var(--vga-white) !important;
    line-height: 1.2;
}
.vga-header p {
    font-size: 14px;
    opacity: 0.85;
    margin: 0 0 18px;
    color: var(--vga-white) !important;
}
.vga-score-legend {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.legend-item {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.legend-item.critical  { background: #c1121f; }
.legend-item.weak      { background: #e07a5f; }
.legend-item.stable    { background: #f4a261; }
.legend-item.strong    { background: #2a9d8f; }
.legend-item.thriving  { background: #264653; }

/* ── Personal Info ── */
.vga-personal-info {
    background: var(--vga-white);
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    border-bottom: 1px solid var(--vga-border);
}
.vga-personal-info .vga-field:last-child {
    grid-column: 1 / -1;
    max-width: 340px;
}

/* ── Pillar Block ── */
.vga-pillar {
    background: var(--vga-white);
    border-top: 1px solid var(--vga-border);
    overflow: hidden;
}

.vga-pillar-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 32px;
    border-left: 6px solid;
}
.pillar-relationships .vga-pillar-header { border-left-color: var(--vga-rel);     background: #fff5f6; }
.pillar-health        .vga-pillar-header { border-left-color: var(--vga-health);  background: #f0f8ff; }
.pillar-finance       .vga-pillar-header { border-left-color: var(--vga-finance); background: #f0faf4; }
.pillar-giving        .vga-pillar-header { border-left-color: var(--vga-giving);  background: #fff8f0; }

.pillar-icon {
    font-size: 30px;
    line-height: 1;
}
.pillar-title-wrap { flex: 1; }
.pillar-title-wrap h2 {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 3px;
    color: var(--vga-dark) !important;
    letter-spacing: 0.5px;
}
.pillar-relationships .pillar-title-wrap h2 { color: var(--vga-rel) !important; }
.pillar-health        .pillar-title-wrap h2 { color: var(--vga-health) !important; }
.pillar-finance       .pillar-title-wrap h2 { color: var(--vga-finance) !important; }
.pillar-giving        .pillar-title-wrap h2 { color: var(--vga-giving) !important; }
.pillar-title-wrap p {
    font-size: 12px;
    margin: 0;
    color: #666 !important;
}
.pillar-score-badge {
    text-align: center;
    min-width: 60px;
}
.pillar-score-num {
    font-size: 32px;
    font-weight: 900;
    display: block;
    line-height: 1;
    color: var(--vga-dark);
    transition: all 0.3s;
}
.pillar-score-total {
    font-size: 12px;
    color: #999;
}

/* ── Fields Grid ── */
.vga-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px 32px 24px;
}

/* ── Field ── */
.vga-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vga-field label {
    font-size: 13px;
    font-weight: 600;
    color: #444 !important;
    line-height: 1.4;
}
.vga-required { color: #e63946; }

.vga-field input[type="text"],
.vga-field input[type="email"],
.vga-field input[type="date"],
.vga-field select,
.vga-field textarea {
    padding: 10px 14px;
    border: 1.5px solid var(--vga-border);
    border-radius: 7px;
    font-size: 14px;
    color: #333;
    background: #fafafa;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.vga-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}
.vga-field input:focus,
.vga-field select:focus,
.vga-field textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.12);
    background: var(--vga-white);
}
.vga-field select.score-1 { border-color: #c1121f; background-color: #fff5f5; }
.vga-field select.score-2 { border-color: #e07a5f; background-color: #fff8f6; }
.vga-field select.score-3 { border-color: #f4a261; background-color: #fffaf5; }
.vga-field select.score-4 { border-color: #2a9d8f; background-color: #f5fffd; }
.vga-field select.score-5 { border-color: #264653; background-color: #f2f9f8; }
.vga-field select.field-error { border-color: #e63946 !important; background-color: #fff5f5 !important; }

/* ── Notes ── */
.vga-notes-section {
    background: var(--vga-white);
    border-top: 1px solid var(--vga-border);
    padding: 24px 32px;
}
.vga-notes-section textarea {
    resize: vertical;
    min-height: 100px;
}

/* ── Score Summary ── */
.vga-score-summary {
    background: var(--vga-white);
    border-top: 2px solid var(--vga-border);
    padding: 28px 32px;
}
.vga-score-summary h3 {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 20px;
    color: var(--vga-dark) !important;
}
.score-table { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.score-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.score-label {
    font-size: 13px;
    font-weight: 700;
    width: 160px;
    flex-shrink: 0;
}
.rel-color    { color: var(--vga-rel); }
.health-color { color: var(--vga-health); }
.finance-color{ color: var(--vga-finance); }
.giving-color { color: var(--vga-giving); }

.score-bar-wrap {
    flex: 1;
    background: #f0f0f0;
    border-radius: 20px;
    height: 14px;
    overflow: hidden;
}
.score-bar {
    height: 100%;
    border-radius: 20px;
    transition: width 0.5s ease;
    width: 0%;
}
.rel-bar     { background: linear-gradient(90deg, #ffc9cc, var(--vga-rel)); }
.health-bar  { background: linear-gradient(90deg, #b8dff7, var(--vga-health)); }
.finance-bar { background: linear-gradient(90deg, #a8d5bc, var(--vga-finance)); }
.giving-bar  { background: linear-gradient(90deg, #fdd5c5, var(--vga-giving)); }

.score-value {
    font-size: 14px;
    font-weight: 700;
    width: 55px;
    text-align: right;
    color: var(--vga-dark);
    flex-shrink: 0;
}

/* Total score */
.total-score-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--vga-light-bg);
    border-radius: var(--vga-radius);
    padding: 20px 24px;
    border: 2px solid var(--vga-border);
    transition: border-color 0.5s;
}
.total-score-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--vga-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.5s;
}
.total-num {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}
.total-denom { font-size: 12px; color: rgba(255,255,255,0.7); }
.total-score-label strong {
    font-size: 16px;
    color: var(--vga-dark);
    display: block;
    margin-bottom: 4px;
}
.total-score-label p {
    font-size: 13px;
    color: #666 !important;
    margin: 0;
}

/* Score colour states */
.total-score-wrap.score-thriving  { border-color: var(--vga-finance); }
.total-score-wrap.score-strong    { border-color: var(--vga-health); }
.total-score-wrap.score-focus     { border-color: var(--vga-giving); }
.total-score-wrap.score-critical  { border-color: var(--vga-rel); }
.total-score-circle.score-thriving  { background: var(--vga-finance); }
.total-score-circle.score-strong    { background: var(--vga-health); }
.total-score-circle.score-focus     { background: var(--vga-giving); }
.total-score-circle.score-critical  { background: var(--vga-rel); }

/* ── Action Buttons ── */
.vga-action-buttons {
    background: var(--vga-white);
    border-top: 1px solid var(--vga-border);
    border-radius: 0 0 var(--vga-radius) var(--vga-radius);
    padding: 24px 32px 32px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.vga-message {
    width: 100%;
    padding: 12px 16px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}
.vga-message.success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.vga-message.error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

.vga-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-decoration: none;
}
.vga-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
.vga-btn:active { transform: translateY(0); }

.vga-btn-pdf {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    flex: 1;
    justify-content: center;
    min-width: 200px;
}
.vga-btn-pdf:hover { background: linear-gradient(135deg, #b91c1c, #991b1b); }

.vga-btn-print {
    background: linear-gradient(135deg, #0369a1, #0284c7);
    color: #fff;
    flex: 1;
    justify-content: center;
    min-width: 140px;
}
.vga-btn-print:hover { background: linear-gradient(135deg, #0284c7, #0ea5e9); }

/* ── Print Styles – clean black & white ── */
@media print {
    /* Hide buttons and legend */
    .vga-action-buttons,
    .vga-score-legend { display: none !important; }

    /* Reset wrapper */
    .vga-wrapper {
        max-width: 100%;
        box-shadow: none;
        font-size: 11pt;
        color: #000 !important;
    }

    /* Header: white bg, black text, simple border */
    .vga-header {
        background: #fff !important;
        color: #000 !important;
        border-bottom: 3px solid #000;
        padding: 16px 20px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .vga-header h1 {
        color: #000 !important;
        font-size: 18pt;
        margin-bottom: 4px;
    }
    .vga-header p { color: #333 !important; font-size: 10pt; }

    /* Personal info */
    .vga-personal-info {
        border: 1px solid #ccc;
        padding: 12px 16px;
        background: #fff !important;
    }

    /* Pillar headers: black bg white text */
    .vga-pillar { border-top: 1px solid #ccc; break-inside: avoid; }
    .vga-pillar-header {
        background: #000 !important;
        border-left: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        padding: 10px 16px;
    }
    .pillar-title-wrap h2 { color: #fff !important; font-size: 13pt; }
    .pillar-title-wrap p  { color: #ddd !important; font-size: 9pt; }
    .pillar-icon { display: none; }
    .pillar-score-num { color: #fff !important; font-size: 20pt; }
    .pillar-score-total { color: #ccc !important; }

    /* Fields */
    .vga-fields-grid {
        grid-template-columns: 1fr 1fr;
        padding: 10px 16px 14px;
        gap: 10px;
    }
    .vga-field label { color: #000 !important; font-size: 9pt; }
    .vga-field select {
        border: 1px solid #999 !important;
        background: #fff !important;
        color: #000 !important;
        font-size: 9pt;
        padding: 5px 8px;
    }

    /* Notes */
    .vga-notes-section { border-top: 1px solid #ccc; padding: 12px 16px; }
    .vga-notes-section textarea {
        border: 1px solid #999 !important;
        background: #fff !important;
        color: #000 !important;
    }

    /* Score summary */
    .vga-score-summary {
        border-top: 2px solid #000;
        padding: 14px 16px;
        break-inside: avoid;
    }
    .vga-score-summary h3 { color: #000 !important; font-size: 13pt; }
    .score-label { color: #000 !important; }

    /* Score bars: replace with simple border box */
    .score-bar-wrap {
        background: #eee !important;
        border: 1px solid #ccc;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .score-bar {
        background: #333 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Total score circle */
    .total-score-wrap {
        background: #f5f5f5 !important;
        border: 2px solid #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .total-score-circle {
        background: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .total-num { color: #fff !important; }
    .total-denom { color: #ccc !important; }
    .total-score-label strong { color: #000 !important; }
    .total-score-label p { color: #444 !important; }
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .vga-personal-info { grid-template-columns: 1fr; }
    .vga-personal-info .vga-field:last-child { max-width: 100%; }
    .vga-fields-grid { grid-template-columns: 1fr; }
    .vga-pillar-header { padding: 16px 18px; }
    .vga-fields-grid { padding: 16px 18px; }
    .vga-personal-info { padding: 20px 18px; }
    .vga-notes-section { padding: 18px; }
    .vga-score-summary { padding: 20px 18px; }
    .vga-action-buttons { padding: 18px; flex-direction: column; }
    .vga-btn { width: 100%; justify-content: center; flex: none; }
    .score-label { width: 120px; font-size: 12px; }
    .total-score-wrap { flex-direction: column; text-align: center; }
}