/* ============================================================
   SPC HOD Evaluation — Frontend Styles
   Mirrors SPC Peer Evaluation design exactly.
   Extra: HOD header theme, verify grid, count chip, spinner.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Reuse all peer-eval base variables & classes ─────────── */
.spc-pe-wrap *,
.spc-pe-wrap *::before,
.spc-pe-wrap *::after { box-sizing:border-box; margin:0; padding:0; }

.spc-pe-wrap {
	--pe-primary:    #BA1E27;
	--pe-secondary:  #CF333D;
	--pe-accent:     #E44952;
	--pe-dark:       #1a1a2e;
	--pe-navy:       #2d2d4e;
	--pe-surface:    #ffffff;
	--pe-bg:         #f4f6f9;
	--pe-border:     #e2e8f0;
	--pe-text:       #1e293b;
	--pe-muted:      #64748b;
	--pe-success:    #0f6f4d;
	--pe-success-bg: #ecfdf5;
	--pe-error-bg:   #fef2f2;
	--pe-shadow-sm:  0 1px 3px rgba(0,0,0,.08);
	--pe-shadow-md:  0 4px 16px rgba(0,0,0,.08);
	--pe-shadow-lg:  0 10px 40px rgba(0,0,0,.12);
	--pe-radius:     12px;
	--pe-radius-sm:  8px;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	color: var(--pe-text);
	background: var(--pe-bg);
	padding: 24px 0;
	width: 100%;
}

/* ── Header — dark navy theme for HOD ────────────────────── */
.spc-pe-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: var(--pe-radius);
	padding: 28px 36px;
	margin-bottom: 28px;
	box-shadow: var(--pe-shadow-lg);
	position: relative;
	overflow: hidden;
}

.spc-hod-header-theme {
	background: linear-gradient(135deg, var(--pe-dark) 0%, var(--pe-navy) 60%, #3a1a2e 100%);
	color: #fff;
}

.spc-hod-header-theme::before {
	content: '';
	position: absolute;
	top: -40px; right: -40px;
	width: 200px; height: 200px;
	border-radius: 50%;
	background: rgba(186,30,39,.18);
}

.spc-hod-header-theme::after {
	content: '';
	position: absolute;
	bottom: -60px; left: 30%;
	width: 260px; height: 260px;
	border-radius: 50%;
	background: rgba(186,30,39,.1);
}

.spc-pe-header__logo { display:flex; align-items:center; gap:18px; position:relative; }

.spc-pe-header__emblem {
	width:56px; height:56px;
	background: var(--pe-primary);
	border: 2px solid rgba(255,255,255,.3);
	border-radius: 14px;
	display:flex; align-items:center; justify-content:center;
	font-size:16px; font-weight:800; letter-spacing:1px;
	color: #fff;
}

.spc-pe-header__title  { font-size:22px; font-weight:700; color:#fff; line-height:1.2; }
.spc-pe-header__subtitle { font-size:13px; font-weight:400; color:rgba(255,255,255,.72); margin-top:3px; }

.spc-pe-header__badge { display:flex; gap:8px; flex-wrap:wrap; position:relative; }

.spc-pe-badge {
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.3);
	color: #fff;
	font-size:11px; font-weight:600;
	text-transform:uppercase; letter-spacing:1.5px;
	padding:5px 14px; border-radius:999px;
}

.spc-hod-badge-dept {
	background: rgba(186,30,39,.35);
	border: 1px solid rgba(186,30,39,.6);
}

/* ── Notices ──────────────────────────────────────────────── */
.spc-pe-notice {
	border-radius: var(--pe-radius-sm);
	padding: 16px 20px;
	margin-bottom: 20px;
	font-size:14px; line-height:1.6;
	display:flex; align-items:flex-start; gap:12px;
	animation: speSlideIn .3s ease;
}

.spc-pe-notice--success { background:var(--pe-success-bg); border-left:4px solid var(--pe-success); color:#064e35; }
.spc-pe-notice--error   { background:var(--pe-error-bg);   border-left:4px solid var(--pe-primary); color:#7f1d1d; }

/* ── Cards ────────────────────────────────────────────────── */
.spc-pe-card {
	background: var(--pe-surface);
	border-radius: var(--pe-radius);
	box-shadow: var(--pe-shadow-md);
	border: 1px solid var(--pe-border);
	margin-bottom: 24px;
	overflow: hidden;
}

.spc-pe-card--step { display:flex; }

.spc-pe-card__step-num {
	width:70px;
	background: linear-gradient(180deg, var(--pe-dark), var(--pe-primary));
	color: rgba(255,255,255,.9);
	font-size:24px; font-weight:800;
	writing-mode:vertical-rl; text-orientation:mixed;
	display:flex; align-items:center; justify-content:center;
	letter-spacing:4px; flex-shrink:0;
}

.spc-pe-card--grid .spc-pe-card__step-num {
	background: linear-gradient(180deg, var(--pe-primary), var(--pe-accent));
}

.spc-pe-card__body { padding:32px 36px; flex:1; min-width:0; }

.spc-pe-card__title { font-size:20px; font-weight:700; color:var(--pe-dark); margin-bottom:6px; }
.spc-pe-card__desc  { font-size:14px; color:var(--pe-muted); margin-bottom:24px; line-height:1.6; }

/* ── Verify grid ──────────────────────────────────────────── */
.spc-hod-verify-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.spc-hod-field-full { grid-column: 1 / -1; }

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

/* ── Field / Label ────────────────────────────────────────── */
.spc-pe-field { margin-bottom: 0; }

.spc-pe-label {
	display:block;
	font-size:12px; font-weight:600;
	color:var(--pe-dark);
	text-transform:uppercase; letter-spacing:.5px;
	margin-bottom:8px;
}

.spc-pe-required { color:var(--pe-primary); }

/* ── Select ───────────────────────────────────────────────── */
.spc-pe-select-wrap { position:relative; }

.spc-pe-select-wrap::after {
	content:'';
	position:absolute; right:13px; top:50%;
	transform:translateY(-50%);
	border:5px solid transparent;
	border-top:6px solid var(--pe-muted);
	pointer-events:none;
}

.spc-pe-select {
	width:100%;
	padding:12px 40px 12px 16px;
	font-family:inherit; font-size:14px; font-weight:500;
	color:var(--pe-text);
	background:#fff;
	border:2px solid var(--pe-border);
	border-radius:var(--pe-radius-sm);
	appearance:none; -webkit-appearance:none;
	cursor:pointer; outline:none;
	transition:border-color .2s, box-shadow .2s;
}

.spc-pe-select:focus {
	border-color:var(--pe-primary);
	box-shadow:0 0 0 3px rgba(186,30,39,.12);
}

/* ── Text input ───────────────────────────────────────────── */
.spc-pe-input-wrap { position:relative; }

.spc-pe-input {
	width:100%;
	padding:12px 40px 12px 16px;
	font-family:inherit; font-size:14px; font-weight:500;
	color:var(--pe-text);
	background:#fff;
	border:2px solid var(--pe-border);
	border-radius:var(--pe-radius-sm);
	outline:none;
	transition:border-color .2s, box-shadow .2s;
	letter-spacing:.4px;
}

.spc-pe-input:focus {
	border-color:var(--pe-primary);
	box-shadow:0 0 0 3px rgba(186,30,39,.12);
}

.spc-pe-input-icon {
	position:absolute; right:13px; top:50%;
	transform:translateY(-50%);
	color:var(--pe-muted);
	pointer-events:none;
	display:flex; align-items:center;
}

.spc-pe-input-icon svg { width:16px; height:16px; }

/* ── Security note ────────────────────────────────────────── */
.spc-pe-security-note {
	display:flex; align-items:flex-start; gap:10px;
	background:#fff8f1;
	border:1px solid #fed7aa;
	border-radius:var(--pe-radius-sm);
	padding:12px 16px;
	font-size:12.5px; color:#92400e; line-height:1.55;
	margin-bottom:22px;
}

.spc-pe-security-note svg { width:16px; height:16px; flex-shrink:0; margin-top:1px; stroke:#d97706; }

/* ── Buttons ──────────────────────────────────────────────── */
.spc-pe-btn {
	display:inline-flex; align-items:center; gap:8px;
	padding:12px 28px;
	font-family:inherit; font-size:14px; font-weight:600;
	border:none; border-radius:var(--pe-radius-sm);
	cursor:pointer; outline:none; transition:all .2s;
}

.spc-pe-btn svg { width:17px; height:17px; }

.spc-pe-btn--primary {
	background:var(--pe-dark); color:#fff;
	box-shadow:0 4px 14px rgba(26,26,46,.3);
}

.spc-pe-btn--primary:hover:not(:disabled) {
	background:var(--pe-navy);
	transform:translateY(-1px);
	box-shadow:0 6px 20px rgba(26,26,46,.4);
}

.spc-pe-btn--primary:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }

.spc-pe-btn--submit {
	background:linear-gradient(135deg, var(--pe-primary), var(--pe-accent));
	color:#fff; font-size:15px; padding:14px 40px;
	box-shadow:0 6px 20px rgba(186,30,39,.35);
}

.spc-pe-btn--submit:hover:not(:disabled) {
	transform:translateY(-2px);
	box-shadow:0 10px 28px rgba(186,30,39,.45);
}

.spc-pe-btn--submit:disabled { opacity:.5; cursor:not-allowed; }

.spc-pe-btn--loading { position:relative; color:transparent !important; }
.spc-pe-btn--loading::after {
	content:'';
	position:absolute; width:18px; height:18px;
	border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
	border-radius:50%;
	animation:speSpinHOD .7s linear infinite;
}

/* ── Verified banner ──────────────────────────────────────── */
.spc-pe-card--verified {
	background:#f0fdf4;
	border:1.5px solid #86efac;
	border-radius:var(--pe-radius-sm);
	margin-bottom:20px;
}

.spc-pe-verified-inner { display:flex; align-items:center; gap:14px; padding:14px 20px; }

.spc-pe-verified-icon {
	width:36px; height:36px;
	background:#16a34a; border-radius:50%;
	display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.spc-pe-verified-icon svg { width:18px; height:18px; stroke:#fff; }

.spc-pe-verified-inner > div:nth-child(2) { flex:1; font-size:14px; color:#14532d; }
.spc-pe-verified-inner strong { font-weight:700; margin-right:5px; }
.spc-pe-verified-badge { background:#16a34a; color:#fff; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 12px; border-radius:999px; }

/* ── Evaluator chip ───────────────────────────────────────── */
.spc-pe-evaluator-chip {
	display:inline-flex; align-items:center; gap:8px;
	background:#f0f4ff;
	border:1px solid #c7d2fe;
	border-radius:999px;
	padding:6px 16px;
	font-size:13px; color:#3730a3;
	margin-bottom:16px;
}

/* ── Count chip ───────────────────────────────────────────── */
.spc-hod-count-chip {
	display:inline-flex; align-items:center; gap:8px;
	background:#eff6ff; border:1px solid #bfdbfe;
	color:#1e40af; font-size:13px; font-weight:600;
	padding:6px 14px; border-radius:999px;
	margin-bottom:20px;
}

.spc-hod-count-chip svg { width:15px; height:15px; stroke:#2563eb; }

/* ── Loading ──────────────────────────────────────────────── */
.spc-hod-loading {
	display:flex; align-items:center; justify-content:center;
	gap:12px; padding:40px;
	color:var(--pe-muted); font-size:14px;
}

.spc-hod-spinner {
	width:24px; height:24px;
	border:3px solid var(--pe-border); border-top-color:var(--pe-primary);
	border-radius:50%;
	animation:speSpinHOD .7s linear infinite; flex-shrink:0;
}

/* ── Progress ─────────────────────────────────────────────── */
.spc-pe-progress-wrap { margin-bottom:24px; }

.spc-pe-progress-label {
	display:flex; justify-content:space-between;
	font-size:12px; font-weight:600; color:var(--pe-muted);
	margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px;
}

.spc-pe-progress-bar { height:6px; background:var(--pe-border); border-radius:999px; overflow:hidden; }

.spc-pe-progress-fill {
	height:100%;
	background:linear-gradient(90deg, var(--pe-primary), var(--pe-accent));
	border-radius:999px; transition:width .4s ease;
}

/* ── Table ────────────────────────────────────────────────── */
.spc-pe-table-outer {
	overflow-x:auto;
	border-radius:var(--pe-radius-sm);
	border:1px solid var(--pe-border);
	margin-bottom:28px;
	-webkit-overflow-scrolling:touch;
}

.spc-pe-table {
	width:100%; border-collapse:separate; border-spacing:0;
	min-width:1300px; font-size:13px;
}

.spc-pe-table thead tr {
	background:linear-gradient(135deg, var(--pe-primary) 0%, var(--pe-secondary) 100%);
}

.spc-pe-table thead th {
	color:#fff; font-weight:600; padding:13px 9px;
	text-align:center; white-space:nowrap;
}

.spc-pe-table__col-name { text-align:left !important; min-width:220px; padding-left:18px !important; }

.spc-pe-criteria-label {
	font-size:10.5px; font-weight:600;
	text-transform:uppercase; letter-spacing:.4px;
	max-width:88px; white-space:normal; line-height:1.3;
}

.spc-pe-table__th-remarks { min-width:170px; }

/* Sticky column */
.spc-pe-table__sticky { position:sticky; left:0; z-index:2; background:#fff; }
thead .spc-pe-table__sticky { background:var(--pe-primary) !important; z-index:3; }

.spc-pe-table tbody tr:hover:not(.spc-pe-row--hidden) { background:#fff8f8; }
.spc-pe-table tbody tr:nth-child(even) .spc-pe-table__sticky { background:#fafafa; }
.spc-pe-table tbody tr:hover .spc-pe-table__sticky { background:#fff8f8; }

.spc-pe-table tbody td { padding:9px 7px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }

/* Faculty cell */
.spc-pe-table__cell-name { padding-left:14px !important; }

.spc-pe-faculty-info { display:flex; align-items:center; gap:10px; }

.spc-pe-avatar {
	width:33px; height:33px;
	background:linear-gradient(135deg, var(--pe-primary), var(--pe-accent));
	color:#fff; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	font-size:11px; font-weight:700; flex-shrink:0;
}

.spc-pe-faculty-name { font-weight:600; font-size:13px; color:var(--pe-dark); }

/* Score selects */
.spc-pe-table__cell-score { text-align:center; }

.spc-pe-score-select {
	width:60px; padding:6px 3px;
	font-family:inherit; font-size:13px; font-weight:600;
	text-align:center; color:var(--pe-text);
	border:1.5px solid var(--pe-border); border-radius:6px;
	background:#fff; appearance:none; -webkit-appearance:none;
	cursor:pointer; outline:none; transition:border-color .15s, background .15s;
}

.spc-pe-score-select:focus { border-color:var(--pe-primary); box-shadow:0 0 0 2px rgba(186,30,39,.1); }
.spc-pe-score-select--filled { background:#fff5f5; border-color:var(--pe-accent); color:var(--pe-primary); }
.spc-pe-score-select--error  { border-color:var(--pe-primary); background:#fef2f2; animation:speShakeHOD .3s ease; }

/* Hidden self-row */
.spc-pe-row--hidden { display:none !important; }

/* Feedback textarea */
.spc-pe-remarks-input {
	width:100%; min-width:150px;
	padding:6px 9px; font-family:inherit; font-size:12px;
	color:var(--pe-text);
	border:1.5px solid var(--pe-border); border-radius:6px;
	background:#fff; resize:vertical; outline:none;
	transition:border-color .15s;
}

.spc-pe-remarks-input:focus { border-color:var(--pe-primary); box-shadow:0 0 0 2px rgba(186,30,39,.1); }

/* ── Submit row ───────────────────────────────────────────── */
.spc-pe-submit-row {
	display:flex; align-items:center; justify-content:space-between;
	flex-wrap:wrap; gap:16px;
}

.spc-pe-legend__scale { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--pe-muted); font-weight:500; }
.spc-pe-legend__bar { width:120px; height:6px; background:linear-gradient(90deg,#fee2e2,var(--pe-primary)); border-radius:999px; }

/* ── Success screen ───────────────────────────────────────── */
.spc-pe-success-screen { text-align:center; padding:56px 40px; }

.spc-pe-success-icon {
	width:80px; height:80px; background:var(--pe-success-bg);
	border-radius:50%; display:flex; align-items:center; justify-content:center;
	margin:0 auto 24px;
}

.spc-pe-success-icon svg { width:40px; height:40px; stroke:var(--pe-success); }
.spc-pe-success-title { font-size:24px; font-weight:700; color:var(--pe-dark); margin-bottom:12px; }
.spc-pe-success-msg { font-size:15px; color:var(--pe-muted); line-height:1.7; max-width:520px; margin:0 auto; }

/* ── Animations ───────────────────────────────────────────── */
@keyframes speSpinHOD  { to { transform:rotate(360deg); } }
@keyframes speSlideIn  { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes speShakeHOD { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:768px) {
	.spc-pe-header { flex-direction:column; align-items:flex-start; gap:16px; padding:22px 20px; }
	.spc-pe-card--step { flex-direction:column; }
	.spc-pe-card__step-num { width:100%; height:50px; writing-mode:horizontal-tb; font-size:14px; }
	.spc-pe-card__body { padding:24px 18px; }
	.spc-pe-submit-row { flex-direction:column; align-items:stretch; }
	.spc-pe-btn--submit { width:100%; justify-content:center; }
}

/* ── Loading spinner (grid fetch) ─────────────────────────── */
.spc-hod-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 40px 20px;
	color: var(--pe-muted);
	font-size: 14px;
}

.spc-hod-spinner {
	width: 24px;
	height: 24px;
	border: 3px solid var(--pe-border);
	border-top-color: var(--pe-primary);
	border-radius: 50%;
	flex-shrink: 0;
	animation: speSpinHOD .7s linear infinite;
}