/* Tutor LMS 4 student dashboard and lesson player, restyled with the theme tokens.
   Tutor 4 draws everything from --tutor-* custom properties, so this file mostly
   re-points those. Templates and Tutor settings are untouched. */

/* Light (default, and "system" on a light OS). (0,2,0) beats Tutor's :root block. */
:root:not([data-tutor-theme="dark"]) {
	--tutor-brand-100: #FBEFEA;
	--tutor-brand-200: #F4DED5;
	--tutor-brand-300: #EBC9BC;
	--tutor-brand-400: #D9937E;
	--tutor-brand-450: #A8341F;
	--tutor-brand-500: #B8432C;
	--tutor-brand-600: #A8341F;
	--tutor-brand-700: #8A2A18;
	--tutor-brand-800: #6E2213;
	--tutor-brand-900: #521A0F;
	--tutor-brand-950: #0B0A08;

	--tutor-surface-base: #E9E3D3;
	--tutor-surface-l1: #F6F2E7;
	--tutor-surface-l1-hover: #EFE9DA;
	--tutor-surface-l2: #DDD5C1;
	--tutor-surface-l2-hover: #CFC6B1;
	--tutor-surface-l3: #EFE9DA;
	--tutor-surface-sidebar-l1: #F6F2E7;
	--tutor-surface-dark: #0B0A08;
	--tutor-surface-brand-dark: #0B0A08;

	--tutor-text-primary: #17140F;
	--tutor-text-secondary: #2C2820;
	--tutor-text-subdued: #655E50;
	--tutor-text-brand: #A8341F;
	--tutor-text-brand-hover: #17140F;

	--tutor-icon-idle: #2C2820;
	--tutor-icon-hover: #17140F;
	--tutor-icon-secondary: #655E50;
	--tutor-icon-subdued: #7D7565;
	--tutor-icon-brand: #A8341F;

	--tutor-border-idle: #CFC6B1;
	--tutor-border-idle2: #DDD5C1;
	--tutor-border-hover: #B5AB93;
	--tutor-border-tertiary: #8F8673;
	--tutor-border-brand: #A8341F;

	--tutor-button-primary: #0B0A08;
	--tutor-button-primary-hover: #A8341F;
	--tutor-button-primary-focused: #0B0A08;
	--tutor-button-primary-disabled: #8F8673;
	--tutor-button-secondary: #DDD5C1;
	--tutor-button-secondary-hover: #CFC6B1;
	--tutor-button-secondary-focused: #DDD5C1;
	--tutor-button-outline-hover: #EFE9DA;
	--tutor-button-ghost-hover: #E3DCCB;

	--tutor-tab-sidebar-l2: #F6F2E7;
	--tutor-tab-sidebar-l2-hover: #EFE9DA;
	--tutor-tab-sidebar-l4-hover: #EFE9DA;
}

/* Dark: only when the student chose it in Tutor's preferences (or "system" on a dark OS).
   Every cool grey and blue Tutor ships for dark mode is re-pointed to the warm ink scale. */
:root[data-tutor-theme="dark"] {
	--tutor-brand-450: #E0664C;
	--tutor-brand-500: #E0664C;
	--tutor-brand-600: #A8341F;
	--tutor-brand-700: #8A2A18;
	--tutor-brand-950: #0B0A08;
	--tutor-surface-base: #0B0A08;
	--tutor-surface-l1: #15130F;
	--tutor-surface-l1-hover: #211E18;
	--tutor-surface-l2: #211E18;
	--tutor-surface-l3: #1A1813;
	--tutor-surface-sidebar-l1: #0B0A08;
	--tutor-text-primary: #F7F3E8;
	--tutor-text-secondary: #E9E3D3;
	--tutor-text-subdued: #A9A08C;
	--tutor-text-brand: #E0664C;
	--tutor-border-idle: rgba(247, 243, 232, .16);
	--tutor-border-idle2: rgba(247, 243, 232, .12);
	--tutor-brand-100: #2A1712;
	--tutor-brand-200: #3A1E16;
	--tutor-brand-300: #6E2213;
	--tutor-brand-400: #D9937E;
	--tutor-brand-800: #6E2213;
	--tutor-brand-900: #521A0F;
	--tutor-surface-l2-hover: #2A261F;
	--tutor-surface-brand-primary: #A8341F;
	--tutor-surface-brand-primary-2: #8A2A18;
	--tutor-surface-brand-secondary: #2A1712;
	--tutor-surface-brand-tertiary: #211E18;
	--tutor-surface-brand-quaternary: #521A0F;
	--tutor-surface-exception2-secondary: #2A261F;
	--tutor-surface-exception7: #521A0F;
	--tutor-surface-dark: #5E574A;
	--tutor-surface-warning: #211E18;
	--tutor-text-disabled: #5E574A;
	--tutor-text-brand-hover: #F08A72;
	--tutor-text-brand-secondary: #D9937E;
	--tutor-text-highlighted-hover: #2A261F;
	--tutor-icon-idle: #E9E3D3;
	--tutor-icon-secondary: #A9A08C;
	--tutor-icon-subdued: #7D7565;
	--tutor-icon-disabled: #5E574A;
	--tutor-icon-brand: #E0664C;
	--tutor-icon-brand-hover: #F08A72;
	--tutor-icon-brand-secondary: #211E18;
	--tutor-button-primary-soft: #2A261F;
	--tutor-button-primary-soft-focused: #2A261F;
	--tutor-button-disabled: #211E18;
	--tutor-button-secondary: #2A261F;
	--tutor-button-secondary-hover: #3A352C;
	--tutor-button-secondary-focused: #2A261F;
	--tutor-button-outline-inverse: #15130F;
	--tutor-button-outline-hover: #2A261F;
	--tutor-button-outline-focused-inverse: #0B0A08;
	--tutor-button-ghost-hover: #2A261F;
	--tutor-border-hover: #5E574A;
	--tutor-border-tertiary: #5E574A;
	--tutor-border-inverse: #2A261F;
	--tutor-border-brand-secondary: #2A261F;
	--tutor-border-dark: #2A261F;
	--tutor-tab-sidebar-l2-hover: #211E18;
	--tutor-tab-sidebar-l2-active: #211E18;
	--tutor-tab-sidebar-l4-hover: #211E18;
	--tutor-tab-sidebar-l4-active: #211E18;
	--tutor-tab-l3: #211E18;
	--tutor-tab-l3-hover: #2A261F;
	--tutor-tab-l3-active: #211E18;
	--tutor-tab-l3-active-hover: #211E18;
	--tutor-actions-brand-secondary: #2A1712;
	--tutor-actions-brand-tertiary: #211E18;
	--tutor-actions-gray-empty: #2A261F;
	--tutor-actions-gray-secondary: #2A261F;
	--tutor-actions-gray-tertiary: #15130F;
	--tutor-actions-gray-quaternary: #0B0A08;
	--tutor-actions-success-tertiary: #2A261F;
	--tutor-actions-warning-secondary: #2A261F;
	--tutor-actions-critical-secondary: #2A261F;
	--tutor-quiz-idle: #211E18;
	--tutor-quiz-hover: #2A261F;
	--tutor-visual-gray-1: #15130F;
	--tutor-visual-gray-2: #2A261F;
	--tutor-visual-gray-3: #5E574A;
	--tutor-visual-brand-1: #A8341F;
	--tutor-visual-brand-2: #8A2A18;
	--tutor-visual-brand-3: #521A0F;
}
@media (prefers-color-scheme: dark) {
	:root[data-tutor-theme="system"] {
		--tutor-brand-450: #E0664C;
		--tutor-brand-500: #E0664C;
		--tutor-brand-600: #A8341F;
		--tutor-brand-700: #8A2A18;
		--tutor-brand-950: #0B0A08;
		--tutor-surface-base: #0B0A08;
		--tutor-surface-l1: #15130F;
		--tutor-surface-l1-hover: #211E18;
		--tutor-surface-l2: #211E18;
		--tutor-surface-l3: #1A1813;
		--tutor-surface-sidebar-l1: #0B0A08;
		--tutor-text-primary: #F7F3E8;
		--tutor-text-secondary: #E9E3D3;
		--tutor-text-subdued: #A9A08C;
		--tutor-text-brand: #E0664C;
		--tutor-border-idle: rgba(247, 243, 232, .16);
		--tutor-border-idle2: rgba(247, 243, 232, .12);
		--tutor-brand-100: #2A1712;
		--tutor-brand-200: #3A1E16;
		--tutor-brand-300: #6E2213;
		--tutor-brand-400: #D9937E;
		--tutor-brand-800: #6E2213;
		--tutor-brand-900: #521A0F;
		--tutor-surface-l2-hover: #2A261F;
		--tutor-surface-brand-primary: #A8341F;
		--tutor-surface-brand-primary-2: #8A2A18;
		--tutor-surface-brand-secondary: #2A1712;
		--tutor-surface-brand-tertiary: #211E18;
		--tutor-surface-brand-quaternary: #521A0F;
		--tutor-surface-exception2-secondary: #2A261F;
		--tutor-surface-exception7: #521A0F;
		--tutor-surface-dark: #5E574A;
		--tutor-surface-warning: #211E18;
		--tutor-text-disabled: #5E574A;
		--tutor-text-brand-hover: #F08A72;
		--tutor-text-brand-secondary: #D9937E;
		--tutor-text-highlighted-hover: #2A261F;
		--tutor-icon-idle: #E9E3D3;
		--tutor-icon-secondary: #A9A08C;
		--tutor-icon-subdued: #7D7565;
		--tutor-icon-disabled: #5E574A;
		--tutor-icon-brand: #E0664C;
		--tutor-icon-brand-hover: #F08A72;
		--tutor-icon-brand-secondary: #211E18;
		--tutor-button-primary-soft: #2A261F;
		--tutor-button-primary-soft-focused: #2A261F;
		--tutor-button-disabled: #211E18;
		--tutor-button-secondary: #2A261F;
		--tutor-button-secondary-hover: #3A352C;
		--tutor-button-secondary-focused: #2A261F;
		--tutor-button-outline-inverse: #15130F;
		--tutor-button-outline-hover: #2A261F;
		--tutor-button-outline-focused-inverse: #0B0A08;
		--tutor-button-ghost-hover: #2A261F;
		--tutor-border-hover: #5E574A;
		--tutor-border-tertiary: #5E574A;
		--tutor-border-inverse: #2A261F;
		--tutor-border-brand-secondary: #2A261F;
		--tutor-border-dark: #2A261F;
		--tutor-tab-sidebar-l2-hover: #211E18;
		--tutor-tab-sidebar-l2-active: #211E18;
		--tutor-tab-sidebar-l4-hover: #211E18;
		--tutor-tab-sidebar-l4-active: #211E18;
		--tutor-tab-l3: #211E18;
		--tutor-tab-l3-hover: #2A261F;
		--tutor-tab-l3-active: #211E18;
		--tutor-tab-l3-active-hover: #211E18;
		--tutor-actions-brand-secondary: #2A1712;
		--tutor-actions-brand-tertiary: #211E18;
		--tutor-actions-gray-empty: #2A261F;
		--tutor-actions-gray-secondary: #2A261F;
		--tutor-actions-gray-tertiary: #15130F;
		--tutor-actions-gray-quaternary: #0B0A08;
		--tutor-actions-success-tertiary: #2A261F;
		--tutor-actions-warning-secondary: #2A261F;
		--tutor-actions-critical-secondary: #2A261F;
		--tutor-quiz-idle: #211E18;
		--tutor-quiz-hover: #2A261F;
		--tutor-visual-gray-1: #15130F;
		--tutor-visual-gray-2: #2A261F;
		--tutor-visual-gray-3: #5E574A;
		--tutor-visual-brand-1: #A8341F;
		--tutor-visual-brand-2: #8A2A18;
		--tutor-visual-brand-3: #521A0F;
	}
}

/* Type and shape, both modes. */
:root {
	--tutor-font-family-body: "Hind Siliguri", "Inter Tight", system-ui, sans-serif;
	--tutor-font-family-heading: "Hind Siliguri", "Inter Tight", system-ui, sans-serif;
	--tutor-toast-font: "Hind Siliguri", "Inter Tight", system-ui, sans-serif;
	--tutor-button-radius: 999px;
	--tutor-input-radius: 10px;
}
body.tutor-lms { background: var(--tutor-surface-base); }

/* Focus: one visible ring everywhere, in the theme colour. */
.tutor-dashboard-layout :focus-visible,
.tutor-learning-area :focus-visible,
.tutor-modal :focus-visible,
.tutor-popover :focus-visible {
	outline: 3px solid var(--tutor-brand-450) !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

/* Numbers (stats, progress, prices) in Inter Tight. */
.tutor-dashboard-layout .tutor-h1,
.tutor-dashboard-layout .tutor-h2,
.tutor-dashboard-layout .tutor-h3,
.tutor-learning-progress-text,
.tutor-learning-nav-header-progress { font-variant-numeric: tabular-nums; }

/* Page titles get the serif, as on the rest of the site. */
.tutor-dashboard-header-left .tutor-h5,
.tutor-learning-header-title {
	font-family: "Tiro Bangla", "Instrument Serif", serif !important;
	font-weight: 400 !important;
	letter-spacing: 0;
}
.tutor-dashboard-header-left .tutor-h5 { font-size: 24px; line-height: 1.3; }

/* Cards and buttons: the theme's 12px card radius. */
.tutor-dashboard-layout .tutor-rounded-2xl,
.tutor-dashboard-layout .tutor-card,
.tutor-learning-area .tutor-rounded-2xl { border-radius: 12px; }

/* The ~26px sideways scroll (and the cropped logo) came from the dashboard page's
   Elementor page setting: body.elementor-page-<id> { margin: -26px }. Reset it here
   (and per page id from inc/learning.php). The grid column also gets minmax(0, 1fr)
   so a wide child can never push the page out again. */
html body.tutor-screen-frontend-dashboard { margin: 0; padding: 0; }
@media (min-width: 769px) {
	.tutor-dashboard-layout { grid-template-columns: 274px minmax(0, 1fr); }
}
.tutor-dashboard-main, .tutor-dashboard-body, .tutor-dashboard-page { min-width: 0; }

/* Logo in the sidebar: keep it whole. */
.tutor-dashboard-sidebar-logo img { max-height: 40px; width: auto; object-fit: contain; }
/* No dark logo is set in Tutor, so dark mode reuses the light one (black wordmark,
   invisible on ink). Invert it back to light; the hue turn keeps the red mark red.
   Keyed to that file so a real dark logo, once uploaded, is left alone. */
.tutor-brand-logo-dark img[src*="cropped-NShamimPRO"] { filter: invert(1) hue-rotate(180deg); }

/* Lesson player. */
.tutor-lesson-content { font-size: 17px; line-height: 1.8; }
.tutor-lesson-content h2, .tutor-lesson-content h3 { font-family: "Tiro Bangla", "Instrument Serif", serif; font-weight: 400; }
.tutor-learning-nav-item a, .tutor-learning-nav-item { line-height: 1.5; }
.tutor-learning-sidebar .tutor-learning-nav-item [class*="title"] { white-space: normal; overflow: visible; text-overflow: clip; }

@media (max-width: 768px) {
	/* Bigger tap targets in the curriculum and footer bar. */
	.tutor-learning-nav-item > a,
	.tutor-learning-nav-item > div { min-height: 48px; }
	.tutor-learning-area-footer .tutor-btn,
	.tutor-learning-header .tutor-btn { min-height: 44px; min-width: 44px; }
	/* Video full bleed, text with a comfortable gutter. */
	.tutor-lesson-video-wrapper { margin-inline: 0; border-radius: 0; }
	.tutor-lesson-content { font-size: 16.5px; padding-inline: 16px; }
	.tutor-tabs-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.tutor-tabs-nav::-webkit-scrollbar { display: none; }
	.tutor-learning-header-title { font-size: 17px !important; line-height: 1.35; }
}