/* ==========================================================================
   TUTOR PORTAL (v3.0.0 — Subject Sector)
   Deliberately thin: .sgp-tutor-portal reuses the same base classes as the
   guardian portal (.sgp-portal, .sgp-login-card, .sgp-dashboard, .sgp-tabs,
   .sgp-tab-btn, .sgp-hw-card, .sgp-btn*) from frontend.css, which this file
   depends on (see wp_register_style dependency in class-sgp-tutor.php).
   Only tutor-specific layout lives here.
   ========================================================================== */

.sgp-tutor-portal .sgp-dashboard {
	--sgp-primary: #3a2d97;
	--sgp-secondary: #5b46d6;
	--sgp-accent: #8b6fe8;
	--sgp-light: #ece8fb;
}

.sgp-tutor-dashboard { max-width: 900px; margin: 0 auto; }

/* v3.1.0 — shared styling for every Tutor Portal data-entry form
   (progress, add-student, attendance, homework, exam reports, comments,
   payments, availability) — matched by [id^="sgp-tutor-"] so new forms
   automatically pick this up without needing their own CSS block. */
form[id^="sgp-tutor-"] label {
	display: block; font-size: 12px; font-weight: 700; margin: 14px 0 4px;
	text-transform: uppercase; letter-spacing: .03em; color: #555;
}
form[id^="sgp-tutor-"] select,
form[id^="sgp-tutor-"] input,
form[id^="sgp-tutor-"] textarea {
	width: 100%; padding: 11px 12px; border: 1.5px solid #e0e2e8; border-radius: 10px;
	font-size: 14px; line-height: 1.5; font-family: inherit; box-sizing: border-box;
}

/* v3.13.1 — safety net: covers standalone selects that aren't inside a
   named form (batch transfer/add dropdowns), which the rule above never
   reached at all, so they had zero line-height and were clipping text. */
.sgp-tutor-dashboard select {
	line-height: 1.5; font-family: inherit;
}

/* v3.13.1 — one-line "what this tab does + where to go next" shown at
   the top of every tab, so a teacher never has to guess. */
.sgp-tab-intro { font-size: 13px; color: #555; margin: 0 0 16px; line-height: 1.5; }
.sgp-tab-intro strong { color: #222; }
form[id^="sgp-tutor-"] .sgp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { form[id^="sgp-tutor-"] .sgp-two-col { grid-template-columns: 1fr; } }
form[id^="sgp-tutor-"] button[type="submit"] { margin-top: 16px; }

#sgp-tutor-slot-form .sgp-two-col { grid-template-columns: 2fr 1fr; align-items: end; margin-bottom: 12px; }

/* v3.3.0 — recurring availability day picker + scarcity warning */
.sgp-day-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.sgp-day-check {
	display: inline-flex !important; align-items: center; gap: 5px;
	background: #ece8fb; border-radius: 999px; padding: 7px 14px !important;
	font-size: 13px !important; font-weight: 600 !important; text-transform: none !important;
	cursor: pointer; margin: 0 !important; width: auto !important;
}
.sgp-day-check input { width: auto !important; }
.sgp-scarcity-warning {
	background: #fff3cd; color: #8a6100; border-radius: 10px; padding: 10px 14px;
	font-size: 13.5px; margin-bottom: 14px;
}

.sgp-tutor-dashboard .sgp-hw-card { display: flex; flex-direction: column; gap: 4px; }
.sgp-tutor-dashboard .sgp-hw-list { display: flex; flex-direction: column; gap: 0; }

/* v3.10.0 — confirm-first-class form (repeats per waiting student, so it's class-based rather than a static #id) */
form.sgp-confirm-first-class-form { margin-top: 10px; }
form.sgp-confirm-first-class-form label { display: block; font-size: 12px; font-weight: 700; margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .03em; color: #555; }
form.sgp-confirm-first-class-form select,
form.sgp-confirm-first-class-form input {
	width: 100%; padding: 10px 12px; border: 1.5px solid #e0e2e8; border-radius: 10px;
	font-size: 14px; font-family: inherit; box-sizing: border-box;
}
form.sgp-confirm-first-class-form .sgp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { form.sgp-confirm-first-class-form .sgp-two-col { grid-template-columns: 1fr; } }
form.sgp-confirm-first-class-form button { margin-top: 14px; }

/* v3.10.0 — Upcoming: date-badge grouped list */
.sgp-upcoming-day { display: flex; gap: 16px; margin-bottom: 22px; align-items: flex-start; }
.sgp-upcoming-day-badge {
	flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; background: var(--sgp-primary, #3a2d97);
	color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.sgp-upcoming-day-num { font-size: 20px; font-weight: 700; font-family: 'Poppins', sans-serif; }
.sgp-upcoming-day-mon { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.sgp-upcoming-day-list { flex: 1; min-width: 0; }
.sgp-upcoming-day-label { font-weight: 700; font-size: 13.5px; color: #333; margin-bottom: 8px; }
.sgp-upcoming-event {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px;
	background: #fff; border: 1px solid #e6e9ee; border-radius: 12px; margin-bottom: 8px; font-size: 13.5px;
}
.sgp-upcoming-time { font-weight: 700; color: var(--sgp-primary, #3a2d97); min-width: 78px; }
.sgp-upcoming-loc { color: #777; font-size: 12.5px; }

/* v3.10.0 — My Day: weather / salat / holidays */
.sgp-myday-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .sgp-myday-grid { grid-template-columns: 1fr; } }
.sgp-myday-card { background: #fff; border: 1px solid #e6e9ee; border-radius: 16px; padding: 20px; }
.sgp-myday-card h4 { margin: 0 0 12px; font-family: 'Poppins', sans-serif; font-size: 14.5px; }
.sgp-myday-weather-main { display: flex; align-items: center; gap: 10px; }
.sgp-myday-weather-icon { font-size: 36px; }
.sgp-myday-weather-temp { font-size: 28px; font-weight: 700; font-family: 'Poppins', sans-serif; color: var(--sgp-primary, #3a2d97); }
.sgp-myday-weather-text { margin: 8px 0 0; color: #666; font-size: 13px; }
.sgp-myday-salat-table { width: 100%; border-collapse: collapse; }
.sgp-myday-salat-table td { padding: 6px 0; font-size: 13.5px; border-bottom: 1px solid #f0f0f0; }
.sgp-myday-salat-table td:last-child { text-align: right; font-weight: 700; color: var(--sgp-primary, #3a2d97); }
.sgp-myday-holiday { font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
.sgp-myday-holiday:last-child { border-bottom: none; }

/* v3.12.0 — daily attendance quick-entry */
.sgp-daily-att-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* v3.45.0 — attendance context banner: always visible, keeps batch +
   date in view the whole time a teacher is scrolling the student list. */
.sgp-att-context-banner {
	position: sticky; top: 0; z-index: 5; background: linear-gradient(135deg, #eef3ff, #f7f4ff);
	border: 1.5px solid #d7e0ff; border-radius: 12px; padding: 12px 16px; margin: 14px 0 4px;
	font-size: 13.5px; color: #333; box-shadow: 0 3px 10px rgba(46,92,214,0.08);
}
.sgp-att-context-banner strong { color: #2e5cd6; }
.sgp-daily-att-row {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: #fff; border: 1px solid #e6e9ee; border-radius: 12px; padding: 10px 14px; flex-wrap: wrap;
}
.sgp-daily-att-name { font-weight: 600; font-size: 13.5px; color: #222; }
.sgp-daily-att-buttons { display: flex; gap: 6px; }
.sgp-daily-att-btn {
	border: 1.5px solid #d3d7dd; background: #fff; color: #666; border-radius: 999px;
	padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.sgp-daily-att-btn.active.present { background: #e6f6ec; border-color: #1e7a3c; color: #1e7a3c; }
.sgp-daily-att-btn.active.absent { background: #fbe9e7; border-color: #a13a2f; color: #a13a2f; }
.sgp-daily-att-btn.active.late { background: #fff3cd; border-color: #8a6100; color: #8a6100; }

/* v3.13.0 — weekly timetable grid */
.sgp-timetable-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 10px; }
@media (max-width: 700px) { .sgp-timetable-grid { grid-template-columns: repeat(2, 1fr); } }
.sgp-timetable-day { background: #fff; border: 1px solid #e6e9ee; border-radius: 12px; padding: 10px; min-height: 90px; }
.sgp-timetable-day-label { font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--sgp-primary, #3a2d97); margin-bottom: 8px; letter-spacing: .03em; }
.sgp-timetable-slot { background: #ece8fb; border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; font-size: 11.5px; display: flex; flex-direction: column; gap: 1px; }
.sgp-timetable-slot.sgp-timetable-full { background: #fbe9e7; }
.sgp-timetable-seats { color: #777; font-size: 10.5px; }
.sgp-timetable-free { color: #bbb; font-size: 11.5px; font-style: italic; }

/* v3.13.0 — batch roster */
.sgp-batch-roster { margin: 10px 0; }
.sgp-batch-roster-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; flex-wrap: wrap; }
.sgp-batch-full-badge { background: #fbe9e7 !important; color: #a13a2f !important; }

/* v3.17.0 — item 2: clickable student names + profile popup modal */
.sgp-student-link { color: var(--sgp-primary, #3a2d97); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.sgp-student-link:hover { color: var(--sgp-primary-light, #5b46d6); }

.sgp-student-modal-overlay {
	display: none; position: fixed; inset: 0; z-index: 900;
	background: rgba(16,14,41,0.45); align-items: center; justify-content: center; padding: 20px;
}
.sgp-student-modal-overlay.open { display: flex; }
.sgp-student-modal {
	background: #fff; border-radius: 18px; width: 100%; max-width: 480px;
	max-height: 85vh; display: flex; flex-direction: column;
	box-shadow: 0 24px 60px rgba(16,14,41,0.3);
}
.sgp-student-modal-header {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 18px 20px; border-bottom: 1px solid #eee; flex-shrink: 0;
}
.sgp-student-modal-header h3 { margin: 0; font-family: 'Poppins', sans-serif; font-size: 17px; color: #100e29; }
.sgp-student-modal-close { background: #f0f0f0; border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; color: #555; flex-shrink: 0; }
.sgp-student-modal-close:hover { background: #e0e0e0; }
.sgp-student-modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.sgp-profile-section { margin-bottom: 18px; }
.sgp-profile-section h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--sgp-primary, #3a2d97); margin: 0 0 8px; }
.sgp-profile-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f4f4f4; font-size: 13.5px; }
.sgp-profile-row span:first-child { color: #888; }
.sgp-profile-row span:last-child { color: #222; font-weight: 600; text-align: right; }
.sgp-profile-list { list-style: none; margin: 0; padding: 0; font-size: 13px; color: #333; }
.sgp-profile-list li { padding: 5px 0; border-bottom: 1px solid #f4f4f4; }

/* v3.33.0 — student popup: trend indicators + attendance bar chart */
.sgp-trend-up { color: #1e7a3c; font-weight: 700; }
.sgp-trend-down { color: #a13a2f; font-weight: 700; }
.sgp-trend-bars { display: flex; align-items: flex-end; gap: 8px; height: 70px; padding-top: 10px; }
.sgp-trend-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; }
.sgp-trend-bar { width: 100%; max-width: 22px; background: linear-gradient(180deg, #5b46d6, #3a2d97); border-radius: 4px 4px 0 0; min-height: 2px; }
.sgp-trend-bar-col span { font-size: 9.5px; color: #999; margin-top: 4px; }

/* v3.24.0 — to-do list checkbox-style interaction */
.sgp-todo-card h4 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sgp-todo-check {
	width: 22px; height: 22px; border-radius: 6px; border: 2px solid #d3d7dd; background: #fff;
	cursor: pointer; flex-shrink: 0; padding: 0;
}
.sgp-todo-check:hover { border-color: var(--sgp-primary, #3a2d97); }
.sgp-todo-check-done {
	width: 22px; height: 22px; border-radius: 6px; background: #1e7a3c; color: #fff;
	display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0;
}
.sgp-todo-done { opacity: 0.65; }
.sgp-todo-done h4 { text-decoration: line-through; text-decoration-color: #aaa; }

/* v3.26.0 — "which student have I already filled this in for" panel */
.sgp-last-entry-panel:empty { display: none; }
.sgp-last-entry-panel {
	background: var(--sgp-light, #ece8fb); border-radius: 10px; padding: 10px 14px;
	margin: 8px 0 14px; font-size: 12.5px; color: #444;
}
.sgp-last-entry-panel strong { color: var(--sgp-primary, #3a2d97); display: block; margin-bottom: 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
.sgp-last-entry-panel .sgp-last-entry-exact { background: #fff8ec; border-left: 3px solid #e0a12e; padding: 6px 10px; border-radius: 6px; margin-bottom: 6px; }
.sgp-last-entry-panel ul { margin: 0; padding: 0 0 0 16px; }
.sgp-last-entry-panel li { margin-bottom: 2px; }

/* v3.39.0 — Payments segment: color, shadow, and a deliberate red flag
   on the fee-request (SMS-sending) action so it's never confused with
   the calmer, more routine act of recording a payment already received. */
.sgp-fee-request-section {
	background: #fff5f4; border: 1.5px solid #f3c6c0; border-left: 5px solid #c0392b;
	border-radius: 14px; padding: 18px 20px; margin-bottom: 22px;
	box-shadow: 0 4px 16px -6px rgba(192,57,43,0.18);
}
.sgp-fee-request-section h4 { color: #8a2e22; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sgp-danger-tag {
	background: #c0392b; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
	text-transform: uppercase; padding: 2px 9px; border-radius: 999px;
}
.sgp-btn-danger { background: #c0392b; box-shadow: 0 4px 12px -2px rgba(192,57,43,0.4); }
.sgp-btn-danger:hover { background: #a13123; }

.sgp-record-payment-section {
	background: #f4faf6; border: 1.5px solid #cdeadb; border-left: 5px solid #1e7a3c;
	border-radius: 14px; padding: 18px 20px; margin-bottom: 22px;
	box-shadow: 0 4px 16px -6px rgba(30,122,60,0.14);
}
.sgp-record-payment-section h4 { color: #14532d; }
@media (max-width: 480px) {
	.sgp-fee-request-section, .sgp-record-payment-section { padding: 14px 16px; }
}
.sgp-pay-card { border-left: 4px solid transparent; transition: transform .15s ease, box-shadow .15s ease; }
.sgp-pay-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(16,14,41,0.12); }
.sgp-pay-card-monthly { border-left-color: #1e7a3c; }
.sgp-pay-card-admission { border-left-color: #d4a017; }

/* v3.40.0 — direct messaging chat UI */
.sgp-tmsg-conv-row { cursor: pointer; }
.sgp-tmsg-conv-row:hover { box-shadow: 0 6px 18px -6px rgba(16,14,41,0.14); }
.sgp-tmsg-unread-badge {
	background: #c0392b; color: #fff; font-size: 11px; font-weight: 700;
	border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}
.sgp-tmsg-preview { color: #666; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.sgp-chat-header { font-weight: 700; font-size: 15px; padding: 10px 0; border-bottom: 1px solid #eee; margin-bottom: 10px; }
.sgp-chat-messages {
	height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
	padding: 10px; background: #f7f7fb; border-radius: 12px; margin-bottom: 12px;
}
.sgp-chat-bubble-row { display: flex; }
.sgp-chat-mine { justify-content: flex-end; }
.sgp-chat-theirs { justify-content: flex-start; }
.sgp-chat-bubble {
	max-width: 75%; padding: 9px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.45;
	position: relative; word-wrap: break-word;
}
.sgp-chat-mine .sgp-chat-bubble { background: var(--sgp-primary, #3a2d97); color: #fff; border-bottom-right-radius: 4px; }
.sgp-chat-theirs .sgp-chat-bubble { background: #fff; color: #222; border: 1px solid #eee; border-bottom-left-radius: 4px; }
.sgp-chat-time { display: block; font-size: 10px; opacity: 0.7; margin-top: 4px; text-align: right; }
.sgp-chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
.sgp-chat-input-row textarea {
	flex: 1; resize: none; border: 1.5px solid #ddd; border-radius: 12px; padding: 10px 12px;
	font-size: 13.5px; font-family: inherit; max-height: 90px;
}
.sgp-chat-input-row button { width: auto; margin: 0; flex-shrink: 0; }

/* v3.49.0 — duplicate-submission guard: visible spinner + dimmed,
   disabled state on any button mid-request, so it's unmistakable that
   something is already happening and a second click isn't needed. */
.sgp-btn-loading { opacity: 0.7; cursor: not-allowed !important; pointer-events: none; }
.sgp-btn-spinner {
	display: inline-block; width: 13px; height: 13px; margin-right: 6px;
	border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
	border-radius: 50%; vertical-align: -2px;
	animation: sgp-btn-spin 0.7s linear infinite;
}
.sgp-btn-outline .sgp-btn-spinner, .sgp-btn-danger-outline .sgp-btn-spinner {
	border-color: rgba(58,45,151,0.3); border-top-color: #3a2d97;
}
@keyframes sgp-btn-spin { to { transform: rotate(360deg); } }

/* v3.51.0 — homework history + per-student status tracking */
.sgp-hw-history-row { cursor: pointer; }
.sgp-hw-history-row:hover { box-shadow: 0 6px 18px -6px rgba(16,14,41,0.14); }
.sgp-hw-history-counts { display: flex; gap: 14px; font-size: 12px; color: #555; margin: 4px 0 0; }
.sgp-hw-history-students { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #eee; display: flex; flex-direction: column; gap: 8px; }
.sgp-hw-status-row {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #f9f9fb;
	border-radius: 8px; padding: 8px 10px; font-size: 12.5px;
}
.sgp-hw-status-row strong { flex: 1 1 100px; min-width: 90px; }
.sgp-hw-status-row select { padding: 4px 6px; font-size: 12px; border-radius: 6px; border: 1px solid #ddd; }
.sgp-hw-remarks-input { flex: 1 1 140px; min-width: 100px; padding: 4px 8px; font-size: 12px; border-radius: 6px; border: 1px solid #ddd; }

/* v3.54.0 — weekly teaching routine timeline (godfix: replaces the
   earlier, incorrect "meeting availability minus bookings" grid) */
.sgp-slots-day-card { margin-bottom: 4px; }
.sgp-routine-timeline { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sgp-routine-block {
	display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 9px 12px;
}
.sgp-routine-free { background: #e6f6ec; border-left: 4px solid #1e7a3c; }
.sgp-routine-booked { background: #fdecea; border-left: 4px solid #a13a2f; }
.sgp-routine-time { font-size: 12px; font-weight: 700; color: #333; flex-shrink: 0; min-width: 118px; }
.sgp-routine-label { font-size: 12.5px; }
.sgp-routine-free .sgp-routine-label { color: #1e7a3c; font-weight: 600; }
.sgp-routine-booked .sgp-routine-label { color: #a13a2f; font-weight: 600; }