/* ============================================================
   Brandlevate RCP — Staff Portal Stylesheet
   Scope: .brcp-sp-wrap and all children
   ============================================================ */

:root {
	--sp-color      : #003399;
	--sp-radius     : 10px;
	--sp-shadow     : 0 4px 24px rgba(0,0,0,.09);
	--sp-border     : #dde4f0;
	--sp-bg         : #f4f6fa;
	--sp-surface    : #ffffff;
	--sp-text       : #1a1d2e;
	--sp-muted      : #6b7280;
	--sp-success    : #059669;
	--sp-danger     : #dc2626;
	--sp-warning    : #d97706;
}

/* ── Base wrapper ──────────────────────────────────────────── */
.brcp-sp-wrap {
	font-family    : -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size      : 14px;
	color          : var(--sp-text);
	background     : var(--sp-bg);
	min-height     : 100vh;
	padding        : 0;
	box-sizing     : border-box;
}
.brcp-sp-wrap *, .brcp-sp-wrap *::before, .brcp-sp-wrap *::after {
	box-sizing: inherit;
}

/* ── LOGIN CARD ──────────────────────────────────────────────── */
.brcp-sp-login-card {
	max-width      : 420px;
	margin         : 48px auto;
	background     : var(--sp-surface);
	border-radius  : 16px;
	box-shadow     : var(--sp-shadow);
	overflow       : hidden;
}

.brcp-sp-login-header {
	background     : var(--sp-color);
	padding        : 32px 32px 24px;
	text-align     : center;
	color          : #fff;
}
.brcp-sp-school-logo {
	max-height     : 64px;
	max-width      : 160px;
	object-fit     : contain;
	margin-bottom  : 12px;
	display        : block;
	margin-left    : auto;
	margin-right   : auto;
}
.brcp-sp-school-name {
	font-size      : 18px;
	font-weight    : 700;
	margin         : 0 0 4px;
	letter-spacing : .3px;
}
.brcp-sp-portal-title {
	font-size      : 13px;
	font-weight    : 400;
	margin         : 0;
	opacity        : .82;
}

.brcp-sp-form {
	padding        : 28px 32px 24px;
}
.brcp-sp-field {
	margin-bottom  : 18px;
}
.brcp-sp-label {
	display        : block;
	font-size      : 12px;
	font-weight    : 600;
	text-transform : uppercase;
	letter-spacing : .5px;
	color          : var(--sp-muted);
	margin-bottom  : 6px;
}
.brcp-sp-hint {
	font-weight    : 400;
	text-transform : none;
	letter-spacing : 0;
	font-size      : 11px;
	color          : #9ca3af;
}
.brcp-sp-input {
	width          : 100%;
	padding        : 11px 14px;
	border         : 1.5px solid var(--sp-border);
	border-radius  : 8px;
	font-size      : 14px;
	color          : var(--sp-text);
	background     : #fafbff;
	transition     : border-color .15s, box-shadow .15s;
	outline        : none;
}
.brcp-sp-input:focus {
	border-color   : var(--sp-color);
	box-shadow     : 0 0 0 3px rgba(0,51,153,.1);
	background     : #fff;
}
.brcp-sp-input-wrap {
	position       : relative;
}
.brcp-sp-input-wrap .brcp-sp-input {
	padding-right  : 44px;
}
.brcp-sp-eye {
	position       : absolute;
	right          : 12px;
	top            : 50%;
	transform      : translateY(-50%);
	background     : none;
	border         : none;
	cursor         : pointer;
	color          : var(--sp-muted);
	padding        : 4px;
	line-height    : 1;
}
.brcp-sp-eye:hover { color: var(--sp-color); }

/* ── Buttons ───────────────────────────────────────────────── */
.brcp-sp-btn {
	display        : inline-flex;
	align-items    : center;
	gap            : 6px;
	padding        : 10px 20px;
	border-radius  : 8px;
	font-size      : 13px;
	font-weight    : 600;
	cursor         : pointer;
	border         : 1.5px solid transparent;
	transition     : background .15s, transform .1s;
	white-space    : nowrap;
}
.brcp-sp-btn:active { transform: scale(.98); }
.brcp-sp-btn-primary {
	background     : var(--sp-color);
	color          : #fff;
	width          : 100%;
	justify-content: center;
	padding        : 13px 20px;
	font-size      : 14px;
	margin-top     : 4px;
}
.brcp-sp-btn-primary:hover { filter: brightness(1.1); }
.brcp-sp-btn-primary:disabled { opacity:.6; cursor:not-allowed; }

.brcp-sp-footer-note {
	text-align     : center;
	font-size      : 12px;
	color          : var(--sp-muted);
	padding        : 0 32px 24px;
	margin         : 0;
}

/* ── Spinner ───────────────────────────────────────────────── */
.brcp-sp-spinner {
	width          : 16px;
	height         : 16px;
	border         : 2.5px solid rgba(255,255,255,.3);
	border-top-color: #fff;
	border-radius  : 50%;
	animation      : brcp-spin .7s linear infinite;
	display        : inline-block;
}
@keyframes brcp-spin { to { transform: rotate(360deg); } }

/* ── Message bar ───────────────────────────────────────────── */
.brcp-sp-msg {
	margin         : 0 32px 16px;
	padding        : 10px 14px;
	border-radius  : 7px;
	font-size      : 13px;
	font-weight    : 500;
	border-left    : 4px solid;
}
.brcp-sp-msg.success { background:#f0fdf4; border-color:#059669; color:#166534; }
.brcp-sp-msg.error   { background:#fff5f5; border-color:#dc2626; color:#991b1b; }

/* ── DASHBOARD ─────────────────────────────────────────────── */
.brcp-sp-topbar {
	display        : flex;
	align-items    : center;
	justify-content: space-between;
	background     : var(--sp-color);
	color          : #fff;
	padding        : 14px 24px;
	gap            : 12px;
	flex-wrap      : wrap;
}
.brcp-sp-topbar-left {
	display        : flex;
	align-items    : center;
	gap            : 12px;
}
.brcp-sp-avatar {
	width          : 42px;
	height         : 42px;
	border-radius  : 50%;
	background     : rgba(255,255,255,.2);
	display        : flex;
	align-items    : center;
	justify-content: center;
	font-size      : 16px;
	font-weight    : 700;
	flex-shrink    : 0;
}
.brcp-sp-welcome  { font-size:11px; opacity:.75; }
.brcp-sp-name     { font-size:15px; font-weight:700; }
.brcp-sp-role-badge {
	font-size      : 11px;
	opacity        : .8;
	margin-top     : 2px;
}
.brcp-sp-logout-btn {
	background     : rgba(255,255,255,.15);
	border         : 1px solid rgba(255,255,255,.3);
	color          : #fff;
	border-radius  : 7px;
	padding        : 7px 16px;
	font-size      : 12px;
	font-weight    : 600;
	cursor         : pointer;
	transition     : background .15s;
}
.brcp-sp-logout-btn:hover { background: rgba(255,255,255,.25); }

/* Filter bar */
.brcp-sp-filter-bar {
	display        : flex;
	gap            : 12px;
	align-items    : flex-end;
	flex-wrap      : wrap;
	padding        : 16px 24px;
	background     : var(--sp-surface);
	border-bottom  : 1px solid var(--sp-border);
}
.brcp-sp-filter-group { display:flex; flex-direction:column; gap:4px; }
.brcp-sp-filter-label {
	font-size      : 11px;
	font-weight    : 600;
	text-transform : uppercase;
	letter-spacing : .4px;
	color          : var(--sp-muted);
}
.brcp-sp-select {
	padding        : 8px 12px;
	border         : 1.5px solid var(--sp-border);
	border-radius  : 7px;
	font-size      : 13px;
	background     : #fafbff;
	color          : var(--sp-text);
	min-width      : 140px;
	outline        : none;
}
.brcp-sp-select:focus { border-color:var(--sp-color); }
.brcp-sp-filter-go {
	width          : auto;
	padding        : 9px 18px;
	font-size      : 13px;
	margin-bottom  : 0;
}

/* Tabs */
.brcp-sp-tabs {
	display        : flex;
	gap            : 0;
	padding        : 0 24px;
	background     : var(--sp-surface);
	border-bottom  : 2px solid var(--sp-border);
}
.brcp-sp-tab {
	padding        : 12px 20px;
	font-size      : 13px;
	font-weight    : 600;
	background     : none;
	border         : none;
	border-bottom  : 3px solid transparent;
	cursor         : pointer;
	color          : var(--sp-muted);
	margin-bottom  : -2px;
	transition     : color .15s;
}
.brcp-sp-tab-active {
	color          : var(--sp-color);
	border-bottom-color: var(--sp-color);
}

/* Panels */
.brcp-sp-panel { padding: 20px 24px; }

/* Empty state */
.brcp-sp-empty-state {
	text-align     : center;
	padding        : 48px 24px;
	color          : var(--sp-muted);
}
.brcp-sp-empty-icon { font-size:36px; margin-bottom:12px; }

/* Save bar */
.brcp-sp-save-bar {
	display        : flex;
	align-items    : center;
	justify-content: space-between;
	flex-wrap      : wrap;
	gap            : 10px;
	margin-bottom  : 14px;
	background     : #f0f4ff;
	border         : 1px solid #c5d3ef;
	border-radius  : 8px;
	padding        : 10px 16px;
}
.brcp-sp-count { font-size:13px; color:var(--sp-muted); }
.brcp-sp-save-bar .brcp-sp-btn-primary { width:auto; font-size:13px; padding:8px 18px; }
.brcp-sp-total-days-wrap { display:flex; align-items:center; gap:8px; }
.brcp-sp-input-sm {
	width          : 80px;
	padding        : 6px 10px;
	border         : 1.5px solid var(--sp-border);
	border-radius  : 6px;
	font-size      : 13px;
	outline        : none;
}
.brcp-sp-input-sm:focus { border-color:var(--sp-color); }

/* Table */
.brcp-sp-table-wrap { overflow-x: auto; }
.brcp-sp-table {
	width          : 100%;
	border-collapse: collapse;
	font-size      : 13px;
}
.brcp-sp-table th {
	background     : var(--sp-color);
	color          : #fff;
	padding        : 9px 10px;
	text-align     : left;
	font-weight    : 600;
	font-size      : 12px;
	white-space    : nowrap;
}
.brcp-sp-table td {
	padding        : 8px 10px;
	border-bottom  : 1px solid var(--sp-border);
	vertical-align : middle;
}
.brcp-sp-table tr:nth-child(even) td { background:#f8faff; }
.brcp-sp-table tr:last-child td { border-bottom:none; }
.brcp-sp-table tr:hover td { background:#f0f4ff; }

/* Score inputs inside table */
.brcp-sp-score {
	width          : 54px;
	padding        : 5px 6px;
	border         : 1.5px solid var(--sp-border);
	border-radius  : 5px;
	font-size      : 13px;
	text-align     : center;
	background     : #fafbff;
	outline        : none;
}
.brcp-sp-score:focus { border-color:var(--sp-color); background:#fff; }
.brcp-sp-score.saved { border-color:var(--sp-success); background:#f0fdf4; }

/* Attendance inputs */
.brcp-sp-att-input {
	width          : 68px;
	padding        : 5px 8px;
	border         : 1.5px solid var(--sp-border);
	border-radius  : 5px;
	font-size      : 13px;
	outline        : none;
}
.brcp-sp-att-input:focus { border-color:var(--sp-color); }
.brcp-sp-att-pct { font-weight:700; font-size:12px; }

/* Comment textarea */
.brcp-sp-comment-area {
	width          : 100%;
	padding        : 7px 10px;
	border         : 1.5px solid var(--sp-border);
	border-radius  : 6px;
	font-size      : 12px;
	resize         : vertical;
	min-height     : 60px;
	outline        : none;
	font-family    : inherit;
}
.brcp-sp-comment-area:focus { border-color:var(--sp-color); }

/* Student name cell */
.brcp-sp-stname { font-weight:600; display:block; }
.brcp-sp-streg  { font-size:11px; color:var(--sp-muted); }

/* Status message inline */
.brcp-sp-dashboard .brcp-sp-msg {
	margin   : 8px 24px;
}

/* Responsive */
@media (max-width: 600px) {
	.brcp-sp-login-card { margin:16px; border-radius:12px; }
	.brcp-sp-form        { padding:20px; }
	.brcp-sp-filter-bar  { flex-direction:column; }
	.brcp-sp-select      { min-width:100%; }
	.brcp-sp-score       { width:44px; }
}

/* ══════════════════════════════════════════════════════════════
   TRAITS — Affective & Psychomotor
══════════════════════════════════════════════════════════════ */

.sp-trait-grid-inner {
	display        : grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap            : 24px;
	margin-bottom  : 16px;
}
.sp-trait-section { }
.sp-trait-heading {
	font-size      : 13px;
	font-weight    : 700;
	color          : var(--sp-color);
	margin         : 0 0 12px;
	padding-bottom : 6px;
	border-bottom  : 2px solid var(--sp-color);
	text-transform : uppercase;
	letter-spacing : .4px;
}
.sp-trait-row {
	display        : flex;
	align-items    : center;
	gap            : 10px;
	padding        : 7px 0;
	border-bottom  : 1px solid var(--sp-border);
}
.sp-trait-row:last-child { border-bottom: none; }
.sp-trait-name {
	flex           : 1;
	font-size      : 13px;
	color          : var(--sp-text);
}
.sp-stars {
	display        : flex;
	gap            : 2px;
}
.sp-star {
	font-size      : 22px;
	cursor         : pointer;
	color          : #d1d5db;
	transition     : color .1s, transform .1s;
	line-height    : 1;
	user-select    : none;
}
.sp-star:hover,
.sp-star-on {
	color          : #f59e0b;
}
.sp-star:hover {
	transform      : scale(1.15);
}
.sp-trait-val {
	font-size      : 11px;
	font-weight    : 700;
	color          : var(--sp-muted);
	min-width      : 30px;
	text-align     : right;
}
.sp-trait-hint {
	font-size      : 12px;
	color          : var(--sp-muted);
	margin         : 4px 0 16px;
}