/**
 * Relatia Director Panel styles.
 *
 * @since 1.0.0
 */

/* ── Summary stat cards ── */
.relatia-director-summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 8px;
}

.relatia-director-stat {
	position: relative;
	overflow: hidden;
	background: #fff;
	border-radius: 10px;
	padding: 22px 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	text-align: center;
}

.relatia-director-stat-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 90px !important;
	opacity: 0.05;
	pointer-events: none;
	color: #334155;
}

.relatia-director-stat-value {
	position: relative;
	z-index: 1;
	font-size: 32px;
	font-weight: 800;
	color: #1e293b;
	line-height: 1.1;
}

.relatia-director-stat-label {
	position: relative;
	z-index: 1;
	font-size: 13px;
	color: #64748b;
	margin-top: 4px;
	font-weight: 500;
}

/* ── Section headers ── */
.relatia-director-section-title {
	font-size: 17px;
	font-weight: 700;
	color: #1e293b;
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid #e2e8f0;
}

.relatia-director-section-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.relatia-director-section-header .relatia-director-section-title {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
	flex-shrink: 0;
}

.relatia-director-section-header .relatia-book-panel-search-wrap {
	flex: 1;
	min-width: 120px;
}

.relatia-director-section-header .relatia-director-header-actions {
	flex-shrink: 0;
	margin-left: auto;
}

/* ── User / class list ── */
.relatia-director-user-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.relatia-director-user-item {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border-radius: 8px;
	padding: 14px 16px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease;
	flex-wrap: wrap;
}

.relatia-director-user-item .relatia-director-inline-edit {
	flex-basis: 100% !important;
	width: 100% !important;
	min-width: 0 !important;
}

.relatia-director-user-item:hover {
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.relatia-director-user-avatar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f1f5f9;
	display: flex;
	align-items: center;
	justify-content: center;
}

.relatia-director-user-avatar .material-icons-outlined {
	font-size: 22px;
	color: #64748b;
}

.relatia-director-user-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.relatia-director-user-info strong {
	font-size: 14px;
	font-weight: 600;
	color: #1e293b;
}

.relatia-director-user-meta {
	font-size: 12px;
	color: #94a3b8;
}

/* View button inside user items */
.relatia-director-user-item .relatia-btn-mini {
	flex-shrink: 0;
}

/* ── Header actions (buttons row) ── */
.relatia-director-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.relatia-director-header-actions .relatia-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
}

.relatia-director-header-actions .relatia-btn-ghost i {
	font-size: 16px;
}

.relatia-director-csv-import-label {
	cursor: pointer;
}

/* ── Create-user forms ── */
.relatia-director-create-form {
	background: #f8fafc;
	border-color: #e2e8f0 !important;
}

.relatia-director-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
}

.relatia-director-form-field label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	font-size: 14px;
	color: #334155;
}

.relatia-director-form-field .relatia-input {
	width: 100%;
	box-sizing: border-box;
}

/* "Student has no email" toggle */
.relatia-no-email-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	font-size: 13px;
	color: #6b7280;
	cursor: pointer;
}

.relatia-no-email-label input[type="checkbox"] {
	margin: 0;
}

/* Auto-generated email — readonly visual */
.relatia-email-auto {
	background-color: #f3f4f6 !important;
	color: #6b7280 !important;
	cursor: default;
}

/* Form action bar */
.relatia-director-form-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* Status messages */
.relatia-director-form-message {
	font-size: 14px;
}

.relatia-director-msg-success {
	color: #4caf50;
}

.relatia-director-msg-error {
	color: #f44336;
}

/* New-user flash animation */
.relatia-director-user-new {
	animation: relatia-director-flash 1s ease;
}

@keyframes relatia-director-flash {
	0%   { background-color: rgba(76, 175, 80, 0.15); }
	100% { background-color: transparent; }
}

/* ── Dark theme ── */
[data-theme="dark"] .relatia-director-stat {
	background: #1e293b;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .relatia-director-stat-icon {
	color: #e2e8f0;
}

[data-theme="dark"] .relatia-director-stat-value {
	color: #f1f5f9;
}

[data-theme="dark"] .relatia-director-stat-label {
	color: #94a3b8;
}

[data-theme="dark"] .relatia-director-section-title {
	color: #f1f5f9;
	border-bottom-color: #334155;
}

[data-theme="dark"] .relatia-director-user-item {
	background: #1e293b;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .relatia-director-user-item:hover {
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .relatia-director-user-avatar {
	background: #334155;
}

[data-theme="dark"] .relatia-director-user-avatar .material-icons-outlined {
	color: #94a3b8;
}

[data-theme="dark"] .relatia-director-user-info strong {
	color: #f1f5f9;
}

[data-theme="dark"] .relatia-director-user-meta {
	color: #64748b;
}

[data-theme="dark"] .relatia-director-create-form {
	background: #0f172a;
	border-color: #334155 !important;
}

[data-theme="dark"] .relatia-director-form-field label {
	color: #cbd5e1;
}

[data-theme="dark"] .relatia-director-msg-success {
	color: #81c784;
}

[data-theme="dark"] .relatia-director-msg-error {
	color: #ef5350;
}

/* ── Action buttons in user/school items ── */
.relatia-director-user-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.relatia-director-user-actions .relatia-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	border: none;
	background: transparent;
	color: var(--relatia-color-main, #334155);
	transition: background 0.15s, color 0.15s;
}

.relatia-director-user-actions .relatia-btn-icon .material-icons-outlined {
	font-size: 20px;
}

.relatia-director-user-actions .relatia-btn-icon:hover {
	background: #f1f5f9;
}

.relatia-director-user-actions .relatia-btn-icon.relatia-btn-danger {
	color: #94a3b8;
}

.relatia-director-user-actions .relatia-btn-icon.relatia-btn-danger:hover {
	background: #fef2f2;
	color: #dc2626;
}

/* ── Inline edit form ── */
.relatia-admin-inline-edit {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 10px;
}

.relatia-admin-inline-edit .relatia-director-form-grid {
	margin-bottom: 12px;
}

.relatia-admin-inline-edit .relatia-director-form-field small {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	color: #94a3b8;
}

/* ── School badge in user items ── */
.relatia-admin-school-badge {
	display: inline-block;
	font-size: 11px;
	background: #eff6ff;
	color: #2563eb;
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: 500;
}

/* ── Dark theme additions ── */
[data-theme="dark"] .relatia-director-user-actions .relatia-btn-icon {
	color: #94a3b8;
}

[data-theme="dark"] .relatia-director-user-actions .relatia-btn-icon:hover {
	background: #334155;
	color: #e2e8f0;
}

[data-theme="dark"] .relatia-director-user-actions .relatia-btn-icon.relatia-btn-danger:hover {
	background: #450a0a;
	color: #f87171;
}

[data-theme="dark"] .relatia-admin-inline-edit {
	background: #0f172a;
	border-color: #334155;
}

[data-theme="dark"] .relatia-admin-school-badge {
	background: #1e3a5f;
	color: #93c5fd;
}

/* ── Admin book list ── */
.relatia-admin-book-cover {
	flex-shrink: 0;
	width: 48px;
	height: 64px;
	border-radius: 6px;
	overflow: hidden;
}

.relatia-admin-book-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.relatia-admin-book-thumb-placeholder {
	width: 100%;
	height: 100%;
	background: #f1f5f9;
	display: flex;
	align-items: center;
	justify-content: center;
}

.relatia-admin-book-thumb-placeholder .material-icons-outlined {
	font-size: 24px;
	color: #94a3b8;
}

[data-theme="dark"] .relatia-admin-book-thumb-placeholder {
	background: #334155;
}

[data-theme="dark"] .relatia-admin-book-thumb-placeholder .material-icons-outlined {
	color: #64748b;
}

/* ── Quick links ── */
.relatia-quick-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.relatia-quick-link {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border-radius: 10px;
	padding: 16px 18px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.relatia-quick-link:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

.relatia-quick-link-icon {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: #f1f5f9;
	display: flex;
	align-items: center;
	justify-content: center;
}

.relatia-quick-link-icon .material-icons-outlined {
	font-size: 22px;
	color: var(--relatia-color-main, #4a6cf7);
}

.relatia-quick-link-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.relatia-quick-link-title {
	font-size: 14px;
	font-weight: 600;
	color: #1e293b;
}

.relatia-quick-link-desc {
	font-size: 12px;
	color: #94a3b8;
}

.relatia-quick-link-arrow {
	flex-shrink: 0;
	font-size: 20px !important;
	color: #cbd5e1;
	transition: color 0.15s, transform 0.15s;
}

.relatia-quick-link:hover .relatia-quick-link-arrow {
	color: var(--relatia-color-main, #4a6cf7);
	transform: translateX(2px);
}

/* Quick link icon color variants */
.relatia-quick-link-icon-accent {
	background: #eef2ff;
}

.relatia-quick-link-icon-accent .material-icons-outlined {
	color: var(--relatia-color-main, #4a6cf7);
}

.relatia-quick-link-icon-green {
	background: #f0fdf4;
}

.relatia-quick-link-icon-green .material-icons-outlined {
	color: #16a34a;
}

/* Button styled as quick-link */
button.relatia-quick-link {
	border: none;
	cursor: pointer;
	font: inherit;
	text-align: left;
	width: 100%;
}

/* Label styled as quick-link (for file input) */
label.relatia-quick-link {
	cursor: pointer;
}

/* Quick links — dark theme */
[data-theme="dark"] .relatia-quick-link {
	background: #1e293b;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .relatia-quick-link:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .relatia-quick-link-icon {
	background: #334155;
}

[data-theme="dark"] .relatia-quick-link-title {
	color: #f1f5f9;
}

[data-theme="dark"] .relatia-quick-link-desc {
	color: #64748b;
}

[data-theme="dark"] .relatia-quick-link-arrow {
	color: #475569;
}

[data-theme="dark"] .relatia-quick-link:hover .relatia-quick-link-arrow {
	color: var(--relatia-color-main, #4a6cf7);
}

[data-theme="dark"] .relatia-quick-link-icon-accent {
	background: #1e1b4b;
}

[data-theme="dark"] .relatia-quick-link-icon-green {
	background: #052e16;
}

[data-theme="dark"] .relatia-quick-link-icon-green .material-icons-outlined {
	color: #4ade80;
}

/* ── Responsive ── */
@media (max-width: 640px) {
	.relatia-director-summary {
		grid-template-columns: 1fr;
	}

	.relatia-director-section-header {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.relatia-director-section-header .relatia-director-header-actions {
		margin-left: 0;
	}

	.relatia-director-section-header .relatia-book-panel-search-wrap {
		min-width: 0;
	}
}

@media (max-width: 480px) {
	.relatia-director-form-grid {
		grid-template-columns: 1fr;
	}

	.relatia-director-user-item {
		padding: 12px;
		gap: 10px;
	}

	.relatia-director-user-avatar {
		width: 34px;
		height: 34px;
	}

	.relatia-director-user-avatar .material-icons-outlined {
		font-size: 18px;
	}
}

/* ── Resource blocks ── */
.relatia-panel .relatia-resource-block {
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.relatia-panel .relatia-resource-header {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px;
	margin-bottom: 8px;
}

.relatia-panel .relatia-resource-header .material-icons-outlined {
	font-size: 22px !important;
	color: var(--relatia-color-main, #4a6cf7);
}

.relatia-panel .relatia-resource-header h5 {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #1e293b;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

[data-theme="dark"] .relatia-panel .relatia-resource-block {
	background: #1e293b;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .relatia-panel .relatia-resource-header h5 {
	color: #f1f5f9;
}

/* ── Quiz tab (teacher panel) ── */
.relatia-ai-quiz-chapter-list {
	list-style: none;
	padding: 0;
	margin: 8px 0 0;
}

.relatia-ai-quiz-chapter-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border: 1px solid #e4e4e7;
	border-radius: 8px;
	margin-bottom: 6px;
	background: #fff;
}

.relatia-ai-quiz-chapter-info {
	flex: 1;
	min-width: 0;
	margin-right: 12px;
}

.relatia-ai-quiz-chapter-title {
	font-weight: 600;
	font-size: 14px;
}

.relatia-ai-quiz-badges {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}

.relatia-ai-quiz-badge {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 10px;
	background: #dcfce7;
	color: #166534;
	font-weight: 500;
}

.relatia-ai-quiz-badge-reflection {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 10px;
	background: #fff7ed;
	color: #c2410c;
	font-weight: 500;
}

.relatia-ai-quiz-badge-emotional {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 10px;
	background: #f3e8ff;
	color: #7e22ce;
	font-weight: 500;
}

.relatia-ai-quiz-chapter-actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.relatia-quiz-book-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
}

.relatia-quiz-book-cover {
	flex-shrink: 0;
}

.relatia-quiz-book-cover img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.relatia-quiz-book-info {
	flex: 1;
	min-width: 0;
}

.relatia-quiz-book-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 15px !important;
	font-weight: 700 !important;
	margin: 0 0 2px !important;
	padding: 0 !important;
	border: none !important;
}

.relatia-quiz-book-title .material-icons-outlined {
	font-size: 20px !important;
	color: var(--relatia-color-main, #4a6cf7);
	flex-shrink: 0;
}

[data-theme="dark"] .relatia-quiz-book-title {
	color: #f1f5f9;
}

.relatia-ai-quiz-loading {
	text-align: center;
	padding: 30px 20px;
}

.relatia-ai-quiz-results {
	text-align: center;
	padding: 10px;
}

/* ── Ranking section (director panel) ── */
.relatia-ranking-privacy-note {
	font-size: 12px;
	color: #16a34a;
	margin: 8px 0 0;
	text-align: center;
}

.relatia-ranking-description {
	font-size: 13px;
	color: #6b7280;
	margin: 0 0 12px;
}

.relatia-ranking-preview-tip {
	font-size: 12px;
	color: #92400e;
	background: #fef3c7;
	padding: 8px 12px;
	border-radius: 6px;
	margin: 0 0 12px;
}

.relatia-ranking-preview-tip .material-icons-outlined {
	font-size: 14px;
	vertical-align: middle;
}

[data-theme="dark"] .relatia-ai-quiz-chapter-row {
	background: #1e293b;
	border-color: #334155;
}

[data-theme="dark"] .relatia-ai-quiz-badge {
	background: #064e3b;
	color: #6ee7b7;
}

[data-theme="dark"] .relatia-ai-quiz-badge-reflection {
	background: #7c2d12;
	color: #fdba74;
}

[data-theme="dark"] .relatia-ai-quiz-badge-emotional {
	background: #581c87;
	color: #d8b4fe;
}

/* ── Book panel search ── */
.relatia-book-panel-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	background: #f1f5f9;
	border-radius: 8px;
	padding: 6px 12px;
	min-width: 200px;
	max-width: 320px;
}

.relatia-book-panel-search-wrap .material-icons-outlined {
	font-size: 18px;
	color: #94a3b8;
	flex-shrink: 0;
}

.relatia-book-panel-search {
	border: none;
	background: transparent;
	outline: none;
	font-size: 13px;
	color: #1e293b;
	width: 100%;
	padding: 2px 0;
}

.relatia-book-panel-search::placeholder {
	color: #94a3b8;
}

[data-theme="dark"] .relatia-book-panel-search-wrap {
	background: #334155;
}

[data-theme="dark"] .relatia-book-panel-search {
	color: #f1f5f9;
}

[data-theme="dark"] .relatia-book-panel-search::placeholder {
	color: #64748b;
}

/* ── Book panel pagination ── */
.relatia-book-panel-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
}

.relatia-book-panel-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid #d4d4d8;
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	color: #52525b;
	padding: 0;
	transition: background .15s, border-color .15s;
}

.relatia-book-panel-arrow:hover:not(:disabled) {
	background: #f4f4f5;
	border-color: #a1a1aa;
}

.relatia-book-panel-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.relatia-book-panel-arrow .material-icons-outlined {
	font-size: 18px;
}

.relatia-book-panel-page-info {
	font-size: 12px;
	color: #71717a;
	min-width: 36px;
	text-align: center;
	white-space: nowrap;
}

[data-theme="dark"] .relatia-book-panel-arrow {
	background: #27272a;
	border-color: #3f3f46;
	color: #a1a1aa;
}

[data-theme="dark"] .relatia-book-panel-arrow:hover:not(:disabled) {
	background: #3f3f46;
	border-color: #52525b;
}

[data-theme="dark"] .relatia-book-panel-page-info {
	color: #a1a1aa;
}

/* ── Generic list filter pagination ── */
.relatia-list-filter-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
}

.relatia-list-filter-no-results {
	text-align: center;
	padding: 16px;
}

/* ── Inline spinner (quiz generate feedback) ── */
.relatia-spinner-inline {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid #e5e7eb;
	border-top-color: var(--relatia-color-main, #4a6cf7);
	border-radius: 50%;
	animation: relatia-spin 0.6s linear infinite;
	vertical-align: middle;
	margin-left: 8px;
}

.relatia-ai-quiz-chapter-status {
	margin-left: 8px;
	font-size: 12px;
}

@keyframes relatia-spin {
	to { transform: rotate(360deg); }
}

/* ── Missing metadata badges ── */
.relatia-missing-badge {
	display: inline-block;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: 500;
	background: rgba(234, 179, 8, 0.15);
	color: #b45309;
	margin-right: 4px;
}

[data-theme="dark"] .relatia-missing-badge {
	background: rgba(234, 179, 8, 0.15);
	color: #fbbf24;
}

.relatia-missing-meta-genre-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.relatia-missing-meta-genre-label {
	font-size: 13px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
}

.relatia-missing-meta-genre-label input[type="checkbox"] {
	margin: 0;
}