/* CoreCave editorial — instructor dashboard page module.
 * Wave 3 T3.5 — editorial styling for the Tutor LMS instructor dashboard.
 *
 * Page wrapper rendered by tutor/dashboard.php → div.page-content.cc-instructor-dashboard.
 * Template partials (instructor-welcome-strip.php, instructor-stat-cards.php)
 * use the class set: .cc-instructor-welcome, .cc-instructor-actions,
 * .cc-action-card[--accent], .cc-instructor-stats, .cc-stat-card[__label/value/breakdown].
 * Dashboard root template adds .cc-action-cta-row + .cc-action-cta[--primary/--accent].
 *
 * Specificity strategy: scope every editorial rule with .cc-instructor-dashboard
 * to defeat the legacy block in style.css (~lines 1230-1320) without
 * forced-priority overrides. Logical properties throughout so RTL flips automatically.
 * Token chain: --cc-ed-* (editorial) -> legacy fallback -> hex literal.
 */

/* ============================================================
 * 1. Page baseline
 * ============================================================ */
.cc-instructor-dashboard {
	background: var(--cc-ed-bg, var(--cc-bg-cream, #FAF7F2));
	color: var(--cc-ed-ink, var(--cc-ink, #0E0E0E));
	padding-block: var(--cc-ed-sp-fluid-section, clamp(48px, 6vw, 96px));
}

body.tutor-dashboard,
body.page-tutor-dashboard {
	background: var(--cc-ed-bg, var(--cc-bg-cream, #FAF7F2));
	color: var(--cc-ed-ink, var(--cc-ink, #0E0E0E));
}

/* ============================================================
 * 2. Welcome strip — editorial paper-rule masthead
 * ============================================================ */
.cc-instructor-dashboard .cc-instructor-welcome {
	display: flex;
	flex-direction: column;
	gap: var(--cc-ed-sp-4, 16px);
	padding-block: var(--cc-ed-sp-6, 32px);
	padding-inline: 0;
	margin-block-end: var(--cc-ed-sp-7, 48px);
	background: transparent;
	border-radius: 0;
	border-block-end: 1px solid var(--cc-ed-paper-rule, #E5DDD0);
}

.cc-instructor-dashboard .cc-instructor-welcome h1 {
	font-family: var(--cc-font-display);
	font-size: var(--cc-fs-h2, clamp(28px, 4vw, 44px));
	font-weight: 900;
	line-height: var(--cc-lh-tight, 1.2);
	letter-spacing: var(--cc-tracking-tight, -0.02em);
	margin: 0;
	color: var(--cc-ed-ink, #0E0E0E);
}

/* ============================================================
 * 3. Action CTA row — two oversized editorial buttons
 * ============================================================
 * Template renders .cc-action-cta-row > .cc-action-cta--primary
 * + .cc-action-cta--accent. Each CTA has __icon, __label, __sub.
 */
.cc-instructor-dashboard .cc-action-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-ed-sp-5, 24px);
	margin-block-end: var(--cc-ed-sp-7, 48px);
}

.cc-instructor-dashboard .cc-action-cta {
	display: flex;
	flex: 1 1 320px;
	flex-direction: column;
	gap: var(--cc-ed-sp-2, 8px);
	padding-block: var(--cc-ed-sp-5, 24px);
	padding-inline: var(--cc-ed-sp-6, 32px);
	border: 1px solid transparent;
	border-radius: var(--cc-ed-radius-md, 12px);
	box-shadow: var(--cc-ed-shadow-card, 0 1px 2px rgba(14, 14, 14, 0.06), 0 12px 24px -16px rgba(14, 14, 14, 0.12));
	text-decoration: none;
	transition:
		transform var(--cc-ed-dur-mid, 200ms) var(--cc-ed-ease, ease),
		box-shadow var(--cc-ed-dur-mid, 200ms) var(--cc-ed-ease, ease),
		background-color var(--cc-ed-dur-mid, 200ms) var(--cc-ed-ease, ease),
		color var(--cc-ed-dur-mid, 200ms) var(--cc-ed-ease, ease);
}

.cc-instructor-dashboard .cc-action-cta__icon {
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1;
}

.cc-instructor-dashboard .cc-action-cta__label {
	font-family: var(--cc-font-display);
	font-size: var(--cc-fs-h4, clamp(18px, 2.4vw, 24px));
	font-weight: 700;
	line-height: var(--cc-lh-tight, 1.2);
}

.cc-instructor-dashboard .cc-action-cta__sub {
	font-family: var(--cc-font-body);
	font-size: var(--cc-fs-sm, 14px);
	line-height: var(--cc-lh-normal, 1.55);
	opacity: 0.85;
}

/* Primary — saffron fill, cream text */
.cc-instructor-dashboard .cc-action-cta--primary {
	background: var(--cc-ed-saffron, #E8492C);
	color: var(--cc-ed-bg, #FAF7F2);
}

.cc-instructor-dashboard .cc-action-cta--primary:hover {
	background: var(--cc-ed-saffron-warm, #D1421F);
	transform: translateY(-2px);
	box-shadow: var(--cc-ed-shadow-hover, 0 4px 8px rgba(14, 14, 14, 0.08), 0 24px 48px -20px rgba(14, 14, 14, 0.18));
	color: var(--cc-ed-bg, #FAF7F2);
}

/* Accent (Zoom) — ghost, paper-rule border, saffron text; fills on hover */
.cc-instructor-dashboard .cc-action-cta--accent {
	background: transparent;
	color: var(--cc-ed-saffron, #E8492C);
	border-color: var(--cc-ed-paper-rule, #E5DDD0);
	box-shadow: var(--cc-ed-shadow-paper, 0 1px 0 #EFEAE0);
}

.cc-instructor-dashboard .cc-action-cta--accent:hover {
	background: var(--cc-ed-saffron, #E8492C);
	color: var(--cc-ed-bg, #FAF7F2);
	transform: translateY(-2px);
	border-color: var(--cc-ed-saffron, #E8492C);
	box-shadow: var(--cc-ed-shadow-hover, 0 4px 8px rgba(14, 14, 14, 0.08), 0 24px 48px -20px rgba(14, 14, 14, 0.18));
}

.cc-instructor-dashboard .cc-action-cta:focus-visible {
	outline: none;
	box-shadow: var(--cc-ed-shadow-focus, 0 0 0 3px rgba(232, 73, 44, 0.35));
}

/* ============================================================
 * 4. Legacy action cards (cc-action-card) — hide on root
 * ============================================================
 * The welcome strip partial renders its own .cc-action-card pair.
 * The dashboard root also renders .cc-action-cta-row with the same
 * two actions. Hide the legacy pair to remove duplication; the
 * editorial CTA row is the binding spec element.
 */
.cc-instructor-dashboard .cc-instructor-welcome .cc-instructor-actions {
	display: none;
}

/* ============================================================
 * 5. Stat cards grid — 4-up desktop, 2x2 tablet, 1-up mobile
 * ============================================================ */
.cc-instructor-dashboard .cc-instructor-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cc-ed-sp-5, 24px);
	margin-block-end: var(--cc-ed-sp-7, 48px);
}

.cc-instructor-dashboard .cc-stat-card {
	display: flex;
	flex-direction: column;
	gap: var(--cc-ed-sp-3, 12px);
	padding-block: var(--cc-ed-sp-card-pad-y, clamp(24px, 3vw, 40px));
	padding-inline: var(--cc-ed-sp-card-pad-x, clamp(20px, 2.5vw, 36px));
	background: var(--cc-ed-bg-tint, #FFFCF5);
	border: 1px solid var(--cc-ed-paper-rule, #E5DDD0);
	border-radius: var(--cc-ed-radius-md, 12px);
	box-shadow: var(--cc-ed-shadow-card, 0 1px 2px rgba(14, 14, 14, 0.06), 0 12px 24px -16px rgba(14, 14, 14, 0.12));
	position: relative;
	transition:
		transform var(--cc-ed-dur-mid, 200ms) var(--cc-ed-ease, ease),
		box-shadow var(--cc-ed-dur-mid, 200ms) var(--cc-ed-ease, ease);
}

.cc-instructor-dashboard .cc-stat-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--cc-ed-shadow-hover, 0 4px 8px rgba(14, 14, 14, 0.08), 0 24px 48px -20px rgba(14, 14, 14, 0.18));
}

/* Saffron underline beneath the numeral on hover */
.cc-instructor-dashboard .cc-stat-card::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: var(--cc-ed-sp-card-pad-x, 24px);
	inset-inline-end: var(--cc-ed-sp-card-pad-x, 24px);
	height: 2px;
	background: var(--cc-ed-saffron, #E8492C);
	transform: scaleX(0);
	transform-origin: inline-start;
	transition: transform var(--cc-ed-dur-mid, 200ms) var(--cc-ed-ease, ease);
}

.cc-instructor-dashboard .cc-stat-card:hover::after {
	transform: scaleX(1);
}

.cc-instructor-dashboard .cc-stat-card__label {
	font-family: var(--cc-font-body);
	font-size: var(--cc-fs-sm, 14px);
	font-weight: 700;
	letter-spacing: var(--cc-tracking-eyebrow, 0.18em);
	text-transform: uppercase;
	color: var(--cc-ed-muted, #6B6657);
	line-height: var(--cc-lh-tight, 1.2);
	margin-block-end: 0;
}

.cc-instructor-dashboard .cc-stat-card__value {
	font-family: var(--cc-font-display);
	font-size: var(--cc-fs-stat, clamp(48px, 8vw, 96px));
	font-weight: 900;
	line-height: var(--cc-lh-display, 1.05);
	letter-spacing: var(--cc-tracking-tight, -0.02em);
	color: var(--cc-ed-ink, #0E0E0E);
	font-feature-settings: "lnum", "tnum";
	font-variant-numeric: tabular-nums lining-nums;
}

.cc-instructor-dashboard .cc-stat-card__value bdi.cc-num,
.cc-instructor-dashboard .cc-stat-card__value .cc-num {
	font-feature-settings: "lnum", "tnum";
	font-variant-numeric: tabular-nums lining-nums;
	unicode-bidi: isolate;
}

.cc-instructor-dashboard .cc-stat-card__breakdown {
	font-family: var(--cc-font-body);
	font-size: var(--cc-fs-xs, 12px);
	line-height: var(--cc-lh-loose, 1.75);
	color: var(--cc-ed-muted, #6B6657);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-instructor-dashboard .cc-stat-card__breakdown li {
	display: flex;
	justify-content: space-between;
	gap: var(--cc-ed-sp-2, 8px);
	padding-block: var(--cc-ed-sp-1, 4px);
	border-block-end: 1px dashed var(--cc-ed-paper-rule-soft, #EFEAE0);
}

.cc-instructor-dashboard .cc-stat-card__breakdown li:last-child {
	border-block-end: 0;
}

.cc-instructor-dashboard .cc-stat-card__breakdown a {
	color: var(--cc-ed-saffron, #E8492C);
	text-decoration: none;
	font-weight: 700;
}

.cc-instructor-dashboard .cc-stat-card__breakdown a:hover {
	text-decoration: underline;
}

/* ============================================================
 * 6. Tutor LMS widget overrides — editorial surface + paper rule
 * ============================================================ */
.cc-instructor-dashboard .tutor-dashboard,
.cc-instructor-dashboard .tutor-dashboard-content {
	background: var(--cc-ed-bg-tint, #FFFCF5);
	border: 1px solid var(--cc-ed-paper-rule, #E5DDD0);
	border-radius: var(--cc-ed-radius-md, 12px);
	box-shadow: var(--cc-ed-shadow-paper, 0 1px 0 #EFEAE0);
}

.cc-instructor-dashboard .tutor-dashboard-content-inner,
.cc-instructor-dashboard .tutor-dashboard-content > .tutor-fs-7,
.cc-instructor-dashboard .tutor-dashboard-content > div {
	padding-block: var(--cc-ed-sp-card-pad-y, clamp(24px, 3vw, 40px));
	padding-inline: var(--cc-ed-sp-card-pad-x, clamp(20px, 2.5vw, 36px));
}

.cc-instructor-dashboard .tutor-dashboard h3,
.cc-instructor-dashboard .tutor-dashboard h4,
.cc-instructor-dashboard .tutor-dashboard .tutor-h3,
.cc-instructor-dashboard .tutor-dashboard .tutor-h4 {
	font-family: var(--cc-font-display);
	font-weight: 800;
	letter-spacing: var(--cc-tracking-tight, -0.02em);
	line-height: var(--cc-lh-tight, 1.2);
	color: var(--cc-ed-ink, #0E0E0E);
}

/* Earnings / withdrawal tables — paper-rule rows, ink head */
.cc-instructor-dashboard .tutor-dashboard table,
.cc-instructor-dashboard .tutor-table,
.cc-instructor-dashboard table.tutor-table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums lining-nums;
}

.cc-instructor-dashboard .tutor-dashboard table thead,
.cc-instructor-dashboard .tutor-table thead {
	background: var(--cc-ed-ink, #0E0E0E);
	color: var(--cc-ed-bg, #FAF7F2);
}

.cc-instructor-dashboard .tutor-dashboard table th,
.cc-instructor-dashboard .tutor-table th {
	padding-block: var(--cc-ed-sp-3, 12px);
	padding-inline: var(--cc-ed-sp-4, 16px);
	text-align: start;
	font-family: var(--cc-font-body);
	font-size: var(--cc-fs-sm, 14px);
	font-weight: 700;
	letter-spacing: var(--cc-tracking-eyebrow, 0.18em);
	text-transform: uppercase;
}

.cc-instructor-dashboard .tutor-dashboard table td,
.cc-instructor-dashboard .tutor-table td {
	padding-block: var(--cc-ed-sp-3, 12px);
	padding-inline: var(--cc-ed-sp-4, 16px);
	border-block-end: 1px solid var(--cc-ed-paper-rule, #E5DDD0);
	color: var(--cc-ed-ink-soft, #2A2A2A);
}

.cc-instructor-dashboard .tutor-dashboard table tbody tr:last-child td,
.cc-instructor-dashboard .tutor-table tbody tr:last-child td {
	border-block-end: 0;
}

.cc-instructor-dashboard .tutor-dashboard table tbody tr:hover,
.cc-instructor-dashboard .tutor-table tbody tr:hover {
	background: var(--cc-ed-paper-rule-soft, #EFEAE0);
}

/* Buttons inside Tutor widgets — saffron primary, ghost secondary */
.cc-instructor-dashboard .tutor-dashboard .tutor-btn-primary,
.cc-instructor-dashboard .tutor-dashboard .tutor-btn.tutor-btn-primary,
.cc-instructor-dashboard .tutor-dashboard button.tutor-btn-primary {
	background: var(--cc-ed-saffron, #E8492C);
	color: var(--cc-ed-bg, #FAF7F2);
	border: 1px solid var(--cc-ed-saffron, #E8492C);
	border-radius: var(--cc-ed-radius-sm, 8px);
	padding-block: var(--cc-ed-sp-2, 8px);
	padding-inline: var(--cc-ed-sp-4, 16px);
	font-weight: 700;
	transition:
		background-color var(--cc-ed-dur-mid, 200ms) var(--cc-ed-ease, ease),
		border-color var(--cc-ed-dur-mid, 200ms) var(--cc-ed-ease, ease);
}

.cc-instructor-dashboard .tutor-dashboard .tutor-btn-primary:hover {
	background: var(--cc-ed-saffron-warm, #D1421F);
	border-color: var(--cc-ed-saffron-warm, #D1421F);
}

.cc-instructor-dashboard .tutor-dashboard .tutor-btn-secondary,
.cc-instructor-dashboard .tutor-dashboard .tutor-btn.tutor-btn-secondary,
.cc-instructor-dashboard .tutor-dashboard .tutor-btn-outline-primary {
	background: transparent;
	color: var(--cc-ed-saffron, #E8492C);
	border: 1px solid var(--cc-ed-paper-rule, #E5DDD0);
	border-radius: var(--cc-ed-radius-sm, 8px);
	padding-block: var(--cc-ed-sp-2, 8px);
	padding-inline: var(--cc-ed-sp-4, 16px);
	font-weight: 700;
	transition:
		background-color var(--cc-ed-dur-mid, 200ms) var(--cc-ed-ease, ease),
		color var(--cc-ed-dur-mid, 200ms) var(--cc-ed-ease, ease);
}

.cc-instructor-dashboard .tutor-dashboard .tutor-btn-secondary:hover,
.cc-instructor-dashboard .tutor-dashboard .tutor-btn-outline-primary:hover {
	background: var(--cc-ed-saffron, #E8492C);
	color: var(--cc-ed-bg, #FAF7F2);
	border-color: var(--cc-ed-saffron, #E8492C);
}

.cc-instructor-dashboard .tutor-dashboard .tutor-btn:focus-visible,
.cc-instructor-dashboard .tutor-dashboard button:focus-visible {
	outline: none;
	box-shadow: var(--cc-ed-shadow-focus, 0 0 0 3px rgba(232, 73, 44, 0.35));
}

/* Tutor side / top nav menu — paper-rule frame */
.cc-instructor-dashboard .tutor-dashboard-menu,
.cc-instructor-dashboard .tutor-dashboard-left-menu {
	background: var(--cc-ed-bg-tint, #FFFCF5);
	border: 1px solid var(--cc-ed-paper-rule, #E5DDD0);
	border-radius: var(--cc-ed-radius-md, 12px);
	box-shadow: var(--cc-ed-shadow-paper, 0 1px 0 #EFEAE0);
}

.cc-instructor-dashboard .tutor-dashboard-menu a,
.cc-instructor-dashboard .tutor-dashboard-left-menu a {
	color: var(--cc-ed-ink-soft, #2A2A2A);
	transition: color var(--cc-ed-dur-fast, 120ms) var(--cc-ed-ease, ease);
}

.cc-instructor-dashboard .tutor-dashboard-menu a:hover,
.cc-instructor-dashboard .tutor-dashboard-left-menu a:hover,
.cc-instructor-dashboard .tutor-dashboard-menu .active > a,
.cc-instructor-dashboard .tutor-dashboard-left-menu .active > a {
	color: var(--cc-ed-saffron, #E8492C);
}

/* ============================================================
 * 7. Responsive — 768 then 480
 * ============================================================ */
@media (max-width: 768px) {
	.cc-instructor-dashboard .cc-instructor-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cc-instructor-dashboard .cc-action-cta-row {
		flex-direction: column;
	}

	.cc-instructor-dashboard .cc-action-cta {
		flex: 1 1 auto;
		width: 100%;
	}

	.cc-instructor-dashboard .cc-instructor-welcome h1 {
		font-size: var(--cc-fs-h3, clamp(22px, 3vw, 32px));
	}
}

@media (max-width: 480px) {
	.cc-instructor-dashboard .cc-instructor-stats {
		grid-template-columns: 1fr;
	}

	.cc-instructor-dashboard .cc-stat-card__value {
		font-size: clamp(40px, 12vw, 72px);
	}
}

/* ============================================================
 * 8. Reduced motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.cc-instructor-dashboard .cc-action-cta,
	.cc-instructor-dashboard .cc-stat-card,
	.cc-instructor-dashboard .cc-stat-card::after,
	.cc-instructor-dashboard .tutor-dashboard .tutor-btn {
		transition:
			background-color var(--cc-ed-dur-mid, 200ms) var(--cc-ed-ease, ease),
			color var(--cc-ed-dur-mid, 200ms) var(--cc-ed-ease, ease),
			box-shadow var(--cc-ed-dur-mid, 200ms) var(--cc-ed-ease, ease);
	}

	.cc-instructor-dashboard .cc-action-cta:hover,
	.cc-instructor-dashboard .cc-stat-card:hover {
		transform: none;
	}

	.cc-instructor-dashboard .cc-stat-card:hover::after {
		transform: scaleX(0);
	}
}