@import url('CertCreater-Icons.css');

/* ========================================
   Brand Design Tokens (Pflegecampus)
   ======================================== */

/* Prevent page scroll and hide footer when editor is active */
body:has(.cert-creater) {
	/* Only lock horizontal scrolling. Vertical page scroll must stay available:
	   the main site navigation is a `display: table-cell` with no scroll
	   container of its own, so it relies on page scroll to stay reachable when
	   an expanded submenu makes it taller than the viewport. A full
	   `overflow: hidden` here froze the whole page and trapped the menu. */
	overflow-x: hidden;
}

body:has(.cert-creater) footer,
body:has(.cert-creater) .debuggerhide,
body:has(.cert-creater) pc-support-chat-button {
	display: none;
}

/* The page itself is locked (overflow: hidden above) so the editor feels
   app-like. That previously made the (often long) left navigation unreachable.
   Switch the layout to flex on editor pages and give the nav its own scroll
   region so all menu items stay reachable without scrolling the page. */
body:has(.cert-creater) .mainframe {
	display: flex;
}

body:has(.cert-creater) .mainframe > nav {
	flex: 0 0 270px;
	height: calc(100vh - 145px);
	overflow-y: auto;
}

body:has(.cert-creater) .mainframe > section {
	flex: 1 1 auto;
	min-width: 0;
}

.cert-creater {
	/* Brand tokens */
	--cc-primary: var(--rd-secondary-active, #4073b6);
	--cc-primary-hover: var(--rd-secondary-hover, #335c92);
	--cc-primary-pressed: var(--rd-secondary-pressed, #26456d);
	--cc-primary-light: var(--rd-secondary-inactive, #d9e3f0);
	--cc-primary-border: #93b4d9;
	--cc-accent: var(--rd-primary-active, #d66181);
	--cc-accent-hover: var(--rd-primary-hover, #ab4e67);
	--cc-accent-pressed: var(--rd-primary-pressed, #803a4d);
	--cc-accent-light: var(--rd-primary-inactive, #fbeff3);
	--cc-text-primary: var(--rd-font-dark, #0d1130);
	--cc-text-secondary: #475569;
	--cc-text-muted: #94a3b8;
	--cc-bg: #f4f6f9;
	--cc-surface: #f1f5f9;
	--cc-surface-light: #f8fafc;
	--cc-input-bg: #ffffff;
	--cc-border: #e2e8f0;
	--cc-border-light: #f1f5f9;
	--cc-header-bg: #ffffff;
	--cc-success: var(--rd-success-default, #89b63f);
	--cc-success-hover: var(--rd-success-hover, #6e9232);
	--cc-error: var(--rd-error-hover, #f43f5e);

	/* Layout */
	display: flex;
	flex-direction: column;
	height: calc(100vh - 145px);
	background: var(--cc-bg);
	border-radius: var(--rd-borderradius-border-lg, 16px);
	overflow: hidden;
	font-family: var(--rd-fontfamilies-open-sans, "Open Sans"), -apple-system, BlinkMacSystemFont, sans-serif;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--cc-border);
	transition: all 0.3s ease;
}

/* Fullscreen Mode */
.cert-creater--fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	min-height: unset;
	border-radius: 0;
	z-index: 9999;
	box-shadow: none;
	border: none;
}

/* ========================================
   Header
   ======================================== */
.cert-creater__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	background: linear-gradient(to bottom, #ffffff, #fafbfc);
	border-bottom: 1px solid #e5e7eb;
	gap: 16px;
	flex-shrink: 0;
	/* Wrap the toolbar sections onto multiple rows when the viewport is too
	   narrow instead of letting the title/badge overflow and overlap the
	   zoom controls. */
	flex-wrap: wrap;
}

.cert-creater__header-left,
.cert-creater__header-center,
.cert-creater__header-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cert-creater__header-left {
	flex: 1 1 auto;
	/* min-width: auto keeps the section at least as wide as its content, so the
	   title input and badge never collapse and overflow onto the next section. */
	min-width: auto;
}

.cert-creater__header-center {
	flex-shrink: 0;
}

.cert-creater__header-right {
	flex-shrink: 0;
}

.cert-creater__name-input {
	font-size: 18px;
	font-weight: 600;
	color: var(--cc-text-primary, #0d1130);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 6px 10px;
	/* Size the input to its text content so long titles are not clipped and the
	   badge stays right next to the title. min/max keep it bounded; on narrow
	   viewports it can still shrink (the header wraps). Browsers without
	   field-sizing support gracefully keep the default fixed input width. */
	field-sizing: content;
	min-width: 8ch;
	max-width: min(600px, 100%);
	flex-shrink: 1;
	transition: all 0.2s;
}

.cert-creater__name-input:hover {
	border-color: #e5e7eb;
}

.cert-creater__name-input:focus {
	outline: none;
	border-color: var(--cc-primary);
	background: white;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--cc-primary) 10%, transparent);
}

/* Zoom Controls */
.cert-creater__zoom-controls {
	display: flex;
	align-items: center;
	gap: 2px;
	background: #f1f5f9;
	border-radius: 10px;
	padding: 4px;
	border: 1px solid #e5e7eb;
}

.cert-creater__zoom-value {
	font-size: 13px;
	font-weight: 600;
	color: #475569;
	min-width: 55px;
	text-align: center;
	padding: 0 4px;
}

/* "Einpassen" (fit-to-view) button: labeled so it isn't mistaken for fullscreen */
.cert-creater__zoom-fit {
	width: auto;
	gap: 4px;
	padding: 0 10px 0 8px;
}

.cert-creater__zoom-fit-label {
	font-size: 12px;
	font-weight: 600;
	color: #475569;
	white-space: nowrap;
}

.cert-creater__divider {
	width: 1px;
	height: 24px;
	background: #e5e7eb;
	margin: 0 12px;
}

/* ========================================
   Buttons
   ======================================== */
.cert-creater__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.cert-creater__btn .material-symbols-outlined {
	font-size: 18px;
}

.cert-creater__btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Primary Button */
.cert-creater__btn--primary {
	background: linear-gradient(135deg, var(--cc-primary) 0%, var(--cc-primary-hover) 100%);
	color: white;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--cc-primary) 35%, transparent);
}

.cert-creater__btn--primary:hover:not(:disabled) {
	background: linear-gradient(135deg, var(--cc-primary-hover) 0%, var(--cc-primary-pressed) 100%);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--cc-primary) 45%, transparent);
	transform: translateY(-1px);
}

/* Success Button (temporary state after save) */
.cert-creater__btn--success {
	background: linear-gradient(135deg, var(--cc-success) 0%, var(--cc-success-hover) 100%);
	color: white;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--cc-success) 35%, transparent);
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Secondary Button */
.cert-creater__btn--secondary {
	background: white;
	color: #374151;
	border: 1px solid #d1d5db;
}

.cert-creater__btn--secondary:hover:not(:disabled) {
	background: #f9fafb;
	border-color: #9ca3af;
}

/* Danger Button */
.cert-creater__btn--danger {
	background: #fef2f2;
	color: #dc2626;
	border: 1px solid #fecaca;
}

.cert-creater__btn--danger:hover:not(:disabled) {
	background: #fee2e2;
	border-color: #fca5a5;
}

/* Icon Button */
.cert-creater__btn--icon {
	padding: 8px;
	background: transparent;
	border-radius: 8px;
	color: #64748b;
}

.cert-creater__btn--icon:hover:not(:disabled) {
	background: #f1f5f9;
	color: #334155;
}

/* Small Button */
.cert-creater__btn--small {
	padding: 6px 12px;
	font-size: 12px;
}

.cert-creater__btn--small .material-symbols-outlined {
	font-size: 16px;
}

/* Active/selected toggle state for small buttons (e.g. the Transparent button). */
.cert-creater__btn--active {
	border-color: var(--cc-primary);
	color: var(--cc-primary);
	background: rgba(64, 115, 182, 0.08);
}

/* Discreet secondary toggle in active state (e.g. the "Gestrichelt" button) —
   needs the extra specificity to win over .cert-creater__btn--secondary. */
.cert-creater__btn--secondary.cert-creater__btn--active {
	border-color: var(--cc-primary);
	color: var(--cc-primary);
	background: rgba(64, 115, 182, 0.08);
}

/* On/off switch (e.g. the "Intelligente Hilfslinien" toggle in Position & Größe). */
.cert-creater__guides-toggle-row {
	margin-top: 4px;
}

.cert-creater__guides-toggle-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	font-size: 13px;
	color: #334155;
	cursor: pointer;
}

.cert-creater__switch {
	flex: 0 0 auto;
	position: relative;
	width: 38px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: #cbd5e1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.cert-creater__switch--on {
	background: var(--cc-primary);
}

.cert-creater__switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}

.cert-creater__switch--on .cert-creater__switch-thumb {
	transform: translateX(16px);
}

/* When a colour swatch represents "transparent", show a checkerboard instead of
   the misleading solid colour the native input would otherwise display. */
.cert-creater__color-input--transparent {
	background-image:
		linear-gradient(45deg, #cbd5e1 25%, transparent 25%),
		linear-gradient(-45deg, #cbd5e1 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #cbd5e1 75%),
		linear-gradient(-45deg, transparent 75%, #cbd5e1 75%);
	background-size: 10px 10px;
	background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}

/* Full Width Button */
.cert-creater__btn--full {
	width: 100%;
}

/* ========================================
   Main Content Area
   ======================================== */
.cert-creater__main {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Toolbar */
.cert-creater__toolbar {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 12px 20px;
	background: #ffffff;
	border-bottom: 1px solid #e5e7eb;
	flex-wrap: wrap;
	flex-shrink: 0;
}

.cert-creater__toolbar-section {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	background: #f8fafc;
	border-radius: 10px;
}

.cert-creater__toolbar-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #94a3b8;
	padding: 0 8px;
}

/* Tool Button */
.cert-creater__tool-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	border: none;
	background: transparent;
	color: #64748b;
	cursor: pointer;
	transition: all 0.2s ease;
}

.cert-creater__tool-btn .material-symbols-outlined {
	font-size: 22px;
}

.cert-creater__tool-btn:hover {
	background: #e2e8f0;
	color: #334155;
}

/* Labeled tool button (icon + text below) */
.cert-creater__tool-btn--labeled {
	flex-direction: column;
	width: auto;
	height: auto;
	padding: 6px 10px;
	gap: 2px;
}

.cert-creater__tool-btn-label {
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.cert-creater__tool-btn--active {
	background: var(--cc-primary);
	color: white;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--cc-primary) 35%, transparent);
}

.cert-creater__tool-btn--active:hover {
	background: var(--cc-primary-hover);
}

.cert-creater__tool-btn--danger:hover {
	background: #fef2f2;
	color: #dc2626;
}

/* Discreet "Tastenkürzel" info button + popover — stands alone on the toolbar's right edge */
.cert-creater__shortcuts-wrap {
	position: relative;
	display: flex;
	margin-left: auto;
}

.cert-creater__shortcuts-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: #94a3b8;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.cert-creater__shortcuts-btn .material-symbols-outlined {
	font-size: 18px;
}

.cert-creater__shortcuts-btn:hover,
.cert-creater__shortcuts-btn--active {
	background: #e2e8f0;
	color: #475569;
}

.cert-creater__shortcuts-popover {
	position: fixed;
	z-index: 1301;
	width: 300px;
	max-width: 90vw;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	padding: 12px;
	background: white;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

.cert-creater__shortcuts-popover-title {
	font-size: 12px;
	font-weight: 700;
	color: #334155;
	margin-bottom: 8px;
}

.cert-creater__shortcuts-popover-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cert-creater__shortcuts-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
}

.cert-creater__shortcuts-keys {
	flex: 0 0 auto;
	min-width: 116px;
	padding: 2px 6px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	color: #475569;
	white-space: nowrap;
}

.cert-creater__shortcuts-desc {
	color: #64748b;
}

/* Color Input */
.cert-creater__color-input {
	width: 38px;
	height: 38px;
	padding: 3px;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	background: white;
	transition: border-color 0.2s;
}

.cert-creater__color-input:hover {
	border-color: #94a3b8;
}

.cert-creater__color-input::-webkit-color-swatch-wrapper {
	padding: 2px;
}

.cert-creater__color-input::-webkit-color-swatch {
	border-radius: 4px;
	border: none;
}

/* Background image opacity control */
.cert-creater__bg-opacity {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #64748b;
	/* Reset inherited form-label margin so the slider stays vertically centered
	   with the 38px tool buttons in the same toolbar row. */
	margin: 0;
}

.cert-creater__bg-opacity .material-symbols-outlined {
	font-size: 20px;
}

/* Live brush-size preview: a circle that grows/shrinks with the slider value.
   The fixed-size box keeps the toolbar layout stable while the inner dot scales. */
.cert-creater__brush-size-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.cert-creater__brush-size-dot {
	display: block;
	border-radius: 50%;
	border: 2px solid #475569;
	box-sizing: border-box;
	transition: width 0.08s ease, height 0.08s ease;
}

/* Checkerboard swatch that visually communicates "transparency" */
.cert-creater__transparency-icon {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	border: 1px solid #cbd5e1;
	background-image:
		linear-gradient(45deg, #b8c0cc 25%, transparent 25%),
		linear-gradient(-45deg, #b8c0cc 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #b8c0cc 75%),
		linear-gradient(-45deg, transparent 75%, #b8c0cc 75%);
	background-size: 8px 8px;
	background-position: 0 0, 0 4px, 4px -4px, -4px 0;
	background-color: #ffffff;
	flex-shrink: 0;
}

.cert-creater__bg-opacity-slider {
	width: 80px;
	cursor: pointer;
	accent-color: var(--cc-primary);
}

.cert-creater__bg-opacity-value {
	min-width: 34px;
	font-size: 12px;
	color: #475569;
	text-align: right;
}

/* Color swatch for the background paint brush */
.cert-creater__brush-color {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	background: none;
	cursor: pointer;
	flex-shrink: 0;
}

.cert-creater__brush-color::-webkit-color-swatch-wrapper {
	padding: 2px;
}

.cert-creater__brush-color::-webkit-color-swatch {
	border: none;
	border-radius: 2px;
}

/* ========================================
   Content Layout
   ======================================== */
.cert-creater__content {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	position: relative;
}

/* File drag-and-drop overlay (dragging images from Explorer/Finder into the editor) */
.cert-creater__drop-overlay {
	position: absolute;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(214, 97, 129, 0.08);
	pointer-events: none;
}

.cert-creater__drop-overlay-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 32px 48px;
	border: 3px dashed var(--cc-primary, #d66181);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.25);
	color: var(--cc-primary, #d66181);
	font-size: 18px;
	font-weight: 600;
}

.cert-creater__drop-overlay-inner .material-symbols-outlined {
	width: 40px;
	height: 40px;
}

.cert-creater__drop-overlay-inner .material-symbols-outlined::before {
	width: 40px;
	height: 40px;
}

/* Subtle tint on the canvas area while a file is being dragged over it */
.cert-creater__canvas-container--dropping {
	outline: 2px dashed var(--cc-primary, #d66181);
	outline-offset: -8px;
}

/* ========================================
   Canvas Container
   ======================================== */
.cert-creater__canvas-wrap {
	position: relative;
	flex: 1;
	display: flex;
	min-width: 0;
	min-height: 0;
}

.cert-creater__canvas-container {
	flex: 1;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 60px 40px 60px 40px;
	overflow: auto;
	background-color: #e8ecf0;
	background-image:
		radial-gradient(circle, #d0d5dc 1px, transparent 1px);
	background-size: 16px 16px;
}

/* Floating zoom controls pinned to the bottom-right of the canvas area */
.cert-creater__zoom-controls--floating {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 50;
	background: #ffffff;
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.14),
		0 0 0 1px rgba(0, 0, 0, 0.04);
}

.cert-creater__canvas {
	position: relative;
	box-shadow:
		0 25px 50px -12px rgba(0, 0, 0, 0.25),
		0 0 0 1px rgba(0, 0, 0, 0.05);
	border-radius: 4px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-color: white;
}

/* Full-page background image layer (sits behind all elements; opacity adjustable) */
.cert-creater__canvas-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* Transparent overlay shown while the "move background" tool is active. Sits above
   all elements so the user can grab and pan the background from anywhere on the page. */
.cert-creater__bg-move-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 60;
	cursor: move;
	background: transparent;
}

/* Live preview rectangle while dragging out a new text element */
.cert-creater__draw-preview {
	position: absolute;
	z-index: 50;
	border: 1px dashed var(--cc-primary, #2f6fed);
	background: rgba(47, 111, 237, 0.08);
	pointer-events: none;
}

/* Background eraser overlay canvas (sits above everything while erasing) */
.cert-creater__eraser-canvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	cursor: crosshair;
	touch-action: none;
}

/* Brush-size indicator that follows the cursor while erasing */
.cert-creater__eraser-cursor {
	position: absolute;
	z-index: 101;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1.5px solid rgba(0, 0, 0, 0.55);
	box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

/* Live preview of the current freehand brush stroke (sits above all elements) */
.cert-creater__brush-preview {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	pointer-events: none;
	overflow: visible;
}

/* Circle that follows the cursor while the brush tool is active (shows stroke size) */
.cert-creater__brush-cursor {
	position: absolute;
	z-index: 91;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1.5px solid rgba(0, 0, 0, 0.55);
	box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

/* ========================================
   Smart guides (Intelligente Hilfslinien)
   Magenta alignment lines + equal-spacing hints shown while dragging.
   ======================================== */
.cert-creater__guides {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 95;
	overflow: visible;
}

.cert-creater__guide-line {
	position: absolute;
	background: #ff2d9b;
	pointer-events: none;
}

/* Center-alignment guides use the same colour but a slightly softer look. */
.cert-creater__guide-line--center {
	background: #ff2d9b;
	opacity: 0.85;
}

.cert-creater__spacing-line,
.cert-creater__spacing-tick {
	position: absolute;
	background: #ff2d9b;
	pointer-events: none;
}

.cert-creater__spacing-label {
	position: absolute;
	transform: translate(-50%, -50%);
	background: #ff2d9b;
	color: #fff;
	font-size: 10px;
	line-height: 1;
	font-weight: 600;
	padding: 2px 4px;
	border-radius: 3px;
	white-space: nowrap;
	pointer-events: none;
}

/* ========================================
   Elements on Canvas
   ======================================== */
.cert-creater__element {
	position: absolute;
	user-select: none;
}

.cert-creater__element--selected {
	outline: 2px solid var(--cc-primary);
	outline-offset: -1px;
}

/* Co-selected elements in a Shift multi-selection: same accent colour but a
   softer, semi-transparent solid outline, so the primary (full-strength
   outline + handles) stays distinct without the noisy dashed look. */
.cert-creater__element--co-selected {
	outline-style: solid;
	outline-color: color-mix(in srgb, var(--cc-primary) 50%, transparent);
}

/* Highlight of the text field that will receive a placeholder while it is
   dragged over it. Only set on the element directly under the cursor, so the
   user clearly sees WHICH field gets the placeholder. */
.cert-creater__element--drop-target {
	outline: 2px dashed #16a34a;
	outline-offset: 2px;
	background: color-mix(in srgb, #16a34a 10%, transparent);
	border-radius: 4px;
}

/* Banner shown at the top of the properties panel during a multi-selection. */
.cert-creater__multiselect-banner {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	margin-bottom: 12px;
	border-radius: 8px;
	background: var(--cc-primary-light);
	border: 1px solid var(--cc-primary-border);
	color: var(--cc-primary-pressed);
	font-size: 12px;
	line-height: 1.4;
}

.cert-creater__multiselect-banner .material-symbols-outlined {
	font-size: 18px;
	flex-shrink: 0;
}

/* Ghost placeholder for empty text elements */
.cert-creater__placeholder-ghost {
	color: #94a3b8;
	font-style: italic;
	pointer-events: none;
	user-select: none;
}

/* Resize Handles */
.cert-creater__resize-handle {
	position: absolute;
	width: 12px;
	height: 12px;
	background: var(--cc-primary);
	border: 2px solid white;
	border-radius: 50%;
	z-index: 10;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cert-creater__resize-handle--nw {
	top: -6px;
	left: -6px;
	cursor: nw-resize;
}

.cert-creater__resize-handle--ne {
	top: -6px;
	right: -6px;
	cursor: ne-resize;
}

.cert-creater__resize-handle--sw {
	bottom: -6px;
	left: -6px;
	cursor: sw-resize;
}

.cert-creater__resize-handle--se {
	bottom: -6px;
	right: -6px;
	cursor: se-resize;
}

.cert-creater__resize-handle--n {
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	cursor: n-resize;
}

.cert-creater__resize-handle--s {
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	cursor: s-resize;
}

.cert-creater__resize-handle--w {
	top: 50%;
	left: -6px;
	transform: translateY(-50%);
	cursor: w-resize;
}

.cert-creater__resize-handle--e {
	top: 50%;
	right: -6px;
	transform: translateY(-50%);
	cursor: e-resize;
}

/* Rotate handle: a circle floating above the element, connected to its
   top edge by a short line. Sits inside the element wrapper so it rotates
   together with the element. */
.cert-creater__rotate-handle {
	position: absolute;
	top: -28px;
	left: 50%;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	background: white;
	border: 2px solid var(--cc-primary);
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	cursor: grab;
	z-index: 11;
}

.cert-creater__rotate-handle::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 50%;
	width: 2px;
	height: 16px;
	margin-left: -1px;
	background: var(--cc-primary);
}

.cert-creater__rotate-handle:active {
	cursor: grabbing;
}

/* Live-corner rounding widget: small white circles inset from each corner.
   Dragging any one rounds all corners at once (Illustrator-style). On hover a
   small quarter-circle arc appears toward the outer corner to hint at the
   rounding. Visually distinct from the round resize handles by being smaller
   ring-style dots. */
.cert-creater__round-handle {
	position: absolute;
	width: 10px;
	height: 10px;
	background: white;
	border: 2px solid var(--cc-primary);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	z-index: 11;
}

.cert-creater__round-handle:hover {
	background: var(--cc-primary);
}

/* Hover hint: a small quarter-circle arc curving toward the element's outer
   corner (the corner this handle controls). */
.cert-creater__round-handle::after {
	content: "";
	position: absolute;
	width: 13px;
	height: 13px;
	border: 2px solid var(--cc-primary);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

.cert-creater__round-handle:hover::after {
	opacity: 0.9;
}

.cert-creater__round-handle--nw::after {
	border-color: var(--cc-primary) transparent transparent var(--cc-primary);
	border-top-left-radius: 13px;
	left: -3px;
	top: -3px;
	transform: translate(-100%, -100%);
}

.cert-creater__round-handle--ne::after {
	border-color: var(--cc-primary) var(--cc-primary) transparent transparent;
	border-top-right-radius: 13px;
	right: -3px;
	top: -3px;
	transform: translate(100%, -100%);
}

.cert-creater__round-handle--sw::after {
	border-color: transparent transparent var(--cc-primary) var(--cc-primary);
	border-bottom-left-radius: 13px;
	left: -3px;
	bottom: -3px;
	transform: translate(-100%, 100%);
}

.cert-creater__round-handle--se::after {
	border-color: transparent var(--cc-primary) var(--cc-primary) transparent;
	border-bottom-right-radius: 13px;
	right: -3px;
	bottom: -3px;
	transform: translate(100%, 100%);
}

/* Quick-rotate buttons in the properties panel */
.cert-creater__rotate-buttons {
	display: flex;
	gap: 4px;
}

.cert-creater__rotate-buttons button {
	flex: 1;
	padding: 4px 0;
	font-size: 12px;
	border: 1px solid var(--cc-border, #d0d5dd);
	border-radius: 4px;
	background: white;
	color: var(--cc-text, #344054);
	cursor: pointer;
}

.cert-creater__rotate-buttons button:hover {
	background: var(--cc-bg-hover, #f2f4f7);
}

/* ========================================
   Side Panels
   ======================================== */
.cert-creater__placeholder-panel,
.cert-creater__properties-panel {
	width: 300px;
	min-width: 300px;
	background: #ffffff;
	border-left: 1px solid #e5e7eb;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	overflow: hidden;
}

.cert-creater__properties-empty {
	padding: 24px 16px;
	color: #9ca3af;
	font-size: 13px;
	text-align: center;
}

/* Slim tab shown on the right edge when the properties panel is collapsed,
   so it can always be re-opened (and selecting an element re-opens it too). */
.cert-creater__panel-reopen {
	align-self: stretch;
	flex-shrink: 0;
	width: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: #ffffff;
	border: none;
	border-left: 1px solid #e5e7eb;
	color: var(--rd-font-dark, #334155);
	cursor: pointer;
	transition: background 0.12s ease;
}

.cert-creater__panel-reopen:hover {
	background: #f1f5f9;
}

.cert-creater__placeholder-panel {
	border-left: none;
	border-right: 1px solid var(--cc-border, #e2e8f0);
}

.cert-creater__panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--rd-font-dark);
	border-bottom: 1px solid var(--cc-border, #e2e8f0);
	flex-shrink: 0;
}

/* ========================================
   Placeholder Panel
   ======================================== */
.cert-creater__placeholder-list {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
}

.cert-creater__placeholder-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	margin-bottom: 4px;
	border-radius: 8px;
	cursor: grab;
	transition: all 0.15s;
	background: var(--cc-surface-light, #f8fafc);
	border: 1px solid transparent;
}

.cert-creater__placeholder-item:hover {
	background: var(--cc-primary-light);
	border-color: var(--cc-primary-border);
}

.cert-creater__placeholder-item:active {
	cursor: grabbing;
}

.cert-creater__placeholder-key {
	font-family: "Fira Code", "Consolas", monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--cc-primary);
	background: none;
	padding: 0;
}

.cert-creater__placeholder-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--cc-text-primary, #1a202c);
}

.cert-creater__placeholder-example {
	font-size: 11px;
	color: var(--cc-text-muted, #94a3b8);
	font-style: italic;
}

.cert-creater__placeholder-hint {
	padding: 12px 16px;
	font-size: 11px;
	color: var(--cc-text-muted, #94a3b8);
	background: var(--cc-surface-light, #f8fafc);
	border-top: 1px solid var(--cc-border, #e2e8f0);
	flex-shrink: 0;
}

/* ========================================
   Properties Panel
   ======================================== */
.cert-creater__properties-content {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
}

.cert-creater__property-group {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--cc-border-light, #f1f5f9);
}

.cert-creater__property-group:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.cert-creater__property-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--cc-text-primary, #1a202c);
	margin-bottom: 12px;
}

/* Group-header icon shown as a soft blue badge (matches the design mockup).
   Icons use the SVG-mask system (text hidden via font-size:0), so the glyph is
   sized through the ::before mask, NOT font-size. */
.cert-creater__property-label>.material-symbols-outlined {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--cc-primary) 12%, transparent);
	color: var(--cc-primary);
	flex: none;
}

.cert-creater__property-label>.material-symbols-outlined::before {
	width: 18px;
	height: 18px;
}

/* "i / n" layer position counter, right-aligned in the Ebenen header. */
.cert-creater__layer-counter {
	margin-left: auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--cc-primary);
}

/* Optional full layer list, tucked behind a small toggle below the reorder bar. */
.cert-creater__layer-details>summary.cert-creater__property-label--summary {
	cursor: pointer;
	user-select: none;
	list-style: none;
	margin-bottom: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--cc-text-secondary, #64748b);
	text-transform: none;
	letter-spacing: 0;
}

.cert-creater__layer-details[open]>summary.cert-creater__property-label--summary {
	margin-bottom: 8px;
}

.cert-creater__property-label--summary::-webkit-details-marker {
	display: none;
}

.cert-creater__summary-chevron {
	margin-left: auto;
	color: var(--cc-text-muted, #94a3b8) !important;
	transition: transform 0.15s;
}

.cert-creater__summary-chevron::before {
	width: 16px;
	height: 16px;
}

.cert-creater__layer-details[open] .cert-creater__summary-chevron {
	transform: rotate(180deg);
}

/* Vertical divider separating text-style buttons from alignment buttons. */
.cert-creater__style-divider {
	width: 1px;
	align-self: stretch;
	background: var(--cc-border, #e2e8f0);
	margin: 2px 4px;
}

.cert-creater__property-row {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.cert-creater__property-row:last-child {
	margin-bottom: 0;
}

.cert-creater__property-input {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cert-creater__property-input--full {
	flex: none;
	width: 100%;
}

.cert-creater__property-input label {
	font-size: 11px;
	color: var(--cc-text-secondary, #64748b);
}

.cert-creater__property-input input[type="number"],
.cert-creater__property-input input[type="text"] {
	width: 100%;
	padding: 6px 8px;
	font-size: 13px;
	border: 1px solid var(--cc-border, #e2e8f0);
	border-radius: 6px;
	background: var(--cc-input-bg, #ffffff);
	color: var(--cc-text-primary, #1a202c);
	transition: all 0.15s;
}

.cert-creater__property-input input:focus {
	outline: none;
	border-color: var(--cc-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-primary) 10%, transparent);
}

.cert-creater__property-input input[type="color"] {
	width: 100%;
	height: 32px;
	padding: 2px;
	border: 1px solid var(--cc-border, #e2e8f0);
	border-radius: 6px;
	cursor: pointer;
	background: transparent;
}

/* Color field: swatch button (opens the custom HSV popover) + hex text input,
   so a color can be picked visually or typed/pasted as a hex code. */
.cert-creater__color-field {
	display: flex;
	align-items: center;
	gap: 6px;
}

.cert-creater__color-field-swatch {
	flex: none;
	width: 36px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--cc-border, #e2e8f0);
	border-radius: 6px;
	cursor: pointer;
	background-clip: padding-box;
}

.cert-creater__color-field-swatch:hover {
	border-color: var(--cc-primary);
}

.cert-creater__hex-input {
	flex: 1;
	min-width: 0;
	height: 32px;
	padding: 0 8px;
	border: 1px solid var(--cc-border, #e2e8f0);
	border-radius: 6px;
	font-size: 13px;
	font-family: "Fira Code", "Consolas", monospace;
	text-transform: lowercase;
	color: var(--cc-text-primary, #1a202c);
	background: #fff;
}

.cert-creater__hex-input:focus {
	outline: none;
	border-color: var(--cc-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-primary) 10%, transparent);
}

/* Custom HSV color picker popover (the native <input type=color> dialog can't
   host a hex field, so we render our own). */
.cert-creater__color-popup-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9998;
}

.cert-creater__color-popup {
	position: fixed;
	z-index: 9999;
	width: 244px;
	box-sizing: border-box;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--cc-border, #e2e8f0);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cert-creater__color-popup-area {
	position: relative;
	width: 100%;
	height: 140px;
	border-radius: 8px;
	cursor: crosshair;
	touch-action: none;
	background-image:
		linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
		linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.cert-creater__color-popup-cursor {
	position: absolute;
	width: 14px;
	height: 14px;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.cert-creater__color-popup-hue {
	width: 100%;
	height: 14px;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 7px;
	cursor: pointer;
	background: linear-gradient(to right,
			#f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}

.cert-creater__color-popup-hue::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.cert-creater__color-popup-hue::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.cert-creater__color-popup-foot {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cert-creater__color-popup-preview {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	border: 1px solid var(--cc-border, #e2e8f0);
}

.cert-creater__color-popup-hex {
	flex: 1;
}

.cert-creater__color-popup-pipette {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--cc-border, #e2e8f0);
	border-radius: 6px;
	background: #fff;
	color: var(--cc-text-secondary, #64748b);
	cursor: pointer;
}

.cert-creater__color-popup-pipette:hover {
	border-color: var(--cc-primary);
	color: var(--cc-primary);
}

.cert-creater__property-input input[type="range"] {
	flex: 1;
	accent-color: var(--cc-primary);
}

/* Background row: a compact fixed-width color swatch next to a Transparent
   button, so the swatch isn't stretched full-width and the button stays small. */
.cert-creater__bg-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cert-creater__bg-row .cert-creater__color-field {
	flex: 1;
	min-width: 0;
}

.cert-creater__bg-row .cert-creater__bg-color {
	flex: none;
	width: 36px;
}

.cert-creater__bg-row .cert-creater__btn--small {
	flex: none;
}

.cert-creater__property-input span {
	font-size: 11px;
	color: var(--cc-text-secondary, #64748b);
	min-width: 35px;
	text-align: right;
}

/* Recently used colors — clickable swatches shown under color pickers */
.cert-creater__recent-colors {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
}

.cert-creater__recent-colors-caption {
	width: 100%;
	font-size: 10px;
	font-weight: 600;
	color: #94a3b8;
	margin-bottom: 2px;
}

.cert-creater__recent-color {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1px solid var(--cc-border, #e2e8f0);
	border-radius: 4px;
	cursor: pointer;
	transition: transform 0.1s, box-shadow 0.1s;
}

.cert-creater__recent-color:hover {
	transform: scale(1.15);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc-primary) 25%, transparent);
}

/* Wrapper holds a swatch plus a discreet remove button that only appears on
   hover, so users can prune the "recently used" list without visual clutter. */
.cert-creater__recent-color-wrap {
	position: relative;
	display: inline-flex;
	line-height: 0;
}

.cert-creater__recent-color-remove {
	position: absolute;
	top: -5px;
	right: -5px;
	width: 13px;
	height: 13px;
	padding: 0;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	line-height: 1;
	color: #ffffff;
	background: #64748b;
	border: 1px solid #ffffff;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.cert-creater__recent-color-wrap:hover .cert-creater__recent-color-remove {
	display: inline-flex;
}

.cert-creater__recent-color-remove:hover {
	background: #ef4444;
}


/* Text Input (Textarea) */
.cert-creater__text-input {
	width: 100%;
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	border: 1px solid var(--cc-border, #e2e8f0);
	border-radius: 6px;
	background: var(--cc-input-bg, #ffffff);
	color: var(--cc-text-primary, #1a202c);
	resize: vertical;
	min-height: 60px;
	transition: all 0.15s;
}

.cert-creater__text-input:focus {
	outline: none;
	border-color: var(--cc-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-primary) 10%, transparent);
}

/* Select */
.cert-creater__select {
	width: 100%;
	padding: 6px 8px;
	font-size: 13px;
	border: 1px solid var(--cc-border, #e2e8f0);
	border-radius: 6px;
	background: var(--cc-input-bg, #ffffff);
	color: var(--cc-text-primary, #1a202c);
	cursor: pointer;
	transition: all 0.15s;
}

.cert-creater__select:focus {
	outline: none;
	border-color: var(--cc-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-primary) 10%, transparent);
}

/* Style Buttons */
.cert-creater__style-buttons {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 8px;
}

/* Alignment cluster sits flush right, mirroring the design mockup. */
.cert-creater__style-buttons .cert-creater__style-align {
	margin-left: auto;
	display: flex;
	gap: 4px;
}

.cert-creater__style-buttons:last-child {
	margin-bottom: 0;
}

.cert-creater__style-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	border: 1px solid var(--cc-border, #e2e8f0);
	background: var(--cc-input-bg, #ffffff);
	color: var(--cc-text-secondary, #64748b);
	cursor: pointer;
	transition: all 0.15s;
}

.cert-creater__style-btn .material-symbols-outlined {
	font-size: 18px;
}

.cert-creater__style-btn-label {
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.5px;
}

.cert-creater__style-btn:hover {
	background: var(--cc-surface, #f1f5f9);
	color: var(--cc-text-primary, #1a202c);
}

.cert-creater__style-btn--active {
	background: var(--cc-primary);
	border-color: var(--cc-primary);
	color: white;
}

/* Layer Buttons */
.cert-creater__layer-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 120px;
	overflow-y: auto;
	margin-bottom: 6px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 4px;
}

.cert-creater__layer-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 11px;
	color: #64748b;
	white-space: nowrap;
	overflow: hidden;
	flex-shrink: 0;
}

.cert-creater__layer-item:hover {
	background: #f1f5f9;
}

.cert-creater__layer-item--active {
	background: var(--cc-primary-light);
	color: var(--cc-primary);
	font-weight: 500;
}

/* Drag-and-drop reordering */
.cert-creater__layer-drag-handle {
	cursor: grab;
	color: #cbd5e1;
}

.cert-creater__layer-item:hover .cert-creater__layer-drag-handle {
	color: #94a3b8;
}

.cert-creater__layer-item--dragging {
	opacity: 0.5;
}

.cert-creater__layer-item--drop-before {
	box-shadow: inset 0 2px 0 0 var(--cc-primary);
}

.cert-creater__layer-item--drop-after {
	box-shadow: inset 0 -2px 0 0 var(--cc-primary);
}

.cert-creater__layer-item .material-symbols-outlined {
	font-size: 14px;
	flex-shrink: 0;
}

.cert-creater__layer-item-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cert-creater__layer-lock {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: none;
	background: transparent;
	color: #94a3b8;
	cursor: pointer;
	padding: 0;
	border-radius: 4px;
}

.cert-creater__layer-lock:hover {
	background: #e2e8f0;
	color: #475569;
}

.cert-creater__layer-lock--active {
	color: var(--cc-primary);
}

.cert-creater__layer-item--locked .cert-creater__layer-item-label {
	font-style: italic;
	opacity: 0.75;
}

.cert-creater__lock-badge {
	position: absolute;
	top: 2px;
	left: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	color: #475569;
	pointer-events: none;
	z-index: 5;
}

/* Keep the lock glyph compact so it doesn't cover small text boxes/shapes. */
.cert-creater__lock-badge .material-symbols-outlined,
.cert-creater__lock-badge .material-symbols-outlined::before {
	width: 12px;
	height: 12px;
}

.cert-creater__layer-buttons {
	display: flex;
	gap: 4px;
}

/* Action Buttons */
.cert-creater__action-buttons {
	display: flex;
	/* Stack vertically: the long German labels ("Element duplizieren"/"Element
	   löschen") don't fit side by side in the 300px panel and got clipped by the
	   panel's overflow:hidden because .cert-creater__btn uses white-space: nowrap. */
	flex-direction: column;
	gap: 8px;
}

.cert-creater__action-buttons .cert-creater__btn {
	width: 100%;
}

/* ========================================
   Status Bar
   ======================================== */
.cert-creater__statusbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	font-size: 11px;
	color: var(--cc-text-muted, #94a3b8);
	background: var(--cc-header-bg, #ffffff);
	border-top: 1px solid var(--cc-border, #e2e8f0);
	flex-shrink: 0;
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 1024px) {

	.cert-creater__placeholder-panel,
	.cert-creater__properties-panel {
		width: 250px;
	}
}

@media (max-width: 768px) {
	.cert-creater__header {
		flex-wrap: wrap;
		padding: 12px;
	}

	.cert-creater__header-left {
		order: 1;
		flex: 1 1 100%;
		margin-bottom: 8px;
	}

	.cert-creater__header-center {
		order: 2;
	}

	.cert-creater__header-right {
		order: 3;
	}

	.cert-creater__name-input {
		min-width: 100%;
		max-width: 100%;
	}

	.cert-creater__content {
		flex-direction: column;
	}

	.cert-creater__placeholder-panel,
	.cert-creater__properties-panel {
		width: 100%;
		max-height: 250px;
		border-left: none;
		border-right: none;
		border-top: 1px solid var(--cc-border, #e2e8f0);
	}

	.cert-creater__canvas-container {
		padding: 16px;
	}
}

/* ========================================
   Modal / Certificate List
   ======================================== */
.cert-creater__modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	backdrop-filter: blur(4px);
}

.cert-creater__modal {
	background: white;
	border-radius: 16px;
	width: 90%;
	max-width: 600px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.cert-creater__modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid #e5e7eb;
	background: linear-gradient(to bottom, #ffffff, #fafbfc);
}

.cert-creater__modal-header h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--cc-text-primary, #0d1130);
}

/* Section switcher (Meine Zertifikate / Vorlagen) inside the open-list modal */
.cert-creater__modal-tabs {
	display: flex;
	gap: 4px;
	padding: 8px 16px 0;
	border-bottom: 1px solid #e5e7eb;
	background: #ffffff;
}

.cert-creater__modal-tab {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: none;
	background: transparent;
	color: var(--cc-text-secondary, #475569);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.cert-creater__modal-tab .material-symbols-outlined {
	font-size: 18px;
}

.cert-creater__modal-tab:hover {
	color: var(--cc-primary);
}

.cert-creater__modal-tab--active {
	color: var(--cc-primary);
	border-bottom-color: var(--cc-primary);
}

.cert-creater__modal-hint {
	margin: 0 0 12px;
	padding: 10px 12px;
	background: var(--cc-primary-light, #d9e3f0);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--cc-text-secondary, #475569);
}

.cert-creater__modal-content {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
}

/* Confirm dialog (e.g. discard changes before "Neu") */
.cert-creater__modal--confirm {
	max-width: 520px;
}

.cert-creater__confirm-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cc-text-primary, #0d1130);
}

.cert-creater__confirm-error {
	margin: 12px 0 0;
	font-size: 13px;
	color: #dc2626;
}

.cert-creater__modal-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	padding: 16px 24px;
	border-top: 1px solid #e5e7eb;
	background: #fafbfc;
}

.cert-creater__modal-footer .cert-creater__btn {
	white-space: nowrap;
}

.cert-creater__modal-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	background: #ffffff;
}

.cert-creater__modal-search .material-symbols-outlined {
	color: #64748b;
	font-size: 20px;
}

.cert-creater__modal-search-input {
	width: 100%;
	height: 36px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	padding: 0 10px;
	font-size: 14px;
	color: var(--cc-text-primary, #0d1130);
	background: #f8fafc;
	outline: none;
}

.cert-creater__modal-search-input:focus {
	border-color: var(--cc-primary);
	background: #ffffff;
}

.cert-creater__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	color: #64748b;
	font-size: 14px;
}

.cert-creater__no-certs {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	color: #94a3b8;
	font-size: 14px;
}

.cert-creater__list-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1px solid #e5e7eb;
	margin-bottom: 8px;
}

.cert-creater__list-item:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
}

.cert-creater__list-item--new {
	background: linear-gradient(135deg, var(--cc-primary-light) 0%, var(--cc-surface) 100%);
	border-color: var(--cc-primary-border);
	color: var(--cc-primary-pressed);
	font-weight: 500;
}

.cert-creater__list-item--new:hover {
	background: linear-gradient(135deg, var(--cc-primary-light) 0%, var(--cc-primary-light) 100%);
	border-color: var(--cc-primary);
}

.cert-creater__list-item--new .material-symbols-outlined {
	font-size: 24px;
}

.cert-creater__list-section-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #475569;
	margin: 14px 4px 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid #e5e7eb;
}

.cert-creater__list-divider {
	height: 1px;
	background: transparent;
	margin: 8px 0 0;
}

.cert-creater__list-item-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cert-creater__list-item-thumb {
	flex: none;
	width: 44px;
	height: 62px;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	position: relative;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.cert-creater__list-item-thumb-page {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: top left;
	overflow: hidden;
}

.cert-creater__list-item-thumb-empty {
	width: 100%;
	height: 100%;
	background: #fff;
}

.cert-creater__list-item-title {
	font-size: 15px;
	font-weight: 500;
	color: var(--cc-text-primary, #0d1130);
}

.cert-creater__list-item-meta {
	font-size: 12px;
	color: #64748b;
	display: flex;
	align-items: center;
	gap: 8px;
}

.cert-creater__list-item>.material-symbols-outlined {
	color: #94a3b8;
}

/* Per-row delete button (only rendered for own certificates). Discreet by
   default, turns red on hover; brought forward when the row is hovered. */
.cert-creater__list-item-delete {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: #cbd5e1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.cert-creater__list-item:hover .cert-creater__list-item-delete {
	color: #94a3b8;
}

.cert-creater__list-item-delete:hover {
	background: #fef2f2;
	color: #dc2626;
}

.cert-creater__list-item-delete .material-symbols-outlined {
	font-size: 20px;
}

/* ========================================
   Badges
   ======================================== */
.cert-creater__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cert-creater__badge--public {
	background: #dcfce7;
	color: #166534;
}

.cert-creater__badge--custom {
	background: #fef3c7;
	color: #92400e;
}

.cert-creater__badge--new {
	background: var(--cc-primary-light);
	color: var(--cc-primary);
}

.cert-creater__badge--clickable {
	cursor: pointer;
	border: 1px solid transparent;
	transition: all 0.15s ease;
}

.cert-creater__badge--clickable:hover {
	border-color: currentColor;
	opacity: 0.85;
}

/* ========================================
   Error Banner
   ======================================== */
.cert-creater__error-banner {
	background: #fef2f2;
	color: #dc2626;
	padding: 12px 20px;
	font-size: 13px;
	border-bottom: 1px solid #fecaca;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ========================================
   Info Banner
   ======================================== */
.cert-creater__info-banner {
	background: var(--cc-primary-light);
	color: var(--cc-primary-pressed);
	padding: 12px 20px;
	font-size: 13px;
	border-bottom: 1px solid var(--cc-primary-border);
	display: flex;
	align-items: center;
	gap: 8px;
}

.cert-creater__info-banner .material-symbols-outlined {
	font-size: 18px;
}

/* ========================================
   Danger Icon Button
   ======================================== */
.cert-creater__btn--danger-icon {
	color: #64748b;
}

.cert-creater__btn--danger-icon:hover:not(:disabled) {
	background: #fef2f2;
	color: #dc2626;
}

/* ========================================
   Preview Modal
   ======================================== */
.cert-creater__preview-modal {
	background: white;
	border-radius: 16px;
	width: 95%;
	max-width: 900px;
	height: 90vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.cert-creater__preview-modal .cert-creater__modal-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	border-bottom: 1px solid #e5e7eb;
	background: #f8fafc;
}

.cert-creater__preview-modal .cert-creater__modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.cert-creater__preview-hint {
	font-size: 13px;
	color: #64748b;
	flex: 1;
}

.cert-creater__modal-header-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

.cert-creater__preview-content {
	flex: 1;
	overflow: hidden;
	background: #e8ecf0;
}

.cert-creater__preview-iframe {
	width: 100%;
	height: 100%;
	border: none;
	background: white;
}

.cert-creater__preview-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	color: #64748b;
}

.cert-creater__spinner {
	animation: spin 1s linear infinite;
	font-size: 32px;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* ========================================
   Undo toast (smart delete confirmation)
   ======================================== */
.cert-creater__undo-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px 10px 16px;
	background: #1e293b;
	color: #f8fafc;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
	font-size: 13px;
	z-index: 1200;
	animation: cert-creater-toast-in 0.18s ease-out;
}

@keyframes cert-creater-toast-in {
	from {
		opacity: 0;
		transform: translate(-50%, 12px);
	}

	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

.cert-creater__undo-toast .material-symbols-outlined {
	font-size: 18px;
}

.cert-creater__undo-toast-label {
	white-space: nowrap;
}

.cert-creater__undo-toast-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: 6px;
	padding: 5px 10px;
	background: transparent;
	color: #93c5fd;
	border: none;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.cert-creater__undo-toast-btn:hover {
	background: rgba(147, 197, 253, 0.15);
}

.cert-creater__undo-toast-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	background: transparent;
	color: #94a3b8;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

.cert-creater__undo-toast-close:hover {
	color: #f8fafc;
	background: rgba(248, 250, 252, 0.12);
}

/* Generic status toast (e.g. "Gespeichert ✓"). Placed top-center so it never
   overlaps the bottom-center undo toast. */
.cert-creater__status-toast {
	position: fixed;
	left: 50%;
	top: 18px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #16a34a;
	color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
	font-size: 13px;
	font-weight: 600;
	z-index: 1300;
	animation: cert-creater-status-toast-in 0.18s ease-out;
}

@keyframes cert-creater-status-toast-in {
	from {
		opacity: 0;
		transform: translate(-50%, -12px);
	}

	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

.cert-creater__status-toast .material-symbols-outlined,
.cert-creater__status-toast .material-symbols-outlined::before {
	width: 18px;
	height: 18px;
}

.cert-creater__status-toast-label {
	white-space: nowrap;
}