/* ================================================================
   Ticket System - Global Styles (Light DOM)
   ================================================================ */

/* ================================================================
   CSS Variables - Light Theme (Default)
   ================================================================ */
pc-ticket-lane,
pc-ticket-system,
.rd-tckt-form-container {
	/* GitHub Light inspired palette */
	--tckt-bg-primary: #f6f8fa;
	--tckt-bg-secondary: #ffffff;
	--tckt-bg-tertiary: #eaeef2;
	--tckt-text-primary: #1f2328;
	--tckt-text-secondary: #656d76;
	--tckt-text-tertiary: #8b949e;
	--tckt-border-color: #d0d7de;
	--tckt-shadow: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
	--tckt-input-bg: #ffffff;
	--tckt-input-border: #d0d7de;
	--tckt-button-bg: #1f883d;
	--tckt-button-hover: #1a7f37;
	--tckt-button-secondary-bg: #f6f8fa;
	--tckt-button-secondary-hover: #eaeef2;
	--tckt-ai-icon-color: #9a6700;
	--tckt-ai-icon-hover: #7d4e00;
	--tckt-modal-bg: #ffffff;
	--tckt-modal-text: #1f2328;
	--tckt-modal-border: #d0d7de;
	--tckt-card-bg: #ffffff;
	--tckt-card-hover-bg: #f6f8fa;
	--tckt-title-link-color: #1f2328;
	--tckt-title-link-hover: #0969da;
	--tckt-hover-bg: #eaeef2;
	--tckt-selected-bg: #ddf4ff;
	/* Status colors - GitHub inspired */
	--tckt-status-backlog-bg: #0969da;
	--tckt-status-backlog-fg: #ffffff;
	--tckt-status-todo-bg: #1f883d;
	--tckt-status-todo-fg: #ffffff;
	--tckt-status-open-bg: #9a6700;
	--tckt-status-open-fg: #ffffff;
	--tckt-status-closed-bg: #8250df;
	--tckt-status-closed-fg: #ffffff;
	--tckt-status-canceled-bg: #cf222e;
	--tckt-status-canceled-fg: #ffffff;
	/* Priority colors */
	--tckt-priority-low-bg: #0969da;
	--tckt-priority-low-fg: #ffffff;
	--tckt-priority-medium-bg: #9a6700;
	--tckt-priority-medium-fg: #ffffff;
	--tckt-priority-high-bg: #cf222e;
	--tckt-priority-high-fg: #ffffff;
	/* Badge colors - subtle backgrounds with strong text */
	--tckt-badge-status-backlog-bg: #ddf4ff;
	--tckt-badge-status-backlog-fg: #0550ae;
	--tckt-badge-status-backlog-border: #54aeff;
	--tckt-badge-status-todo-bg: #dafbe1;
	--tckt-badge-status-todo-fg: #116329;
	--tckt-badge-status-todo-border: #4ac26b;
	--tckt-badge-status-open-bg: #fff8c5;
	--tckt-badge-status-open-fg: #6c4400;
	--tckt-badge-status-open-border: #d4a72c;
	--tckt-badge-status-closed-bg: #fbefff;
	--tckt-badge-status-closed-fg: #6639ba;
	--tckt-badge-status-closed-border: #a475f9;
	--tckt-badge-status-canceled-bg: #ffebe9;
	--tckt-badge-status-canceled-fg: #a40e26;
	--tckt-badge-status-canceled-border: #ff8182;
	--tckt-badge-priority-low-bg: #ddf4ff;
	--tckt-badge-priority-low-fg: #0550ae;
	--tckt-badge-priority-low-border: #54aeff;
	--tckt-badge-priority-medium-bg: #fff8c5;
	--tckt-badge-priority-medium-fg: #6c4400;
	--tckt-badge-priority-medium-border: #d4a72c;
	--tckt-badge-priority-high-bg: #ffebe9;
	--tckt-badge-priority-high-fg: #a40e26;
	--tckt-badge-priority-high-border: #ff8182;
	--tckt-badge-developer-bg: #fbefff;
	--tckt-badge-developer-fg: #6639ba;
	--tckt-badge-developer-border: #a475f9;
}

/* ================================================================
   CSS Variables - Dark Theme (Monokai / VS Code inspired)
   ================================================================ */
pc-ticket-lane[dark-mode],
pc-ticket-system[dark-mode],
.rd-tckt-form-container[dark-mode] {
	--tckt-bg-primary: #1e1e1e;
	--tckt-bg-secondary: #252526;
	--tckt-bg-tertiary: #2d2d30;
	--tckt-text-primary: #f0f0f0;
	--tckt-text-secondary: #9cdcfe;
	--tckt-text-tertiary: #6a9955;
	--tckt-border-color: #3e3e42;
	--tckt-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
	--tckt-input-bg: #2d2d30;
	--tckt-input-border: #3e3e42;
	--tckt-button-bg: #0e639c;
	--tckt-button-hover: #1177bb;
	--tckt-button-secondary-bg: #3c3c3c;
	--tckt-button-secondary-hover: #505050;
	--tckt-ai-icon-color: #ffb74d;
	--tckt-ai-icon-hover: #ffa726;
	--tckt-modal-bg: #323232;
	--tckt-modal-text: #f0f0f0;
	--tckt-modal-border: #3e3e42;
	--tckt-card-bg: #2d2d30;
	--tckt-card-hover-bg: rgba(255, 255, 255, 0.04);
	--tckt-title-link-color: #f0f0f0;
	--tckt-title-link-hover: #ffffff;
	--tckt-hover-bg: #3c3c3c;
	--tckt-selected-bg: #264f78;
	--tckt-drop-highlight-bg: #26bbd9;
	--tckt-drop-highlight-fg: #1e1e1e;
	/* Status colors - Monokai */
	--tckt-status-backlog-bg: #66d9ef;
	--tckt-status-backlog-fg: #1e1e1e;
	--tckt-status-todo-bg: #a6e22e;
	--tckt-status-todo-fg: #1e1e1e;
	--tckt-status-open-bg: #e6db74;
	--tckt-status-open-fg: #1e1e1e;
	--tckt-status-closed-bg: #ae81ff;
	--tckt-status-closed-fg: #1e1e1e;
	--tckt-status-canceled-bg: #f92672;
	--tckt-status-canceled-fg: #f8f8f2;
	/* Priority colors - Monokai */
	--tckt-priority-low-bg: #66d9ef;
	--tckt-priority-low-fg: #1e1e1e;
	--tckt-priority-medium-bg: #e6db74;
	--tckt-priority-medium-fg: #1e1e1e;
	--tckt-priority-high-bg: #f92672;
	--tckt-priority-high-fg: #f8f8f2;
	/* Badge colors - dark backgrounds with Monokai text */
	--tckt-badge-status-backlog-bg: #1f3d3d;
	--tckt-badge-status-backlog-fg: #66d9ef;
	--tckt-badge-status-backlog-border: #66d9ef;
	--tckt-badge-status-todo-bg: #2d3a1f;
	--tckt-badge-status-todo-fg: #a6e22e;
	--tckt-badge-status-todo-border: #a6e22e;
	--tckt-badge-status-open-bg: #3d3520;
	--tckt-badge-status-open-fg: #e6db74;
	--tckt-badge-status-open-border: #e6db74;
	--tckt-badge-status-closed-bg: #2d2640;
	--tckt-badge-status-closed-fg: #ae81ff;
	--tckt-badge-status-closed-border: #ae81ff;
	--tckt-badge-status-canceled-bg: #3d1f2a;
	--tckt-badge-status-canceled-fg: #f92672;
	--tckt-badge-status-canceled-border: #f92672;
	--tckt-badge-priority-low-bg: #1f2f3d;
	--tckt-badge-priority-low-fg: #64b5f6;
	--tckt-badge-priority-low-border: #42a5f5;
	--tckt-badge-priority-medium-bg: #3d3520;
	--tckt-badge-priority-medium-fg: #ffd54f;
	--tckt-badge-priority-medium-border: #ffb300;
	--tckt-badge-priority-high-bg: #3d1f2a;
	--tckt-badge-priority-high-fg: #ff5370;
	--tckt-badge-priority-high-border: #f44336;
	--tckt-badge-developer-bg: #2e2540;
	--tckt-badge-developer-fg: #ba68c8;
	--tckt-badge-developer-border: #9c27b0;
}

/* ================================================================
   Material Icons - Self-hosted Font
   ================================================================ */

@font-face {
	font-family: "Material Icons";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("/src/fonts/MaterialIcons-Regular.woff2") format("woff2");
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	vertical-align: middle;
}

/* ================================================================
   TicketLane Container - Fixed Full Page Layout
   ================================================================ */

pc-ticket-lane {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--tckt-bg-primary);
	color: var(--tckt-text-primary);
	transition: background-color 0.3s, color 0.3s, left 0.3s;
	overflow: hidden;
	z-index: 10000;
}

/* Adjust left position when navigation is visible */
body:has(#navigation_mobil:checked) pc-ticket-lane {
	left: 270px;
}

/* ================================================================
   Header Section - Sticky at Top
   ================================================================ */

pc-ticket-lane .rd-tckt-header {
	flex-shrink: 0;
	background: var(--tckt-bg-tertiary);
	padding: 10px 16px;
	box-shadow: var(--tckt-shadow);
	position: relative;
	z-index: 10;
	container-type: inline-size;
	container-name: ticket-header;
}

pc-ticket-lane .rd-tckt-header-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: nowrap;
}

pc-ticket-lane .rd-tckt-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
}

pc-ticket-lane pc-ticket-filter-bar {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: nowrap;
	flex: 1;
	min-width: 0;
}

pc-ticket-lane .rd-tckt-filter-group {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	height: auto;
}

/* Show filter labels as icons */
pc-ticket-lane .rd-tckt-filter-group label.rd-tckt-filter-label {
	display: flex;
	align-items: center;
}

pc-ticket-lane .rd-tckt-filter-group label.rd-tckt-filter-label .material-icons {
	font-size: 16px;
	color: var(--tckt-text-secondary);
	opacity: 0.5;
}

/* Sort group label icon - match the filter label styling */
pc-ticket-lane .rd-tckt-sort-group label .material-icons {
	font-size: 16px;
	color: var(--tckt-text-secondary);
	opacity: 0.5;
}

pc-ticket-lane .rd-tckt-filter-group label {
	font-size: 12px;
	font-weight: 500;
	color: var(--tckt-text-secondary);
	flex-shrink: 0;
	margin: 0;
	display: flex;
	align-items: center;
}

/* Responsive adjustments using container queries */
@container ticket-header (max-width: 1400px) {

	/* Below 1400px: allow natural wrapping but keep actions on right */
	pc-ticket-lane .rd-tckt-header-main {
		gap: 12px;
		flex-wrap: wrap;
	}

	pc-ticket-lane pc-ticket-filter-bar {
		gap: 12px;
	}

	pc-ticket-lane .rd-tckt-search-wrapper.rd-tckt-search-expanded .rd-tckt-search-input {
		width: 180px;
	}
}

@container ticket-header (max-width: 350px) {

	/* Enable filter bar wrapping to prevent overlap with action buttons */
	pc-ticket-lane pc-ticket-filter-bar {
		flex-wrap: wrap;
	}
}

@container ticket-header (max-width: 1150px) {

	/* More compression - still trying to keep on one or two lines */
	pc-ticket-lane .rd-tckt-header-main {
		gap: 10px;
	}

	pc-ticket-lane pc-ticket-filter-bar {
		gap: 10px;
	}

	pc-ticket-lane .rd-tckt-search-wrapper.rd-tckt-search-expanded .rd-tckt-search-input {
		width: 150px;
	}
}

@container ticket-header (max-width: 1000px) {

	/* Specific fix for awkward 960-1000px range */
	pc-ticket-lane .rd-tckt-header-main {
		gap: 8px;
	}

	pc-ticket-lane pc-ticket-filter-bar {
		gap: 8px;
	}

	pc-ticket-lane .rd-tckt-search-wrapper.rd-tckt-search-expanded .rd-tckt-search-input {
		width: 130px;
	}

	/* Make filter groups more compact */
	pc-ticket-lane .rd-tckt-filter-group {
		gap: 6px;
	}
}

@container ticket-header (max-width: 900px) {

	/* Allow filter bar to wrap naturally */
	pc-ticket-lane pc-ticket-filter-bar {
		flex-wrap: wrap;
	}

	pc-ticket-lane .rd-tckt-search-wrapper.rd-tckt-search-expanded .rd-tckt-search-input {
		flex: 1;
		min-width: 120px;
		max-width: 180px;
	}
}

@container ticket-header (max-width: 300px) {

	/* More aggressive wrapping for smaller screens */
	pc-ticket-lane .rd-tckt-search-wrapper.rd-tckt-search-expanded .rd-tckt-search-input {
		min-width: 80px;
		width: 100%;
	}
}

@container ticket-header (max-width: 250px) {

	/* Fully responsive mobile layout */
	pc-ticket-lane .rd-tckt-header-main {
		flex-direction: column;
		align-items: stretch;
	}

	pc-ticket-lane pc-ticket-filter-bar {
		flex-direction: column;
		align-items: stretch;
	}

	pc-ticket-lane .rd-tckt-search-wrapper.rd-tckt-search-expanded .rd-tckt-search-input {
		width: 100%;
	}

	pc-ticket-lane .rd-tckt-header-actions {
		width: 100%;
		justify-content: flex-end;
		margin-left: 0;
	}
}

/* Expandable Search Wrapper */
pc-ticket-lane .rd-tckt-search-wrapper {
	display: flex;
	align-items: center;
	position: relative;
}

pc-ticket-lane .rd-tckt-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 6px;
	border-radius: 6px;
	background: var(--tckt-bg-secondary);
	border: 1px solid var(--tckt-border-color);
	transition: all 0.2s;
	color: var(--tckt-text-secondary);
	flex-shrink: 0;
	width: 32px;
	height: 32px;
}

pc-ticket-lane .rd-tckt-search-toggle:hover {
	background: var(--tckt-bg-tertiary);
	color: var(--tckt-text-primary);
	border-color: var(--tckt-button-bg);
}

pc-ticket-lane .rd-tckt-search-toggle .material-icons {
	font-size: 18px;
}

pc-ticket-lane .rd-tckt-search-wrapper .rd-tckt-search-input {
	width: 0;
	padding: 6px 0;
	border: none;
	background: transparent;
	opacity: 0;
	transition: all 0.25s ease;
	margin-left: 0;
	min-width: 0;
}

pc-ticket-lane .rd-tckt-search-wrapper.rd-tckt-search-expanded .rd-tckt-search-toggle {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: none;
}

pc-ticket-lane .rd-tckt-search-wrapper.rd-tckt-search-expanded .rd-tckt-search-input {
	width: 200px;
	padding: 6px 12px;
	background: var(--tckt-bg-secondary);
	color: var(--tckt-text-primary);
	border: 1px solid var(--tckt-border-color);
	border-left: none;
	border-radius: 0 6px 6px 0;
	font-size: 13px;
	opacity: 1;
	min-width: 150px;
}

pc-ticket-lane .rd-tckt-search-wrapper.rd-tckt-search-expanded .rd-tckt-search-input:focus {
	outline: none;
	border-color: var(--tckt-button-bg);
	background: var(--tckt-bg-primary);
	box-shadow: 0 0 0 2px rgba(102, 217, 239, 0.1);
}

/* Theme Toggle Button */
pc-ticket-lane .rd-tckt-theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 8px;
	border-radius: 50%;
	background: var(--tckt-bg-tertiary);
	border: 1px solid var(--tckt-border-color);
	transition: all 0.2s;
	color: var(--tckt-text-primary);
	flex-shrink: 0;
	width: 36px;
	height: 36px;
}

pc-ticket-lane .rd-tckt-theme-toggle:hover {
	background: var(--tckt-button-bg);
	color: white;
	transform: scale(1.1) rotate(15deg);
	box-shadow: var(--tckt-shadow);
}

pc-ticket-lane .rd-tckt-theme-toggle .material-icons {
	font-size: 20px;
	transition: transform 0.3s ease;
}

pc-ticket-lane .rd-tckt-theme-toggle:active {
	transform: scale(0.95);
}

/* Global theme toggle buttons (for TicketCustomizer and other contexts) */
.rd-tckt-theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	padding: 8px;
	border-radius: 50%;
	background: var(--rd-primary-active);
	border: 1px solid var(--cl-blue-grey);
	transition: all 0.2s;
	color: white;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	box-shadow: 0 2px 4px var(--cl-black-alpha0c);
}

.rd-tckt-theme-toggle:hover {
	background: var(--cl-ocean-blue);
	color: white;
	transform: scale(1.1) rotate(15deg);
	box-shadow: 0 4px 8px var(--cl-black-alpha30);
	border-color: var(--cl-ocean-blue);
}

.rd-tckt-theme-toggle .material-icons {
	font-size: 20px;
	transition: transform 0.3s ease;
}

.rd-tckt-theme-toggle:active {
	transform: scale(0.95);
}

/* Button with label styling */
.rd-tckt-button-with-label {
	width: auto;
	padding: 8px 14px 8px 10px;
	border-radius: 18px;
}

.rd-tckt-button-with-label:hover {
	transform: scale(1.05);
	rotate: 0deg;
}

.rd-tckt-button-label {
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

pc-ticket-lane .rd-tckt-quick-ticket-input {
	padding: 6px 12px;
	background: var(--tckt-bg-secondary);
	color: var(--tckt-text-primary);
	border: 1px solid var(--tckt-border-color);
	border-radius: 6px;
	font-size: 13px;
	width: 350px;
	transition: all 0.2s;
}

pc-ticket-lane .rd-tckt-quick-ticket-input:focus {
	outline: none;
	border-color: var(--tckt-button-bg);
	background: var(--tckt-bg-primary);
	box-shadow: 0 0 0 2px rgba(102, 217, 239, 0.1);
	width: 450px;
}

pc-ticket-lane .rd-tckt-quick-ticket-input:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

pc-ticket-lane .rd-tckt-quick-ticket-input::placeholder {
	background: linear-gradient(90deg, #a6e22e, #66d9ef, #fd971f, #f92672);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

pc-ticket-lane .rd-tckt-quick-ticket-success {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 4px;
	font-size: 12px;
	color: #a6e22e;
	font-weight: 500;
	animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
	0% {
		opacity: 0;
		transform: translateY(-4px);
	}

	10% {
		opacity: 1;
		transform: translateY(0);
	}

	90% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(-4px);
	}
}

pc-ticket-lane .rd-tckt-create-ticket-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 14px;
	background: var(--tckt-badge-status-open-bg);
	color: var(--tckt-badge-status-open-fg);
	border: 1px solid var(--tckt-badge-status-open-border);
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	flex-shrink: 0;
	white-space: nowrap;
}

pc-ticket-lane .rd-tckt-create-ticket-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

pc-ticket-lane .rd-tckt-stats {
	display: flex;
	gap: 16px;
	margin-bottom: 16px;
	font-size: 14px;
	color: var(--tckt-text-secondary);
	flex-wrap: wrap;
}

/* ================================================================
   Scrollable Content Wrapper
   ================================================================ */

pc-ticket-lane .rd-tckt-content-wrapper {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 10px;
	min-height: 0;
	background: var(--tckt-bg-primary);
	text-align: left;
}

/* ================================================================
   Masonry Container
   ================================================================ */

pc-ticket-lane .rd-tckt-masonry-container {
	position: relative;
	width: 100%;
	/* Height set dynamically by JS */
}

/* Lane-level drag over state - full lane drop target indicator */
pc-ticket-lane.rd-tckt-lane-drag-over {
	outline: 2px dashed var(--tckt-button-bg);
	outline-offset: -4px;
	background: rgba(var(--button-bg-rgb, 66, 133, 244), 0.03);
	transition: background 0.2s ease, outline 0.2s ease;
}

/* Root card wrapper - contains ticket and drop zones */
pc-ticket-lane .rd-tckt-root-card-wrapper {
	position: absolute;
	/* Position set dynamically by JS masonry layout */
	display: block;
	margin: 0;
	padding: 0;
	overflow: visible;
	transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, z-index 0s;
}

/* Root Level Drop Zones - positioned absolutely within wrapper */
pc-ticket-lane .rd-tckt-root-drop-zone {
	position: absolute;
	left: 0;
	right: 0;
	height: 24px;
	transition: all 0.2s ease;
	opacity: 0;
	pointer-events: auto;
	z-index: 1;
}

pc-ticket-lane .rd-tckt-root-drop-zone.rd-tckt-before {
	top: -12px;
}

pc-ticket-lane .rd-tckt-root-drop-zone.rd-tckt-after {
	bottom: -12px;
}

/* Show subtle hint on hover during drag */
pc-ticket-lane .rd-tckt-root-drop-zone:hover::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 2px;
	background: var(--tckt-button-bg);
	opacity: 0.3;
	border-radius: 2px;
}

/* Active drop zone */
pc-ticket-lane .rd-tckt-root-drop-zone.rd-tckt-root-drop-zone-active {
	opacity: 1;
	height: 28px;
	pointer-events: auto;
	z-index: 20;
}

pc-ticket-lane .rd-tckt-root-drop-zone.rd-tckt-before.rd-tckt-root-drop-zone-active {
	top: -14px;
}

pc-ticket-lane .rd-tckt-root-drop-zone.rd-tckt-after.rd-tckt-root-drop-zone-active {
	bottom: -14px;
}

pc-ticket-lane .rd-tckt-root-drop-zone.rd-tckt-root-drop-zone-active::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 3px;
	background: var(--tckt-button-bg);
	border-radius: 2px;
	box-shadow: 0 0 8px var(--tckt-button-bg);
	animation: rootDropZonePulse 1s ease-in-out infinite;
}

@keyframes rootDropZonePulse {

	0%,
	100% {
		opacity: 0.6;
		transform: translateY(-50%) scaleX(0.98);
	}

	50% {
		opacity: 1;
		transform: translateY(-50%) scaleX(1);
	}
}

/* Empty grid drop zone */
pc-ticket-lane .rd-tckt-root-drop-zone.rd-tckt-empty-grid-drop {
	grid-column: 1 / -1;
	height: 200px;
	margin: 0;
	border: 2px dashed var(--tckt-border-color);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.5;
	transition: all 0.2s ease;
}

pc-ticket-lane .rd-tckt-root-drop-zone.rd-tckt-empty-grid-drop span {
	color: var(--tckt-text-secondary);
	font-size: 14px;
}

pc-ticket-lane .rd-tckt-root-drop-zone.rd-tckt-empty-grid-drop.rd-tckt-root-drop-zone-active {
	opacity: 1;
	border-color: var(--tckt-button-bg);
	background: rgba(var(--button-bg-rgb, 66, 133, 244), 0.05);
}

@media (max-width: 768px) {
	pc-ticket-lane .rd-tckt-masonry-container {
		grid-template-columns: 1fr;
	}

	pc-ticket-lane h1 {
		padding-right: 0;
		margin-bottom: 48px;
	}
}

pc-ticket-lane .rd-tckt-empty-state {
	text-align: center;
	padding: 64px 24px;
	color: var(--tckt-text-tertiary);
}

pc-ticket-lane .rd-tckt-loading-indicator {
	text-align: center;
	padding: 32px;
	color: var(--tckt-text-tertiary);
}

pc-ticket-lane .rd-tckt-load-more {
	text-align: center;
	margin-top: 24px;
}

pc-ticket-lane .rd-tckt-load-more button {
	padding: 12px 24px;
	border: none;
	background: var(--tckt-button-bg);
	color: white;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	transition: background 0.2s;
}

pc-ticket-lane .rd-tckt-load-more button:hover {
	background: var(--tckt-button-hover);
}

/* ================================================================
   Dialog Styles (Shared)
   ================================================================ */

pc-ticket-lane .rd-tckt-dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fadeIn 0.2s ease-out;
	backdrop-filter: blur(4px);
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

pc-ticket-lane .rd-tckt-dialog-content {
	background: var(--tckt-modal-bg);
	border: 1px solid var(--tckt-border-color);
	border-radius: 12px;
	box-shadow: var(--tckt-shadow);
	max-width: 800px;
	width: 90%;
	max-height: 90vh;
	overflow: auto;
	animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
	from {
		transform: translateY(-20px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

pc-ticket-lane .rd-tckt-dialog-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px;
	border-bottom: 1px solid var(--tckt-border-color);
}

pc-ticket-lane .rd-tckt-dialog-header h2 {
	margin: 0;
	color: var(--tckt-text-primary);
	font-size: 20px;
}

pc-ticket-lane .rd-tckt-dialog-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: var(--tckt-text-secondary);
	padding: 4px 8px;
	border-radius: 4px;
	transition: all 0.2s;
}

pc-ticket-lane .rd-tckt-dialog-close:hover {
	background: var(--tckt-bg-tertiary);
	color: var(--tckt-text-primary);
}

/* ================================================================
   Form Styles
   ================================================================ */

/* Button Container for TicketForm */
.rd-tckt-button-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--tckt-border-color);
}

.rd-tckt-button-group-left,
.rd-tckt-button-group-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Two Column Layout */
.rd-tckt-form-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}

/* Single column layout for read-only mode */
.rd-tckt-form-container[readonly] .rd-tckt-form-columns {
	grid-template-columns: 1fr;
	gap: 0;
}

.rd-tckt-form-left-column {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.rd-tckt-form-right-column {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.rd-tckt-fullbody-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.rd-tckt-html-editor {
	flex: 1;
	min-height: 400px;
}

/* Thread/Comments Section */
.rd-tckt-thread-section {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--tckt-border-color);
}

.rd-tckt-thread-section > .rd-tckt-form-label {
	margin-bottom: 4px;
	display: block;
}

.rd-tckt-thread-section pc-thread-view {
	display: block;
}

.rd-tckt-thread-section .rd-new-thread-message-wrap {
	margin-left: 0;
	margin-bottom: 12px;
}

/* HTML Editor in thread section */
.rd-tckt-thread-section .rd-new-thread-message-editor {
	display: block;
	width: 100%;
	min-height: 80px;
	border: 1px solid var(--tckt-border-color);
	border-radius: 0;
	background: var(--tckt-bg-secondary);
}

/* ============================================
   TinyMCE Dark Mode Styling for ALL Ticket Editors
   Applies to: ThreadView comments, Full Body editor
   ============================================ */

/* Common inline editor container styling */
.rd-tckt-thread-section .rd-new-thread-message-editor .tox-tinymce-inline,
.rd-tckt-html-editor .tox-tinymce-inline {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
}

/* Editor header (contains toolbar) - no borders, parent has border */
.rd-tckt-thread-section .rd-new-thread-message-editor .tox-editor-header {
	background: var(--tckt-bg-tertiary) !important;
	border: none !important;
	border-radius: 0 !important;
}

.rd-tckt-html-editor .tox-editor-header {
	background: var(--tckt-bg-tertiary) !important;
	border: none !important;
	border-radius: 0 !important;
}

/* Toolbar background */
.rd-tckt-thread-section .rd-new-thread-message-editor .tox-toolbar,
.rd-tckt-thread-section .rd-new-thread-message-editor .tox-toolbar__primary,
.rd-tckt-html-editor .tox-toolbar,
.rd-tckt-html-editor .tox-toolbar__primary {
	background: var(--tckt-bg-tertiary) !important;
	border: none !important;
}

/* Editor content area - Thread comments (smaller) */
.rd-tckt-thread-section .rd-new-thread-message-editor .mce-content-body {
	padding: 12px;
	color: var(--tckt-text-primary);
	font-size: 14px;
	min-height: 60px;
	border: none !important;
	border-color: transparent !important;
}

/* Editor content area - Full body editor (larger) */
.rd-tckt-html-editor .mce-content-body {
	padding: 12px;
	color: var(--tckt-text-primary);
	font-size: 14px;
	min-height: 300px;
	border: none !important;
	border-color: transparent !important;
}

/* Override TinyMCE focus outline for dark mode */
.rd-tckt-thread-section .rd-new-thread-message-editor .mce-content-body.mce-edit-focus,
.rd-tckt-html-editor .mce-content-body.mce-edit-focus {
	outline: none !important;
}

.rd-tckt-thread-section .rd-new-thread-message-editor .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before,
.rd-tckt-html-editor .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
	color: var(--tckt-text-muted);
}

/* TinyMCE Toolbar Dark Mode - Button Styling */
.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn,
.rd-tckt-html-editor .tox .tox-tbtn {
	color: var(--tckt-text-primary) !important;
	background: transparent !important;
}

.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn svg,
.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn svg path,
.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-icon svg,
.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-icon svg path,
.rd-tckt-html-editor .tox .tox-tbtn svg,
.rd-tckt-html-editor .tox .tox-tbtn svg path,
.rd-tckt-html-editor .tox .tox-icon svg,
.rd-tckt-html-editor .tox .tox-icon svg path {
	fill: var(--tckt-text-primary) !important;
}

.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn:hover,
.rd-tckt-html-editor .tox .tox-tbtn:hover {
	background: var(--tckt-bg-secondary) !important;
	color: var(--tckt-text-primary) !important;
}

.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn:hover svg,
.rd-tckt-html-editor .tox .tox-tbtn:hover svg {
	fill: var(--tckt-text-primary) !important;
}

.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn--enabled,
.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn:active,
.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn:focus,
.rd-tckt-html-editor .tox .tox-tbtn--enabled,
.rd-tckt-html-editor .tox .tox-tbtn:active,
.rd-tckt-html-editor .tox .tox-tbtn:focus {
	background: var(--tckt-badge-status-open-bg);
	color: var(--tckt-badge-status-open-fg);
}

.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn--enabled svg,
.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn:active svg,
.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn:focus svg,
.rd-tckt-html-editor .tox .tox-tbtn--enabled svg,
.rd-tckt-html-editor .tox .tox-tbtn:active svg,
.rd-tckt-html-editor .tox .tox-tbtn:focus svg {
	fill: var(--tckt-badge-status-open-fg) !important;
}

.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn--disabled,
.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn--disabled:hover,
.rd-tckt-html-editor .tox .tox-tbtn--disabled,
.rd-tckt-html-editor .tox .tox-tbtn--disabled:hover {
	background: transparent;
	color: var(--tckt-text-muted);
	cursor: not-allowed;
}

.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn--disabled svg,
.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn--disabled:hover svg,
.rd-tckt-html-editor .tox .tox-tbtn--disabled svg,
.rd-tckt-html-editor .tox .tox-tbtn--disabled:hover svg {
	fill: var(--tckt-text-muted) !important;
}

/* TinyMCE Wrapper and Content Area - Override base HTMLEditor.css */
.rd-tckt-thread-section .rd-new-thread-message-editor .pcTinyWrapper,
.rd-tckt-html-editor .pcTinyWrapper {
	background-color: var(--tckt-bg-tertiary) !important;
}

.rd-tckt-thread-section .rd-new-thread-message-editor .pcTinyEditorContent,
.rd-tckt-html-editor .pcTinyEditorContent {
	border: none !important;
	border-color: transparent !important;
	background: var(--tckt-bg-tertiary) !important;
}

/* TinyMCE Toolbar - Group Dividers */
.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-toolbar__group:not(:last-of-type),
.rd-tckt-html-editor .tox .tox-toolbar__group:not(:last-of-type) {
	border-right-color: var(--tckt-border-color);
}

/* TinyMCE Toolbar - Select Labels and Dropdowns */
.rd-tckt-thread-section .rd-new-thread-message-editor .tox .tox-tbtn__select-label,
.rd-tckt-html-editor .tox .tox-tbtn__select-label {
	color: var(--tckt-text-primary);
}

.rd-tckt-thread-section .rd-new-thread-message {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--tckt-border-color);
	border-radius: 8px;
	background: var(--tckt-bg-secondary);
	color: var(--tckt-text-primary);
	font-size: 14px;
	resize: vertical;
}

.rd-tckt-thread-section .rd-new-thread-message::placeholder {
	color: var(--tckt-text-muted);
}

.rd-tckt-thread-section .rd-new-thread-message-buttonrow {
	margin-top: 8px;
	display: flex;
	justify-content: flex-end;
}

/* Style the button to match form buttons (rd-tckt-button-primary) */
.rd-tckt-thread-section .rd-new-thread-message-buttonrow .rd-primary-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap;
	background: var(--tckt-badge-status-open-bg) !important;
	color: var(--tckt-badge-status-open-fg) !important;
	border: 1px solid var(--tckt-badge-status-open-border) !important;
}

.rd-tckt-thread-section .rd-new-thread-message-buttonrow .rd-primary-btn:hover {
	filter: brightness(1.15);
}

/* Thread header row with label and AI icon */
.rd-tckt-thread-section .rd-thread-header-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.rd-tckt-thread-section .rd-thread-label {
	font-family: var(--tckt-font-family);
	color: var(--tckt-text-secondary);
	font-weight: 500;
	font-size: 13px;
}

/* Thread AI icon uses shared rd-tckt-ai-icon class - same size as base */

/* Hide the treeview border/header */
.rd-tckt-thread-section .rd-treeview {
	border: none;
	margin-top: 0;
	padding-top: 0;
}

.rd-tckt-thread-section .rd-treeview-header {
	display: none;
}

.rd-tckt-thread-section .rd-treeview-nodelist {
	border: none;
	padding: 0;
	margin: 0;
}

.rd-tckt-thread-section .rd-treeview-nodelist-nodes {
	padding: 0;
}

.rd-tckt-thread-section .thread-node-wrap {
	padding: 12px;
	background: var(--tckt-bg-secondary);
	border-radius: 8px;
	margin-bottom: 8px;
}

.rd-tckt-thread-section .thread-node-header {
	font-size: 12px;
	color: var(--tckt-text-muted);
	margin-bottom: 4px;
}

.rd-tckt-thread-section .thread-node-message {
	color: var(--tckt-text-primary);
	font-size: 14px;
	line-height: 1.5;
}

/* Style HTML content in thread messages */
.rd-tckt-thread-section .thread-node-message p {
	margin: 0 0 0.5em 0;
}

.rd-tckt-thread-section .thread-node-message p:last-child {
	margin-bottom: 0;
}

.rd-tckt-thread-section .thread-node-message ul,
.rd-tckt-thread-section .thread-node-message ol {
	margin: 0.5em 0;
	padding-left: 1.5em;
}

.rd-tckt-thread-section .thread-node-message a {
	color: var(--tckt-text-secondary);
	text-decoration: underline;
}

.rd-tckt-thread-section .thread-node-footer {
	font-size: 11px;
	color: var(--tckt-text-muted);
	margin-top: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Badge-styled buttons */
.rd-tckt-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap;
	min-width: 6em;
	user-select: none;
}

.rd-tckt-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.rd-tckt-button-primary {
	background: var(--tckt-badge-status-open-bg);
	color: var(--tckt-badge-status-open-fg);
	border: 1px solid var(--tckt-badge-status-open-border);
}

.rd-tckt-button-secondary {
	background: var(--tckt-badge-priority-low-bg);
	color: var(--tckt-badge-priority-low-fg);
	border: 1px solid var(--tckt-badge-priority-low-border);
}

.rd-tckt-button-danger {
	background: var(--tckt-badge-priority-high-bg);
	color: var(--tckt-badge-priority-high-fg);
	border: 1px solid var(--tckt-badge-priority-high-border);
}

.rd-tckt-button-danger:hover {
	filter: brightness(1.1);
}

.rd-tckt-button-icon {
	background: var(--tckt-bg-secondary);
	color: var(--tckt-text-secondary);
	border: 1px solid var(--tckt-border-color);
	min-width: auto;
	padding: 8px 12px;
}

.rd-tckt-button-icon:hover {
	background: var(--tckt-button-bg);
	color: white;
	border-color: var(--tckt-button-bg);
}

.rd-tckt-button-icon .material-icons {
	font-size: 18px;
}

pc-ticket-lane .rd-tckt-ticket-form {
	padding: 24px;
}

pc-ticket-lane .rd-tckt-form-group {
	margin-bottom: 20px;
}

pc-ticket-lane .rd-tckt-form-group label {
	display: block;
	margin-bottom: 8px;
	padding: 4px 0;
	font-weight: 600;
	color: var(--tckt-text-secondary);
	font-size: 14px;
}

pc-ticket-lane .rd-tckt-form-group input,
pc-ticket-lane .rd-tckt-form-group textarea,
pc-ticket-lane .rd-tckt-form-group select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--tckt-border-color);
	border-radius: 6px;
	font-size: 14px;
	background: var(--tckt-input-bg);
	color: var(--tckt-text-primary);
	font-family: inherit;
	transition: border-color 0.2s, box-shadow 0.2s;
}

pc-ticket-lane .rd-tckt-form-group input:focus,
pc-ticket-lane .rd-tckt-form-group textarea:focus,
pc-ticket-lane .rd-tckt-form-group select:focus {
	outline: none;
	border-color: var(--tckt-button-bg);
	box-shadow: var(--tckt-shadow);
}

pc-ticket-lane .rd-tckt-form-group textarea {
	resize: vertical;
	min-height: 120px;
}

pc-ticket-lane .rd-tckt-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

pc-ticket-lane .rd-tckt-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--tckt-border-color);
}

pc-ticket-lane .rd-tckt-btn-primary,
pc-ticket-lane .rd-tckt-btn-secondary {
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	border: none;
}

pc-ticket-lane .rd-tckt-btn-primary {
	background: var(--tckt-bg-tertiary);
	color: var(--tckt-text-primary);
	border: 1px solid var(--tckt-border-color);
}

pc-ticket-lane .rd-tckt-btn-primary:hover {
	background: var(--tckt-button-secondary-hover);
	border-color: var(--tckt-text-secondary);
}

pc-ticket-lane .rd-tckt-btn-secondary {
	background: var(--tckt-bg-tertiary);
	color: var(--tckt-text-primary);
	border: 1px solid var(--tckt-border-color);
}

pc-ticket-lane .rd-tckt-btn-secondary:hover {
	background: var(--tckt-button-secondary-hover);
	border-color: var(--tckt-text-tertiary);
}

/* Quick Ticket Dialog Styles */
pc-ticket-lane .rd-tckt-quick-ticket-dialog {
	max-width: 600px;
}

pc-ticket-lane .rd-tckt-form-help {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--tckt-text-secondary);
	font-style: italic;
}

pc-ticket-lane .rd-tckt-error-message {
	padding: 12px;
	background: var(--tckt-text-secondary);
	color: white;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 14px;
}

pc-ticket-lane .rd-tckt-submit-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

pc-ticket-lane .rd-tckt-cancel-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ================================================================
   TicketCard Styles
   ================================================================ */

pc-ticket-card {
	display: block;
	margin: 0;
	padding: 0;
}

pc-ticket-card .rd-tckt-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 16px;
	backdrop-filter: blur(4px);
}

pc-ticket-card .rd-tckt-modal-content {
	max-width: 600px;
	width: 100%;
	max-height: 90vh;
	background: var(--tckt-modal-bg);
	border-radius: 12px;
	box-shadow: var(--tckt-shadow);
	overflow: auto;
	position: relative;
	animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(-20px);
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

pc-ticket-card .rd-tckt-modal-header {
	padding: 24px 24px 16px 24px;
	border-bottom: 1px solid var(--tckt-modal-border);
}

pc-ticket-card .rd-tckt-modal-header h2 {
	margin: 0;
	font-size: 20px;
	color: var(--tckt-modal-text);
}

pc-ticket-card .rd-tckt-modal-body {
	padding: 24px;
}

pc-ticket-card .rd-tckt-modal-footer {
	padding: 16px 24px;
	border-top: 1px solid var(--tckt-modal-border);
	display: flex;
	gap: 12px;
	justify-content: flex-end;
}

pc-ticket-card .rd-tckt-modal-footer button {
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
}

pc-ticket-card .rd-tckt-modal-footer button.rd-tckt-save {
	background: var(--tckt-bg-tertiary);
	color: var(--tckt-text-primary);
	border: 1px solid var(--tckt-border-color);
}

pc-ticket-card .rd-tckt-modal-footer button.rd-tckt-save:hover {
	background: var(--tckt-button-secondary-hover);
	border-color: var(--tckt-text-secondary);
}

pc-ticket-card .rd-tckt-modal-footer button.rd-tckt-cancel {
	background: var(--tckt-button-secondary-bg);
	color: var(--tckt-text-secondary);
	border: 1px solid var(--tckt-border-color);
}

pc-ticket-card .rd-tckt-modal-footer button.rd-tckt-cancel:hover {
	background: var(--tckt-button-secondary-hover);
}

pc-ticket-card .rd-tckt-modal-close {
	position: sticky;
	top: 16px;
	right: 16px;
	float: right;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tckt-button-secondary-bg);
	color: var(--tckt-text-primary);
	border: 1px solid var(--tckt-border-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	z-index: 10;
	transition: all 0.2s;
}

pc-ticket-card .rd-tckt-modal-close:hover {
	background: var(--tckt-text-secondary);
	color: white;
	border-color: var(--tckt-text-secondary);
}

pc-ticket-card .rd-tckt-card {
	border-radius: 8px;
	overflow: visible;
	transition: all 0.2s ease;
	margin: 0;
	padding: 0;
	margin-left: calc(var(--depth) * 12px);
	position: relative;
	background-color: var(--tckt-card-bg);
}

/* When card has children but they're all filtered out, make background transparent */
pc-ticket-card .rd-tckt-card.rd-tckt-no-visible-children {
	background-color: transparent;
}

pc-ticket-card .rd-tckt-card.rd-tckt-dragging {
	opacity: 0.4;
	transform: scale(0.98);
	/* Note: pointer-events: none removed - it breaks Chrome drag & drop */
}

/* Animated gradient for "open" tickets - applied to content wrapper */
/* Using child combinator (>) to only target direct content wrapper, not nested children */
pc-ticket-card .rd-tckt-card[data-status="open"]>.rd-tckt-card-content-wrapper {
	background: linear-gradient(135deg,
			var(--tckt-card-bg) 0%,
			rgba(59, 130, 246, 0.08) 25%,
			rgba(139, 92, 246, 0.08) 50%,
			rgba(59, 130, 246, 0.08) 75%,
			var(--tckt-card-bg) 100%);
	background-size: 400% 400%;
	animation: inProgressGradient 8s ease infinite;
}

/* Dark mode animated gradient for "open" tickets - applied to content wrapper */
/* Using child combinator (>) to only target direct content wrapper, not nested children */
pc-ticket-lane[dark-mode] pc-ticket-card .rd-tckt-card[data-status="open"]>.rd-tckt-card-content-wrapper {
	background: linear-gradient(135deg,
			var(--tckt-card-bg) 0%,
			rgba(59, 130, 246, 0.15) 25%,
			rgba(139, 92, 246, 0.15) 50%,
			rgba(59, 130, 246, 0.15) 75%,
			var(--tckt-card-bg) 100%);
	background-size: 400% 400%;
	animation: inProgressGradient 8s ease infinite;
}

@keyframes inProgressGradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/* Card Content Wrapper - contains the actual card content */
pc-ticket-card .rd-tckt-card-content-wrapper {
	position: relative;
	background: var(--tckt-card-bg);
	border-radius: 8px;
	box-shadow: var(--tckt-shadow);
	overflow: hidden;
	transition: all 0.2s ease;
	cursor: pointer;
}

/* Apply hover background to content wrapper when card is hovered */
pc-ticket-card .rd-tckt-card:hover>.rd-tckt-card-content-wrapper {
	background: var(--tckt-card-hover-bg);
}

/* Keep hover effect for open tickets but with slightly intensified gradient */
/* Using child combinator (>) to only target direct content wrapper, not nested children */
pc-ticket-card .rd-tckt-card[data-status="open"]:hover>.rd-tckt-card-content-wrapper {
	background: linear-gradient(135deg,
			var(--tckt-card-bg) 0%,
			rgba(59, 130, 246, 0.12) 25%,
			rgba(139, 92, 246, 0.12) 50%,
			rgba(59, 130, 246, 0.12) 75%,
			var(--tckt-card-bg) 100%);
}

pc-ticket-lane[dark-mode] pc-ticket-card .rd-tckt-card[data-status="open"]:hover>.rd-tckt-card-content-wrapper {
	background: linear-gradient(135deg,
			var(--tckt-card-bg) 0%,
			rgba(59, 130, 246, 0.20) 25%,
			rgba(139, 92, 246, 0.20) 50%,
			rgba(59, 130, 246, 0.20) 75%,
			var(--tckt-card-bg) 100%);
}

pc-ticket-card .rd-tckt-card.rd-tckt-dragging .rd-tckt-card-content-wrapper {
	overflow: hidden;
	border-radius: 8px;
}

pc-ticket-card .rd-tckt-card.rd-tckt-just-dropped {
	animation: dropHighlight 2s ease-out;
	position: relative;
}

/* Create a visible overlay effect using pseudo-element */
pc-ticket-card .rd-tckt-card.rd-tckt-just-dropped::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	border-radius: 8px;
	z-index: 1000;
	animation: dropHighlightOverlay 2s ease-out;
}

@keyframes dropHighlight {
	0% {
		outline: 3px solid var(--tckt-drop-highlight-bg, var(--tckt-button-bg));
		outline-offset: 0px;
	}

	50% {
		outline: 2px solid var(--tckt-drop-highlight-bg, var(--tckt-button-bg));
		outline-offset: 1px;
	}

	100% {
		outline: 0px solid transparent;
		outline-offset: 2px;
	}
}

@keyframes dropHighlightOverlay {
	0% {
		background: var(--tckt-drop-highlight-bg, var(--tckt-button-bg));
		opacity: 0.4;
	}

	50% {
		background: var(--tckt-drop-highlight-bg, var(--tckt-button-bg));
		opacity: 0.2;
	}

	100% {
		background: transparent;
		opacity: 0;
	}
}

/* Recently Modified Highlight - timestamp-based (5 seconds) */
/* Simple CSS class approach - class added when ticket.updated < 5 seconds */
pc-ticket-card .rd-tckt-card.rd-tckt-recently-modified {
	animation: dropHighlight 5s ease-out;
	position: relative;
}

pc-ticket-card .rd-tckt-card.rd-tckt-recently-modified::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	border-radius: 8px;
	z-index: 1000;
	animation: dropHighlightOverlay 5s ease-out;
}

/* Drop Zones - dedicated areas for dropping tickets */
pc-ticket-card .rd-tckt-drop-zone {
	position: absolute;
	left: 0;
	right: 0;
	height: 8px;
	margin: 0;
	transition: all 0.2s ease;
	pointer-events: none;
	z-index: -1;
	/* No background - they're invisible overlays */
	/* Positioned absolutely so they don't create gaps */
}

pc-ticket-card .rd-tckt-drop-zone-before {
	top: 0;
	transform: translateY(-50%);
}

pc-ticket-card .rd-tckt-drop-zone-after {
	bottom: 0;
	transform: translateY(50%);
}

/* Enable drop zones only when something is being dragged */
pc-ticket-card .rd-tckt-card.rd-tckt-dragging-active .rd-tckt-drop-zone {
	pointer-events: auto;
	z-index: 15;
}

/* Remove obsolete background matching rules */

/* When hovering during drag, show the drop zone clearly */
pc-ticket-card .rd-tckt-drop-zone:hover::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 2px;
	background: var(--tckt-button-bg);
	opacity: 0.3;
	border-radius: 2px;
}

pc-ticket-card .rd-tckt-drop-zone-active {
	height: 16px;
}

pc-ticket-card .rd-tckt-drop-zone-active::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 3px;
	background: var(--tckt-button-bg);
	border-radius: 2px;
	box-shadow: 0 0 8px var(--tckt-button-bg);
	animation: dropZonePulse 1s ease-in-out infinite;
}

@keyframes dropZonePulse {

	0%,
	100% {
		opacity: 0.6;
		transform: translateY(-50%) scaleX(0.98);
	}

	50% {
		opacity: 1;
		transform: translateY(-50%) scaleX(1);
	}
}

/* Drop zone "into" is on the content wrapper itself */
pc-ticket-card .rd-tckt-card-content-wrapper.rd-tckt-drop-zone-into-active {
	background: var(--tckt-button-bg);
	opacity: 0.15;
	border: 2px dashed var(--tckt-button-bg);
	border-radius: 8px;
	box-shadow: 0 0 12px rgba(var(--tckt-button-bg-rgb), 0.3);
}

/* Hover shadow on content wrapper instead of card */
pc-ticket-card .rd-tckt-card:hover>.rd-tckt-card-content-wrapper {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

pc-ticket-card .rd-tckt-card.rd-tckt-nested {
	border-radius: 6px;
}

pc-ticket-card .rd-tckt-card.rd-tckt-nested:hover>.rd-tckt-card-content-wrapper {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Indirect match - ticket doesn't match but a descendant does */
pc-ticket-card .rd-tckt-card-content-wrapper.rd-tckt-filter-indirect {
	filter: grayscale(100%);
	opacity: 0.6;
}

/* Ensure badges and other interactive elements remain interactive in grayscaled cards */
pc-ticket-card .rd-tckt-card-content-wrapper.rd-tckt-filter-indirect pc-ticket-badge,
pc-ticket-card .rd-tckt-card-content-wrapper.rd-tckt-filter-indirect .rd-tckt-badge,
pc-ticket-card .rd-tckt-card-content-wrapper.rd-tckt-filter-indirect .rd-tckt-action-icon {
	pointer-events: auto;
	cursor: pointer;
}

/* Draggable card - entire content wrapper is draggable */
pc-ticket-card .rd-tckt-card-content-wrapper {
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-drag: element;
}

/* Change cursor when actually dragging */
pc-ticket-card .rd-tckt-card-content-wrapper:active {
	cursor: grabbing;
}

/* Don't show grab cursor on interactive elements */
pc-ticket-card .rd-tckt-card-content-wrapper button,
pc-ticket-card .rd-tckt-card-content-wrapper a,
pc-ticket-card .rd-tckt-card-content-wrapper input,
pc-ticket-card .rd-tckt-card-content-wrapper textarea,
pc-ticket-card .rd-tckt-card-content-wrapper select,
pc-ticket-card .rd-tckt-card-content-wrapper .rd-tckt-badge,
pc-ticket-card .rd-tckt-card-content-wrapper .rd-tckt-expand-icon,
pc-ticket-card .rd-tckt-card-content-wrapper pc-ticket-badge {
	cursor: pointer;
	user-select: auto;
	-webkit-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
	-webkit-user-drag: none;
}

/* Card Header */
pc-ticket-card .rd-tckt-card-header {
	padding: 12px 12px 6px 12px;
	cursor: pointer;
	user-select: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	text-align: left;
}

pc-ticket-card .rd-tckt-card.rd-tckt-nested .rd-tckt-card-header {
	padding: 8px 10px 4px 10px;
}

pc-ticket-card .rd-tckt-header-left {
	flex: 1;
	min-width: 0;
}

/* Card Title */
pc-ticket-card .rd-tckt-card-title {
	margin: 0 0 6px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--tckt-text-primary);
	display: flex;
	align-items: center;
	gap: 5px;
	flex: 1;
	line-height: 1.3;
}

pc-ticket-card .rd-tckt-card.rd-tckt-nested .rd-tckt-card-title {
	margin: 0 0 4px 0;
	font-size: 13px;
}

pc-ticket-card .rd-tckt-title-text {
	flex: 1;
	cursor: pointer;
	color: var(--tckt-title-link-color);
	transition: color 0.2s;
}

pc-ticket-card .rd-tckt-title-text:hover {
	color: var(--tckt-title-link-hover);
}

/* Neu Badge */
pc-ticket-card .rd-tckt-new-badge {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
	color: white;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
	animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {

	0%,
	100% {
		box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
	}

	50% {
		box-shadow: 0 2px 8px rgba(255, 107, 107, 0.6), 0 0 12px rgba(255, 107, 107, 0.4);
	}
}

pc-ticket-card .rd-tckt-card-title input {
	flex: 1;
	font-size: 16px;
	font-weight: 600;
	padding: 4px 8px;
	border: 2px solid var(--tckt-button-bg);
	border-radius: 4px;
	background: var(--tckt-input-bg);
	color: var(--tckt-text-primary);
}

pc-ticket-card .rd-tckt-edit-description {
	width: 100%;
	min-height: 80px;
	padding: 8px;
	border: 2px solid var(--tckt-button-bg);
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
	background: var(--tckt-input-bg);
	color: var(--tckt-text-primary);
}

pc-ticket-card .rd-tckt-edit-controls {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

pc-ticket-card .rd-tckt-edit-controls button {
	padding: 6px 12px;
}

pc-ticket-card .rd-tckt-edit-controls button.rd-tckt-save {
	background: var(--tckt-bg-tertiary);
	color: var(--tckt-text-primary);
	border: 1px solid var(--tckt-border-color);
}

pc-ticket-card .rd-tckt-edit-controls button.rd-tckt-save:hover {
	background: var(--tckt-button-secondary-hover);
	border-color: var(--tckt-text-secondary);
}

/* Expand Icon */
pc-ticket-card .rd-tckt-expand-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	min-width: 24px;
	font-size: 16px;
	text-align: center;
	transition: transform 0.2s ease;
	color: var(--tckt-text-secondary);
	cursor: pointer;
	border-radius: 4px;
	transform-origin: center center;
}

pc-ticket-card .rd-tckt-expand-icon:hover {
	background: var(--tckt-card-hover-bg);
	color: var(--tckt-text-primary);
}

pc-ticket-card .rd-tckt-expand-icon.rd-tckt-no-children {
	width: 0;
	min-width: 0;
	opacity: 0;
	pointer-events: none;
	cursor: default;
	overflow: hidden;
}

/* Card Meta / Badges */
pc-ticket-card .rd-tckt-card-meta {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 11px;
	margin-bottom: 4px;
}

pc-ticket-card .rd-tckt-card.rd-tckt-nested .rd-tckt-card-meta {
	font-size: 10px;
	gap: 3px;
	margin-bottom: 3px;
	margin-top: 10px;
	margin-left: -1px;
}

pc-ticket-card .rd-tckt-badge {
	padding: 2px 8px;
	border-radius: 12px;
	font-weight: 500;
	text-align: center;
}

pc-ticket-card .rd-tckt-card.rd-tckt-nested .rd-tckt-badge {
	padding: 2px 8px;
	min-width: 50px;
	text-align: center;
	font-size: 10px;
}

/* Smaller icons in nested ticket badges */
pc-ticket-card .rd-tckt-card.rd-tckt-nested .rd-tckt-badge .material-icons {
	font-size: 14px;
}

pc-ticket-card .rd-tckt-card.rd-tckt-nested .rd-tckt-badges {
	gap: 6px;
}

/* Status Badges - Monokai Inspired */
pc-ticket-card .rd-tckt-status-backlog {
	background: var(--tckt-status-backlog-bg);
	color: var(--tckt-status-backlog-fg);
}

pc-ticket-card .rd-tckt-status-todo {
	background: var(--tckt-status-todo-bg);
	color: var(--tckt-status-todo-fg);
}

pc-ticket-card .rd-tckt-status-open {
	background: var(--tckt-status-open-bg);
	color: var(--tckt-status-open-fg);
}

pc-ticket-card .rd-tckt-status-closed {
	background: var(--tckt-status-closed-bg);
	color: var(--tckt-status-closed-fg);
}

pc-ticket-card .rd-tckt-status-canceled {
	background: var(--tckt-status-canceled-bg);
	color: var(--tckt-status-canceled-fg);
}

/* Priority Badges - Monokai Inspired */
pc-ticket-card .rd-tckt-priority-low {
	background: var(--tckt-priority-low-bg);
	color: var(--tckt-priority-low-fg);
}

pc-ticket-card .rd-tckt-priority-low {
	background: var(--tckt-priority-low-bg);
	color: var(--tckt-priority-low-fg);
}

pc-ticket-card .rd-tckt-priority-medium {
	background: var(--tckt-priority-medium-bg);
	color: var(--tckt-priority-medium-fg);
}

pc-ticket-card .rd-tckt-priority-high {
	background: var(--tckt-priority-high-bg);
	color: var(--tckt-priority-high-fg);
}

/* Status Comment */
pc-ticket-card .rd-tckt-status-comment {
	padding: 6px 12px;
	margin: 0 12px 6px 12px;
	font-size: 12px;
	line-height: 1.35;
	font-style: italic;
	border-radius: 4px;
	text-align: left;
	border-left: 3px solid;
}

/* Adapt status comment colors to ticket status */
pc-ticket-card .rd-tckt-card[data-status="backlog"] .rd-tckt-status-comment {
	background: var(--tckt-badge-status-backlog-bg);
	color: var(--tckt-badge-status-backlog-fg);
	border-left-color: var(--tckt-badge-status-backlog-border);
}

pc-ticket-card .rd-tckt-card[data-status="open"] .rd-tckt-status-comment {
	background: var(--tckt-badge-status-open-bg);
	color: var(--tckt-badge-status-open-fg);
	border-left-color: var(--tckt-badge-status-open-border);
}

pc-ticket-card .rd-tckt-card[data-status="closed"] .rd-tckt-status-comment {
	background: var(--tckt-badge-status-closed-bg);
	color: var(--tckt-badge-status-closed-fg);
	border-left-color: var(--tckt-badge-status-closed-border);
}

pc-ticket-card .rd-tckt-card.rd-tckt-nested .rd-tckt-status-comment {
	padding: 4px 10px;
	margin: 0 10px 4px 10px;
	font-size: 11px;
}

/* Card Body */
pc-ticket-card .rd-tckt-card-body {
	padding: 0 12px 10px 12px;
	color: var(--tckt-text-secondary);
	font-size: 13px;
	line-height: 1.4;
	position: relative;
	padding-right: 40px;
	text-align: left;
}

/* Description text - limited to 2 lines */
pc-ticket-card .rd-tckt-card-description {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

pc-ticket-card .rd-tckt-card.rd-tckt-nested .rd-tckt-card-body {
	padding: 0 10px 6px 10px;
	font-size: 12px;
	line-height: 1.35;
}

/* Card Footer (datetime info) */
pc-ticket-card .rd-tckt-card-footer {
	padding: 6px 12px 10px 12px;
	font-size: 10px;
	color: var(--tckt-text-muted);
	display: flex;
	gap: 5px;
	align-items: center;
	opacity: 0.7;
}

pc-ticket-card .rd-tckt-card.rd-tckt-nested .rd-tckt-card-footer {
	padding: 4px 10px 8px 10px;
	font-size: 10px;
}

pc-ticket-card .rd-tckt-datetime-separator {
	opacity: 0.5;
}

pc-ticket-card .rd-tckt-card:hover .rd-tckt-card-footer {
	opacity: 1;
}

/* Source Link Icon */
pc-ticket-card .rd-tckt-source-link {
	margin-left: auto;
	display: flex;
	align-items: center;
	color: var(--tckt-text-muted);
	text-decoration: none;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

pc-ticket-card .rd-tckt-source-link:hover {
	opacity: 1;
}

pc-ticket-card .rd-tckt-source-link .material-icons {
	font-size: 16px;
}

/* Card Actions */
pc-ticket-card .rd-tckt-card-actions {
	padding: 12px 16px;
	border-top: 1px solid var(--tckt-border-color);
	display: none;
	gap: 8px;
	justify-content: flex-end;
}

/* Show actions when hovering the content wrapper (excludes children area) */
pc-ticket-card .rd-tckt-card-content-wrapper:hover .rd-tckt-card-actions {
	display: flex;
}

pc-ticket-card .rd-tckt-card.rd-tckt-nested .rd-tckt-card-actions {
	padding: 8px 12px;
	gap: 6px;
}

pc-ticket-card button {
	padding: 6px 10px;
	border: 1px solid var(--tckt-border-color);
	background: var(--tckt-button-secondary-bg);
	color: var(--tckt-text-primary);
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	transition: all 0.2s;
	min-width: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

pc-ticket-card .rd-tckt-card.rd-tckt-nested button {
	padding: 4px 8px;
	font-size: 14px;
	min-width: 28px;
}

pc-ticket-card button:hover {
	background: var(--tckt-button-secondary-hover);
	border-color: var(--tckt-text-tertiary);
}

/* Modern Icon-Only Actions */
pc-ticket-card .rd-tckt-action-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	color: var(--tckt-text-tertiary);
	opacity: 0;
	border-radius: 6px;
	padding: 6px;
}

pc-ticket-card .rd-tckt-card-content-wrapper:hover .rd-tckt-action-icon {
	opacity: 0.5;
}

pc-ticket-card .rd-tckt-action-icon:hover {
	opacity: 1 !important;
	background: var(--tckt-bg-tertiary);
	transform: scale(1.1);
}

/* Header save/cancel buttons (shown when editing) */
pc-ticket-card button.rd-tckt-save-btn {
	color: #22c55e;
	border-color: #22c55e;
}

pc-ticket-card button.rd-tckt-save-btn:hover {
	background: #22c55e;
	color: white;
}

pc-ticket-card button.rd-tckt-cancel-btn {
	color: #ef4444;
	border-color: #ef4444;
	margin-left: 4px;
}

pc-ticket-card button.rd-tckt-cancel-btn:hover {
	background: #ef4444;
	color: white;
}

pc-ticket-card .rd-tckt-action-icon.rd-tckt-add-subticket-action {
	position: absolute;
	bottom: 8px;
	right: 16px;
	width: 32px;
	height: 32px;
	min-width: 32px;
	padding: 0;
	font-size: 20px;
	border-radius: 50%;
	pointer-events: none;
}

/* Show add button when hovering the content wrapper (excludes children area) */
pc-ticket-card .rd-tckt-card-content-wrapper:hover .rd-tckt-action-icon.rd-tckt-add-subticket-action {
	pointer-events: auto;
}

pc-ticket-card .rd-tckt-action-icon.rd-tckt-add-subticket-action:hover {
	color: var(--tckt-button-bg);
	background: var(--tckt-bg-secondary);
}

pc-ticket-card .rd-tckt-card.rd-tckt-nested .rd-tckt-action-icon.rd-tckt-add-subticket-action {
	right: 12px;
}

pc-ticket-card button.rd-tckt-delete {
	color: var(--tckt-priority-high-bg);
	border-color: var(--tckt-border-color);
}

pc-ticket-card button.rd-tckt-delete:hover {
	background: var(--tckt-bg-tertiary);
	border-color: var(--tckt-priority-high-bg);
	color: var(--tckt-priority-high-bg);
}

/* Children */
pc-ticket-card .rd-tckt-children {
	margin-top: 14px;
	margin-bottom: 0;
	margin-left: 10px;
	margin-right: 10px;
	padding-bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

pc-ticket-card .rd-tckt-card.rd-tckt-nested .rd-tckt-children {
	margin-top: 12px;
	margin-bottom: 0;
	margin-left: 8px;
	margin-right: 8px;
	padding-bottom: 12px;
	gap: 10px;
}

/* Edit Mode Styles */
pc-ticket-card .rd-tckt-card-body.rd-tckt-edit-mode {
	padding: 16px;
}

pc-ticket-card .rd-tckt-edit-field {
	margin-bottom: 16px;
}

pc-ticket-card .rd-tckt-edit-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--tckt-text-primary);
	font-size: 13px;
}

pc-ticket-card .rd-tckt-edit-input,
pc-ticket-card .rd-tckt-edit-textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--tckt-border-color);
	border-radius: 4px;
	background: var(--tckt-bg-primary);
	color: var(--tckt-text-primary);
	font-family: inherit;
	font-size: 14px;
	transition: border-color 0.2s;
}

pc-ticket-card .rd-tckt-edit-input:focus,
pc-ticket-card .rd-tckt-edit-textarea:focus {
	outline: none;
	border-color: var(--tckt-button-bg);
}

pc-ticket-card .rd-tckt-edit-textarea {
	resize: vertical;
	min-height: 80px;
}

pc-ticket-card .rd-tckt-edit-field pc-html-editor3 {
	display: block;
	min-height: 200px;
}



/* Edit mode styling - width and z-index are handled by JavaScript masonry layout */

pc-ticket-card .rd-tckt-loading {
	text-align: center;
	padding: 16px;
	color: var(--tckt-text-tertiary);
}

pc-ticket-card .rd-tckt-card.rd-tckt-nested .rd-tckt-loading {
	padding: 12px;
	font-size: 13px;
}

/* Form Groups - used in modals */
pc-ticket-card .rd-tckt-form-group {
	margin-bottom: 16px;
}

pc-ticket-card .rd-tckt-form-group label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: var(--tckt-text-primary);
	font-size: 14px;
}

pc-ticket-card .rd-tckt-form-group input,
pc-ticket-card .rd-tckt-form-group textarea,
pc-ticket-card .rd-tckt-form-group select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--tckt-border-color);
	background: var(--tckt-input-bg);
	color: var(--tckt-text-primary);
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
}

pc-ticket-card .rd-tckt-form-group textarea {
	resize: vertical;
	min-height: 100px;
}

pc-ticket-card .rd-tckt-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

pc-ticket-card .rd-tckt-full-body-content {
	margin-bottom: 8px;
}

/* ================================================================
   TicketFilterBar Styles
   ================================================================ */

pc-ticket-filter-bar {
	display: block;
}

pc-ticket-filter-bar {
	display: flex;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
}

pc-ticket-filter-bar .rd-tckt-filter-group {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	height: auto;
}

pc-ticket-filter-bar .rd-tckt-filter-group label {
	font-size: 12px;
	font-weight: 500;
	color: var(--tckt-text-secondary);
	min-width: auto;
	text-align: right;
	flex-shrink: 0;
	margin: 0;
}

pc-ticket-filter-bar .rd-tckt-filter-group input,
pc-ticket-filter-bar .rd-tckt-filter-group select {
	padding: 6px 10px;
	border: 1px solid var(--tckt-border-color);
	background: var(--tckt-input-bg);
	color: var(--tckt-text-primary);
	border-radius: 4px;
	font-size: 13px;
	font-family: inherit;
	min-width: 180px;
}

pc-ticket-filter-bar .rd-tckt-filter-group input:focus,
pc-ticket-filter-bar .rd-tckt-filter-group select:focus {
	outline: none;
	border-color: var(--tckt-button-bg);
	box-shadow: 0 0 0 2px rgba(102, 217, 239, 0.1);
}

pc-ticket-filter-bar .rd-tckt-status-badges {
	display: flex;
	gap: 6px;
	flex-wrap: nowrap;
	align-items: center;
}

@container ticket-header (max-width: 700px) {
	pc-ticket-filter-bar .rd-tckt-status-badges {
		flex-wrap: wrap;
	}
}

pc-ticket-filter-bar .rd-tckt-filter-group>* {
	align-self: center;
}

pc-ticket-filter-bar .rd-tckt-filter-group-developer {
	width: 200px;
	flex-shrink: 0;
}

/* Filter bar badges - outlined/ghost style to differentiate from card badges */
pc-ticket-filter-bar pc-ticket-badge .rd-tckt-badge {
	background: transparent;
	padding: 2px 8px;
	font-size: 11px;
	min-width: auto;
	border-radius: 10px;
}

pc-ticket-filter-bar pc-ticket-badge .rd-tckt-badge.rd-tckt-status-backlog {
	background: transparent;
	color: var(--tckt-badge-status-backlog-fg);
	border: 1px solid var(--tckt-badge-status-backlog-border);
}

pc-ticket-filter-bar pc-ticket-badge .rd-tckt-badge.rd-tckt-status-todo {
	background: transparent;
	color: var(--tckt-badge-status-todo-fg);
	border: 1px solid var(--tckt-badge-status-todo-border);
}

pc-ticket-filter-bar pc-ticket-badge .rd-tckt-badge.rd-tckt-status-open {
	background: transparent;
	color: var(--tckt-badge-status-open-fg);
	border: 1px solid var(--tckt-badge-status-open-border);
}

pc-ticket-filter-bar pc-ticket-badge .rd-tckt-badge.rd-tckt-status-closed {
	background: transparent;
	color: var(--tckt-badge-status-closed-fg);
	border: 1px solid var(--tckt-badge-status-closed-border);
}

pc-ticket-filter-bar pc-ticket-badge .rd-tckt-badge.rd-tckt-status-canceled {
	background: transparent;
	color: var(--tckt-badge-status-canceled-fg);
	border: 1px solid var(--tckt-badge-status-canceled-border);
}

pc-ticket-filter-bar pc-ticket-badge .rd-tckt-badge.rd-tckt-priority-low,
pc-ticket-filter-bar pc-ticket-badge .rd-tckt-badge.rd-tckt-priority-medium,
pc-ticket-filter-bar pc-ticket-badge .rd-tckt-badge.rd-tckt-priority-high {
	background: transparent;
}

pc-ticket-filter-bar pc-ticket-badge .rd-tckt-badge.rd-tckt-developer {
	background: transparent;
	color: var(--tckt-badge-developer-fg);
	border: 1px solid var(--tckt-badge-developer-border);
}

pc-ticket-filter-bar pc-ticket-badge .rd-tckt-badge.rd-tckt-sort {
	background: transparent;
	color: var(--tckt-text-secondary);
	border: 1px solid var(--tckt-border-color);
}

/* ================================================================
   TicketBadge Styles
   ================================================================ */

pc-ticket-badge {
	display: inline-block;
	position: relative;
}

/* Generic badge styles (can be used anywhere, not just inside pc-ticket-badge) */
.rd-tckt-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	min-width: 6em;
	transition: all 0.2s;
	user-select: none;
}

.rd-tckt-badge.rd-tckt-editable {
	cursor: pointer;
}

.rd-tckt-badge.rd-tckt-editable:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Status Badges - Generic */
.rd-tckt-badge.rd-tckt-status-backlog {
	background: var(--tckt-badge-status-backlog-bg);
	color: var(--tckt-badge-status-backlog-fg);
	border: 1px solid var(--tckt-badge-status-backlog-border);
}

.rd-tckt-badge.rd-tckt-status-todo {
	background: var(--tckt-badge-status-todo-bg);
	color: var(--tckt-badge-status-todo-fg);
	border: 1px solid var(--tckt-badge-status-todo-border);
}

.rd-tckt-badge.rd-tckt-status-open {
	background: var(--tckt-badge-status-open-bg);
	color: var(--tckt-badge-status-open-fg);
	border: 1px solid var(--tckt-badge-status-open-border);
}

.rd-tckt-badge.rd-tckt-status-closed {
	background: var(--tckt-badge-status-closed-bg);
	color: var(--tckt-badge-status-closed-fg);
	border: 1px solid var(--tckt-badge-status-closed-border);
}

.rd-tckt-badge.rd-tckt-status-canceled {
	background: var(--tckt-badge-status-canceled-bg);
	color: var(--tckt-badge-status-canceled-fg);
	border: 1px solid var(--tckt-badge-status-canceled-border);
}

/* Priority Badges - Generic */
.rd-tckt-badge.rd-tckt-priority-low {
	background: var(--tckt-badge-priority-low-bg);
	color: var(--tckt-badge-priority-low-fg);
	border: 1px solid var(--tckt-badge-priority-low-border);
}

.rd-tckt-badge.rd-tckt-priority-low {
	background: var(--tckt-badge-priority-low-bg);
	color: var(--tckt-badge-priority-low-fg);
	border: 1px solid var(--tckt-badge-priority-low-border);
}

.rd-tckt-badge.rd-tckt-priority-medium {
	background: var(--tckt-badge-priority-medium-bg);
	color: var(--tckt-badge-priority-medium-fg);
	border: 1px solid var(--tckt-badge-priority-medium-border);
}

.rd-tckt-badge.rd-tckt-priority-high {
	background: var(--tckt-badge-priority-high-bg);
	color: var(--tckt-badge-priority-high-fg);
	border: 1px solid var(--tckt-badge-priority-high-border);
}

/* Developer Badge - Generic */
.rd-tckt-badge.rd-tckt-developer {
	background: var(--tckt-badge-developer-bg);
	color: var(--tckt-badge-developer-fg);
	border: 1px solid var(--tckt-badge-developer-border);
}

/* Sort Badge - Neutral grayish styling like developer badge */
.rd-tckt-badge.rd-tckt-sort {
	background: var(--tckt-bg-tertiary);
	color: var(--tckt-text-primary);
	border: 1px solid var(--tckt-border-color);
}

/* Theme Badge - Monochrome with theme colors */
.rd-tckt-badge.rd-tckt-theme {
	background: var(--tckt-bg-secondary);
	color: var(--tckt-text-primary);
	border: 1px solid var(--tckt-border-color);
	font-weight: 500;
}

.rd-tckt-badge.rd-tckt-theme:hover {
	background: var(--tckt-bg-tertiary);
	border-color: var(--tckt-button-bg);
}

/* Boolean badge inactive state - grayscale */
.rd-tckt-badge.rd-tckt-boolean-inactive {
	filter: grayscale(100%);
	opacity: 0.5;
}

.rd-tckt-badge.rd-tckt-boolean-inactive:hover {
	opacity: 0.7;
}

/* Status badges container in filter bar */
.rd-tckt-status-badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* Badge Panel - Generic */
.rd-tckt-panel {
	position: fixed;
	background: var(--tckt-modal-bg);
	border: 1px solid var(--tckt-border-color);
	border-radius: 8px;
	box-shadow: var(--tckt-shadow);
	padding: 8px;
	min-width: 160px;
	z-index: 10000;
	animation: slideDown 0.2s ease-out;
}

.rd-tckt-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
}

.rd-tckt-panel-option {
	padding: 6px 8px;
	cursor: pointer;
	border-radius: 6px;
	transition: background-color 0.15s;
}

.rd-tckt-panel-option:hover {
	background: var(--tckt-hover-bg);
}

.rd-tckt-panel-option.rd-tckt-selected {
	background: var(--tckt-selected-bg);
}

.rd-tckt-option-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	min-width: 6em;
	justify-content: center;
}

/* Default option badge styling (for theme badges without specific colors) */
.rd-tckt-option-badge:not([class*="rd-tckt-status-"]):not([class*="rd-tckt-priority-"]):not([class*="rd-tckt-developer"]) {
	background: var(--tckt-card-bg);
	color: var(--tckt-text-primary);
	border: 1px solid var(--tckt-border-color);
}

/* Option badge colors */
.rd-tckt-option-badge.rd-tckt-status-backlog {
	background: var(--tckt-badge-status-backlog-bg);
	color: var(--tckt-badge-status-backlog-fg);
	border: 1px solid var(--tckt-badge-status-backlog-border);
}

.rd-tckt-option-badge.rd-tckt-status-todo {
	background: var(--tckt-badge-status-todo-bg);
	color: var(--tckt-badge-status-todo-fg);
	border: 1px solid var(--tckt-badge-status-todo-border);
}

.rd-tckt-option-badge.rd-tckt-status-open {
	background: var(--tckt-badge-status-open-bg);
	color: var(--tckt-badge-status-open-fg);
	border: 1px solid var(--tckt-badge-status-open-border);
}

.rd-tckt-option-badge.rd-tckt-status-closed {
	background: var(--tckt-badge-status-closed-bg);
	color: var(--tckt-badge-status-closed-fg);
	border: 1px solid var(--tckt-badge-status-closed-border);
}

.rd-tckt-option-badge.rd-tckt-status-canceled {
	background: var(--tckt-badge-status-canceled-bg);
	color: var(--tckt-badge-status-canceled-fg);
	border: 1px solid var(--tckt-badge-status-canceled-border);
}

.rd-tckt-option-badge.rd-tckt-priority-low {
	background: var(--tckt-badge-priority-low-bg);
	color: var(--tckt-badge-priority-low-fg);
	border: 1px solid var(--tckt-badge-priority-low-border);
}

.rd-tckt-option-badge.rd-tckt-priority-low {
	background: var(--tckt-badge-priority-low-bg);
	color: var(--tckt-badge-priority-low-fg);
	border: 1px solid var(--tckt-badge-priority-low-border);
}

.rd-tckt-option-badge.rd-tckt-priority-medium {
	background: var(--tckt-badge-priority-medium-bg);
	color: var(--tckt-badge-priority-medium-fg);
	border: 1px solid var(--tckt-badge-priority-medium-border);
}

.rd-tckt-option-badge.rd-tckt-priority-high {
	background: var(--tckt-badge-priority-high-bg);
	color: var(--tckt-badge-priority-high-fg);
	border: 1px solid var(--tckt-badge-priority-high-border);
}

.rd-tckt-option-badge.rd-tckt-developer {
	background: var(--tckt-badge-developer-bg);
	color: var(--tckt-badge-developer-fg);
	border: 1px solid var(--tckt-badge-developer-border);
}

.rd-tckt-option-badge.rd-tckt-sort {
	background: var(--tckt-bg-tertiary);
	color: var(--tckt-text-primary);
	border: 1px solid var(--tckt-border-color);
}

/* Legacy scoped styles (kept for backwards compatibility) */
pc-ticket-badge .rd-tckt-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	min-width: 6em;
	transition: all 0.2s;
	user-select: none;
}

pc-ticket-badge .rd-tckt-badge.rd-tckt-editable {
	cursor: pointer;
}

pc-ticket-badge .rd-tckt-badge.rd-tckt-editable:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Status Badges - Modern Style */
pc-ticket-badge .rd-tckt-badge.rd-tckt-status-backlog {
	background: var(--tckt-badge-status-backlog-bg);
	color: var(--tckt-badge-status-backlog-fg);
	border: 1px solid var(--tckt-badge-status-backlog-border);
}

pc-ticket-badge .rd-tckt-badge.rd-tckt-status-todo {
	background: var(--tckt-badge-status-todo-bg);
	color: var(--tckt-badge-status-todo-fg);
	border: 1px solid var(--tckt-badge-status-todo-border);
}

pc-ticket-badge .rd-tckt-badge.rd-tckt-status-open {
	background: var(--tckt-badge-status-open-bg);
	color: var(--tckt-badge-status-open-fg);
	border: 1px solid var(--tckt-badge-status-open-border);
}

pc-ticket-badge .rd-tckt-badge.rd-tckt-status-closed {
	background: var(--tckt-badge-status-closed-bg);
	color: var(--tckt-badge-status-closed-fg);
	border: 1px solid var(--tckt-badge-status-closed-border);
}

pc-ticket-badge .rd-tckt-badge.rd-tckt-status-canceled {
	background: var(--tckt-badge-status-canceled-bg);
	color: var(--tckt-badge-status-canceled-fg);
	border: 1px solid var(--tckt-badge-status-canceled-border);
}

/* Priority Badges - Modern Style */
pc-ticket-badge .rd-tckt-badge.rd-tckt-priority-low {
	background: var(--tckt-badge-priority-low-bg);
	color: var(--tckt-badge-priority-low-fg);
	border: 1px solid var(--tckt-badge-priority-low-border);
}

pc-ticket-badge .rd-tckt-badge.rd-tckt-priority-low {
	background: var(--tckt-badge-priority-low-bg);
	color: var(--tckt-badge-priority-low-fg);
	border: 1px solid var(--tckt-badge-priority-low-border);
}

pc-ticket-badge .rd-tckt-badge.rd-tckt-priority-medium {
	background: var(--tckt-badge-priority-medium-bg);
	color: var(--tckt-badge-priority-medium-fg);
	border: 1px solid var(--tckt-badge-priority-medium-border);
}

pc-ticket-badge .rd-tckt-badge.rd-tckt-priority-high {
	background: var(--tckt-badge-priority-high-bg);
	color: var(--tckt-badge-priority-high-fg);
	border: 1px solid var(--tckt-badge-priority-high-border);
}

/* Developer Badge - Modern Style */
pc-ticket-badge .rd-tckt-badge.rd-tckt-developer {
	background: var(--tckt-badge-developer-bg);
	color: var(--tckt-badge-developer-fg);
	border: 1px solid var(--tckt-badge-developer-border);
}

/* Badge Panel */
pc-ticket-badge .rd-tckt-panel {
	position: fixed;
	background: var(--tckt-modal-bg);
	border: 1px solid var(--tckt-border-color);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
	padding: 6px;
	min-width: 180px;
	max-width: 280px;
	z-index: 10000;
	animation: slideDown 0.15s ease-out;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes blockedShake {

	0%,
	100% {
		transform: translateX(0);
	}

	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-4px);
	}

	20%,
	40%,
	60%,
	80% {
		transform: translateX(4px);
	}
}

/* Blocked interaction feedback */
.rd-tckt-blocked-shake {
	animation: blockedShake 0.5s ease;
	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5) !important;
}

pc-ticket-badge .rd-tckt-panel-option {
	padding: 6px;
	cursor: pointer;
	border-radius: 8px;
	transition: all 0.15s ease;
	display: flex;
	align-items: center;
	gap: 8px;
}

pc-ticket-badge .rd-tckt-panel-option:hover {
	background: var(--tckt-hover-bg);
	transform: translateX(2px);
}

pc-ticket-badge .rd-tckt-panel-option.rd-tckt-selected {
	background: var(--tckt-selected-bg);
}

pc-ticket-badge .rd-tckt-panel-option.rd-tckt-selected .rd-tckt-option-badge {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
	font-weight: 600;
}

pc-ticket-badge .rd-tckt-option-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
	min-width: 140px;
	width: 100%;
	/* Default theme-aware colors for badges without specific type classes */
	background: var(--tckt-card-bg);
	color: var(--tckt-text-primary);
	border: 1px solid var(--tckt-border-color);
}

pc-ticket-badge .rd-tckt-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
}

/* Option badge status colors - use same modern badge colors as main badges */
pc-ticket-badge .rd-tckt-option-badge.rd-tckt-status-backlog {
	background: var(--tckt-badge-status-backlog-bg);
	color: var(--tckt-badge-status-backlog-fg);
	border: 1px solid var(--tckt-badge-status-backlog-border);
}

pc-ticket-badge .rd-tckt-option-badge.rd-tckt-status-todo {
	background: var(--tckt-badge-status-todo-bg);
	color: var(--tckt-badge-status-todo-fg);
	border: 1px solid var(--tckt-badge-status-todo-border);
}

pc-ticket-badge .rd-tckt-option-badge.rd-tckt-status-open {
	background: var(--tckt-badge-status-open-bg);
	color: var(--tckt-badge-status-open-fg);
	border: 1px solid var(--tckt-badge-status-open-border);
}

pc-ticket-badge .rd-tckt-option-badge.rd-tckt-status-closed {
	background: var(--tckt-badge-status-closed-bg);
	color: var(--tckt-badge-status-closed-fg);
	border: 1px solid var(--tckt-badge-status-closed-border);
}

pc-ticket-badge .rd-tckt-option-badge.rd-tckt-status-canceled {
	background: var(--tckt-badge-status-canceled-bg);
	color: var(--tckt-badge-status-canceled-fg);
	border: 1px solid var(--tckt-badge-status-canceled-border);
}

pc-ticket-badge .rd-tckt-option-badge.rd-tckt-priority-low {
	background: var(--tckt-badge-priority-low-bg);
	color: var(--tckt-badge-priority-low-fg);
	border: 1px solid var(--tckt-badge-priority-low-border);
}

pc-ticket-badge .rd-tckt-option-badge.rd-tckt-priority-low {
	background: var(--tckt-badge-priority-low-bg);
	color: var(--tckt-badge-priority-low-fg);
	border: 1px solid var(--tckt-badge-priority-low-border);
}

pc-ticket-badge .rd-tckt-option-badge.rd-tckt-priority-medium {
	background: var(--tckt-badge-priority-medium-bg);
	color: var(--tckt-badge-priority-medium-fg);
	border: 1px solid var(--tckt-badge-priority-medium-border);
}

pc-ticket-badge .rd-tckt-option-badge.rd-tckt-priority-high {
	background: var(--tckt-badge-priority-high-bg);
	color: var(--tckt-badge-priority-high-fg);
	border: 1px solid var(--tckt-badge-priority-high-border);
}

pc-ticket-badge .rd-tckt-option-badge.rd-tckt-developer {
	background: var(--tckt-badge-developer-bg);
	color: var(--tckt-badge-developer-fg);
	border: 1px solid var(--tckt-badge-developer-border);
}

/* Timestamp styles in focused ticket view */
.rd-tckt-current-ticket-timestamps {
	display: flex;
	gap: 16px;
	margin-top: 8px;
	margin-bottom: 12px;
	font-size: 13px;
	opacity: 0.7;
}

.rd-tckt-timestamp {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Override instruction menu padding when inside ticket system */
.rd-tickets .rd-instruction-menu {
	padding: 0;
}

/* Adapt instruction menu colors for dark mode */
body:has(pc-ticket-lane[dark-mode]) .rd-tickets .rd-instruction-menu {
	background-color: #252526;
	border-color: #3e3e42;
}

/* ================================================================
   Additional Utility Classes - Inline Style Replacements
   ================================================================ */

/* Root card wrapper positioning */
.rd-tckt-root-card-wrapper {
	position: relative;
}

/* Badge panel positioning (dynamic via JS) */
.rd-tckt-panel-positioned {
	position: fixed;
}

/* Material icon size variants */
.rd-tckt-icon-sm {
	font-size: 16px;
}

.rd-tckt-icon-md {
	font-size: 18px;
}

/* Ticket card depth styling (set via CSS variable) */
pc-ticket-card {
	--card-depth: 0;
}

/* Empty fullbody placeholder */
.rd-tckt-fullbody-empty {
	color: var(--tckt-text-tertiary);
	font-style: italic;
}

/* Fullbody display (read-only) */
.rd-tckt-fullbody-display {
	padding: 12px 0;
	font-size: 14px;
	line-height: 1.6;
	min-height: 100px;
	color: var(--tckt-text-primary);
}

/* Reduce padding in readonly mode */
.rd-tckt-form-container[readonly] .rd-tckt-fullbody-display {
	padding: 0;
	min-height: auto;
	margin-top: 8px;
}

/* HTML editor minimum height */
.rd-tckt-html-editor {
	min-height: 200px;
}

/* ================================================================
   Sidebar Form Styles
   ================================================================ */

/* Sidebar container dark mode background */
.sidebar-container[dark-mode] .content-area {
	background-color: #252526;
	color: #e0e0e0;
}

/* Form container */
.rd-tckt-form-container {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
}

/* Reduce padding and gaps in readonly mode */
.rd-tckt-form-container[readonly] {
	padding: 12px;
	gap: 12px;
}

/* Light theme form container */
.rd-tckt-form-container {
	background-color: #ffffff;
	color: #333;
}

/* Dark theme form container */
.rd-tckt-form-container[dark-mode] {
	background-color: #252526;
	color: #f0f0f0;
}

/* Badges container */
.rd-tckt-badges-container {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

/* Label wrapper (label + AI icon) */
.rd-tckt-label-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	margin-bottom: 4px;
}

/* Form labels */
.rd-tckt-form-label {
	font-weight: 500;
	margin-bottom: 4px;
	font-size: 13px;
	color: var(--tckt-text-secondary);
}

/* Hide labels in read-only mode */
.rd-tckt-form-container[readonly] .rd-tckt-form-label {
	display: none;
}

/* Hide label wrapper in read-only mode */
.rd-tckt-form-container[readonly] .rd-tckt-label-wrapper {
	display: none;
}

/* Keep customer/user field labels visible */
.rd-tckt-form-container[readonly] .rd-tckt-customer-user-label {
	display: block;
	font-size: 12px;
	margin-bottom: 4px;
}

/* AI optimize icon */
.rd-tckt-ai-icon {
	font-size: 16px;
	cursor: pointer;
	transition: all 0.2s;
	color: var(--tckt-ai-icon-color);
}

.rd-tckt-ai-icon:hover {
	color: var(--tckt-ai-icon-hover);
	transform: scale(1.1);
}

.rd-tckt-ai-icon.rd-tckt-hidden {
	display: none;
}

.rd-tckt-ai-icon.rd-tckt-loading {
	cursor: wait;
}

/* Field wrappers */
.rd-tckt-field-wrapper {
	display: flex;
	flex-direction: column;
}

/* Reduce spacing in readonly mode */
.rd-tckt-form-container[readonly] .rd-tckt-field-wrapper {
	margin-bottom: 12px;
}

/* Generic input fields (Einrichtung, Mitarbeiter, etc.) */
.rd-tckt-input {
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 400;
	border-radius: 6px;
	border: 1px solid var(--tckt-input-border);
	font-family: inherit;
	transition: all 0.2s;
	background-color: var(--tckt-input-bg);
	color: var(--tckt-text-primary);
}

.rd-tckt-input:focus {
	outline: none;
	border-color: #66d9ef;
}

/* Title input/display */
.rd-tckt-title-display {
	padding: 8px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	min-height: 36px;
	border-radius: 4px;
	border: 1px solid transparent;
	color: var(--tckt-text-primary);
	background-color: transparent;
}

/* Larger title in readonly mode */
.rd-tckt-form-container[readonly] .rd-tckt-title-display {
	font-size: 20px;
	padding: 0 0 8px 0;
	margin-bottom: 4px;
}

.rd-tckt-title-input {
	padding: 10px 12px;
	font-size: 15px;
	font-weight: 500;
	border-radius: 6px;
	border: 1px solid var(--tckt-input-border);
	transition: all 0.2s;
	background-color: var(--tckt-input-bg);
	color: var(--tckt-text-primary);
}

.rd-tckt-title-input:focus {
	outline: none;
	border-color: #66d9ef;
	box-shadow: 0 0 0 2px rgba(102, 217, 239, 0.1);
}

/* AI optimization highlight */
.rd-tckt-title-input.rd-tckt-ai-highlighted {
	background-color: rgba(102, 217, 239, 0.1);
}

/* Description textarea/display */
.rd-tckt-desc-display {
	padding: 8px;
	font-size: 14px;
	line-height: 1.6;
	min-height: 60px;
	border-radius: 4px;
	border: 1px solid transparent;
	white-space: pre-wrap;
	color: var(--tckt-text-primary);
	background-color: transparent;
}

/* Reduce padding in readonly mode */
.rd-tckt-form-container[readonly] .rd-tckt-desc-display {
	padding: 0;
	min-height: auto;
	margin-bottom: 8px;
}

/* Read-only indicator in button bar */
.rd-tckt-readonly-indicator {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--tckt-text-secondary);
	background-color: var(--tckt-surface-elevated);
	border-radius: 6px;
	border: 1px solid var(--tckt-border-subtle);
}

/* Read-only field value display */
.rd-tckt-readonly-value {
	padding: 8px 0;
	font-size: 14px;
	color: var(--tckt-text-primary);
	line-height: 1.5;
}

/* Status comment in readonly mode with status color background */
.rd-tckt-form-container[readonly] .rd-tckt-statuscomment-display {
	padding: 12px;
	border-radius: 8px;
	margin-bottom: 16px;
	font-weight: 500;
	line-height: 1.6;
	color: #ffffff;
}

/* Status-specific backgrounds for status comment in readonly mode */
.rd-tckt-form-container[readonly] .rd-tckt-statuscomment-display[data-status="backlog"] {
	background-color: var(--tckt-badge-status-backlog-bg);
	border: 1px solid var(--tckt-badge-status-backlog-border);
}

.rd-tckt-form-container[readonly] .rd-tckt-statuscomment-display[data-status="open"] {
	background-color: var(--tckt-badge-status-open-bg);
	border: 1px solid var(--tckt-badge-status-open-border);
}

.rd-tckt-form-container[readonly] .rd-tckt-statuscomment-display[data-status="closed"] {
	background-color: var(--tckt-badge-status-closed-bg);
	border: 1px solid var(--tckt-badge-status-closed-border);
}

.rd-tckt-desc-textarea {
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	min-height: 80px;
	border-radius: 6px;
	border: 1px solid var(--tckt-input-border);
	font-family: inherit;
	resize: vertical;
	transition: all 0.2s;
	background-color: var(--tckt-input-bg);
	color: var(--tckt-text-primary);
}

/* Special styling for status comment textarea - background set dynamically via JS */
.rd-tckt-statuscomment-textarea {
	/* Background color is set dynamically to match status badge */
	/* Use white text in dark theme for better contrast on all status colors */
	color: #ffffff;
	font-weight: 500;
	transition: background-color 0.3s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	border-color: rgba(255, 255, 255, 0.2);
}

/* Override for light theme - use dark text for better contrast */
.rd-tckt-form-container:not([dark-mode]) .rd-tckt-statuscomment-textarea {
	color: var(--tckt-text-primary, #333) !important;
	border-color: rgba(0, 0, 0, 0.1);
}

/* Focus state for status comment */
.rd-tckt-statuscomment-textarea:focus {
	outline: none;
	border-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

/* Focus state for light theme */
.rd-tckt-form-container:not([dark-mode]) .rd-tckt-statuscomment-textarea:focus {
	border-color: var(--tckt-button-bg, #1976d2);
	box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

.rd-tckt-desc-textarea:focus {
	outline: none;
	border-color: #66d9ef;
	box-shadow: 0 0 0 2px rgba(102, 217, 239, 0.1);
}

/* AI optimization highlight */
.rd-tckt-desc-textarea.rd-tckt-ai-highlighted {
	background-color: rgba(102, 217, 239, 0.1);
}

/* Feedback & Slack link styling - optimized to match the rest of the UI */
.rd-tckt-feedback-link-container,
.rd-tckt-slack-link-container {
	margin-top: 16px;
}

.rd-tckt-feedback-link,
.rd-tckt-slack-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	border-radius: 6px;
	border: 1px solid var(--tckt-border-color);
	background: var(--tckt-bg-secondary);
	color: var(--tckt-text-primary);
	transition: all 0.2s ease;
}

.rd-tckt-feedback-link:hover,
.rd-tckt-slack-link:hover {
	background: var(--tckt-hover-bg);
	border-color: var(--tckt-button-bg);
	color: var(--tckt-button-bg);
	transform: translateX(2px);
}

.rd-tckt-feedback-link .material-icons,
.rd-tckt-slack-link .material-icons {
	font-size: 18px;
}

.rd-tckt-feedback-link .rd-tckt-icon-sm,
.rd-tckt-slack-link .rd-tckt-icon-sm {
	font-size: 16px;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.rd-tckt-feedback-link:hover .rd-tckt-icon-sm,
.rd-tckt-slack-link:hover .rd-tckt-icon-sm {
	opacity: 1;
}

/* ================================================================
   Ticket Title Link (for Query Tables)
   ================================================================ */

.rd-tckt-title-link {
	color: var(--rd-text-color, #333333);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.rd-tckt-title-link:hover {
	color: var(--rd-link-hover-color, #66d9ef);
	text-decoration: underline;
}

/* Dark mode support for title links */
[dark-mode] .rd-tckt-title-link {
	color: var(--rd-text-color, #e0e0e0);
}

[dark-mode] .rd-tckt-title-link:hover {
	color: var(--rd-link-hover-color, #66d9ef);
}

/* ================================================================
   Table Column Badges (for Query Tables)
   ================================================================ */

/* Status badges - table specific overrides */
.rd-tckt-badge.rd-tckt-badge-status-backlog {
	background-color: #e0f2f1 !important;
	color: #00695c !important;
	border-color: #4db6ac !important;
}

.rd-tckt-badge.rd-tckt-badge-status-open {
	background-color: #fff3e0 !important;
	color: #e65100 !important;
	border-color: #ffb74d !important;
}

.rd-tckt-badge.rd-tckt-badge-status-closed {
	background-color: #eceff1 !important;
	color: #546e7a !important;
	border-color: #90a4ae !important;
}

/* Priority badges - table specific overrides */
.rd-tckt-badge.rd-tckt-badge-priority-low {
	background-color: #e1f5fe !important;
	color: #0277bd !important;
	border-color: #64b5f6 !important;
}

.rd-tckt-badge.rd-tckt-badge-priority-medium {
	background-color: #fffde7 !important;
	color: #f57f17 !important;
	border-color: #ffd54f !important;
}

.rd-tckt-badge.rd-tckt-badge-priority-high {
	background-color: #fce4ec !important;
	color: #c2185b !important;
	border-color: #ff5370 !important;
}

/* Developer badge - table specific override */
.rd-tckt-badge.rd-tckt-badge-developer {
	background-color: #f3e5f5 !important;
	color: #6a1b9a !important;
	border-color: #ba68c8 !important;
}

/* Empty/unassigned state */
.rd-tckt-badge-empty {
	color: var(--tckt-text-tertiary, #999);
	font-style: italic;
	min-width: 100px;
	text-align: center;
}

/* Ticket title in table */
.rd-tckt-table-title {
	font-weight: 600;
	color: var(--rd-font-dark, #333);
}

/* ====== Layout Classes ====== */
.rd-tckt-flex-row {
	display: flex;
	gap: 12px;
}

.rd-tckt-flex-col {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.rd-tckt-flex-col-full {
	display: flex;
	flex-direction: column;
}

.rd-tckt-label-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.rd-tckt-mt-16 {
	margin-top: 16px;
}

.rd-tckt-mt-12 {
	margin-top: 12px;
}

.rd-tckt-gap-16 {
	gap: 16px;
}

/* ====== Icon Styles ====== */
.rd-tckt-action-icon {
	font-size: 18px;
	color: var(--tckt-title-link-color, #0288d1);
	cursor: pointer;
	transition: all 0.2s;
	opacity: 0.7;
}

.rd-tckt-action-icon:hover {
	opacity: 1;
	transform: scale(1.1);
}

.rd-tckt-action-icon.rd-tckt-icon-hidden {
	display: none;
}

/* ====== Readonly Value Styles ====== */
.rd-tckt-readonly-value-small {
	font-size: 13px;
	color: var(--tckt-text-tertiary, #999);
}

/* ====== Label Styles ====== */
.rd-tckt-form-label-mb {
	margin-bottom: 4px;
}

/* ====== Subticket Parent Link Styles ====== */
.rd-tckt-parent-link-wrapper {
	font-size: 11px;
	color: var(--tckt-text-tertiary, #999);
	margin-top: 2px;
}

.rd-tckt-parent-link {
	pointer-events: all;
}

/* ================================================================
   TicketSystem Suite Header
   ================================================================ */

.rd-tckt-suite-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	background: var(--tckt-bg-secondary);
	box-shadow: var(--tckt-shadow);
	flex-shrink: 0;
	overflow: visible;
}

/* Light mode header styling */
pc-ticket-system:not([dark-mode]) .rd-tckt-suite-header {
	background: #1a2e49;
	color: white;
}

pc-ticket-system:not([dark-mode]) .rd-tckt-suite-title {
	color: white;
}

pc-ticket-system:not([dark-mode]) .rd-tckt-suite-header-actions .rd-tckt-theme-toggle {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.3);
	color: white;
}

pc-ticket-system:not([dark-mode]) .rd-tckt-suite-header-actions .rd-tckt-theme-toggle:hover {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.5);
}

.rd-tckt-suite-title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--tckt-text-primary);
	flex-shrink: 0;
}

.rd-tckt-suite-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
	overflow: visible;
}

/* Suite header action buttons - match ticket lane button style */
.rd-tckt-suite-header-actions .rd-tckt-theme-toggle {
	background: var(--tckt-bg-tertiary);
	border: 1px solid var(--tckt-border-color);
	color: var(--tckt-text-primary);
}

.rd-tckt-suite-header-actions .rd-tckt-theme-toggle:hover {
	background: var(--tckt-button-bg);
	border-color: var(--tckt-button-bg);
}

pc-ticket-system-header {
	overflow: visible;
}

pc-ticket-system-header .rd-tckt-quick-ticket-input {
	padding: 8px 16px;
	background: var(--tckt-bg-primary);
	color: var(--tckt-text-primary);
	border: 1px solid var(--tckt-border-color);
	border-radius: 20px;
	font-size: 14px;
	width: 600px;
	transition: all 0.2s;
	flex-shrink: 1;
}

/* Light mode input styling on colored header */
pc-ticket-system:not([dark-mode]) pc-ticket-system-header .rd-tckt-quick-ticket-input {
	background: rgba(255, 255, 255, 0.95);
	border-color: rgba(255, 255, 255, 0.5);
}

pc-ticket-system:not([dark-mode]) pc-ticket-system-header .rd-tckt-quick-ticket-input::placeholder {
	color: #6b7280;
}

pc-ticket-system-header .rd-tckt-quick-ticket-input:focus {
	outline: none;
	border-color: var(--tckt-button-bg);
	background: var(--tckt-bg-primary);
	box-shadow: 0 0 0 2px rgba(102, 217, 239, 0.1);
	width: 600px;
}

pc-ticket-system-header .rd-tckt-quick-ticket-input:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

pc-ticket-system-header .rd-tckt-quick-ticket-success {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(34, 197, 94, 0.9);
	color: white;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 13px;
	pointer-events: none;
	z-index: 10001;
}

/* ================================================================
   Split Lane Button & Dropdown
   ================================================================ */

.rd-tckt-split-button-wrapper {
	position: relative;
	display: inline-block;
}

.rd-tckt-split-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	background: var(--tckt-bg-secondary, #ffffff);
	border: 1px solid var(--tckt-border-color, #e2e8f0);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 1000;
	min-width: 180px;
	overflow: hidden;
}

.rd-tckt-split-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	cursor: pointer;
	transition: background-color 0.15s;
	color: var(--tckt-text-primary, #1a1a2e);
	font-size: 14px;
	font-weight: 500;
}

.rd-tckt-split-option:hover {
	background: var(--tckt-bg-tertiary, #f1f5f9);
}

.rd-tckt-split-option:active {
	background: var(--tckt-button-bg, #3b82f6);
	color: white;
}

.rd-tckt-split-option .material-icons {
	font-size: 18px;
	opacity: 0.7;
}

.rd-tckt-split-option:hover .material-icons {
	opacity: 1;
}

/* Dark mode support */
pc-ticket-lane[dark-mode] .rd-tckt-split-dropdown {
	background: var(--tckt-bg-secondary);
	border-color: var(--tckt-border-color);
}

pc-ticket-lane[dark-mode] .rd-tckt-split-option {
	color: var(--tckt-text-primary);
}

pc-ticket-lane[dark-mode] .rd-tckt-split-option:hover {
	background: var(--tckt-bg-tertiary);
}

/* ================================================================
   Lane Headline
   ================================================================ */

.rd-tckt-lane-headline {
	font-size: 16px;
	font-weight: 600;
	color: var(--tckt-text-primary, #1a1a2e);
	padding: 8px 12px 8px 1.4em;
	text-align: center;
	border-bottom: 1px solid var(--tckt-border-color, #e2e8f0);
	background: var(--tckt-bg-secondary, #ffffff);
	min-height: 40px; /* Prevent layout shift during loading */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/* Light mode lane headline styling */
pc-ticket-system:not([dark-mode]) .rd-tckt-lane-headline {
	background: var(--rd-primary-active);
	color: white;
}

/* Light mode headline buttons - white on colored background */
pc-ticket-system:not([dark-mode]) .rd-tckt-headline-btn {
	color: rgba(255, 255, 255, 0.7);
}

pc-ticket-system:not([dark-mode]) .rd-tckt-headline-btn:hover {
	color: white;
	background: rgba(255, 255, 255, 0.15);
}

pc-ticket-system:not([dark-mode]) .rd-tckt-headline-btn-close:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #ff6b6b;
}

/* Headline actions (view mode, split, close) */
.rd-tckt-headline-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.rd-tckt-headline-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 4px;
	border-radius: 50%;
	background: transparent;
	border: none;
	transition: all 0.2s;
	color: var(--tckt-text-secondary, #64748b);
	opacity: 0.5;
	width: 24px;
	height: 24px;
}

.rd-tckt-headline-btn:hover {
	opacity: 1;
	color: var(--tckt-text-primary, #333);
}

.rd-tckt-headline-btn:active {
	transform: scale(0.95);
}

.rd-tckt-headline-btn .material-icons {
	font-size: 14px;
}

/* Close button special styling */
.rd-tckt-headline-btn-close:hover {
	background: rgba(239, 68, 68, 0.15);
	border-color: #ef4444;
	color: #ef4444;
}

.rd-tckt-headline-btn-close:active {
	background: rgba(239, 68, 68, 0.25);
}

/* Loading animation for lane title */
.rd-tckt-title-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.rd-tckt-loading-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tckt-text-secondary, #94a3b8);
	animation: rd-tckt-dot-pulse 1.4s ease-in-out infinite;
}

.rd-tckt-loading-dot:nth-child(1) {
	animation-delay: 0s;
}

.rd-tckt-loading-dot:nth-child(2) {
	animation-delay: 0.2s;
}

.rd-tckt-loading-dot:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes rd-tckt-dot-pulse {
	0%, 80%, 100% {
		transform: scale(0.6);
		opacity: 0.4;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

/* ================================================================
   Remove Lane Button (top-right corner)
   ================================================================ */

.rd-tckt-remove-lane-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 4px;
	border-radius: 50%;
	background: var(--tckt-bg-secondary, rgba(255, 255, 255, 0.9));
	border: 1px solid var(--tckt-border-color, #e2e8f0);
	transition: all 0.2s;
	color: var(--tckt-text-secondary, #64748b);
	width: 24px;
	height: 24px;
}

.rd-tckt-remove-lane-btn:hover {
	background: rgba(239, 68, 68, 0.15);
	border-color: #ef4444;
	color: #ef4444;
}

.rd-tckt-remove-lane-btn:active {
	background: rgba(239, 68, 68, 0.25);
	transform: scale(0.95);
}

.rd-tckt-remove-lane-btn .material-icons {
	font-size: 14px;
}

/* ================================================================
   Row Dropdown (in header)
   ================================================================ */

.rd-tckt-row-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
}

.rd-tckt-row-dropdown-container {
	position: relative;
	display: inline-block;
}

.rd-tckt-row-dropdown {
	position: fixed;
	background: var(--tckt-bg-secondary, #ffffff);
	border: 1px solid var(--tckt-border-color, #e2e8f0);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 10001;
	min-width: 120px;
	overflow: hidden;
}

.rd-tckt-row-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	cursor: pointer;
	transition: background-color 0.15s;
	color: var(--tckt-text-primary, #1a1a2e);
	font-size: 14px;
	font-weight: 500;
}

.rd-tckt-row-option:hover {
	background: var(--tckt-bg-tertiary, #f1f5f9);
}

.rd-tckt-row-option-danger {
	color: var(--tckt-badge-high, #ef4444);
}

.rd-tckt-row-option-danger:hover {
	background: rgba(239, 68, 68, 0.1);
}

.rd-tckt-row-dropdown-divider {
	height: 1px;
	background: var(--tckt-border-color, #e2e8f0);
	margin: 4px 0;
}

/* Dark mode support for row dropdown */
pc-ticket-system[dark-mode] .rd-tckt-row-dropdown {
	background: var(--tckt-bg-secondary);
	border-color: var(--tckt-border-color);
}

pc-ticket-system[dark-mode] .rd-tckt-row-option {
	color: var(--tckt-text-primary);
}

pc-ticket-system[dark-mode] .rd-tckt-row-option:hover {
	background: var(--tckt-bg-tertiary);
}

/* ================================================================
   Status Multi-Select Dropdown Styling
   ================================================================ */

/* Small text labels for filter groups */
.rd-tckt-filter-label {
	font-size: 11px;
	color: var(--tckt-text-tertiary);
	font-weight: 500;
}

/* Inactive (unselected) options in multi-select - desaturated but still readable */
pc-ticket-badge .rd-tckt-panel-option.rd-tckt-option-inactive .rd-tckt-option-badge {
	filter: saturate(0.3) brightness(0.85);
	opacity: 0.7;
}

pc-ticket-badge .rd-tckt-panel-option.rd-tckt-option-inactive:hover .rd-tckt-option-badge {
	filter: saturate(0.5) brightness(0.9);
	opacity: 0.85;
}

/* Multi-select badge with no selection - muted styling */
.rd-tckt-badge.rd-tckt-multi-none {
	background: var(--tckt-bg-tertiary);
	color: var(--tckt-text-secondary);
	border: 1px solid var(--tckt-border-color);
}

/* ================================================================
   View Mode Toggle (Edit / Document)
   ================================================================ */

/* Toggle switch - the box around the slider */
.rd-tckt-toggle-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 52px;
	height: 26px;
	cursor: pointer;
}

/* Hide default checkbox */
.rd-tckt-toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider track */
.rd-tckt-toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--tckt-bg-tertiary);
	border: 1px solid var(--tckt-border-color);
	border-radius: 26px;
	transition: all 0.2s ease-out;
}

/* The sliding knob */
.rd-tckt-toggle-slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 2px;
	bottom: 2px;
	background: var(--tckt-text-secondary);
	border-radius: 50%;
	transition: all 0.2s ease-out;
	z-index: 2;
}

/* Icons inside the toggle */
.rd-tckt-toggle-slider .material-icons {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	transition: all 0.2s ease-out;
	z-index: 1;
	font-weight: 500;
}

.rd-tckt-toggle-icon-edit {
	right: 6px;
	color: var(--tckt-text-tertiary);
	opacity: 0.5;
}

.rd-tckt-toggle-icon-doc {
	left: 6px;
	color: var(--tckt-text-tertiary);
	opacity: 0.5;
}

/* Checked state (edit mode) - knob slides right */
.rd-tckt-toggle-switch input:checked + .rd-tckt-toggle-slider {
	background: var(--tckt-button-bg);
	border-color: var(--tckt-button-bg);
}

.rd-tckt-toggle-switch input:checked + .rd-tckt-toggle-slider:before {
	transform: translateX(26px);
	background: #fff;
}

.rd-tckt-toggle-switch input:checked + .rd-tckt-toggle-slider .rd-tckt-toggle-icon-edit {
	opacity: 0;
}

.rd-tckt-toggle-switch input:checked + .rd-tckt-toggle-slider .rd-tckt-toggle-icon-doc {
	opacity: 1;
	color: rgba(255, 255, 255, 0.9);
}

/* Unchecked state (document/view mode) */
.rd-tckt-toggle-switch input:not(:checked) + .rd-tckt-toggle-slider .rd-tckt-toggle-icon-edit {
	opacity: 1;
	color: var(--tckt-text-primary);
}

.rd-tckt-toggle-switch input:not(:checked) + .rd-tckt-toggle-slider .rd-tckt-toggle-icon-doc {
	opacity: 0;
}

/* Hover effect */
.rd-tckt-toggle-switch:hover .rd-tckt-toggle-slider {
	border-color: var(--tckt-button-bg);
}

/* Focus outline for accessibility */
.rd-tckt-toggle-switch input:focus-visible + .rd-tckt-toggle-slider {
	outline: 2px solid var(--tckt-button-bg);
	outline-offset: 2px;
}

/* ================================================================
   Document View Mode Styles
   ================================================================ */

.rd-tckt-document-view {
	padding: 0;
	max-width: 100%;
}

.rd-tckt-doc-container {
	background: transparent;
	border-radius: 8px;
	padding: 32px;
	max-width: 900px;
	margin: 0;
}

.rd-tckt-doc-empty {
	text-align: center;
	padding: 64px;
	color: var(--tckt-text-tertiary);
	font-size: 16px;
}

/* Document ticket styling */
.rd-tckt-doc-ticket {
	margin-bottom: 24px;
}

.rd-tckt-doc-ticket:last-child {
	margin-bottom: 0;
}

.rd-tckt-doc-ticket-header {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}

.rd-tckt-doc-title {
	margin: 0;
	color: var(--tckt-text-primary);
	font-weight: 600;
	line-height: 1.3;
}

/* Title sizing by depth */
.rd-tckt-doc-depth-0 .rd-tckt-doc-title {
	font-size: 28px;
}

.rd-tckt-doc-depth-1 .rd-tckt-doc-title {
	font-size: 22px;
}

.rd-tckt-doc-depth-2 .rd-tckt-doc-title {
	font-size: 18px;
}

.rd-tckt-doc-depth-3 .rd-tckt-doc-title,
.rd-tckt-doc-depth-4 .rd-tckt-doc-title,
.rd-tckt-doc-depth-5 .rd-tckt-doc-title {
	font-size: 16px;
}

.rd-tckt-doc-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* Status comment in document view */
.rd-tckt-doc-status-comment {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 1.5;
	border-left: 4px solid currentColor;
}

/* Status-specific colors for document status comment */
.rd-tckt-doc-status-comment[data-status="backlog"] {
	background: var(--tckt-badge-status-backlog-bg);
	color: var(--tckt-badge-status-backlog-fg);
	border-left-color: var(--tckt-badge-status-backlog-fg);
}

.rd-tckt-doc-status-comment[data-status="todo"] {
	background: var(--tckt-badge-status-todo-bg);
	color: var(--tckt-badge-status-todo-fg);
	border-left-color: var(--tckt-badge-status-todo-fg);
}

.rd-tckt-doc-status-comment[data-status="open"] {
	background: var(--tckt-badge-status-open-bg);
	color: var(--tckt-badge-status-open-fg);
	border-left-color: var(--tckt-badge-status-open-fg);
}

.rd-tckt-doc-status-comment[data-status="closed"] {
	background: var(--tckt-badge-status-closed-bg);
	color: var(--tckt-badge-status-closed-fg);
	border-left-color: var(--tckt-badge-status-closed-fg);
}

.rd-tckt-doc-status-comment[data-status="canceled"] {
	background: var(--tckt-badge-status-canceled-bg);
	color: var(--tckt-badge-status-canceled-fg);
	border-left-color: var(--tckt-badge-status-canceled-fg);
}

.rd-tckt-doc-description {
	color: var(--tckt-text-secondary);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 16px 0;
	font-style: italic;
}

.rd-tckt-doc-fullbody {
	color: var(--tckt-text-primary);
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: 16px;
}

.rd-tckt-doc-fullbody p {
	margin: 0 0 12px 0;
}

.rd-tckt-doc-fullbody p:last-child {
	margin-bottom: 0;
}

.rd-tckt-doc-fullbody ul,
.rd-tckt-doc-fullbody ol {
	margin: 12px 0;
	padding-left: 24px;
}

.rd-tckt-doc-fullbody li {
	margin-bottom: 6px;
}

.rd-tckt-doc-fullbody h1,
.rd-tckt-doc-fullbody h2,
.rd-tckt-doc-fullbody h3,
.rd-tckt-doc-fullbody h4,
.rd-tckt-doc-fullbody h5,
.rd-tckt-doc-fullbody h6 {
	margin: 20px 0 12px 0;
	color: var(--tckt-text-primary);
}

.rd-tckt-doc-fullbody a {
	color: var(--tckt-button-bg);
	text-decoration: underline;
}

.rd-tckt-doc-fullbody code {
	background: var(--tckt-bg-tertiary);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: 'Consolas', 'Monaco', monospace;
	font-size: 13px;
}

.rd-tckt-doc-fullbody pre {
	background: var(--tckt-bg-tertiary);
	padding: 16px;
	border-radius: 6px;
	overflow-x: auto;
	margin: 16px 0;
}

.rd-tckt-doc-fullbody pre code {
	background: transparent;
	padding: 0;
}

.rd-tckt-doc-fullbody img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	margin: 12px 0;
}

.rd-tckt-doc-fullbody blockquote {
	border-left: 4px solid var(--tckt-border-color);
	margin: 16px 0;
	padding: 12px 20px;
	background: var(--tckt-bg-secondary);
	color: var(--tckt-text-secondary);
	font-style: italic;
}

.rd-tckt-doc-fullbody table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
}

.rd-tckt-doc-fullbody th,
.rd-tckt-doc-fullbody td {
	border: 1px solid var(--tckt-border-color);
	padding: 10px 12px;
	text-align: left;
}

.rd-tckt-doc-fullbody th {
	background: var(--tckt-bg-secondary);
	font-weight: 600;
}

/* Child tickets in document view - indented with visual hierarchy */
.rd-tckt-doc-children {
	margin-top: 24px;
	padding-left: 24px;
	border-left: 2px solid var(--tckt-border-color);
}

/* Depth-based visual styling */
.rd-tckt-doc-depth-1 {
	padding-left: 0;
}

.rd-tckt-doc-depth-2,
.rd-tckt-doc-depth-3,
.rd-tckt-doc-depth-4,
.rd-tckt-doc-depth-5 {
	padding-left: 0;
}

/* Document actions */
.rd-tckt-doc-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--tckt-border-color);
}

/* ================================================================
   Document View - Comments Section
   ================================================================ */

.rd-tckt-doc-comments-section {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 2px solid var(--tckt-border-color);
}

.rd-tckt-doc-comments-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--tckt-text-primary);
	margin: 0 0 24px 0;
}

.rd-tckt-doc-comments-loading {
	color: var(--tckt-text-secondary);
	font-style: italic;
	padding: 16px 0;
}

.rd-tckt-doc-comment {
	background: var(--tckt-bg-secondary);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 12px;
}

.rd-tckt-doc-comment:last-child {
	margin-bottom: 0;
}

.rd-tckt-doc-comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--tckt-border-color);
}

.rd-tckt-doc-comment-author {
	font-weight: 600;
	color: var(--tckt-text-primary);
	font-size: 14px;
}

.rd-tckt-doc-comment-date {
	font-size: 12px;
	color: var(--tckt-text-secondary);
}

.rd-tckt-doc-comment-body {
	color: var(--tckt-text-primary);
	font-size: 14px;
	line-height: 1.6;
}

.rd-tckt-doc-comment-body p {
	margin: 0 0 8px 0;
}

.rd-tckt-doc-comment-body p:last-child {
	margin-bottom: 0;
}

.rd-tckt-doc-comment-body ul,
.rd-tckt-doc-comment-body ol {
	margin: 8px 0;
	padding-left: 20px;
}

.rd-tckt-doc-comment-body a {
	color: var(--tckt-button-bg);
	text-decoration: underline;
}

/* ================================================================
   Inline Ticket Comments (per ticket)
   ================================================================ */

.rd-tckt-doc-ticket-comments {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px dashed var(--tckt-border-color);
}

.rd-tckt-doc-ticket-comments-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--tckt-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 12px;
}

.rd-tckt-doc-comment-inline {
	background: var(--tckt-bg-tertiary, rgba(128, 128, 128, 0.05));
	border-radius: 6px;
	padding: 12px;
	margin-bottom: 8px;
	font-size: 13px;
}

.rd-tckt-doc-comment-inline:last-child {
	margin-bottom: 0;
}

.rd-tckt-doc-comment-inline .rd-tckt-doc-comment-header {
	margin-bottom: 8px;
	padding-bottom: 6px;
}

.rd-tckt-doc-comment-inline .rd-tckt-doc-comment-author {
	font-size: 13px;
}

.rd-tckt-doc-comment-inline .rd-tckt-doc-comment-date {
	font-size: 11px;
}

.rd-tckt-doc-comment-inline .rd-tckt-doc-comment-body {
	font-size: 13px;
}

/* Loading overlay for document view */
.rd-tckt-doc-loading-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	border-radius: 12px;
}

.rd-tckt-document-view {
	position: relative;
}

/* ================================================================
   Print Styles for Document View
   ================================================================ */

@media print {
	/* Hide non-document elements */
	.rd-tckt-button-container,
	.rd-tckt-doc-actions,
	.rd-tckt-view-mode-toggle,
	pc-dynamic-sidebar .rd-sidebar-resize-handle,
	pc-dynamic-sidebar .rd-sidebar-header {
		display: none !important;
	}

	/* Reset sidebar for print */
	pc-dynamic-sidebar {
		position: static !important;
		width: 100% !important;
		max-width: none !important;
		box-shadow: none !important;
		border: none !important;
	}

	/* Document container full width */
	.rd-tckt-doc-container {
		max-width: none;
		padding: 0;
		margin: 0;
		background: white;
	}

	.rd-tckt-document-view {
		padding: 0;
	}

	/* Ensure proper colors for print */
	.rd-tckt-doc-title {
		color: #000 !important;
	}

	.rd-tckt-doc-description {
		color: #444 !important;
	}

	.rd-tckt-doc-fullbody {
		color: #000 !important;
	}

	/* Hide badges in print or make them simpler */
	.rd-tckt-doc-meta pc-ticket-badge {
		border: 1px solid #ccc !important;
		background: #f5f5f5 !important;
		color: #333 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Page breaks */
	.rd-tckt-doc-ticket {
		page-break-inside: avoid;
	}

	.rd-tckt-doc-children {
		page-break-before: avoid;
	}

	/* Comments in print */
	.rd-tckt-doc-comments-section {
		border-top-color: #ccc;
	}

	.rd-tckt-doc-comments-title {
		color: #000 !important;
	}

	.rd-tckt-doc-comment {
		background: #f9f9f9 !important;
		border: 1px solid #ddd;
		page-break-inside: avoid;
	}

	.rd-tckt-doc-comment-header {
		border-bottom-color: #ddd;
	}

	.rd-tckt-doc-comment-author {
		color: #000 !important;
	}

	.rd-tckt-doc-comment-date {
		color: #666 !important;
	}

	.rd-tckt-doc-comment-body {
		color: #000 !important;
	}

	/* Inline comments in print */
	.rd-tckt-doc-ticket-comments {
		border-top-color: #ccc;
	}

	.rd-tckt-doc-ticket-comments-label {
		color: #666 !important;
	}

	.rd-tckt-doc-comment-inline {
		background: #f9f9f9 !important;
		border: 1px solid #ddd;
	}

	/* Hide loading overlay in print */
	.rd-tckt-doc-loading-overlay {
		display: none !important;
	}
}