/*
 * Nothing But Canvas theme.
 *
 * Crayon-box palette with solid colors only (no gradients, no purple).
 * Applies when body has the geNbc class (see js/diagramly/NbcTheme.js).
 * Light and dark mode use light-dark(), which follows the editor's
 * color-scheme (Appearance > Light / Dark).
 */

@font-face {
	font-family: 'Nunito';
	src: url('fonts/Nunito-Variable-latin.woff2') format('woff2');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Fredoka';
	src: url('fonts/Fredoka-SemiBold-latin.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ---- Tokens ------------------------------------------------------------ */

.geNbc {
	--nbc-blue: #1E88E5;
	--nbc-red: #E53935;
	--nbc-yellow: #FDD835;
	--nbc-green: #43A047;
	--nbc-cream: #FFF8E1;
	--nbc-slate: #263238;

	/* Ink colors that stay readable on the surface in both modes */
	--nbc-ink: light-dark(#263238, #ECEFF1);
	--nbc-muted: light-dark(#5B6B73, #9FB0B8);
	--nbc-yellow-ink: light-dark(#F9A825, #FDD835);
	--nbc-blue-ink: light-dark(#1E88E5, #64B5F6);
	--nbc-surface: light-dark(#FFFFFF, #1F292E);
	--nbc-tint: light-dark(#FFF8E1, #2A363C);
	--nbc-tint-strong: light-dark(#FFECB3, #33424A);
	--nbc-line: light-dark(#263238, #0E1417);

	/* Editor tokens (styles/grapheditor.css) */
	--ge-panel-color: #FFFFFF;
	--toolbar-color: #FFFFFF;
	--workspace-color: #FFF8E1;
	--primary-color: #1E88E5;
	--primary-hover-color: #1565C0;
	--accent-color: #E3F2FD;
	--accent-hover-color: #BBDEFB;
	--accent-text-color: #1565C0;
	--border-color: #E8DFC4;
	--highlight-color: #FFF3C4;
	--text-color: #263238;
	--strong-text-color: #263238;
	--focus-color: #1E88E5;
	--selected-color: #E3F2FD;
	--selected-hover-color: #BBDEFB;
	--prop-accent-color: #E3F2FD;
	--prop-accent-text-color: #1565C0;
	--mention-color: #1565C0;
	--mention-background-color: #E3F2FD;
	--dark-color: #161D21;
	--ge-dark-panel-color: #1F292E;
	--dark-toolbar-color: #1F292E;
	--dark-header-color: #1F292E;
	--dark-border-color: #33424A;
	--dark-text-color: #ECEFF1;
	--dark-accent-color: #0D47A1;
	--dark-accent-text-color: #64B5F6;
	--dark-active-accent-color: #1565C0;
	--dark-focus-color: #64B5F6;
	--dark-mention-color: #90CAF9;
	--dark-mention-background-color: #0D3C6E;

	font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ---- Brand bar (top) ----------------------------------------------------- */

.geEditor.geNbc .geSimpleMainMenu {
	margin-top: 0;
	padding: 0 16px;
	gap: 10px;
	background-color: var(--nbc-surface);
	border-bottom: 3px solid var(--nbc-blue);
}

.geNbcBrand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 1;
	min-width: 0;
	margin-right: 6px;
	user-select: none;
}

.geNbcLogo {
	display: block;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

.geNbcBrandText {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	line-height: 1.15;
}

.geNbcAppName {
	font-family: 'Fredoka', 'Nunito', sans-serif;
	font-weight: 600;
	font-size: 19px;
	color: var(--nbc-ink);
	white-space: nowrap;
}

.geNbcAppName span {
	color: var(--nbc-blue-ink);
}

.geNbcFileName {
	max-width: 280px;
	margin-left: -4px;
	padding: 1px 4px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--nbc-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

.geNbcFileName:hover,
.geNbcFileName:focus-visible {
	background-color: var(--nbc-tint);
	color: var(--nbc-ink);
	outline: none;
}

.geEditor.geNbc .geSimpleMainMenu .geButton:empty:not(.geZoomInput) {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background-size: 24px;
}

.geEditor.geNbc .geSimpleMainMenu .geButton:hover:not([disabled], .mxDisabled) {
	background-color: var(--nbc-tint);
	opacity: 1;
}

/* ---- Canvas tabs: Drawing Canvas / Paint Canvas -------------------------- */

.geNbcCanvasTabs {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 4px;
	padding: 4px;
	border-radius: 14px;
	background-color: var(--nbc-tint);
}

.geNbcCanvasTab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px 0 10px;
	border: 2px solid transparent;
	border-radius: 10px;
	background-color: transparent;
	color: var(--nbc-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
	cursor: pointer;
}

.geNbcCanvasTab::before {
	content: '';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: var(--nbc-ink);
	-webkit-mask: var(--nbc-icon) center / contain no-repeat;
	mask: var(--nbc-icon) center / contain no-repeat;
}

.geNbcCanvasTab:hover:not(.geNbcCanvasTabActive) {
	background-color: var(--nbc-tint-strong);
}

.geNbcCanvasTab.geNbcCanvasTabActive {
	background-color: var(--nbc-surface);
	border-color: var(--nbc-line);
	box-shadow: 0 3px 0 var(--nbc-line);
}

.geNbcCanvasTab.geNbcCanvasTabActive:first-child::before {
	background-color: var(--nbc-blue-ink);
}

.geNbcCanvasTab.geNbcCanvasTabActive:last-child::before {
	background-color: var(--nbc-red);
}

.geNbcCanvasTab:focus-visible {
	outline: 3px solid var(--nbc-blue-ink);
	outline-offset: 1px;
}

@media (max-width: 900px) {
	.geNbcCanvasTab {
		padding: 0 8px;
	}

	.geNbcCanvasTab > span {
		display: none;
	}
}

/* ---- Paint Canvas (paint/index.html in a frame) -------------------------- */

.geEditor.geNbc > .geNbcPaint {
	display: none;
	grid-column: 1 / -1;
	/* Below the brand bar (the simple theme's top bar is in grid row 2) */
	grid-row: 3 / -1;
	position: relative;
	z-index: 5;
	min-height: 0;
	background-color: light-dark(#FFFFFF, #121212);
}

.geEditor.geNbc.geNbcPaintMode > .geNbcPaint {
	display: block;
}

.geNbcPaint > iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Drawing Canvas controls are hidden while painting (kept in place so the
   tabs do not move) */
.geEditor.geNbc.geNbcPaintMode .geSimpleMainMenu > *:not(.geNbcBrand, .geNbcCanvasTabs) {
	visibility: hidden;
}

.geEditor.geNbc.geNbcPaintMode > .geNbcDock,
.geEditor.geNbc.geNbcPaintMode .geShapePicker,
.geEditor.geNbc.geNbcPaintMode div.mxWindow {
	display: none;
}

.geEditor.geNbc.geNbcPaintMode .geNbcFileName {
	cursor: default;
}

/* ---- Solid icons (mask filled with --nbc-color) -------------------------- */

.geEditor.geNbc .geButton.geNbcTool {
	background-image: none !important;
	position: relative;
}

.geEditor.geNbc .geButton.geNbcTool:not([disabled], .mxDisabled) {
	opacity: 1;
}

.geEditor.geNbc .geButton.geNbcTool[disabled],
.geEditor.geNbc .geButton.geNbcTool.mxDisabled {
	opacity: 0.35;
}

.geEditor.geNbc.geDarkMode .geButton.geNbcTool {
	filter: none;
}

.geEditor.geNbc .geNbcTool::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	background-color: var(--nbc-color, var(--nbc-ink));
	-webkit-mask: var(--nbc-icon) center / contain no-repeat;
	mask: var(--nbc-icon) center / contain no-repeat;
	pointer-events: none;
}

/* Main menu: solid blue button with a white icon */
.geEditor.geNbc .geSimpleMainMenu .geButton.geNbcMenuButton,
.geEditor.geNbc .geSimpleMainMenu .geButton.geNbcMenuButton:hover {
	background-color: var(--nbc-blue);
}

.geEditor.geNbc .geSimpleMainMenu .geButton.geNbcMenuButton:hover:not([disabled]) {
	background-color: #1565C0;
}

.geEditor.geNbc .geNbcMenuButton::before {
	background-color: #FFFFFF;
}

/* Format panel toggle: solid green while the panel is open */
.geEditor.geNbc .geSimpleMainMenu .geButton.geNbcFormatButton.geActiveItem {
	background-color: var(--nbc-green);
}

.geEditor.geNbc .geNbcFormatButton.geActiveItem::before {
	background-color: #FFFFFF;
}

/* ---- Floating dock (bottom of the canvas) -------------------------------- */

.geEditor.geNbc > .geNbcDock {
	grid-column: 3;
	grid-row: 3;
	align-self: end;
	justify-self: center;
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	max-width: calc(100% - 24px);
	margin: 0 12px 18px 12px;
	padding: 8px 10px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	white-space: nowrap;
	user-select: none;
	background-color: var(--nbc-surface);
	border: 3px solid var(--nbc-line);
	border-radius: 24px;
	/* Solid offset shadow, no blur */
	box-shadow: 0 5px 0 var(--nbc-line);
}

.geEditor.geNbc > .geNbcDock::-webkit-scrollbar {
	display: none;
}

.geEditor:not(.geNbc) > .geNbcDock,
.geInlineNoUi .geNbcDock {
	display: none;
}

.geNbcDockGroup {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.geNbcDockSep {
	flex-shrink: 0;
	align-self: stretch;
	width: 3px;
	margin: 6px 4px;
	border-radius: 2px;
	background-color: var(--nbc-tint-strong);
}

.geEditor.geNbc .geNbcDock .geButton.geNbcTool {
	width: 60px !important;
	height: 60px !important;
	margin: 0;
	padding: 0;
	border-radius: 16px;
	transition: background-color 120ms ease, transform 120ms ease;
}

.geEditor.geNbc .geNbcDock .geButton.geNbcTool[data-label]::before {
	top: 9px;
	width: 26px;
	height: 26px;
	margin: 0 0 0 -13px;
}

.geEditor.geNbc .geNbcDock .geNbcTool[data-label]::after {
	content: attr(data-label);
	position: absolute;
	left: 3px;
	right: 3px;
	bottom: 7px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--nbc-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

.geEditor.geNbc .geNbcDock .geButton.geNbcTool:hover:not([disabled], .mxDisabled) {
	background-color: var(--nbc-tint);
	transform: translateY(-2px);
}

.geEditor.geNbc .geNbcDock .geButton.geNbcTool:active:not([disabled], .mxDisabled) {
	background-color: var(--nbc-tint-strong);
	transform: translateY(0);
}

.geEditor.geNbc .geNbcDock .geButton.geNbcTool:focus-visible,
.geEditor.geNbc .geSimpleMainMenu .geButton:focus-visible {
	outline: 3px solid var(--nbc-blue-ink);
	outline-offset: 1px;
}

/* Zoom: compact pill at the end of the dock */
.geNbcZoom {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: 4px;
	padding: 4px;
	border-radius: 14px;
	background-color: var(--nbc-tint);
}

.geEditor.geNbc .geNbcDock .geNbcZoom .geButton.geNbcTool {
	width: 36px !important;
	height: 36px !important;
	border-radius: 10px;
}

.geEditor.geNbc .geNbcDock .geNbcZoom .geButton.geNbcTool:hover:not([disabled]) {
	background-color: var(--nbc-surface);
	transform: none;
}

.geEditor.geNbc .geNbcDock .geNbcZoom .geButton.geZoomInput {
	width: 66px;
	height: 32px;
	margin: 0;
	border: none;
	border-radius: 8px;
	background-color: transparent;
	color: var(--nbc-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.geEditor.geNbc .geNbcDock .geButton.geNbcTool {
		transition: none;
	}

	.geEditor.geNbc .geNbcDock .geButton.geNbcTool:hover:not([disabled], .mxDisabled) {
		transform: none;
	}
}

/* Compact dock (set by NbcTheme.js when the labelled dock does not fit) */
.geEditor.geNbc .geNbcDock.geNbcDockCompact .geButton.geNbcTool {
	width: 46px !important;
	height: 46px !important;
	border-radius: 14px;
}

.geEditor.geNbc .geNbcDock.geNbcDockCompact .geButton.geNbcTool[data-label]::before {
	top: 50%;
	margin: -13px 0 0 -13px;
}

.geEditor.geNbc .geNbcDock.geNbcDockCompact .geNbcTool[data-label]::after {
	display: none;
}

.geEditor.geNbc .geNbcDock.geNbcDockCompact .geNbcZoom .geButton.geNbcTool {
	width: 34px !important;
	height: 34px !important;
}

/* Narrow screens: icons only */
@media (max-width: 760px) {
	.geEditor.geNbc .geNbcDock .geButton.geNbcTool {
		width: 46px !important;
		height: 46px !important;
		border-radius: 14px;
	}

	.geEditor.geNbc .geNbcDock .geButton.geNbcTool[data-label]::before {
		top: 50%;
		margin: -13px 0 0 -13px;
	}

	.geEditor.geNbc .geNbcDock .geNbcTool[data-label]::after {
		display: none;
	}

	.geEditor.geNbc > .geNbcDock {
		margin-bottom: 12px;
		padding: 6px;
		border-radius: 20px;
	}

	.geNbcBrandText {
		display: none;
	}
}

/* ---- Pop-ups, dialogs and panels ----------------------------------------- */

.geEditor.geNbc .geShapePicker {
	padding: 8px 4px;
	border: 3px solid var(--nbc-line);
	border-radius: 18px;
	background-color: var(--nbc-surface);
	box-shadow: 0 5px 0 var(--nbc-line);
}

html body.geNbc div.mxPopupMenu {
	border: 2px solid var(--nbc-line);
	border-radius: 14px;
	box-shadow: 0 4px 0 var(--nbc-line);
	font-family: 'Nunito', -apple-system, 'Segoe UI', system-ui, sans-serif;
}

.geNbc .geDialog,
.geNbc div.mxWindow {
	border: 3px solid var(--nbc-line);
	border-radius: 18px;
	box-shadow: 0 6px 0 var(--nbc-line);
}

.geNbc .geBtn {
	border-radius: 10px;
	font-family: inherit;
	font-weight: 700;
}

.geNbc .gePrimaryBtn:not([disabled]) {
	color: #FFFFFF;
}

.geNbc .gePrimaryBtn:hover:not([disabled]) {
	background-color: light-dark(var(--primary-hover-color), var(--dark-active-accent-color));
}

.geEditor.geNbc > .geSidebarContainer,
.geEditor.geNbc div.geFormatContainer {
	background-color: var(--nbc-surface);
}

.geEditor.geNbc > .geSidebarContainer.geFormatContainer {
	border-left: 3px solid var(--nbc-tint-strong);
}