/* EPC KPI Employee/Manager Portal Styles */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
    --epc-navy:   #0a2342;
    --epc-gold:   #C9A84C;
    --epc-gold-l: #e8c96a;
    --epc-teal:   #0d6e72;
    --epc-teal-l: #e6f4f5;
    --epc-bg:     #f4f6f9;
    --epc-card:   #ffffff;
    --epc-border: #e2e8f0;
    --epc-text:   #1e293b;
    --epc-muted:  #64748b;
    --s-exceptional: #15803d;
    --s-exceeds:     #65a30d;
    --s-meets:       #b45309;
    --s-improve:     #c2410c;
    --s-unsat:       #b91c1c;
}

.epc-portal * { box-sizing:border-box; font-family:'DM Sans', system-ui, sans-serif; }
.epc-portal { background:var(--epc-bg); padding:24px; border-radius:12px; min-height:400px; }

/* Header */
.epc-portal-header { display:flex; align-items:center; gap:16px; background:var(--epc-navy); border-radius:10px; padding:24px 28px; margin-bottom:24px; }
.epc-portal-avatar { width:52px; height:52px; border-radius:50%; background:var(--epc-gold); color:var(--epc-navy); font-size:22px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.epc-portal-info h2 { margin:0; color:#fff; font-size:20px; font-weight:700; }
.epc-job-title { margin:4px 0 0; color:rgba(255,255,255,.65); font-size:14px; }

/* Tabs */
.epc-period-tabs { display:flex; gap:4px; margin-bottom:20px; background:#fff; border-radius:8px; padding:4px; border:1px solid var(--epc-border); width:fit-content; }
.epc-tab { background:transparent; border:none; padding:8px 20px; border-radius:6px; cursor:pointer; font-size:14px; font-weight:500; color:var(--epc-muted); transition:.2s; }
.epc-tab.active { background:var(--epc-navy); color:#fff; }
.epc-tab-content { display:block; }

/* Review cards */
.epc-reviews-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:16px; }
.epc-review-card { background:var(--epc-card); border-radius:10px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.07); border:1px solid var(--epc-border); }
.epc-review-card-header { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; color:#fff; }
.epc-review-card-header.exceptional { background:var(--s-exceptional); }
.epc-review-card-header.exceeds     { background:var(--s-exceeds); }
.epc-review-card-header.meets       { background:var(--s-meets); }
.epc-review-card-header.improve     { background:var(--s-improve); }
.epc-review-card-header.unsat       { background:var(--s-unsat); }
.epc-review-period { font-weight:600; font-size:15px; }
.epc-review-score { font-size:22px; font-weight:700; font-family:'DM Mono', monospace; }
.epc-review-card-body { padding:16px 18px; }
.epc-band-label { font-weight:600; color:var(--epc-navy); font-size:15px; margin-bottom:6px; }
.epc-raise-rec { font-size:13px; color:var(--epc-teal); margin-bottom:10px; }
.epc-ai-summary-toggle { font-size:13px; color:var(--epc-teal); cursor:pointer; padding:6px 0; border-top:1px solid var(--epc-border); margin-top:8px; user-select:none; }
.epc-ai-summary-toggle:hover { color:var(--epc-navy); }
.epc-ai-summary { font-size:13px; color:var(--epc-text); line-height:1.7; padding-top:10px; }
.epc-ai-summary h4 { margin:12px 0 4px; color:var(--epc-navy); font-size:13px; }
.epc-ai-summary ul { margin:4px 0 8px 16px; padding:0; }
.epc-ai-summary li { margin-bottom:2px; }

/* Scoring portal */
.epc-portal-title { color:var(--epc-navy); font-size:22px; font-weight:700; margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid var(--epc-gold); display:inline-block; }
.epc-scoring-controls { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; background:#fff; padding:20px; border-radius:10px; margin-bottom:20px; border:1px solid var(--epc-border); }
.epc-control-group { display:flex; flex-direction:column; gap:6px; }
.epc-control-group label { font-size:12px; font-weight:600; color:var(--epc-muted); text-transform:uppercase; letter-spacing:.04em; }
.epc-control-group select, .epc-control-group input { padding:9px 12px; border:1.5px solid var(--epc-border); border-radius:7px; font-size:14px; font-family:inherit; background:#fff; color:var(--epc-text); }
.epc-control-group select:focus { outline:none; border-color:var(--epc-teal); box-shadow:0 0 0 3px rgba(13,110,114,.1); }
.epc-control-action { justify-content:flex-end; }

/* Form header */
.epc-form-header { display:flex; justify-content:space-between; align-items:center; background:var(--epc-navy); border-radius:10px; padding:20px 24px; margin-bottom:20px; }
.epc-form-header h3 { margin:0; color:#fff; font-size:18px; }
.epc-form-header p { margin:4px 0 0; color:rgba(255,255,255,.6); font-size:13px; }
.epc-live-score-wrap { text-align:right; }
.epc-live-score-label { font-size:11px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.06em; }
.epc-live-score { font-size:36px; font-weight:700; font-family:'DM Mono', monospace; color:#fff; line-height:1; }
.epc-live-band { font-size:13px; color:var(--epc-gold); margin-top:2px; }

/* Categories */
.epc-category-block { background:#fff; border-radius:10px; margin-bottom:16px; border:1px solid var(--epc-border); overflow:hidden; }
.epc-category-header { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:linear-gradient(135deg, var(--epc-navy) 0%, #1a3a5c 100%); }
.epc-category-name { color:#fff; font-weight:600; font-size:15px; }
.epc-category-weight { background:var(--epc-gold); color:var(--epc-navy); font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; }
.epc-kpi-list { padding:8px 0; }
.epc-kpi-row { padding:12px 20px; border-bottom:1px solid var(--epc-border); }
.epc-kpi-row:last-child { border-bottom:none; }
.epc-kpi-label { font-size:14px; color:var(--epc-text); font-weight:500; margin-bottom:10px; }
.epc-kpi-score-wrap { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.epc-score-btn { display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.epc-score-btn input[type=radio] { display:none; }
.epc-score-btn span { display:block; width:42px; height:42px; border:2px solid var(--epc-border); border-radius:8px; text-align:center; line-height:38px; font-size:15px; font-weight:700; color:var(--epc-muted); transition:.15s; background:#fff; }
.epc-score-btn:hover span { border-color:var(--epc-teal); color:var(--epc-teal); background:var(--epc-teal-l); }
.epc-score-btn.selected span { background:var(--epc-teal); border-color:var(--epc-teal); color:#fff; }
.epc-kpi-notes { width:100%; padding:7px 10px; border:1.5px solid var(--epc-border); border-radius:6px; font-size:12px; color:var(--epc-muted); font-family:inherit; }
.epc-kpi-notes:focus { outline:none; border-color:var(--epc-teal); }

/* Footer */
.epc-form-footer { display:flex; justify-content:space-between; align-items:center; background:#fff; border-radius:10px; padding:20px 24px; margin-top:8px; border:1px solid var(--epc-border); flex-wrap:wrap; gap:16px; }
.epc-overall-label { font-size:12px; color:var(--epc-muted); text-transform:uppercase; letter-spacing:.05em; }
.epc-overall-value { font-size:32px; font-weight:700; color:var(--epc-navy); font-family:'DM Mono', monospace; }
.epc-overall-band { font-weight:600; color:var(--epc-teal); }
.epc-overall-raise { font-size:13px; color:var(--epc-muted); margin-top:2px; }
.epc-form-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Buttons */
.epc-btn { padding:10px 22px; border-radius:8px; border:none; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; transition:.2s; }
.epc-btn-primary { background:var(--epc-teal); color:#fff; }
.epc-btn-primary:hover { background:#0a5558; }
.epc-btn-secondary { background:#fff; color:var(--epc-navy); border:1.5px solid var(--epc-border); }
.epc-btn-secondary:hover { border-color:var(--epc-navy); }
.epc-btn-ai { background:linear-gradient(135deg, #7c3aed, #4f46e5); color:#fff; }
.epc-btn-ai:hover { background:linear-gradient(135deg, #6d28d9, #4338ca); }
.epc-btn:disabled { opacity:.5; cursor:default; }

/* AI result */
.epc-ai-result { background:#fff; border-radius:10px; padding:24px; margin-top:16px; border:2px solid #7c3aed20; }
.epc-ai-result h4 { margin-top:0; color:#4f46e5; font-size:16px; }
.epc-ai-result h4 { color:#4f46e5; }
#epc-ai-result-content { font-size:14px; line-height:1.75; color:var(--epc-text); }
#epc-ai-result-content h4 { color:var(--epc-navy); margin:16px 0 6px; }
#epc-ai-result-content ul { margin:4px 0 12px 20px; }
.epc-raise-badge { display:inline-block; margin-top:16px; background:linear-gradient(135deg, var(--epc-gold), var(--epc-gold-l)); color:var(--epc-navy); padding:10px 20px; border-radius:8px; font-size:15px; }

/* Utils */
.epc-loading { color:var(--epc-muted); padding:40px; text-align:center; font-size:14px; }
.epc-empty { text-align:center; padding:48px 20px; color:var(--epc-muted); font-size:14px; }
.epc-notice { background:#fef3c7; border:1px solid #fcd34d; padding:12px 16px; border-radius:8px; font-size:14px; color:#92400e; }
.epc-muted { color:var(--epc-muted); font-size:13px; }
.epc-star { color:#d1d5db; font-size:18px; }
.epc-star.filled { color:var(--epc-gold); }

@media (max-width:640px) {
    .epc-scoring-controls { grid-template-columns:1fr; }
    .epc-form-header { flex-direction:column; align-items:flex-start; }
    .epc-form-footer { flex-direction:column; }
    .epc-reviews-grid { grid-template-columns:1fr; }
    .epc-score-btn span { width:36px; height:36px; line-height:32px; font-size:13px; }
}

/* Draft restore notice */
.epc-draft-notice {
    background: #fffbeb;
    border: 1.5px solid #fcd34d;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 14px;
}

/* Self-score reference panel (shown to manager) */
.epc-self-ref-panel { background:#fffbeb; border:1.5px solid #fcd34d; border-radius:10px; padding:16px 18px; margin-bottom:16px; }
.epc-self-ref-header { font-size:13px; font-weight:700; color:#92400e; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.epc-self-ref-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }
.epc-self-ref-cat { background:#fff; border-radius:7px; padding:10px 12px; border:1px solid #fcd34d; }
.epc-self-ref-cat strong { display:block; font-size:12px; color:#78350f; margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em; }
.epc-self-ref-kpi { display:flex; justify-content:space-between; align-items:center; padding:3px 0; border-bottom:1px solid #fef3c7; font-size:12px; }
.epc-self-ref-kpi:last-child { border-bottom:none; }
.epc-self-ref-name { color:#374151; flex:1; }
.epc-self-ref-score { font-weight:600; font-size:11px; white-space:nowrap; margin-left:8px; }
.epc-self-ref-score.s5 { color:#15803d; } .epc-self-ref-score.s4 { color:#65a30d; }
.epc-self-ref-score.s3 { color:#ca8a04; } .epc-self-ref-score.s2 { color:#ea580c; } .epc-self-ref-score.s1 { color:#dc2626; }
.epc-self-ref-pip { margin-top:10px; padding-top:10px; border-top:1px solid #fcd34d; font-size:12px; color:#92400e; }
.epc-self-ref-pip strong { display:block; margin-bottom:4px; }
.epc-self-ref-pip p { margin:0; color:#78350f; line-height:1.5; }