/**
 * EmDash Admin Styles
 *
 * Uses Kumo's semantic token system exclusively (no shadcn/ui tokens).
 *
 * Theme system:
 * - Kumo uses data-mode="dark"/"light" for dark mode (color-scheme + component variants)
 * - User preference stored in localStorage, applied via data-mode attribute on <html>
 */

@import "tailwindcss";
@import "@cloudflare/kumo/styles/tailwind";
@plugin "@tailwindcss/typography";

/* Scan Kumo component JS for Tailwind utility classes (e.g. Dialog centering) */
@source "../node_modules/@cloudflare/kumo/dist";

/* Map Tailwind dark: variant to kumo's data-mode attribute */
@custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));

/*
 * ThemeProvider always sets data-mode to the resolved preference ("light" or "dark"),
 * so Tailwind dark: utilities (mapped to [data-mode="dark"]) activate correctly
 * for both explicit and system-preference themes.
 */

/**
 * Classic theme token overrides
 * Overrides kumo CSS custom properties with classic CMS admin values.
 * Applied via data-theme="classic" on <html> so portals inherit too.
 */
[data-theme="classic"] {
	/* Primary brand blue */
	--color-kumo-brand: #2271b1;
	--color-kumo-brand-hover: #135e96;
	--text-color-kumo-brand: #2271b1;
}

[data-theme="classic"]:not([data-mode="dark"]) {
	/* Surfaces */
	--color-kumo-base: #ffffff;
	--color-kumo-elevated: #f0f0f1;
	--color-kumo-recessed: #dcdcde;
	--color-kumo-overlay: #ffffff;
	--color-kumo-control: #ffffff;
	--color-kumo-tint: #f0f0f1;
	--color-kumo-fill: #dcdcde;
	--color-kumo-fill-hover: #c3c4c7;
	--color-kumo-contrast: #1d2327;
	--color-kumo-interact: #c3c4c7;

	/* Borders */
	--color-kumo-line: #c3c4c7;
	--color-kumo-ring: #2271b1;

	/* Text hierarchy */
	--text-color-kumo-default: #1d2327;
	--text-color-kumo-strong: #50575e;
	--text-color-kumo-subtle: #787c82;
	--text-color-kumo-inactive: #a7aaad;
	--text-color-kumo-link: #2271b1;

	/* Semantic colors */
	--color-kumo-info: #72aee6;
	--color-kumo-info-tint: #e7f4fe;
	--color-kumo-success: #00a32a;
	--color-kumo-success-tint: #edfaef;
	--color-kumo-warning: #dba617;
	--color-kumo-warning-tint: #fcf9e8;
	--color-kumo-danger: #d63638;
	--color-kumo-danger-tint: #fcf0f1;
	--text-color-kumo-success: #00a32a;
	--text-color-kumo-danger: #d63638;
	--text-color-kumo-warning: #dba617;
}

/**
 * Admin font stack
 *
 * --font-emdash is set by the Astro Font API (Noto Sans by default).
 * To add extra script coverage (Arabic, CJK, etc.), configure EmDash with
 * emdash({ fonts: { scripts: [...] } }) rather than adding another font entry
 * that targets --font-emdash. If you need to supply your own font entry and
 * CSS variable instead, disable EmDash-managed fonts first with fonts: false.
 *
 * Override Tailwind's --font-sans so all font-sans utilities use it.
 */
@theme {
	--font-sans: var(
		--font-emdash,
		ui-sans-serif,
		system-ui,
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Segoe UI Symbol",
		"Noto Color Emoji"
	);
}

/* Base styles */
* {
	border-color: var(--color-kumo-line);
}

body {
	background-color: var(--color-kumo-elevated);
	color: var(--text-color-kumo-default);
}

/* Fix text selection contrast */
::selection {
	background-color: var(--color-kumo-interact);
	color: var(--text-color-kumo-default);
}

/**
 * Editor-specific prose overrides
 */

/* Remove decorative backticks from inline code in editor */
.prose code::before,
.prose code::after {
	content: none !important;
}

/* Tighter list spacing for editor */
.prose li {
	margin-top: 0.25em !important;
	margin-bottom: 0.25em !important;
}

.prose li p {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/**
 * Prose typography colors — uses kumo token vars so theme overrides flow through.
 */
.prose {
	--tw-prose-body: var(--text-color-kumo-default);
	--tw-prose-headings: var(--text-color-kumo-default);
	--tw-prose-links: var(--text-color-kumo-link);
	--tw-prose-bold: var(--text-color-kumo-default);
	--tw-prose-counters: var(--text-color-kumo-subtle);
	--tw-prose-bullets: var(--text-color-kumo-subtle);
	--tw-prose-hr: var(--color-kumo-line);
	--tw-prose-quotes: var(--text-color-kumo-default);
	--tw-prose-quote-borders: var(--color-kumo-line);
	--tw-prose-code: var(--text-color-kumo-default);
	--tw-prose-pre-code: var(--text-color-kumo-subtle);
	--tw-prose-pre-bg: var(--color-kumo-contrast);
}

/**
 * TipTap placeholder styles
 */
.tiptap p.is-empty::before {
	color: var(--text-color-kumo-subtle);
	content: attr(data-placeholder);
	float: left;
	height: 0;
	pointer-events: none;
}

/**
 * Spotlight mode dims non-focused blocks in the editor
 */
.spotlight-mode .ProseMirror > *:not(.has-focus) {
	opacity: 0.3;
	transition: opacity 0.2s ease;
}

.spotlight-mode .ProseMirror > .has-focus {
	opacity: 1;
	transition: opacity 0.2s ease;
}

/* Add left padding to accommodate block handles */
.ProseMirror {
	padding-left: 2.5rem;
}

/* Block dragging styles */
.ProseMirror .dragging {
	opacity: 0.5;
}

/* Drop cursor styling - auto-fade to handle cleanup issues */
.ProseMirror-dropcursor {
	border-color: #3b82f6 !important;
	border-width: 2px !important;
	animation: dropcursor-fade 2s forwards;
}

@keyframes dropcursor-fade {
	0%,
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*
 * Reduce margins in editor to minimize drag preview offset.
 */
.ProseMirror.prose > h1 {
	margin-top: 0.5em !important;
	margin-bottom: 0.5em !important;
}

.ProseMirror.prose > h2 {
	margin-top: 0.4em !important;
	margin-bottom: 0.4em !important;
}

.ProseMirror.prose > h3 {
	margin-top: 0.3em !important;
	margin-bottom: 0.3em !important;
}

.ProseMirror.prose > p {
	margin-top: 0.25em !important;
	margin-bottom: 0.25em !important;
}

.ProseMirror.prose > *:first-child {
	margin-top: 0 !important;
}

/**
 * Prevent dialogs from overflowing the viewport on small screens.
 * Kumo's size variants set min-width (e.g. min-w-[32rem] for "lg")
 * which overrides max-width in CSS. We need to cap min-width too.
 */
@media (max-width: 639px) {
	[role="dialog"] {
		min-width: 0 !important;
		max-width: calc(100vw - 2rem);
	}
}

/**
 * Isolate the admin root's stacking context.
 */
#admin-root {
	isolation: isolate;
}

/**
 * Kumo toast viewport renders at z-10, but modals use z-modal (z-index: 9999).
 * Override so toasts appear above modals.
 */
[role="region"][aria-label="Notifications"] {
	z-index: 10000 !important;
}
