/* GarmentFlow's look for the LMS.

   Injected into the LMS's own page by lms_theme.after_request, after the LMS's
   stylesheet, so every colour here is a --gf-* token and dark mode comes with
   them. The LMS's frappe-ui switches theme with html[data-theme], the same
   attribute the tokens key off.

   Safe by construction: this re-points frappe-ui's own CSS variables and
   re-colours a handful of its utility classes. It moves nothing, hides nothing
   and adds no layout of its own beyond the back bar, so an LMS upgrade can at
   worst make a colour fall back to the LMS's default.

   frappe-ui has two generations of token names and the LMS may be built with
   either, so both are covered: v1 (surface-white, surface-menu-bar, solid
   buttons on surface-gray-7) and v2 "espresso" (surface-base, surface-sidebar,
   solid buttons on surface-gray-10). */

/* ── The dashboard's tokens ────────────────────────────────────────────────
   A verbatim copy of portal/src/styles/tokens.css from `:root {` down, so the LMS
   is drawn in exactly the dashboard's colours. (gf_tokens.bundle.css is the Desk's
   older palette, without the sky callout, so it cannot stand in.)
   tests/test_learn.py fails if the two drift apart: change the dashboard's file,
   then paste it here. */

:root {
	/* Surfaces — cool, clean neutrals so the sky callout reads as the only colour. */
	--gf-bg:            #ffffff;
	--gf-bg-subtle:     #f7fafd;
	--gf-bg-muted:      #f3f8fc;
	--gf-bg-hover:      #eef2f6;

	/* Text — body copy is dark enough to read at a glance, not decorative grey. */
	--gf-text:          #1b2230;
	--gf-text-strong:   #0a0d14;
	--gf-text-muted:    #4a5566;
	--gf-text-faint:    #6b7686;

	/* Borders */
	--gf-border:        #e2e7ee;
	--gf-border-light:  #edf1f5;
	--gf-border-strong: #c9d1dc;

	/* Callout — sky blue. The one colour that says "look here": primary buttons,
	   the active page, links, the numbers that matter. `--gf-accent` is the same
	   hue a step darker, for text and links on white, where sky itself is too pale. */
	--gf-pop:           #0ea5e9;
	--gf-pop-bright:    #38bdf8;
	--gf-pop-strong:    #0284c7;
	--gf-pop-soft:      rgba(14, 165, 233, 0.12);
	--gf-pop-glow:      rgba(56, 189, 248, 0.45);
	--gf-on-pop:        #04111c;
	--gf-accent:        #0277b6;
	--gf-accent-soft:   rgba(14, 165, 233, 0.12);

	/* Kept for the few places that mean something else: a batch, a group. */
	--gf-batch:         #0ea5e9;
	--gf-batch-soft:    rgba(14, 165, 233, 0.12);
	--gf-group:         #7c3aed;
	--gf-group-soft:    rgba(124, 58, 237, 0.10);

	/* Status */
	--gf-success:       #059669;
	--gf-success-soft:  rgba(5, 150, 105, 0.10);
	--gf-warning:       #c2410c;
	--gf-warning-soft:  rgba(234, 88, 12, 0.10);
	--gf-danger:        #dc2626;
	--gf-danger-soft:   rgba(220, 38, 38, 0.09);

	/* Elevation — soft, so cards sit on the page rather than float off it. */
	--gf-shadow-sm:     0 1px 2px rgba(15, 23, 42, 0.05);
	--gf-shadow-md:     0 6px 20px -6px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.04);
	--gf-shadow-lg:     0 24px 48px -16px rgba(15, 23, 42, 0.22), 0 4px 10px rgba(15, 23, 42, 0.05);

	/* Ink — near-black, for the few dark buttons and the header band. */
	--gf-ink:           #0a0d14;
	--gf-ink-hover:     #1f2633;
	--gf-on-ink:        #ffffff;

	/* Hero — a deep band in both themes; its text is fixed light on dark. */
	--gf-hero-bg:       #0a0f17;
	--gf-hero-raised:   rgba(255, 255, 255, 0.07);
	--gf-hero-text:     #f8fafc;
	--gf-hero-muted:    #a6b0c0;
	--gf-hero-border:   rgba(255, 255, 255, 0.12);

	/* Glass — the sticky topbar, over scrolling content. */
	--gf-glass:         rgba(255, 255, 255, 0.85);
	--gf-scrim:         rgba(10, 13, 20, 0.5);

	--gf-ease:          cubic-bezier(0.2, 0.8, 0.2, 1);

	/* Shape */
	--gf-radius-card:    14px;
	--gf-radius-lg:      20px;
	--gf-radius-control: 10px;
	--gf-radius-pill:    999px;

	/* Type — one modern sans for everything. Hierarchy comes from size and weight,
	   not from a second, bookish face. */
	--gf-font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
	--gf-font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--gf-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Dark — deep neutrals, the same sky a step brighter so it keeps its punch. Applied
   when the site says so, or when the device prefers dark and the site has not
   said otherwise. */
html[data-theme='dark'],
html.dark,
body.dark {
	--gf-bg:            #0f1319;
	--gf-bg-subtle:     #131820;
	--gf-bg-muted:      #0a0d12;
	--gf-bg-hover:      #1a212b;

	--gf-text:          #dfe5ee;
	--gf-text-strong:   #f8fafc;
	--gf-text-muted:    #a3aebd;
	--gf-text-faint:    #7d8898;

	--gf-border:        #232b36;
	--gf-border-light:  #1b222c;
	--gf-border-strong: #334050;

	--gf-pop:           #38bdf8;
	--gf-pop-bright:    #7dd3fc;
	--gf-pop-strong:    #7dd3fc;
	--gf-pop-soft:      rgba(56, 189, 248, 0.14);
	--gf-pop-glow:      rgba(56, 189, 248, 0.40);
	--gf-on-pop:        #04111c;
	--gf-accent:        #7dd3fc;
	--gf-accent-soft:   rgba(56, 189, 248, 0.14);

	--gf-batch:         #38bdf8;
	--gf-batch-soft:    rgba(56, 189, 248, 0.14);
	--gf-group:         #a78bfa;
	--gf-group-soft:    rgba(167, 139, 250, 0.14);

	--gf-success:       #34d399;
	--gf-success-soft:  rgba(52, 211, 153, 0.14);
	--gf-warning:       #fb923c;
	--gf-warning-soft:  rgba(251, 146, 60, 0.14);
	--gf-danger:        #f87171;
	--gf-danger-soft:   rgba(248, 113, 113, 0.14);

	--gf-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.5);
	--gf-shadow-md:     0 8px 24px -8px rgba(0, 0, 0, 0.6);
	--gf-shadow-lg:     0 24px 56px -12px rgba(0, 0, 0, 0.7);

	--gf-ink:           #f8fafc;
	--gf-ink-hover:     #dfe5ee;
	--gf-on-ink:        #0a0d14;

	--gf-hero-bg:       #0a0f17;
	--gf-hero-raised:   rgba(255, 255, 255, 0.07);
	--gf-hero-text:     #f8fafc;
	--gf-hero-muted:    #a6b0c0;
	--gf-hero-border:   rgba(255, 255, 255, 0.12);

	--gf-glass:         rgba(15, 19, 25, 0.82);
	--gf-scrim:         rgba(0, 0, 0, 0.62);
}

/* ── Surfaces, links and focus, through frappe-ui's variables ─────────────────
   :root[data-theme] outranks the LMS's own [data-theme=dark] block, so the
   mapping holds in both themes; the --gf-* values it points at switch instead. */
:root,
:root[data-theme] {
	/* The page: the dashboard's very light blue. */
	--surface-white: var(--gf-bg-muted);
	--surface-base: var(--gf-bg-muted);

	/* The sidebar sits on white, like the dashboard's rail. */
	--surface-menu-bar: var(--gf-bg);
	--surface-sidebar: var(--gf-bg);

	/* Cards and menus stay white, so they read as sheets on the blue page. */
	--surface-cards: var(--gf-bg);
	--surface-elevation-1: var(--gf-bg);

	/* Links and the blue that frappe-ui uses for them. */
	--ink-blue-link: var(--gf-accent);
	--ink-blue-3: var(--gf-accent);

	/* v2 draws its keyboard focus ring from this one variable. */
	--focus-outline-default: 2px solid var(--gf-pop);

	--gf-lms-bar-h: 48px;
}

/* ── Type: Manrope everywhere the LMS set its sans ────────────────────────── */
html,
body,
.font-sans {
	font-family: var(--gf-font-body);
}

/* The canvas itself. Older LMS builds never paint it, so on a phone, where the page
   scrolls rather than a panel, dark mode showed the browser's white beneath it. */
html,
body {
	background-color: var(--gf-bg-muted);
}
html[data-theme="dark"] {
	color-scheme: dark;
}

::selection {
	background: var(--gf-pop-soft);
}

/* Some frappe-ui controls say bg-surface-white and mean "white", not "the page":
   a selected segment, a focused field. Keep those white. */
.\!bg-surface-white,
.\!bg-surface-base {
	background-color: var(--gf-bg) !important;
}
.focus\:bg-surface-white:focus,
.focus\:bg-surface-base:focus {
	background-color: var(--gf-bg);
}

/* ── Primary buttons: sky, with dark ink, as in the dashboard ─────────────── */
:is(button, a).bg-surface-gray-7,
:is(button, a).bg-surface-gray-10 {
	background-color: var(--gf-pop);
	color: var(--gf-on-pop);
	font-weight: 700;
	box-shadow: 0 6px 18px -8px var(--gf-pop-glow);
}
:is(button, a).bg-surface-gray-7:hover:not(:disabled),
:is(button, a).bg-surface-gray-10:hover:not(:disabled) {
	background-color: var(--gf-pop-bright);
}
:is(button, a).bg-surface-gray-7:active:not(:disabled),
:is(button, a).bg-surface-gray-10:active:not(:disabled) {
	background-color: var(--gf-pop-strong);
}

/* ── Links ────────────────────────────────────────────────────────────────── */
.prose {
	--tw-prose-links: var(--gf-accent);
}
.ProseMirror a,
.ce-paragraph a {
	color: var(--gf-accent);
}

/* ── Active states ────────────────────────────────────────────────────────── */
/* The sidebar's current page: a sky wash, like the dashboard's rail. */
:is(.bg-surface-menu-bar, .bg-surface-sidebar) :is(.bg-surface-selected, .bg-surface-elevation-3) {
	background-color: var(--gf-pop-soft);
	color: var(--gf-pop-strong);
	box-shadow: none;
}
:is(.bg-surface-menu-bar, .bg-surface-sidebar) :is(.bg-surface-selected, .bg-surface-elevation-3) :is(svg, span) {
	color: inherit;
}

/* Progress bars and checked boxes are the "done" colour. */
[role="progressbar"] > div,
.bg-surface-gray-7[style*="width"],
.bg-surface-gray-10[style*="width"] {
	background-color: var(--gf-pop);
}
input[type="checkbox"]:checked {
	background-color: var(--gf-pop);
	border-color: var(--gf-pop);
}

/* ── Focus: one sky ring, for keyboards ───────────────────────────────────── */
:focus-visible {
	outline-color: var(--gf-pop);
}
.focus-visible\:ring-outline-gray-3:focus-visible,
.focus-visible\:ring-outline-gray-4:focus-visible,
.focus-visible\:ring:focus-visible {
	--tw-ring-color: var(--gf-pop);
}
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible,
.focus\:border-outline-gray-4:focus {
	border-color: var(--gf-pop);
}

/* ── The way back: a thin bar above the LMS ───────────────────────────────── */
.gf-lms-bar {
	position: sticky;
	top: 0;
	z-index: 60;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: var(--gf-lms-bar-h);
	padding: 0 max(12px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
	background: var(--gf-bg);
	border-bottom: 1px solid var(--gf-border);
	font-family: var(--gf-font-body);
	font-size: 14.5px;
	line-height: 1.2;
	color: var(--gf-text);
}
.gf-lms-bar__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	min-height: 44px;
	padding: 0 10px;
	border-radius: var(--gf-radius-control);
	font-weight: 700;
	color: var(--gf-pop-strong);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.16s var(--gf-ease);
}
.gf-lms-bar__back span {
	overflow: hidden;
	text-overflow: ellipsis;
}
.gf-lms-bar__back:hover {
	background: var(--gf-pop-soft);
	text-decoration: none;
}
.gf-lms-bar__back:focus-visible {
	outline: 2px solid var(--gf-pop);
	outline-offset: 2px;
}
.gf-lms-bar__back svg {
	flex: none;
}
.gf-lms-bar__brand {
	flex: none;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--gf-text-strong);
	white-space: nowrap;
}
.gf-lms-bar__brand b {
	font-weight: 800;
	color: var(--gf-pop-strong);
}

/* The LMS fills the viewport exactly (h-screen, or h-dvh in newer builds) and
   scrolls inside itself. Take the bar's height off that, or the page gains a
   second scrollbar 48px long. */
body:has(> .gf-lms-bar) #app > .h-screen {
	height: calc(100vh - var(--gf-lms-bar-h));
}
body:has(> .gf-lms-bar) #app > .h-dvh {
	height: calc(100dvh - var(--gf-lms-bar-h));
}

/* Where the page itself scrolls instead (the older phone layout), the LMS's own
   sticky headers would slide under the bar; they stop just below it. */
body:has(> .gf-lms-bar) #app > :not(.h-screen, .h-dvh) .sticky.top-0 {
	top: var(--gf-lms-bar-h);
}

@media (max-width: 380px) {
	.gf-lms-bar__brand {
		font-size: 13.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gf-lms-bar__back {
		transition: none;
	}
}