/**
 * AutoFresh brand skin for Tutor LMS 4.0 native UI
 * Rebrands Tutor's default blue design tokens to the AutoFresh identity:
 *   - navy  #182f57  -> structural accent (links, active nav, progress, focus)
 *   - red   #dd1d25  -> primary action buttons
 *   - font  DM Sans
 * Pure CSS-variable override + light selector touch-ups. No template edits,
 * so it survives Tutor updates.
 */

:root {
	/* --- AutoFresh raw brand --- */
	--af-red: #dd1d25;
	--af-red-hover: #b81820;
	--af-red-tint: #fff0f0;
	--af-navy: #182f57;
	--af-ink: #232323;
	--af-tint: #eef2fa;
	--af-border: #dee0e1;
	--af-muted: #595d7e;

	/* --- Navy ramp mapped onto Tutor's brand scale ---
	   Components read var(--tutor-brand-N, <blue fallback>); defining the
	   scale here overrides every link / active / focus / progress accent. */
	--tutor-brand-50:  #f2f5fa;
	--tutor-brand-100: #e4eaf3;
	--tutor-brand-200: #c4d1e6;
	--tutor-brand-300: #9cb0d2;
	--tutor-brand-400: #6a86b4;
	--tutor-brand-500: #3f5e93;
	--tutor-brand-600: #2a4776;
	--tutor-brand-700: #1e3660;
	--tutor-brand-800: #182f57;
	--tutor-brand-900: #132444;
	--tutor-brand-950: #0d1830;

	/* Semantic brand tokens (navy) */
	--tutor-actions-brand-primary: var(--af-navy);
	--tutor-actions-brand-primary-hover: #21406e;
	--tutor-actions-brand-secondary: var(--tutor-brand-200);
	--tutor-text-brand: var(--af-navy);
	--tutor-text-brand-hover: #21406e;
	--tutor-border-brand: var(--af-navy);

	/* Primary ACTION buttons -> AutoFresh red */
	--tutor-color-primary: var(--af-red);
	--tutor-color-primary-hover: var(--af-red-hover);
	--tutor-button-primary: var(--af-red);
	--tutor-button-primary-hover: var(--af-red-hover);

	/* --- Brand font token override ---
	   Tutor 4.0's native dashboard sets font-family per element as
	   `var(--tutor-font-family-body,"Inter")` (94 rules). Those beat any
	   shell-level rule on specificity, so the greeting/cards/charts were
	   rendering the "Inter" fallback. Defining the tokens here makes every
	   one of those rules resolve to DM Sans automatically. */
	--tutor-font-family-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--tutor-font-family-heading: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Profile avatars: theme navy ----
   Two different avatar systems render the "FS" badge:
   1. New 4.0 dashboard: .tutor-avatar uses --tutor-surface-brand-quaternary
      (light tint, dark text) -> force solid navy + white initials.
   2. Legacy site header (.tutor-header-profile-*): .tutor-avatar uses
      `background:var(--tutor-color-primary)` which this skin maps to brand
      RED (action buttons). That made the top-nav avatar red -> force navy. */
.tutor-dashboard-header-user-avatar .tutor-avatar {
	background-color: var(--af-navy) !important;
}
.tutor-dashboard-header-user-avatar .tutor-avatar-initials {
	color: #fff !important;
}

/* Dropdown chevron next to the dashboard avatar (the site header has one but
   the 4.0 dashboard avatar shipped without a visual affordance). The avatar
   button has overflow:hidden, so add the caret on the flex wrapper instead —
   the popover is out of flow (display:none / position:fixed), so ::after
   lands immediately right of the avatar. */
.tutor-dashboard-header-user {
	gap: 4px;
}
.tutor-dashboard-header-user::after {
	content: "";
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M4%206l4%204%204-4'%20stroke='%23232323'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}
.tutor-header-profile-menu-items .tutor-avatar,
.tutor-header-profile-photo .tutor-avatar,
.tutor-header-profile-submenu .tutor-avatar {
	background: var(--af-navy) !important;
}
/* Legacy initials avatars (`get_tutor_avatar`) everywhere — header, course
   reviews, comments, instructor lists. The visible circle is the
   `.tutor-avatar-text` span, filled with var(--tutor-color-primary) = brand
   RED. Recolor the span globally so every legacy initials badge is navy. */
.tutor-avatar-text {
	background: var(--af-navy) !important;
	color: #fff !important;
}

/* Font: force DM Sans across Tutor front + legacy dashboard shells */
.tutor-wrap,
.tutor-dashboard,
.tutor-course-single,
.tutor-quiz-wrapper,
[class*="tutor-dashboard"],
[class*="tutor-account"] {
	font-family: var(--tutor-font-family-body);
}

/* ---- Responsive typography for the 4.0 dashboard ----
   Tutor's text utilities use fixed rem sizes that don't shrink on small
   screens. Make the headings fluid so the greeting + section titles scale
   down on phones without touching the theme's own type scale.
   Range floor = phone, ceiling = original desktop size. */
.tutor-text-h3 {
	font-size: clamp(1.25rem, 1.05rem + 1vw, 1.5rem);   /* 20 -> 24px */
	line-height: 1.3;
}
.tutor-text-h4 {
	font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem); /* 17 -> 20px */
	line-height: 1.35;
}
/* Dashboard greeting ("Hi, <name>") — h4 utility, give it a touch more range */
.tutor-profile-header-title.tutor-text-h4 {
	font-size: clamp(1.125rem, 0.9rem + 1.1vw, 1.5rem);
	line-height: 1.3;
}

/* Tighten dashboard gutters + stat-card padding on small screens so the
   larger relative text still fits without horizontal overflow. */
@media (max-width: 767px) {
	[class*="tutor-dashboard-home-card"] {
		font-size: 0.8125rem; /* 13px, was 12px caption feel a bit cramped */
	}
	.tutor-dashboard-header-inner {
		gap: 8px;
	}
}

/* ---- Primary buttons: brand red ----
   Only recolor the surface. The legacy skin renders the button label via
   ::before/::after (data-text) with the real text hidden, so DO NOT touch
   `color` here or all three text layers become visible (overlap bug). */
.tutor-btn.tutor-btn-primary,
.tutor-btn-primary {
	background-color: var(--af-red) !important;
	border-color: var(--af-red) !important;
}
.tutor-btn.tutor-btn-primary:hover,
.tutor-btn-primary:hover {
	background-color: var(--af-red-hover) !important;
	border-color: var(--af-red-hover) !important;
}

/* Legacy outline CTAs -> navy (surface only) */
.tutor-btn-outline-primary,
.tutor-btn.tutor-btn-outline-primary {
	border-color: var(--af-navy) !important;
}
.tutor-btn-outline-primary:hover {
	background-color: var(--af-navy) !important;
}

/* ---- Dashboard sidebar: active item -> navy ---- */
.tutor-dashboard-menu-item.active > a,
.tutor-dashboard-menu-item-active > a,
[class*="dashboard"] [aria-current="page"],
[class*="account"] [aria-selected="true"] {
	color: var(--af-navy) !important;
}

/* Headings -> navy */
.tutor-dashboard h1, .tutor-dashboard h2, .tutor-dashboard h3,
.tutor-dashboard h4, .tutor-dashboard h5,
.tutor-course-single h1, .tutor-course-single h2,
.tutor-color-black, .tutor-fs-4, .tutor-fs-5 {
	color: var(--af-navy);
}

/* Links inside tutor -> navy */
.tutor-wrap a:not(.tutor-btn):hover,
.tutor-dashboard a:not(.tutor-btn):hover {
	color: var(--af-navy);
}

/* Progress bars / active fills -> navy */
.tutor-progress-bar span,
.tutor-progress-value {
	background-color: var(--af-navy) !important;
}

/* Selected tab underline / active nav pill tint */
[role="tab"][aria-selected="true"] {
	color: var(--af-navy) !important;
}

/* ==========================================================================
   Address fields (Account tab)
   --------------------------------------------------------------------------
   Tutor 4.0 renders its own selects as Alpine components (tutorSelect), which
   build their options from a JS array. The State/City pair needs a real
   <select> so the existing ada-cities script can repopulate City's <option>s
   when State changes, so those two are native elements wearing .tutor-input.
   This gives them the chevron and spacing Tutor's own inputs have.
   ========================================================================== */
/* The Address block is injected via tutor_profile_edit_input_after, so in the
   DOM it lands last (after Public Profile). All three are direct flex children
   of the account form, so flex `order` moves Address between the Account card
   and Public Profile without touching the DOM (Alpine bindings stay intact).
   Account keeps its implicit order:0. */
form:has(> .ada-address-section) > .ada-address-section {
	order: 1;
}
form:has(> .ada-address-section) > div:has([name="tutor_profile_bio"]) {
	order: 2;
}
/* Certificate Signature (Tutor Pro cert addon, same input_after hook) -> last */
form:has(> .ada-address-section) > div:has([id="tutor_pro_custom_signature_id"]),
form:has(> .ada-address-section) > div:has([name="tutor_pro_custom_signature_id"]) {
	order: 3;
}

select.tutor-input.ada-native-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath d='m5 7.5 5 5 5-5' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 40px;
	cursor: pointer;
}

/* ==========================================================================
   Fix: legacy global `.tutor-btn` skew treatment vs Tutor 4.0's new buttons
   --------------------------------------------------------------------------
   A pre-existing site-wide inline rule turns EVERY .tutor-btn into a fixed
   210x48 skewed parallelogram, hides the real label with `color: transparent`
   and re-renders it from `data-text` via ::before/::after.

   That is the brand treatment for the big CTAs and stays untouched. But 4.0
   added icon-only, outline, soft and filter buttons, which it mangles: forced
   size, skew, an empty data-text layer painted over the content, and — because
   icons stroke with currentColor — invisible icons.

   Telling the two apart:
     - Tutor 4.0 sizes its buttons  -x-small | -small | -medium | -large
     - the legacy templates only use -md | -lg  (15x and 3x respectively)
   Matching on the 4.0 size classes therefore catches every new button whatever
   its variant, and can never touch a legacy CTA.

   Everything below restores Tutor's OWN values (taken from tutor-core.min.css)
   rather than invented ones, so the buttons render exactly as 4.0 intends —
   only the brand colours, which come from the tokens above, differ.
   ========================================================================== */

/* Undo ONLY what the legacy rule imposes. Tutor's own selectors are
   `button.tutor-btn` / `a.tutor-btn` (0,1,1) and
   `button.tutor-btn-x-small:not([class*=tutor-btn-link])` (0,2,1), both of
   which already outrank the legacy `.tutor-btn` (0,1,0). So display, gap,
   align-items, padding and min-height need no help from us — overriding them
   only defeats Tutor's own layout (and its hover-reveal rules).

   These four are not !important in the legacy rule, so plain specificity is
   enough; leaving them un-important lets Tutor's more specific rules — like
   the quiz row's hover swap — still win. */
.tutor-btn:is(
	.tutor-btn-x-small, .tutor-btn-small, .tutor-btn-medium, .tutor-btn-large,
	.tutor-btn-icon, .tutor-btn-outline, .tutor-btn-primary-soft,
	.tutor-btn-destructive-soft, .tutor-btn-ghost-brand, .tutor-btn-brand,
	.tutor-btn-link-gray, .tutor-btn-link-destructive
),
.tutor-btn[x-ref],
.tutor-btn[data-text=""],
.tutor-btn:not([data-text]) {
	transform: none;
	width: auto;
	height: auto;
	overflow: visible;
}

/* The legacy rule DOES mark these !important, so we must match it — restoring
   Tutor's real values, per size, rather than inventing any. */
.tutor-btn:is(
	.tutor-btn-x-small, .tutor-btn-small, .tutor-btn-medium, .tutor-btn-large,
	.tutor-btn-icon, .tutor-btn-outline, .tutor-btn-primary-soft,
	.tutor-btn-destructive-soft, .tutor-btn-ghost-brand, .tutor-btn-brand,
	.tutor-btn-link-gray, .tutor-btn-link-destructive
),
.tutor-btn[x-ref],
.tutor-btn[data-text=""],
.tutor-btn:not([data-text]) {
	border-radius: var(--tutor-button-radius, 6px) !important;
}
.tutor-btn.tutor-btn-x-small {
	line-height: 1.25rem !important;
}
.tutor-btn:is(.tutor-btn-small, .tutor-btn-medium, .tutor-btn-large) {
	line-height: 1.375rem !important;
}
.tutor-btn:is(.tutor-btn-icon)[data-text=""],
.tutor-btn:is(.tutor-btn-icon):not([data-text]) {
	line-height: 1 !important;
}

/* ---- Labels ----
   The legacy rule forces `color: transparent`, which also hides icons that
   stroke with currentColor. Restore each variant's native colour token,
   scoped to the 4.0 set so legacy CTAs keep their transparent+::before setup
   (recolouring those would bring the triple-text overlap back). */
.tutor-btn:is(
	.tutor-btn-x-small, .tutor-btn-small, .tutor-btn-medium, .tutor-btn-large, .tutor-btn-icon
):is(.tutor-btn-secondary, .tutor-btn-ghost, .tutor-btn-outline),
.tutor-btn[data-text=""],
.tutor-btn:not([data-text]) {
	color: var(--tutor-text-primary, var(--af-navy)) !important;
}
.tutor-btn:is(
	.tutor-btn-x-small, .tutor-btn-small, .tutor-btn-medium, .tutor-btn-large, .tutor-btn-icon
).tutor-btn-primary-soft {
	color: var(--tutor-text-brand, var(--af-navy)) !important;
}
.tutor-btn:is(
	.tutor-btn-x-small, .tutor-btn-small, .tutor-btn-medium, .tutor-btn-large, .tutor-btn-icon
).tutor-btn-destructive-soft {
	color: var(--tutor-text-critical, #d92d20) !important;
}
/* Alpine-driven triggers (DropdownFilter's LINK variant renders as a bare
   `tutor-btn tutor-btn-link` with no size class, so nothing above catches it).
   Inner spans carry their own tutor-text-* colours; this just undoes the
   legacy `color: transparent`. */
.tutor-btn[x-ref] {
	color: var(--tutor-text-primary, var(--af-navy)) !important;
}
/* Solid surfaces need the inverse label */
.tutor-btn:is(
	.tutor-btn-x-small, .tutor-btn-small, .tutor-btn-medium, .tutor-btn-large
):is(.tutor-btn-primary, .tutor-btn-brand, .tutor-btn-destructive) {
	color: var(--tutor-text-primary-inverse, #fff) !important;
}

/* Drop the duplicated data-text layers on the 4.0 set.
   `.tutor-btn-loading` is excluded so Tutor's spinner still renders. */
.tutor-btn:is(
	.tutor-btn-x-small, .tutor-btn-small, .tutor-btn-medium, .tutor-btn-large,
	.tutor-btn-icon, .tutor-btn-outline, .tutor-btn-primary-soft,
	.tutor-btn-destructive-soft, .tutor-btn-ghost-brand, .tutor-btn-brand,
	.tutor-btn-link-gray, .tutor-btn-link-destructive
):not(.tutor-btn-loading)::before,
.tutor-btn:is(
	.tutor-btn-x-small, .tutor-btn-small, .tutor-btn-medium, .tutor-btn-large,
	.tutor-btn-icon, .tutor-btn-outline, .tutor-btn-primary-soft,
	.tutor-btn-destructive-soft, .tutor-btn-ghost-brand, .tutor-btn-brand,
	.tutor-btn-link-gray, .tutor-btn-link-destructive
):not(.tutor-btn-loading)::after,
.tutor-btn[x-ref]:not(.tutor-btn-loading)::before,
.tutor-btn[x-ref]:not(.tutor-btn-loading)::after,
.tutor-btn[data-text=""]:not(.tutor-btn-loading)::before,
.tutor-btn[data-text=""]:not(.tutor-btn-loading)::after,
.tutor-btn:not([data-text]):not(.tutor-btn-loading)::before,
.tutor-btn:not([data-text]):not(.tutor-btn-loading)::after {
	content: none !important;
	display: none !important;
}

/* ============================================================
   Dashboard responsiveness (mobile / tablet)
   ============================================================ */

/* Chart canvases (Earnings Over Time, etc.) overflow horizontally: the chart
   is a flex child (flex:1) and its canvas has a large intrinsic width, while
   min-width:auto prevents the flex item shrinking below that content width.
   Let the flex items shrink and clamp the canvas so it never exceeds its box. */
.tutor-dashboard-home-chart,
.tutor-dashboard-home-chart .tutor-flex-1,
.tutor-dashboard-home-card,
.tutor-dashboard-home-card > * {
	min-width: 0 !important;
}
.tutor-dashboard canvas,
.tutor-dashboard-home-chart-canvas {
	max-width: 100% !important;
}

/* Global guard: nothing in the dashboard should push the page past the
   viewport width and create a horizontal scrollbar on phones/tablets. */
@media (max-width: 1023px) {
	.tutor-dashboard,
	.tutor-dashboard-content,
	[class*="tutor-dashboard-home"] {
		max-width: 100%;
		overflow-x: hidden;
	}
	/* Any Tutor data table becomes horizontally scrollable inside its own box
	   instead of stretching the page. */
	.tutor-dashboard .tutor-table-responsive,
	.tutor-dashboard .tutor-table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Mobile avatar size fix: a legacy blanket rule
   `@media (max-width:767px){ .tutor-avatar{width:30px;height:30px} }` shrinks
   EVERY avatar to 30px on phones, clobbering the new component's size
   modifiers — the profile header's .tutor-avatar-104 collapsed to 30px while
   its initials overflowed. Re-assert the explicit sizes on small screens. */
@media (max-width: 767px) {
	.tutor-avatar-20  { width: 20px  !important; height: 20px  !important; }
	.tutor-avatar-24  { width: 24px  !important; height: 24px  !important; }
	.tutor-avatar-32  { width: 32px  !important; height: 32px  !important; }
	.tutor-avatar-40  { width: 40px  !important; height: 40px  !important; }
	.tutor-avatar-48  { width: 48px  !important; height: 48px  !important; }
	.tutor-avatar-64  { width: 64px  !important; height: 64px  !important; }
	.tutor-avatar-80  { width: 80px  !important; height: 80px  !important; }
	.tutor-avatar-104 { width: 104px !important; height: 104px !important; }
}

/* Profile photo upload rules hint (injected by af-profile-photo.js under the
   account-settings avatar). Uses Tutor's own type/colour tokens so it matches
   the surrounding form help text. */
/* The avatar itself is centred (.tutor-account-avatar-wrapper is a centred
   flex row), so the caption is centred under it at every width. */
.af-avatar-hint {
	margin: 10px auto 0;
	max-width: 340px;
	font-family: var(--tutor-font-family-body);
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	color: var(--tutor-color-subdued, #5b616f);
}

@media (max-width: 767px) {
	.af-avatar-hint {
		max-width: 100%;
	}
}