/* ============================================================================
   AZOPSOFT theme for jspaint
   1. Map jspaint CSS variables to our --c0..--cf theme colors
   2. Layout for the embedded jspaint container
   All jspaint CSS files are scoped to .panel-area / .window / .os-window,
   so they cannot affect the bucket panel or other site UI.
   ============================================================================ */

/* ---- CSS variable mapping (global :root, so jspaint windows on body also get them) ----
   NOTE: jspaint's theme.js dynamically loads dark.css → classic.css → vista-esque-midnight-green.css
   which sets --ButtonFace, --Window, etc. on :root. We use !important to ensure our
   AZOPSOFT theme colors always take precedence over jspaint's default theme colors. */
:root {
	/* Re-assert our theme colors with !important to beat windows-98.css :root rules */
	--AppWorkspace: var(--c0) !important;
	--Background: var(--c0) !important;
	--ButtonFace: var(--c2) !important;
	--ButtonAlternateFace: var(--c3) !important;
	--ButtonLight: var(--c3) !important;
	--ButtonShadow: var(--c4) !important;
	--ButtonDkShadow: var(--c0) !important;
	--ButtonHilight: var(--c5) !important;
	--ButtonText: var(--cf) !important;
	--WindowText: var(--cf) !important;
	--Window: var(--c1) !important;
	--WindowFrame: var(--c0) !important;
	--ActiveBorder: var(--c3) !important;
	--InactiveBorder: var(--c3) !important;
	--ActiveTitle: var(--c4) !important;
	--InactiveTitle: var(--c3) !important;
	--TitleText: var(--cf) !important;
	--InactiveTitleText: var(--c9) !important;
	--Menu: var(--c2) !important;
	--MenuText: var(--cf) !important;
	--Scrollbar: var(--c2) !important;
	--GrayText: var(--c6) !important;
	--InfoText: var(--cf) !important;
	--InfoWindow: var(--c1) !important;
	--Hilight: var(--c5) !important;
	--HilightText: var(--cf) !important;
	--HotTrackingColor: var(--cf) !important;
	--GradientActiveTitle: var(--c4) !important;
	--GradientInactiveTitle: var(--c3) !important;
	--canvas-area-background-color: var(--c0) !important;
	--canvas-area-border-color: var(--c0) !important;
	--checker: var(--c8) !important;
	color-scheme: dark !important;
}

/* ---- Protect nav/logo from jspaint's global CSS ----
   jspaint's layout.css sets html, body { overflow: hidden } and other
   global rules. Ensure the nav and logo are unaffected. */
nav .logo_azop,
#logo {
	image-rendering: auto !important;
	filter: none !important;
	opacity: 1 !important;
}

/* ---- jspaint container layout ---- */
#jspaint-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--c0);
	display: flex;
	flex-direction: column;
}

#jspaint-container .jspaint {
	flex: 1;
}

/* ---- Hide jspaint extras when embedded ---- */
.grinch-button,
.news-indicator {
	display: none !important;
}

/* ---- Ensure jspaint windows appear above bucket panel ---- */
.window,
.os-window {
	z-index: 100000;
}

/* ---- Tool icons: use dark theme variants (pre-colorization handles the rest) ---- */
.tool-icon {
	background-image: url("/jspaint/images/dark/tools.png") !important;
	background-repeat: no-repeat;
	background-position: calc(-16px * var(--icon-index)) 0;
}
.tool-icon.use-svg {
	background-image: url("/jspaint/images/dark/tools.svg") !important;
	background-position: calc(-16px * (var(--icon-index) * 2 + 1)) -16px;
}

/* ---- Image colorization is handled by colorize-images.js ----
   The JS module intercepts Image.src and CSS background-image for known
   jspaint image paths, replacing them with pre-colorized data URLs that
   use the --cf theme color. No CSS filter hacks needed here.

   Exception: transparent-mode-option uses dark/options-transparency.png
   which is already dark-theme adapted (multi-colored, can't colorize). */
.transparent-mode-option {
	background-image: url("/jspaint/images/dark/options-transparency.png") !important;
}
.transparent-mode-option.use-svg {
	background-image: url("/jspaint/images/dark/options-transparency.svg") !important;
}

/* Floating undo button & eye-gaze icons: use dark variants */
.floating-undo-button .button-icon {
	background-image: url("/jspaint/images/dark/undo.svg") !important;
}
.toggle-dwell-clicking .button-icon {
	background-image: url("/jspaint/images/dark/eye-gaze-pause.svg") !important;
}

/* ---- Theme radio buttons & checkboxes in jspaint dialogs ----
   98.css uses hardcoded SVG data URIs with 3D bevel colors (gray/black/white)
   for radio borders and black for the checked dot/checkmark. We replace them
   with theme-colored versions using --c4 (border) and --cf (fill). */

/* Radio button border: flat themed circle instead of 3D bevel SVG */
:where(.panel-area, .window, .os-window) input[type="radio"] + label::before,
:where(.panel-area, .window, .os-window) input[type="radio"]:active + label::before,
:where(.panel-area, .window, .os-window) input[type="radio"][disabled] + label::before {
	background: var(--c1) !important;
	border: 1px solid var(--c4) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
}

/* Radio checked dot: themed color, centered in the circle.
   The ::before circle has a 1px border, so the dot must account for it.
   Override the dot position to center it precisely. */
:where(.panel-area, .window, .os-window) input[type="radio"]:checked + label::after,
:where(.panel-area, .window, .os-window) input[type="radio"][disabled]:checked + label::after {
	background: var(--cf) !important;
	border-radius: 50% !important;
	top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2 + 1px) !important;
	left: calc(-1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(--radio-dot-width) / 2 + 1px) !important;
}

/* Checkbox border: flat themed instead of 3D box-shadow inset */
:where(.panel-area, .window, .os-window) input[type="checkbox"] + label::before {
	background: var(--c1) !important;
	border: 1px solid var(--c4) !important;
	box-shadow: none !important;
}
:where(.panel-area, .window, .os-window) input[type="checkbox"]:active + label::before,
:where(.panel-area, .window, .os-window) input[type="checkbox"][disabled] + label::before {
	background: var(--c2) !important;
	border: 1px solid var(--c4) !important;
	box-shadow: none !important;
}

/* Checkbox checkmark: themed color instead of black SVG */
:where(.panel-area, .window, .os-window) input[type="checkbox"]:checked + label::after,
:where(.panel-area, .window, .os-window) input[type="checkbox"][disabled]:checked + label::after {
	background: var(--cf) !important;
}

/* Focus outline: themed color instead of black */
:where(.panel-area, .window, .os-window) input[type="radio"]:focus + label,
:where(.panel-area, .window, .os-window) input[type="checkbox"]:focus + label {
	outline: 1px dotted var(--cf) !important;
}

/* ---- Select elements: remove native arrow, add themed one ----
   Without appearance:none the browser's native dropdown arrow overlaps
   the selected text. We use a CSS-drawn arrow instead. */
:where(.panel-area, .window, .os-window) select.inset-deep {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	padding-right: 20px !important;
	background-image: none !important;
	position: relative !important;
}
:where(.panel-area, .window, .os-window) select.inset-deep::after {
	content: "" !important;
	position: absolute !important;
	right: 4px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 0 !important;
	height: 0 !important;
	border-left: 4px solid transparent !important;
	border-right: 4px solid transparent !important;
	border-top: 5px solid var(--cf) !important;
	pointer-events: none !important;
}

/* ---- Font box toggle icons: hide full-color ::before, keep themed ::after ----
   classic.css shows text-tools.png (full color) via ::before AND a themed
   mask via ::after. The ::before overlaps with unthemed colors. Hide it
   so only the themed ::after (currentColor mask) is visible. */
.font-box .toggle > .icon::before {
	display: none !important;
}

/* ---- Protect export panel from jspaint's scoped CSS ----
   jspaint's windows-98.css/98.css scope button/input/select styles to
   :where(.panel-area, .window, .os-window) button, etc.
   The export panel lives inside .panel-area so it catches these styles.
   Reset them so the export panel uses the site's own SCSS styling. */
#xtrc-export-panel {
	user-select: auto;
	-webkit-user-select: auto;
}
#xtrc-export-panel button,
#xtrc-export-panel select,
#xtrc-export-panel input,
#xtrc-export-panel textarea {
	border-image: none !important;
	-o-border-image: none !important;
	box-shadow: none !important;
	min-width: auto !important;
	min-height: auto !important;
	font-family: inherit !important;
	font-size: inherit !important;
	-webkit-font-smoothing: auto !important;
}

#xtrc-export-panel button:not(.lightweight) {
	border-image: none !important;
	-o-border-image: none !important;
}

#xtrc-export-panel button:not(.lightweight)::before {
	display: none !important;
}

#xtrc-export-panel button:focus::before {
	display: none !important;
}

/* ---- Remove 3D inset/outset border effects from jspaint UI ----
   Override the Windows 98 border-image SVGs and bevel border-colors
   with flat borders using our theme colors.
   NOTE: windows-98.css has both scoped (:where(...)) and unscoped selectors.
   We must override both — unscoped for dialog windows on body, scoped for
   elements inside .panel-area. */

/* Buttons: flat border, no bevel (scoped + unscoped) */
:where(.panel-area, .window, .os-window) button:not(.lightweight),
button:not(.lightweight).os-window button:not(.lightweight) {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c4) !important;
	box-shadow: none !important;
}
:where(.panel-area, .window, .os-window) button:not(.lightweight)::before,
.os-window button:not(.lightweight)::before {
	display: none !important;
}
:where(.panel-area, .window, .os-window) button:not(.lightweight):active,
:where(.panel-area, .window, .os-window) button:not(.lightweight).pressed,
:where(.panel-area, .window, .os-window) button:not(.lightweight).toggle.selected,
.os-window button:not(.lightweight):active,
.os-window button:not(.lightweight).pressed,
.os-window button:not(.lightweight).toggle.selected {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c5) !important;
	box-shadow: none !important;
}
:where(.panel-area, .window, .os-window) button.default,
.os-window button.default {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c6) !important;
}

/* Inset/outset classes: flat border (scoped + unscoped) */
:where(.panel-area, .window, .os-window) .inset-deep,
:where(.panel-area, .window, .os-window) .inset-shallow,
:where(.panel-area, .window, .os-window) .outset-deep,
:where(.panel-area, .window, .os-window) .outset-shallow,
.inset-deep,
.inset-shallow,
.outset-deep,
.outset-shallow {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c4) !important;
	box-shadow: none !important;
}

/* Inputs, selects, textareas: flat border (scoped + unscoped) */
:where(.panel-area, .window, .os-window) input[type="text"],
:where(.panel-area, .window, .os-window) input[type="url"],
:where(.panel-area, .window, .os-window) input[type="number"],
:where(.panel-area, .window, .os-window) input:not([type]),
:where(.panel-area, .window, .os-window) select,
:where(.panel-area, .window, .os-window) textarea,
.os-window input[type="text"],
.os-window input[type="url"],
.os-window input[type="number"],
.os-window input:not([type]),
.os-window select,
.os-window textarea {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c4) !important;
	box-shadow: none !important;
}

/* Windows / dialogs: flat border, no bevel, no shadow (scoped + unscoped) */
:where(.panel-area, .window, .os-window) .window,
:where(.panel-area, .window, .os-window) .os-window,
:where(.panel-area, .window, .os-window) .dialog-window,
:where(.panel-area, .window, .os-window) .stretch-and-skew,
.os-window,
.os-window:not(.maximized),
.window:not(.maximized) {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c4) !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Fieldsets: flat border (scoped + unscoped) */
:where(.panel-area, .window, .os-window) fieldset,
.os-window fieldset {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c4) !important;
	box-shadow: none !important;
}

/* Menu bar / menus: flat, no shadow (scoped + unscoped) */
:where(.panel-area, .window, .os-window) .menubar,
:where(.panel-area, .window, .os-window) .menu-popup,
.os-window .menubar,
.os-window .menu-popup,
.menu-popup {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c4) !important;
	box-shadow: none !important;
}