/* ============================================================
   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;
}

/* ══════════════════════════════════════════════════════════════
   MY CLASS — Modal, Form Grid, Comment Badge
══════════════════════════════════════════════════════════════ */

/* Modal backdrop */
.brcp-sp-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.52);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

/* Modal card */
.brcp-sp-modal-inner {
	background: #fff;
	border-radius: 12px;
	padding: 28px 24px 22px;
	max-width: 580px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
	animation: brcpMcSlideUp 0.22s ease;
}

@keyframes brcpMcSlideUp {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.brcp-sp-modal-inner h3 {
	margin: 0 0 6px;
	font-size: 17px;
	color: var(--sp-color, #003399);
	font-weight: 700;
}

.brcp-sp-modal-sub {
	font-size: 12px;
	color: #6b7280;
	margin: 0 0 18px;
}

/* Close × button */
.brcp-sp-modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #9ca3af;
	padding: 2px 6px;
	border-radius: 4px;
	transition: color 0.15s, background 0.15s;
}
.brcp-sp-modal-close:hover { color: #374151; background: #f3f4f6; }

/* 2-column form grid inside modal */
.brcp-sp-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 16px;
}
@media (max-width: 480px) {
	.brcp-sp-form-grid { grid-template-columns: 1fr; }
}

/* Each field label + input pair */
.brcp-sp-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.brcp-sp-field label {
	font-size: 12px;
	font-weight: 600;
	color: #374151;
}
.brcp-sp-field input,
.brcp-sp-field select {
	padding: 8px 10px;
	border: 1.5px solid #d1d5db;
	border-radius: 6px;
	font-size: 13px;
	background: #fafbff;
	color: #111;
	transition: border-color 0.15s, box-shadow 0.15s;
	outline: none;
	width: 100%;
	box-sizing: border-box;
}
.brcp-sp-field input:focus,
.brcp-sp-field select:focus {
	border-color: var(--sp-color, #003399);
	box-shadow: 0 0 0 3px rgba(0, 51, 153, 0.1);
	background: #fff;
}

/* Inline error inside modal */
.brcp-sp-msg-error {
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	border-left: 3px solid #dc2626;
	background: #fef2f2;
	color: #991b1b;
	margin-top: 10px;
}

/* My Class table action buttons */
.sp-mc-edit-btn {
	background: #eff6ff;
	color: #1d4ed8;
	border: 1px solid #bfdbfe;
}
.sp-mc-edit-btn:hover { background: #dbeafe; }

.sp-mc-remove-btn:hover { background: #fecaca !important; }

/* Comment-type badge variants */
#sp-com-type-badge {
	transition: background 0.2s, color 0.2s;
}

/* Reg number display in My Class table */
#sp-mc-table code {
	background: #f1f5f9;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 11px;
	color: #475569;
}

/* My Class count badge */
#sp-mc-count {
	font-weight: 600;
	color: var(--sp-color, #003399);
}