:root {
	--primary-color: #121520;
	--primary-color-2: #2B2D37; /* Charcoal Black */
	--accent-color-1: #4A4A4A; /* Steel Gray */
	--accent-color-2: #FF8C00; /* Industrial Orange */
	--highlight-color: #1E90FF; /* Electric Blue */
	--text-color: #E3E3E3; /* Light Gray */
	--text-color-for-highlight: #121520; /* Dark Gray */
	--error-color: #DC143C; /* Crimson Red */
	--error-color-bold: #9e0a28; /* Dark Red */
	--success-color: #32CD32; /* Lime Green */
	--success-color-hover: #228B22; /* Forest Green */
	--info-color: #1E90FF; /* Electric Blue */
	--info-color-hover: #1C86EE; /* Dodger Blue */
	--danger-color: #DC143C; /* Crimson Red */
	--danger-color-hover: #B22222; /* Fire Brick */
	--text-color-muted: #999999; /* Muted Gray */
	--yellow-color: #FFD700; /* Bright Yellow */
	--tan-color: #887B5F; /* Light Tan */
}

/* Light Mode */
.light-mode {
	--primary-color: #F5F5EE;
	--primary-color-2: #F5F5F5; /* Light Gray */
	--accent-color-1: #D3D3D3; /* Silver */
	--accent-color-2: #FF8C00; /* Industrial Orange (unchanged) */
	--highlight-color: #1E90FF; /* Electric Blue (unchanged) */
	--text-color: #121520; /* Dark Gray */
	--text-color-for-highlight: #121520; /* Dark Gray */
	--error-color: #DC143C; /* Crimson Red (unchanged) */
	--error-color-bold: #9e0a28; /* Dark Red (unchanged) */
	--success-color: #32CD32; /* Lime Green (unchanged) */
	--success-color-hover: #228B22; /* Forest Green */
	--info-color: #1E90FF; /* Electric Blue */
	--info-color-hover: #1C86EE; /* Dodger Blue */
	--danger-color: #DC143C; /* Crimson Red */
	--danger-color-hover: #B22222; /* Fire Brick */
	--text-color-muted: #666666; /* Muted Gray (darker for light mode) */
	--yellow-color: #FFD700; /* Bright Yellow (unchanged) */
	--tan-color: #D8CBAF; /* Light Tan (unchanged) */
}

html {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	font-family: Avenir,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	color: var(--text-color);
	background-color: var(--primary-color);
	display: flex;
	flex-direction:column;
	height: 100%;
}

h1, h2, h3
{
	text-align: left;
	font-size: 1.5em;
	display: flex;
	align-items: center;
	gap: 5px;
}

* {
	scrollbar-color: var(--accent-color-1) var(--text-color);
	scrollbar-width: thin;
}

*::-webkit-scrollbar {
	width: 14px;
}

*::-webkit-scrollbar-track {
	background: var(--primary-color-2);
}

*::-webkit-scrollbar-thumb {
	background-color: var(--accent-color-1);
	border-radius: 10px;
	border: 2px solid transparent;
}

	*::-webkit-scrollbar-thumb:hover {
		background-color: var(--text-color);
	}

input {
	background-color: var(--primary-color-2);
	color: var(--text-color);
}

input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="password"] {
	border: 1px solid var(--accent-color-1);
	border-radius: 5px;
	padding: 0.5em;
}

textarea {
	height: 50px;
	width: 100%;
	border-radius: 5px;
	border: 1px solid var(--accent-color-1);
	background-color: var(--accent-color-1);
	color: var(--text-color);
}

a {
    text-decoration: none;
    color: var(--text-color);
}

/* Learn more link styling for product-led growth */
.learn-more-link {
    color: var(--highlight-color);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.learn-more-link:hover {
    color: var(--accent-color-2);
    border-bottom-color: var(--accent-color-2);
    text-decoration: none;
}

.learn-more-link::after {
    content: "↗";
    font-size: 0.9em;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.learn-more-link:hover::after {
    opacity: 1;
}

button {
	padding: 0.3em;
	font-size: 1em;
	color: var(--text-color);
	background-color: var(--accent-color-1);
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
}

	button:hover {
		background-color: var(--accent-color-2);
	}

.icon, .icon-only {
	background-size: contain;
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	display: inline-block;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: var(--text-color);
}

.icon-only {
	margin: 0 !important;
}

.icon-l {
	background-size: contain;
	background-repeat: no-repeat;
	width: 32px;
	height: 32px;
	display: inline-block;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: var(--text-color);
}

.btn-icon-sm {
	padding: 0.3em;
	display: flex;
	flex-direction: row;
	font-size: 0.9em;
	background-color: var(--accent-color-1);
	border-radius: 5px;
	box-sizing: border-box;
	cursor: pointer;
	transition: background-color 0.3s;
}

	.btn-icon-sm.disable {
		opacity: 0.7;
		cursor: not-allowed;
	}

.btn-icon {
	padding: 0.5em;
	display: flex;
	flex-direction: row;
	font-size: 0.9em;
	background-color: var(--accent-color-1);
	border-radius: 5px;
	box-sizing: border-box;
	cursor: pointer;
	margin: 5px;
	transition: background-color 0.3s;
}

.btn-icon-inline {
	display: inline-flex;
}

	.btn-icon.btn-highlight{
		background-color: var(--highlight-color);
	}

	.btn-icon:hover, .btn-icon-sm:hover, .btn-icon.highlight:hover {
		background-color: var(--accent-color-2);
	}

	.btn-icon img, .btn-icon-inline img {
		margin-right: 10px;
	}

	.btn-icon-sm img {
		margin-right: 10px;
	}

	.btn-icon.highlight img {
		margin-right: 10px;
	}

	.btn-icon:hover {
		background-color: var(--accent-color-2);
	}

	.btn-icon img {
		margin-right: 10px;
	}

.archive-btn
{
	cursor: pointer;
	display: none;
}

/* Navigation */
#nav-top {
	width: 100%;
	height: 35px;
	background-color: var(--primary-color);
	border-bottom: 1px solid var(--accent-color-1);
	margin: 0;
	z-index: 1000;
	position: fixed;
}

#nav-top-center{
	float:left;
	width:60%;
}

	#nav-top-center-search {
		margin: 4px;
		border: 0 solid var(--accent-color-1);
		padding: 6px;
		width: 100%;
		font-size: 14px;
		font-weight: 100;
		line-height: normal;
		border-radius: 4px;
		appearance: none;
		background-color: var(--accent-color-1);
		color: var(--text-color)
	}

	#nav-top-center .search-selection {
		margin: 4px;
		border: 0 solid var(--accent-color-1);
		padding: 6px;
		max-width: 150px;
		font-size: 14px;
		font-weight: 100;
		line-height: normal;
		border-radius: 4px;
		background-color: var(--accent-color-1);
		color: var(--text-color)
	}

#nav-top-center-search:focus
{
	outline: 2px solid transparent;
    outline-offset: 2px;
}

#nav-top-left{
	float:left;
	width: 20%;
	height: 100%;
}

#nav-top-left-logo {
	font-weight: bold;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	vertical-align: middle;
	font-size: 1em;
	padding: 0;
	height: 35px;
	width: 210px;
}

#nav-top-right{
	float:right;
	height: 100%;
	color: var(--text-color);
	padding: 7px;
	font-size: 1em;
	display: flex;
}

#nav-top-right-domain
{
	margin-right: 10px;
}

/* Plan Badge Styles */
.plan-badge {
	display: inline-block;
	padding: 2px 8px;
	margin-left: 8px;
	margin-right: 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.2;
	border: 1px solid transparent;
}

.plan-badge.badge-primary {
	background-color: var(--accent-color-2);
	color: var(--text-color-for-highlight);
	border-color: var(--accent-color-2);
}

.plan-badge.badge-success {
	background-color: var(--success-color);
	color: var(--text-color-for-highlight);
	border-color: var(--success-color);
}

.plan-badge.badge-info {
	background-color: var(--info-color);
	color: var(--text-color-for-highlight);
	border-color: var(--info-color);
}

#nav-left {
	display: flex;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 40px;
	border-right: 1px solid var(--accent-color-1);
	background-color: var(--primary-color);
	transition: width 0.3s ease;
	flex-direction: column;
	align-items: flex-start;
	z-index: 900;
	position: fixed;
}

	#nav-left:hover {
		width: 200px;
	}

.nav-left-item {
	width: 100%;
	height: 28px;
	display: flex;
	flex-direction: row;
	padding: 10px 0;
	color: white;
	text-decoration: none;
	transition: background-color 0.3s ease;
	margin: 0;
	justify-content: left; /* Horizontally centers the icon */
	align-items: center; /* Vertically centers the icon */
}

	.nav-left-item:hover {
		background-color: var(--accent-color-2);
		padding: 10px 0;
		margin: 0;
		font-weight: 500;
	}

.nav-left-item.active {
	background-color: var(--accent-color-1);
	font-weight: 600;
	border-left: 3px solid var(--text-color);
	padding: 10px 0;
	margin: 0;
}

.nav-left-item.active .nav-left-icon {
	opacity: 1;
}

.nav-left-item.active .nav-left-label {
	color: var(--text-color);
	font-weight: 600;
}

.nav-left-icon {
	display: flex;
	width: 20px;
	height: 20px;
	padding: 10px;
	margin: 5px 5px 5px 0; /* Reset margin to zero in collapsed state */
	transition: margin-right 0.3s ease; /* Smooth transition for margin change */
	opacity: .8;
}

	.nav-left-icon svg {
		width: 100%; /* Makes SVG scale to the container width */
		height: 100%; /* Ensures SVG scales proportionally */
		object-fit: contain; /* Keeps aspect ratio intact */
		display: block; /* Removes whitespace artifacts */
	}

.nav-left-label {
	display: none;
	white-space: nowrap;
	transition: margin-left 0.3s ease, opacity 0.3s ease; /* Smooth transition for visibility */
	opacity: 0;
	padding: 0;
	margin-left: 0;
	color: var(--text-color);
}

#nav-left:hover .nav-left-label {
	display: flex;
	opacity: 1;
	margin-left: 10px;
	padding: 0;
}

	.spacer {
		flex-grow: 1;
	}

/* Report */
.report-chart-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	width: 100%;
}

.report-chart-grid > div {
	padding: 20px;
	border-radius: 8px;
	border: 1px solid var(--accent-color-1);
}

.report-kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
	gap: 20px;
	margin-bottom: 20px;
}

/* Resource Page */
input::placeholder {
	color: var(--text-color);
}

#content-wrapper {
	display: flex;
	width: calc(100% - 42px);
	flex: 1;
}

#content {
	flex: 1;
	display: flex;
	flex-direction: row;
	height: 100%;
	position: relative;
	left: 40px;
	top: 35px;
	width: calc(100% - 40px);
}

#breadcrumbs{
	margin: 5px 0;
	font-size: 0.9em;
}

#summary {
	display: flex;
	justify-content: space-between;
	margin: 20px 0;
}

#summary-title {
    align-items: center;
    justify-content: center;
}

#summary-right {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: start;
	gap: 10px;
	padding-top:10px;
	width: 650px;
}

#summary-editor {
	height: 100px;
    width: 800px;
}

.checks {
	text-align:left;
	font-size: .9em;
	border-collapse: collapse;
	border: 1px solid var(--accent-color-1);
}

.checks th, .checks td {
	padding: 5px;
	border-bottom: 1px solid var(--accent-color-1);
}

td .icon {
	margin-left: 10px;
}

.checks th {
    background-color: var(--accent-color-1);
}

#check-details {
	font-size: .9em;
}

#summary-asset-name {
	margin-left: 10px;
	font-size: 1.5rem;
	font-weight: bold;
}

#status-text {
	font-size: 14px;
}

.summary-level {
	display: flex;
	justify-content: flex-start;
	align-items: start;
	margin: 5px 0;
	font-size: 0.9em;
	color: var(--text-color);
}

/* Container styling */
#favorite-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#favorite-toggle {
	cursor: pointer;
}

#status-container {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	margin-left: auto; /* Positions the status container to the right */
	padding: 10px;
	gap: 5px;
}

/* Status indicator and dropdown */

.dropdown-content {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	background-color: var(--primary-color-2);
	color: var(--text-color);
	border: 1px solid var(--accent-color-1);
	border-radius: 4px;
	box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
	z-index: 1;
}

#status-indicator {
	position: relative;
	padding: 3px 10px;
	color: var(--text-color-for-highlight);
	background-color: var(--tan-color);
	cursor: pointer;
	border-radius: 4px;
}

	#status-indicator:hover .dropdown-content {
		display: block;
	}

.status-option {
	padding: 8px 12px;
	cursor: pointer;
}

	.status-option:hover {
		background-color: var(--accent-color-2);
		color: var(--primary-color-2);
	}

/* Styling for the message box */
#status-message,
#status-submit {
	margin-top: 10px;
	width: 100%;
}

#status-message {
	min-height: 60px;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
}

#report-issue-container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

#report-issue-btn {
	color: var(--text-color);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	padding: 5px 10px;
}

#issue-message {
	flex-direction: column;
	align-items: flex-start;
	max-width: 800px;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
}

.input-box-flat{
	margin: 4px;
	border: 0 solid var(--accent-color-1);
	padding: 6px;
	width: 100%;
	font-size: 14px;
	font-weight: 100;
	line-height: normal;
	border-radius: 4px;
	appearance: none;
	background-color: var(--accent-color-1);
	color: var(--text-color)
}

#submit-issue {
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

/* Summary */

.summary-info-muted {
	font-size: 0.8em;
	opacity: 0.7;
	margin-bottom: 15px;
}

.summary-info-highlight {
	padding: 0 10px 0 0;
	width: 120px;
	display: flex;
	align-items: center;
	gap: 10px;
}

#summary-left {
	width: 100%;
}

.summary-info {
	padding: 0 10px 0 0;
	flex-wrap: wrap;
	text-align: left;
	display: flex;
	width: 100%;
	min-height: 25px;
}

.section {
	padding: 10px 0;
	margin: 0;
	width: 100%;
}

.section-title {
	font-size: 1.1em;
	font-weight: 200;
	display: flex;
	justify-content: left;
	align-items: center;
}

.comparison-controls {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}

.comparison-controls input,
.comparison-controls button {
	margin-left: 10px;
}

.section-content {
	min-height: 25px;
	font-size: 0.9em;
	padding: 5px;
	background-color: var(--primary-color);
}

#information
{
	width:100%;
	height: 100%;
	margin: 10px 0;
}

#visualization-section {
	display: none;
}

.focus {
    border: 5px solid var(--success-color) !important;
}

/* Lineage */
#lineage {
	width: 100%;
	height: 450px;
}

#explorer {
	width: 100%;
	height: 100%;
	z-index: 999;
	position: relative;
	margin: auto;
	background-color: var(--primary-color-2);
    border: 1px solid var(--accent-color-1)
}

#explorer-wrapper {
	width: 100%;
	height: 100%;
	z-index: 999;
	padding: 0;
	position: relative;
	margin: auto;
	background-color: var(--accent-color-1);
	background-size: 18px 18px;
}

.explorer-tools-icon{
	cursor: pointer;
}

#title-lineage:hover{
	cursor: pointer;
}

.explorer-full {
	position: fixed !important;
	left: 0;
	top: 35px;
	width: 100%;
	height: 100%;
}

#explorer-overlay {
	min-height: 75px;
	min-width: 125px;
	bottom: 10px;
	left: 10px;
	position: absolute;
	overflow: hidden;
	z-index: 999999;
	background: var(--accent-color-1)
}

#explorer-options {
	top: 1px;
	left: 1px;
	position: absolute;
	overflow: hidden;
	z-index: 999999;
	font-size: 1em;
	background-color: var(--primary-color-2);
	padding: .2em;
}

#explorer-connected-nodes {
	position: absolute;
	top: 1px;
	right: 0;
	width: 300px;
	height: 100%;
	border-left: 1px solid var(--accent-color-1);
	font-size: 0.9em;
	overflow-y: scroll;
	background-color: var(--primary-color);
	z-index: 999999;
	padding:0 5px;
}

	#explorer-connected-nodes .title {
		font-weight: bold;
		padding: 5px;
		border-bottom: 1px solid var(--accent-color-1);
	}

	#explorer-connected-nodes-selected-name {
		font-weight: bold;
		padding: 5px;
		font-size: 1.5em;
		cursor: pointer;
	}

	#explorer-connected-nodes-selected-type-container {
		padding-left: 10px;
		display: flex;
		align-items: center;
	}

	#explorer-connected-nodes-selected-type {
		padding: 5px 10px;
		font-size: 1em;
		color: var(--text-color);
	}

	.property-title {
		font-weight: bold;
		padding: 10px 0 3px;
	}

	.property-value {
		padding: 0 0 0 3px;
	}

#explorer-connected-nodes ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.related-nodes-list {
	display: flex;
	flex-direction: column;
}

.related-node {
	padding: 5px;
}

.related-node:hover, .related-node:hover a {
	cursor: pointer;
	background-color: var(--accent-color-2);
	color: var(--primary-color);
}

.related-nodes-type-header {
	font-weight: 700;
	border-bottom: 1px solid var(--primary-color-2);
	padding: 5px 0;
}

/* alarm states */
.status-normal {
	background: url("../images/status_normal.svg");
}

.status-alarm {
	background: url("../images/status_alarm.svg");
}

.parent-node-group {
	display: flex;
	flex-direction: column; /* Arrange child elements vertically */
	background: var(--primary-color-2);
	align-items: center;
	justify-content: center;
	max-width: 100%; /* Constrain to node's width */
	max-height: 100%; /* Constrain to node's height */
	font-size: 12px;
	padding: 0;
	margin: 0;
	top: 0;
}

	.parent-node-group.hide {
		display: none;
	}

	.parent-node-group.show {
		display: flex; /* Use flexbox to arrange child elements */
	}

.parent-icon {
	background-size: contain;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: var(--text-color);
}

.parent-node-row {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0;
	margin: 0;
}

.parent-node-label {
	font-weight: 700;
	max-width: 300px;
	padding: 3px;
	margin: 0;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.parent-node-type {
	font-weight: 500;
	max-width: 300px;
	padding: 3px;
	opacity: .7;
	margin: 0;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


.parent-node-row:last-child {
	margin-bottom: 0;
}

.node-group {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: break-word;
	box-sizing: border-box;
	padding: 10px;
	background: var(--primary-color-2);
	border-radius: 8px;
	border: 1px solid var(--accent-color-1);
	box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
	z-index: 1000;
	width: 300px;
	height: 100px;
}

.node-group.checks-failed, .parent-node-group.checks-failed {
	border: 6px solid var(--error-color-bold);
	background: var(--error-color-bold);
}

.node-row {
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: 5px;
	color: var(--text-color);
}

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

.node-label {
	font-weight: bold;
	font-size: 16px;
	margin: 0 0 5px;
	color: var(--text-color);
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.node-subtitle {
	display: flex;
	align-items: center;
	font-size: 0.9em;
	color: var(--text-color);
	opacity: 0.7;
	gap: 5px;
}

.node-removed {
	background-color: var(--error-color-bold);
}

.node-changed {
	background-color: var(--highlight-color);
}

.node-added {
	background-color: var(--highlight-color);
}

/* Status row styling */
.node-status {
	display: flex;
	align-items: center;
	gap: 5px; /* Space between icon and details */
	font-size: 0.9em; /* Match subtitle size */
	opacity: 0.8; /* Subtle difference for status */
}

.node-status-icon {
	width: 20px;
	height: 20px;
	background-size: contain;
	background-repeat: no-repeat;
}

.node-status-detail {
	color: var(--text-color);
}


/* Tooltip */
.tooltip-icon {
	position: relative;
	display: inline-block;
	width: 12px; /* Size of the circle */
	height: 12px; /* Size of the circle */
	line-height: 15px; /* Center the "i" vertically */
	border-radius: 50%; /* Make it a circle */
	color: var(--text-color); /* Text color (i) */
	border: 1px solid var(--accent-color-1);
	text-align: center; /* Center the "i" horizontally */
	font-weight: bold; /* Make the "i" bold */
	cursor: pointer;
	margin-left: 4px; /* Space between the title and the icon */
	font-size: 10px; /* Font size of the "i" */
}

.tooltip-text {
	visibility: hidden;
	min-width: 100px;
	max-width: 300px; /* Adjust width as needed */
	background-color: var(--text-color);
	color: var(--primary-color);
	text-align: left;
	border-radius: 5px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 125%; /* Position above the icon */
	left: 50%;
	transform: translateX(-25%);
	opacity: 0;
	transition: opacity 0.3s;
	font-size: 12px;
	font-weight: 300;
}

.tooltip-icon:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.hidden {
	display: none !important;
}

/* Dropdown Container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Button */
.dropdown-button {
	background-color: var(--accent-color-1); /* Dark background color */
	color: var(--text-color); /* Light text color */
	padding: 10px;
	font-size: 12px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-width: 150px;
}

.dropdown-button-red {
	background-color: var(--error-color);
	color: var(--text-color);
}

.dropdown-button-orange {
	background-color: var(--yellow-color);
	color: var(--text-color);
}

.dropdown-button-green {
	background-color: var(--success-color);
	color: var(--text-color);
}

.dropdown-button-blue {
	background-color: var(--highlight-color);
	color: var(--text-color);
}

/* Dropdown Menu */
.dropdown-menu {
	display: none;
	position: absolute;
	background-color: var(--primary-color-2);
	border: 1px solid var(--accent-color-1);
	color: var(--text-color);
	min-width: 160px;
	box-shadow: 0 8px 16px rgb(0 0 0 / 20%);
	z-index: 1;
	padding: 0;
	margin-top: 0;
	right: 0;
}

	.dropdown_label {
		font-size:12px;
		display:block;
	}

	/* Menu links */
	.dropdown-menu-link {
		padding: 12px 16px;
		text-decoration: none;
		display: block;
	}

		/* Hover effect for links */
		.dropdown-menu-link:hover {
			background-color: var(--accent-color-2);
			color: var(--text-color-for-highlight);
		}

/* Dropdown Items */
.dropdown-item {
	padding: 10px 5px;
	text-align: left;
	cursor: pointer;
	font-size: 12px;
	border-bottom: 1px solid var(--accent-color-1);
	list-style-type: none;
}

.dropdown-item img {
	margin-right: 10px;
	width: 20px;
	height: 20px;
}

.dropdown-item:last-child {
    border-bottom: none;
}

/* Hover Effect */
	.dropdown-item:hover {
		background-color: var(--accent-color-2);
		color: var(--primary-color);
	}

/* Show Dropdown Menu */
.dropdown:hover .dropdown-menu {
    display: block;
}

.summary-flyout-section {
	padding: 10px 0;
}

.summary-flyout-title {
	font-weight: 300;
	font-size: 16px;
}

.summary-flyout-content
{
	font-weight: 300;
	font-size: 12px;
}

.summary-flyout-content-row {
	padding: 4px 0;
}

.notify {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* hierarchy */

#content-left {
	height: 100%; /* Full height */
	background-color: var(--background-color); /* Optional for background */
	width: 300px;
}

#content-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100%; /* Full height */
	background-color: var(--background-color); /* Optional for background */
	width: 300px;
	padding: 10px;
}

#hierarchy-pane {
    border-right: 1px solid var(--accent-color-1); /* Optional for a divider */
    height: 100%;
    overflow-y: auto; /* Enable vertical scrolling */
	width: 250px; /* Fixed width */
	padding-top: 20px;
}

#hierarchy-pane.collapsed {
    width: 0; /* Set width to 0 when collapsed */
    overflow: hidden; /* Hide overflow when collapsed */
}

#content-left.collapsed {
    width: 30px; /* Set width to 0 when collapsed */
}

#hierarchy-container {
    display: flex;
    align-items: flex-start;
	flex-direction: row;
	height: calc(100% - 35px);
	position: fixed;
}

.hierarchy {
	width: 500px;
}

#btn-toggle-hierarchy {
    background-color: var(--button-bg-color);
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
}

#btn-hierarchy-toggle-icon {
	transform: rotate(0deg);
	transition: transform 0.3s ease;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

#btn-hierarchy-toggle-icon.flipped {
	transform: rotate(180deg);
	cursor: pointer;
}

.left-flyout-section {
	padding: 5px;
}

.left-flyout-title {
	font-weight: 700;
	font-size: .9em;
	padding: 10px 0 5px 5px;
	margin: 0 0 5px;
	border-bottom: 1px solid var(--accent-color-1);
	display: flex;
	align-items: center;
}

.left-flyout-title-add {
	margin-left: auto;
}

.left-flyout-item {
	padding: 1px 0 1px 5px;
	font-size: .9em;
}

.hierarchy-list {
	list-style-type: none;
	padding-left: 20px;
	font-size: 12px;
	width: 100%;
}

.hierarchy li {
	margin: 5px 0;
	position: relative;
}

.hierarchy .nav-label {
	cursor: pointer;
}

.hierarchy .icon {
	width: 16px;
	height: 16px;
	margin-right: 5px;
	vertical-align: middle;
}

	.hierarchy .toggle, .hierarchy .static{
		cursor: pointer;
		width: 20px;
		display: inline-block;
	}

#hierarchy-root {
	display: block;
}

.nested {
	display: none;
}

.expanded > .nested {
	display: block;
}

.hierarchy .static::before {
	content: "";
	display: inline-block;
}

.hierarchy .toggle::before {
	content: "[+]";
	display: inline-block;
}

.expanded > .toggle::before {
	content: "[-]";
	display: inline-block;
}


/* Profile dropdown container */
.profile-dropdown {
	position: relative;
	display: inline-block;
}

/* Hide the checkbox completely */
.profile-toggle {
	display: none;
}

/* Avatar circle (label is clickable and the avatar will show) */
.profile-avatar {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: var(--accent-color-2);
	font-weight: 500;
	color: #2B2D37;
	font-size: 0.8em;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	text-transform: uppercase;
}

	.profile-avatar:hover {
		cursor: pointer;
	}

/* Show the dropdown menu when profile-dropdown has focus-within (focus within the dropdown or avatar) */
.profile-dropdown:focus-within .dropdown-menu {
	display: block;
}

/* Hide dropdown when focus is lost */
.profile-dropdown:not(:focus-within) .dropdown-menu {
	display: none;
}

/* Show the dropdown menu when the checkbox is checked */
.profile-toggle:checked + .profile-button + .dropdown-menu {
	display: block;
}

/* General Filter */
.filter-group label{
	width: 200px;
	display: inline-block;
	margin-bottom: 5px;
}

.filter-group select{
	width: 200px;
}

/* Asset filter */
.filter-section, .asset-list {
	margin: 20px;
}

	.filter-section select {
		padding: 5px;
		font-size: 1rem;
	}

.centered-wrapper {
	display: flex;
	flex-direction: column;
    justify-content: flex-start;
    align-items: start;
	margin: 30px auto;
	max-width: 500px;
	width: 100%;
}

.centered-wrapper-medium {
	display: flex;
	flex-direction: column;
    justify-content: flex-start;
    align-items: start;
	margin: 30px auto;
	max-width: 900px;
	width: 100%;
}

.full-wrapper {
	display: flex;
	flex-direction: column;
    justify-content: flex-start;
    align-items: start;
	margin: 30px;
	width: 100%;
}

.form-row {
    display: flex;
    flex-direction: row;
    justify-content: left;
	align-items: center;
}

.form-group {
	margin-bottom: 1.2em;
	text-align: left;
}

	.form-group label {
		font-size: 0.9em;
		color: var(--text-color);
		display: inline-block;
		margin: 0.4em 1em;
		width: 180px;
	}

	.form-group input {
		padding: 0.6em;
		font-size: 1em;
		border: 1px solid var(--accent-color-1);
		border-radius: 5px;
		box-sizing: border-box;
		width: 100%;
		color: var(--text-color);
	}

	.form-group input[type="checkbox"] {
		width: auto;
		margin-right: 10px;
	}

.form-actions {
	margin-bottom: 1em;
}

#signin-result, #signup-result {
	margin: 1em;
	color: var(--text-color);
}

#login-link, #signup-link {
	margin-top: 1em;
}

.columns-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	margin: auto;
	max-width: 1000px;
}

.left-column,
.right-column {
	flex: 1;
}

.left-column {
	padding-right: 15px;
}

.right-column {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 15px;
}

/* Search */

#search-form {
    display: flex;
}

#favorites-table {
    display: grid;
    grid-template-columns: 60px 110px 300px 450px 450px; /* Adjust column widths as needed */
    gap: 0;
    margin-bottom: 1rem;
    border: 1px solid var(--accent-color-1); /* Add border to the table */
    border-radius: 4px; /* Optional: Add border radius to the table */
}

#explorer-results-table {
    display: grid;
    grid-template-columns: 60px 120px 140px 300px 450px 450px; /* Increased blast radius column from 80px to 140px */
    gap: 0;
    margin: 1rem 0;
    border: 1px solid var(--accent-color-1); /* Add border to the table */
    border-radius: 4px; /* Optional: Add border radius to the table */
}

#results-table {
    display: grid;
    grid-template-columns: 60px 150px 100px 300px 450px 450px; /* Adjust column widths as needed */
    gap: 0;
    margin-bottom: 1rem;
    border: 1px solid var(--accent-color-1); /* Add border to the table */
    border-radius: 4px; /* Optional: Add border radius to the table */
}

#results-table-recent {
    display: grid;
    grid-template-columns: 60px 250px 250px 300px 450px 150px; /* Adjust column widths as needed */
    gap: 0;
    margin-bottom: 1rem;
    border: 1px solid var(--accent-color-1); /* Add border to the table */
    border-radius: 4px; /* Optional: Add border radius to the table */
}

.results-table-header {
    display: contents;
    grid-template-columns: inherit; /* Inherit the grid structure from the parent */
    font-weight: bold;
    background-color: var(--primary-color-2);
    color: var(--text-color);
}

.results-table-row {
    display: contents;
    grid-template-columns: inherit; /* Inherit the grid structure from the parent */
    transition: background-color 0.3s ease;
}

.results-table-row:hover {
    background-color: var(--accent-color-2);
}

.results-table-header-cell {
    padding: 0.75rem;
    display: flex;
    align-items: flex-start;
    border-right: 1px solid var(--accent-color-1);
	border-bottom: 1px solid var(--accent-color-1);
	overflow: hidden;
	background-color: var(--primary-color-2);
	flex-direction: column;
}

.results-table-cell {
    padding: 0.75rem;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--accent-color-1);
	border-bottom: 1px solid var(--accent-color-1);
	overflow: hidden;
}

.results-table-cell:last-child {
    border-right: none; /* Remove border from the last cell */
}

.results-table-link {
    text-decoration: none;
    color: var(--text-color);
	font-weight: 700;
}

.results-table-link:hover {
    text-decoration: underline;
}

#issues-table {
    display: grid;
    grid-template-columns: 50px 70px 350px 150px 140px 160px 300px 250px; /* Increased blast radius column from 80px to 140px */
    gap: 0;
    margin-bottom: 1rem;
    border: 1px solid var(--accent-color-1); /* Add border to the table */
    border-radius: 4px; /* Optional: Add border radius to the table */
	margin-top: 20px;
}

.issues-table-header {
    display: contents;
    grid-template-columns: inherit; /* Inherit the grid structure from the parent */
    font-weight: bold;
    background-color: var(--primary-color-2);
    color: var(--text-color);
}

.issues-table-row {
    display: contents;
    grid-template-columns: inherit; /* Inherit the grid structure from the parent */
    transition: background-color 0.3s ease;
}

.issues-table-row:hover {
    background-color: var(--accent-color-2);
}

.issues-table-header-cell {
    padding: 0.75rem;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--accent-color-1);
	border-bottom: 1px solid var(--accent-color-1);
	overflow: hidden;
	background-color: var(--primary-color-2);
}

.issues-table-cell {
    padding: 0.75rem;
    border-right: 1px solid var(--accent-color-1);
	border-bottom: 1px solid var(--accent-color-1);
	overflow: hidden;
	text-align: left;
}

.issues-table-cell-center {
	text-align: center;
}

.issues-table-cell:last-child {
    border-right: none; /* Remove border from the last cell */
}

.issues-table-link {
    text-decoration: none;
    color: var(--text-color);
	font-weight: 700;
}

.issues-table-link:hover {
    text-decoration: underline;
}


.pagination {
	text-align: center;
	margin-top: 1rem;
}

	.pagination-link {
		padding: 0.5rem 0.75rem;
		margin: 0 0.25rem;
		color: var(--text-color);
		border-radius: 5px;
	}

		.pagination-link .active, .pagination-link:hover {
			background-color: var(--accent-color-2);
			color: var(--primary-color-2);
		}

.highlight {
	font-weight: bold;
	background-color: var(--tan-color);
}

.readonly {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Activities */
#activity-section {
	margin-top: 20px;
}

#activity-form {
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}

	#activity-form textarea {
		min-height: 60px; /* Sets a minimum height */
		max-width: 98%; /* Ensures it doesn’t exceed the container width */
		resize: vertical; /* Allows vertical resizing only */
		padding: 8px;
		font-size: 1em;
		border-radius: 5px;
		border: 1px solid #ccc;
		background-color: var(--accent-color-1);
	}

/* Settings */

/* Tab Navigation */
.tabs {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--accent-color-1);
	width: 100%;
}

.tab-button {
	padding: 8px 20px;
	cursor: pointer;
	border: none;
	border-bottom: 2px solid transparent;
	background-color: var(--accent-color-1);
	transition: border 0.3s ease;
	transition: background-color 0.3s;
	border-radius: .5em .5em 0 0;
}

	.tab-button.active {
		border-bottom: 3px solid var(--accent-color-2);
	}

/* Tab Content */
.tab-content {
	width: 100%;
	display: none;
}
	.tab-content.active {
		display: block;
	}

/* Tab Description */
.tab-description {
	background: var(--primary-color-2);
	color: var(--text-color);
	padding: 12px 16px;
	margin-bottom: 20px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.4;
	font-style: italic;
}

.tab-section {
	display: none;
	padding-top: 20px;
}

	.tab-section.active {
		display: block;
	}

/* Form and Button Styling */
.settings-section h2, .settings-section h3 {
	margin-top: 20px;
}

/* Tokens */
#token-list {
	list-style: none;
	padding: 0;
	margin: 10px 0;
}

	.token-list-item {
		background-color: var(--primary-color);
		border: 1px solid var(--accent-color-1);
		padding: 10px;
		margin-bottom: 10px;
		border-radius: 5px;
	}

	#token-list li div {
		display: flex;
		flex-direction: row;
	}

	.token-item-title {
		font-weight: bold;
		margin-right: 5px;
	}

/* Channels */
.channel-webhooks, .channel-email, .channel-generic {
	display: none;
}

/* Hide the toggle content by default */
.toggle-content {
	display: none;
	margin-top: 1rem;
}

/* Display the content when the checkbox is checked */
.toggle-input:checked + .toggle-label + .toggle-content {
	display: block;
}

.toggle-input
{
	display:none;
}

/* Style the toggle label (button) */
.toggle-label {
	display: inline-block;
	margin-top: 1rem;
	cursor: pointer;
	color: var(--accent-color-2);
}

/* Style for the code container */
.code-container {
	position: relative;
	background: #1e1e1e;
	border-radius: 5px;
	margin-top: 1rem;
	overflow: hidden;
	padding: 1rem 1rem 0; /* Space for copy button */
	color: var(--accent-color-1);
}

/* Style for the code header (PowerShell label and copy button) */
.code-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--primary-color);
	color: var(--text-color);
	padding: 0.5rem 1rem;
	font-family: Arial, sans-serif;
	font-size: 0.9rem;
	font-weight: bold;
	border-bottom: 1px solid #333;
}

/* Copy button */
.copy-btn {
	background: #0078d7;
	color: var(--text-color);
	border: none;
	padding: 0.4rem 0.8rem;
	border-radius: 3px;
	cursor: pointer;
	font-size: 0.8rem;
}

	.copy-btn:hover {
		background: #005a9e;
	}

/* Prism.js syntax highlighting */
pre[class*="language-"] {
	color: var(--tan-color); /* Light gray text */
	margin: 0;
	padding: 1rem;
	overflow-x: auto;
	border-radius: 0 0 5px 5px;
}

code[class*="language-"] {
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 0.95rem;
	line-height: 1.5;
}

/* Colors for PowerShell (customize Prism.js theme or use a pre-built theme) */
.token.comment {
	color: #6a9955; /* Green for comments */
}

.token.keyword {
	color: #569cd6; /* Blue for keywords */
}

.token.string {
	color: #d69d85; /* Peach for strings */
}

.token.operator {
	color: #dcdcaa; /* Yellow for operators */
}

.highlight-update {
	animation: highlight_update 1s ease-in-out;
}

@keyframes highlight-update {
	from {
		background-color: var(--tan-color); /* Light yellow */
	}

	to {
		background-color: transparent;
	}
}


/* checks */
#data-quality-table {
	width: 100%;

}

#report-kpi-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 20px;
	width: 100%;
}

@media (min-width: 600px) {
    #report-kpi-cards {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for small screens */
    }
}

@media (min-width: 900px) {
    #report-kpi-cards {
        grid-template-columns: repeat(4, 1fr); /* 6 columns for larger screens */
    }
}

.report-kpi-card {
	padding: 5px;
	border: 1px solid var(--accent-color-1);
	border-radius: 8px;
	background-color: var(--primary-color-2);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	min-width: 235px;
}

.report-kpi-card-link {
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
	align-items: center;
}

.report-kpi-card-link h3, .report-kpi-card-link span {
    margin: 5px;
}

.report-kpi-card-link span {
	width: 100px;
	text-align: right;
	margin-left: auto;
}

.report-kpi-card h3{
	padding: 0;
	height: 2em;
	text-align: left;
	font-size: 1em;
}

.report-kpi-card:hover {
	background-color: var(--accent-color-2);
}

.report-kpi-card span {
	font-size: 2em;
	font-weight: 700;
}

/* Alerts */

#banner {
	position: fixed;
	bottom: 20px; /* 20px from the bottom */
	left: 20px; /* 20px from the left */
	width: 300px; /* Adjust width as needed */
	height: 75px; /* Ensures a 4:1 width-to-height ratio */
	align-items: center;
	background-color: var(--highlight-color);
	color: var(--text-color);
	border-radius: 8px;
	box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
	z-index: 1000;
	font-size: 16px;
	display: none;
}

	#banner.show {
		display: flex;
	}

#banner-icon {
	flex: 0 0 auto; /* Prevent the icon from resizing */
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%; /* Circular icon */
}

	#banner-icon img {
		width: 60%;
		height: 60%;
	}

#banner-message {
	flex: 1;
	display: flex;
	padding: 0 10px;
	background-color: var(--primary-color-2);
	justify-content: center;
	align-items: center;
	height: 100%;
}

/* Notifications */

.cards {
	display: grid;
	gap: 20px;
	width: 100%;
}

.cards-narrow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	width: 100%;
}

	.card {
		background-color: var(--primary-color-2);
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
		transition: box-shadow 0.3s ease;
	}

	.card.selected {
		border: 1px solid var(--accent-color-2);
	}

	.card-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.card-title .archive-btn {
		cursor: pointer;
	}

	.card-parameter {
		width: 120px;
		display: inline-block;
	}

	.card:hover {
		box-shadow: 0 6px 12px rgb(0 0 0 / 15%);
	}

	.card h3 {
		margin-top: 0;
		font-size: 1em;
		color: var(--accent-color-2);
	}

	.card-item-title {
		margin-top: 10px;
		font-weight: bold;
	}

	.card-text {
		width: 100%;
	}

	.card-actions {
		margin-top: 15px;
		display: flex;
		flex-direction: row;
	}

	.card-form {
		display: flex;
		flex-direction: column;
		margin-top: 20px;
	}

	.card-form label {
		margin-bottom: 5px;
		font-weight: bold;
	}

	.card-form input, .card-form select {
		padding: 10px;
		margin-bottom: 15px;
		border-radius: 5px;
}

/* select */

.workflow-config-form {
	display: none;
}

.custom-select {
	position: relative;
	width: 100%;
	max-width: 300px; /* Adjust the size as needed */
}

.selected-option {
	display: flex;
	align-items: center;
	padding: 0.7em;
	border-radius: 5px;
	cursor: pointer;
	background-color: var(--accent-color-1);
}

	.selected-option-img {
		margin-right: 10px;
		width: 20px;
		height: 20px;
	}

.custom-select.open .dropdown-content {
	display: block;
}

.avatar-image {
	width: 56px;
	height: 56px;
	border-radius: 50%;
}

.avatar-image-small {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

/* labels */

#label-select {
	width: 150px;
	height: 25px;
}

#label-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
	display: flex;
    flex-wrap: wrap;
}

.label-item {
    display: inline-flex;
	align-items: center;
    margin: 5px;
    padding: 5px 10px;
    border-radius: 12px;
    color: var(--text-color);
    font-size: 14px;
    position: relative;
}

.label-item .icon {
    display: inline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 5px;
    vertical-align: middle;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.label-item:hover .icon {
    display: inline;
	opacity: 1;
}

.label-color-selection {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.label-color-option {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
}

.label-color-option.selected {
    border-color: var(--text-color);
}

#add-label-form {
    display: none;
	align-items: center;
	gap: 10px;
}

/* use cases */

#use-case-select {
	width: 150px;
	height: 25px;
}

#use-case-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
	display: flex;
    flex-wrap: wrap;
}

.use-case-item {
    display: inline-flex;
	align-items: center;
    margin: 0 5px 5px;
    color: var(--text-color);
    font-size: 14px;
    position: relative;
}

.use-case-item:hover {
	text-decoration: underline;
}

.use-case-item .icon {
    display: inline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 5px;
    vertical-align: middle;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.use-case-item:hover .icon {
    display: inline;
	opacity: 1;
}

#add-use-case-form {
    display: none;
	align-items: center;
	gap: 10px;
}

/* workflow */

#workflow-select {
	width: 150px;
	height: 25px;
}

#workflow-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
	display: flex;
    flex-wrap: wrap;
}

.workflow-item {
    display: inline-flex;
	align-items: center;
    margin: 0 5px 5px;
    color: var(--text-color);
    font-size: 14px;
    position: relative;
}

.workflow-item:hover {
	text-decoration: underline;
}

.workflow-item .icon
{
	margin-right: 5px;
}

.workflow-item .icon-archive {
    display: inline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 5px;
    vertical-align: middle;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.workflow-item:hover .icon-archive {
    display: inline;
	opacity: 1;
}

#add-workflow-form {
	align-items: center;
	gap: 10px;
}

/* Owner */

#owner-select-business, #owner-select-technical {
	width: 150px;
	height: 25px;
}

#owner-list-business, #owner-list-technical {
    list-style-type: none;
    padding: 0;
    margin: 0;
	display: flex;
    flex-wrap: wrap;
}

#owner-list-business li, #owner-list-technical li {
	width:100%;
}

.owner-item {
    display: inline-flex;
	align-items: center;
    margin: 0 5px 5px;
    color: var(--text-color);
    font-size: 14px;
    position: relative;
}

.owner-item:hover {
	text-decoration: underline;
}

.owner-item .icon
{
	margin-right: 5px;
}

.owner-item .icon-archive {
    display: inline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 5px;
    vertical-align: middle;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.owner-item:hover .icon-archive {
    display: inline;
	opacity: 1;
}

#add-owner-form-technical, #add-owner-form-business {
    display: none;
	align-items: center;
	gap: 10px;
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--primary-color);
	background-color: rgba(0, 0, 0, .6);
}

.modal-content {
    background-color: var(--primary-color);
    margin: 15% auto;
    padding: 20px;
    border: 1px solid var(--accent-color-1);
    width: 80%;
	border-radius: 5px;
}

.close-modal {
    color: var(--text-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--accent-color-2);
    text-decoration: none;
    cursor: pointer;
}

.revisions-row {
	cursor: pointer;
}

/* Revisions side-by-side layout */
.revisions-layout {
	display: flex;
	gap: 20px;
	height: 600px; /* Fixed height for better layout */
}

.revisions-table-container {
	flex: 0 0 40%; /* Fixed width for table - 40% of container */
	min-width: 300px;
	overflow-y: auto;
	border: 1px solid var(--accent-color-1);
	border-radius: 6px;
	background: var(--primary-color-2);
}

.revisions-table-container .tabular {
	margin: 0;
	border: none;
}

.revisions-diff-container {
	flex: 1; /* Take remaining space */
	overflow-y: auto;
	border: 1px solid var(--accent-color-1);
	border-radius: 6px;
	background: var(--primary-color-2);
	padding: 15px;
}

/* Responsive design for smaller screens */
@media (max-width: 1024px) {
	.revisions-layout {
		flex-direction: column;
		height: auto;
	}
	
	.revisions-table-container {
		flex: none;
		max-height: 300px;
	}
	
	.revisions-diff-container {
		flex: none;
		min-height: 300px;
	}
}

#revisions-diff-container {
	font-size: 0.9em;
}

#jobs-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.jobs-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.job-card {
    background-color: var(--primary-color-2);
    border-radius: 8px;
    padding: 20px;
}

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.job-header h3 {
    margin: 0;
    font-size: 1.2em;
}

.run-job-button {
    background-color: var(--accent-color-1);
    color: var(--text-color);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.run-job-button:hover {
    background-color: var(--accent-color-2);
}

.job-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.job-details div {
    display: flex;
    gap: 5px;
}

.job-details strong {
    font-weight: bold;
}

.job-last-run {
	opacity: 0.7;
	font-size: 0.8em;
}

.deleted-asset {
	background-color: var(--error-color);
}

.deactivated::after {
	content: " (Deactivated)";
	color: gray;
	font-style: italic;
}

.deactivated {
	color: gray;
	font-style: italic;
}

/* Results Summary Section for Explorer and Issues pages */
.results-summary {
	background: var(--primary-color-2);
	border: 1px solid var(--accent-color-1);
	color: var(--text-color);
	width: 100%;
	max-width: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 1rem 0;
	padding: 1rem;
	border-radius: 8px;
	box-sizing: border-box;
}

.results-summary .total-records {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.results-summary .per-page-controls {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.results-summary .total-records strong {
	color: var(--text-color);
}

.results-summary .per-page-controls label {
	color: var(--text-color-secondary);
}

.results-summary select {
	background: var(--primary-color);
	color: var(--text-color);
	border: 1px solid var(--accent-color-1);
}

.results-summary select:focus {
	outline: none;
	border-color: var(--accent-color-2);
}

/* Responsive design for results summary */
@media screen and (max-width: 768px) {
	.results-summary {
		flex-direction: column;
		gap: 1rem;
		text-align: center;
	}
	
	.results-summary .per-page-controls {
		justify-content: center;
	}
}

/* Sort buttons for table headers */
.sort-buttons {
	display: inline-flex;
	flex-direction: row;
	margin-left: 0.5rem;
	vertical-align: middle;
	gap: 2px;
}

.sort-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 0.8rem;
	line-height: 1;
	padding: 2px 4px;
	color: var(--text-color-secondary);
	transition: color 0.2s;
	border-radius: 2px;
}

.sort-btn:hover {
	color: var(--accent-color-1);
}

.sort-btn.active {
	color: var(--accent-color-2);
	font-weight: bold;
}

.sort-btn.desc {
	transform: rotate(180deg);
}

/* ===== LABELS PAGE MODERN STYLES ===== */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--accent-color-1);
}

.page-title-section h1 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
}

.page-icon {
    width: 2rem;
    height: 2rem;
    opacity: 0.8;
}

.page-description {
    margin: 0;
    color: var(--text-color-2);
    font-size: 1rem;
    line-height: 1.5;
    max-width: 800px;
}

.page-actions {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
    align-items: center;
}

.info-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--primary-color-2);
    border: 1px solid var(--accent-color-1);
    border-radius: 8px;
    margin-bottom: 2rem;
    color: var(--text-color-2);
}

.info-icon {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.7;
}

/* Labels Grid */
.labels-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    overflow: visible;
}

.label-card {
    background: var(--primary-color-2);
    border: 1px solid var(--accent-color-1);
    border-radius: 12px;
    overflow: visible;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 10%);
    position: relative;
    z-index: 1;
}

.label-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-color-2);
}

.label-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--surface-color);
    border-bottom: 1px solid var(--accent-color-1);
}

.label-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.label-icon {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.8;
}

.label-badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 16px;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.label-card-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-save, .btn-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
}

.btn-save {
    color: var(--success-color);
}

.btn-save:hover {
    background: var(--success-color);
    color: white;
}

.btn-delete {
    color: var(--error-color);
}

.btn-delete:hover {
    background: var(--error-color);
    color: white;
}

.btn-save .icon, .btn-delete .icon {
    width: 1rem;
    height: 1rem;
}

/* Label Form */
.label-form {
    padding: 1.25rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.875rem;
}

.form-input, .form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--accent-color-1);
    border-radius: 6px;
    background: var(--accent-color-1);
    color: var(--text-color);
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--accent-color-2);
    box-shadow: 0 0 0 3px var(--accent-color-1);
}

.form-textarea {
    resize: vertical;
    min-height: 4rem;
}

.form-value {
    padding: 0.75rem;
    background: var(--primary-color);
    border: 1px solid var(--accent-color-1);
    border-radius: 6px;
    color: var(--text-color-2);
    font-size: 0.875rem;
    font-style: italic;
}

/* Form Enhancements */
.form-help {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-color-2);
}

.char-counter {
    font-weight: 500;
    transition: color 0.2s;
}

.form-tip {
    font-style: italic;
    opacity: 0.8;
}

/* Color Picker */
.color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.color-option {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.color-option:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 20%);
}

.color-option.selected {
    border-color: var(--text-color);
    transform: scale(1.1);
    box-shadow: 0 0 0 2px var(--primary-color), 0 0 0 4px var(--accent-color-2);
}

/* Color Expandable Selector Styles */
.color-selector {
    position: relative;
    width: 100%;
}

.color-current {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: var(--primary-color-2);
    border: 1px solid var(--accent-color-1);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 3rem;
}

.color-current:hover {
    border-color: var(--accent-color-2);
    background-color: var(--accent-color-1);
}

.selected-color {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    border: 1px solid var(--accent-color-1);
    flex-shrink: 0;
}

.selected-color-name {
    flex-grow: 1;
    font-weight: 500;
    color: var(--text-color);
}

.expand-arrow {
    color: var(--text-color-muted);
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.color-palette-expandable {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    background-color: var(--primary-color-2);
    border: 1px solid var(--accent-color-1);
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    margin-top: -1px;
}

.color-category {
    padding: 1rem;
    border-bottom: 1px solid var(--accent-color-1);
}

.color-category:last-child {
    border-bottom: none;
}

.color-category h5 {
    margin: 0 0 0.75rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.color-options-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.color-option {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.color-option:hover {
    transform: scale(1.1);
    border-color: var(--text-color);
}

.color-option:active {
    transform: scale(0.95);
}

/* Tooltip for color options */
.color-option::after {
    content: attr(title);
    position: absolute;
    bottom: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: var(--text-color);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 100;
    border: 1px solid var(--accent-color-1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 10%);
}

.color-option:hover::after {
    opacity: 1;
}

/* Legacy Color Dropdown Styles (kept for backward compatibility) */
.color-dropdown {
    position: relative;
    width: 100%;
}

.color-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: var(--primary-color-2);
    border: 1px solid var(--accent-color-1);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 3rem;
}

.color-dropdown-trigger:hover {
    border-color: var(--accent-color-2);
    background-color: var(--accent-color-1);
}

.selected-color {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    border: 1px solid var(--accent-color-1);
    flex-shrink: 0;
}

.selected-color-name {
    flex-grow: 1;
    font-weight: 500;
    color: var(--text-color);
}

.dropdown-arrow {
    color: var(--text-color-muted);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.color-dropdown-menu {
    position: fixed;
    background-color: var(--primary-color);
    border: 1px solid var(--accent-color-1);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 20%);
    z-index: 10000;
    display: none;
    max-height: 20rem;
    overflow-y: auto;
    margin-top: 0.25rem;
    min-width: 16rem;
    /* Ensure smooth positioning */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.color-category {
    padding: 1rem;
    border-bottom: 1px solid var(--accent-color-1);
}

.color-category:last-child {
    border-bottom: none;
}

.color-category h5 {
    margin: 0 0 0.75rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.color-swatch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-bottom: 0.25rem;
}

.color-swatch:hover {
    background-color: var(--primary-color-2);
}

.color-swatch:last-child {
    margin-bottom: 0;
}

.color-preview {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border: 1px solid var(--accent-color-1);
    flex-shrink: 0;
}

.color-name {
    font-size: 0.875rem;
    color: var(--text-color);
    font-weight: 500;
}

.color-help {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-color-muted);
    margin-top: 0.5rem;
}

.color-text {
    color: var(--text-color-muted);
}

.color-preview {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid var(--accent-color-1);
    display: none;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-color-2);
}

.empty-icon {
    width: 4rem;
    height: 4rem;
    opacity: 0.5;
    margin-bottom: 1.5rem;
}

.empty-state h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: var(--text-color);
}

.empty-state p {
    margin: 0 0 2rem 0;
    font-size: 1rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Modern Modal */
.modern-modal {
    max-width: 500px;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--accent-color-1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid var(--accent-color-1);
}

.modal-header h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
}

.modal-icon {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.8;
}

.close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color-2);
    min-width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-modal:hover {
    background: var(--accent-color-1);
    color: var(--text-color);
}

.modal-form {
    padding: 1.5rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--accent-color-1);
}

.btn-secondary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: transparent;
    color: var(--text-color);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: var(--accent-color-1);
    color: var(--text-color);
}

.btn-primary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--accent-color-2);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: var(--accent-color-3);
    transform: translateY(-1px);
}

.btn-primary .icon {
    width: 1rem;
    height: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {    .page-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .page-actions {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }
    
    .labels-grid {
        grid-template-columns: 1fr;
    }
    
    .label-card-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .label-card-actions {
        align-self: flex-end;
    }
    
    .modern-modal {
        margin: 5% auto;
        width: 95%;
        max-width: none;
    }
    
    .modal-actions {
        flex-direction: column;
    }
    
    .color-picker {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-title-section h1 {
        font-size: 1.5rem;
    }
    
    .label-card-header {
        padding: 0.75rem 1rem;
    }
    
    .label-form {
        padding: 1rem;
    }
    
    .modal-form {
        padding: 1rem;
    }
    
    .modal-header {
        padding: 1rem;
    }
}

/* ===== END LABELS PAGE STYLES ===== */

/* ===== USE CASES PAGE MODERN STYLES ===== */

/* Use Cases Grid */
.use-cases-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
}

.use-case-card {
    background: var(--primary-color-2);
    border: 1px solid var(--accent-color-1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.use-case-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-color-2);
}

.use-case-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: var(--surface-color);
    border-bottom: 1px solid var(--accent-color-1);
}

.use-case-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.use-case-icon {
    width: 1.5rem;
    height: 1.5rem;
    opacity: 0.8;
    flex-shrink: 0;
}

.use-case-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.use-case-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Use Case Form */
.use-case-form {
    padding: 1.5rem;
}

/* Status and Priority Indicators */
.use-case-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
             font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.use-case-status.active {
    background: rgba(50, 205, 50, 0.1);
    color: var(--success-color);
    border: 1px solid rgba(50, 205, 50, 0.2);
}

.use-case-status.draft {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.use-case-status.archived {
}

/* Use Case Meta Information */
.use-case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--accent-color-1);
    font-size: 0.8rem;
    color: var(--text-color-2);
}

.use-case-meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.use-case-meta-icon {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.6;
}

/* Form Enhancements for Use Cases */
.use-case-form .form-textarea {
    min-height: 6rem;
}

/* Action Buttons Enhancement */
.use-case-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--accent-color-1);
}

.btn-view-details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--accent-color-2);
    border: 1px solid var(--accent-color-2);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-view-details:hover {
    background: var(--accent-color-2);
    color: white;
}

.btn-view-details .icon {
    width: 0.875rem;
    height: 0.875rem;
}

/* Enhanced Empty State for Use Cases */
.use-cases-grid + .empty-state {
    margin-top: 2rem;
}

/* Responsive Design for Use Cases */
@media (max-width: 768px) {
    .use-cases-grid {
        grid-template-columns: 1fr;
    }
    
    .use-case-card-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .use-case-card-actions {
        align-self: flex-end;
    }
    
    .use-case-preview {
        min-width: 0;
        flex: 1;
    }
    
    .use-case-title {
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
    }
}

@media (max-width: 480px) {
    .use-case-card-header {
        padding: 1rem;
    }
    
    .use-case-form {
        padding: 1rem;
    }
    
    .use-case-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ===== END USE CASES PAGE STYLES ===== */

/* Workflow Cards - Similar to Label Cards */
.workflow-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.workflow-card {
    background: var(--primary-color-2);
    border: 1px solid var(--accent-color-1);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.workflow-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    border-color: var(--accent-color-2);
}

.workflow-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--surface-color);
    border-bottom: 1px solid var(--accent-color-1);
}

.workflow-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.workflow-icon {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.8;
}

.workflow-title {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1rem;
}

.workflow-card-actions {
    display: flex;
    gap: 0.5rem;
}

.workflow-card-actions .btn-save,
.workflow-card-actions .btn-test,
.workflow-card-actions .btn-delete {
    padding: 0.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workflow-card-actions .btn-save {
    background: var(--success-color);
    color: white;
}

.workflow-card-actions .btn-save:hover {
    background: var(--success-color-hover);
}

.workflow-card-actions .btn-test {
    background: var(--info-color);
    color: white;
}

.workflow-card-actions .btn-test:hover {
    background: var(--info-color-hover);
}

.workflow-card-actions .btn-delete {
    background: var(--danger-color);
    color: white;
}

.workflow-card-actions .btn-delete:hover {
    background: var(--danger-color-hover);
}

.workflow-form {
    padding: 1.5rem;
}

.workflow-form .form-group {
    margin-bottom: 1.25rem;
}

.workflow-form .form-group:last-child {
    margin-bottom: 0;
}

/* Section Headers */
.section-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--accent-color-1);
}

.section-header h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
}

.section-icon {
    width: 1.5rem;
    height: 1.5rem;
    opacity: 0.8;
}

.section-description {
    margin: 0;
    color: var(--text-color-muted);
    font-size: 1rem;
    line-height: 1.5;
}

/* Warning Banner */
.warning-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    color: #856404;
}

.warning-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Custom Select Improvements */
.custom-select {
    position: relative;
    margin-bottom: 1rem;
}

.selected-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 48px;
}

.selected-option:hover {
    border-color: var(--primary-color);
}

.custom-select.open .selected-option {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--primary-color-2);
    border: 1px solid var(--accent-color-1);
    border-radius: 8px;
    box-shadow: var(--dropdown-shadow);
    z-index: 1000;
    max-height: 250px;
    width: 200px;
    display: none;
}

.custom-select.open .dropdown-content {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dropdown-item:hover {
    background: var(--hover-color);
}

.selected-option-img {
    width: 1.25rem;
    height: 1.25rem;
}

/* Form Help */
.form-help {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-color-muted);
}

.form-help.warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #856404;
    background: rgba(255, 193, 7, 0.1);
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.help-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Settings Cards */
.settings-card {
    background: var(--primary-color-2);
    border: 1px solid var(--accent-color-1);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.settings-card-header {
    padding: 1.5rem;
    background: var(--surface-color);
    border-bottom: 1px solid var(--accent-color-1);
}

.settings-card-header h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
}

.card-header-icon {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.8;
}

.card-description {
    margin: 0;
    color: var(--text-color-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.settings-card-body {
    padding: 1.5rem;
}

.settings-form .form-group {
    margin-bottom: 1.5rem;
}

.settings-form .form-group:last-child {
    margin-bottom: 0;
}

.form-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--accent-color-1);
}

/* Toggle Settings */
.toggle-setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.setting-info {
    flex: 1;
}

.setting-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.setting-icon {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.8;
}

.setting-description {
    margin: 0;
    color: var(--text-color-muted);
    font-size: 0.875rem;
    line-height: 1.4;
}

.toggle-wrapper {
    position: relative;
    flex-shrink: 0;
}

.toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-label {
    display: block;
    width: 48px;
    height: 24px;
    background: var(--accent-color-1);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
}

.toggle-label::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.toggle-input:checked + .toggle-label {
    background: var(--accent-color-2);
}

.toggle-input:checked + .toggle-label::after {
    transform: translateX(24px);
}

/* Override 180px width for dark mode toggle label */
.form-group label[for="dark_mode"] {
    width: auto;
}

/* Token Cards */
.token-cards-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

.token-card {
    background: var(--surface-color);
    border: 1px solid var(--accent-color-1);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.token-card:hover {
    border-color: var(--accent-color-2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.token-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.token-info {
    flex: 1;
    min-width: 0;
}

.token-info h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.token-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.token-value {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    color: var(--text-color-muted);
    background: var(--primary-color-2);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

.token-expiration {
    font-size: 0.8rem;
    color: var(--text-color-muted);
}

.token-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.token-actions .btn-info,
.token-actions .btn-delete {
    padding: 0.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.token-actions .btn-info {
    background: var(--info-color);
    color: white;
}

.token-actions .btn-info:hover {
    background: var(--info-color-hover);
}

.token-actions .btn-delete {
    background: var(--danger-color);
    color: white;
}

.token-actions .btn-delete:hover {
    background: var(--danger-color-hover);
}

.token-actions .icon {
    width: 1rem;
    height: 1rem;
}

/* Empty State Small */
.empty-state-small {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-color-muted);
}

.empty-icon-small {
    width: 3rem;
    height: 3rem;
    opacity: 0.5;
    margin-bottom: 1rem;
}

.empty-state-small h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: var(--text-color);
}

.empty-state-small p {
    margin: 0;
    font-size: 0.9rem;
}

/* Generate Token Section */
.generate-token-section {
    padding-top: 2rem;
    border-top: 1px solid var(--accent-color-1);
}

.generate-token-section h4 {
    margin: 0 0 1.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}

.token-form .form-group {
    margin-bottom: 1.25rem;
}

/* Token Display */
.token-display-section {
    margin-bottom: 2rem;
}

.modal-description.warning {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 6px;
    margin-bottom: 1.5rem;
    color: #856404;
    font-size: 0.9rem;
}

.inline-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.token-display {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.token-input {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    padding: 0.75rem;
    border: 1px solid var(--accent-color-1);
    border-radius: 6px;
    background: var(--surface-color);
    color: var(--text-color);
}

.copy-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

/* Export Sections */
.export-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--accent-color-1);
}

.export-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.export-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}

.export-form .form-group {
    margin-bottom: 1.25rem;
}

.download-link-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--accent-color-1);
}

.download-link-section .info-banner {
    margin-bottom: 1rem;
}

/* Profile Cards */
.profile-card {
    background: var(--surface-color);
    border: 1px solid var(--accent-color-1);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.profile-card-header {
    padding: 1.5rem;
    background: var(--primary-color-2);
    border-bottom: 1px solid var(--accent-color-1);
}

.profile-card-header h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
}

.profile-card-body {
    padding: 1.5rem;
}

.avatar-section {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.profile-card .profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent-color-1);
    flex-shrink: 0;
}

.avatar-upload {
    flex: 1;
}

.upload-form .form-group {
    margin-bottom: 1.25rem;
}

.profile-form .form-group,
.security-form .form-group {
    margin-bottom: 1.5rem;
}

.profile-form .form-group:last-child,
.security-form .form-group:last-child {
    margin-bottom: 0;
}

/* Public Profile Cards */
.public-profile-card {
    background: var(--surface-color);
    border: 1px solid var(--accent-color-1);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.public-profile-card-header {
    padding: 2rem;
    background: var(--primary-color-2);
    border-bottom: 1px solid var(--accent-color-1);
}

.profile-avatar-section {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.public-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent-color-1);
    flex-shrink: 0;
}

.profile-info {
    flex: 1;
    min-width: 0;
}

.profile-name {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
}

.profile-name.deactivated {
    color: var(--text-color-muted);
    text-decoration: line-through;
}

.profile-email {
    margin: 0;
    font-size: 1rem;
    color: var(--text-color-muted);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 1rem;
}

.status-badge.deactivated {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.public-profile-card-body {
    padding: 2rem;
}

.profile-details-grid {
    display: grid;
    gap: 2rem;
}

.profile-detail {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9rem;
}

.detail-icon {
    width: 1rem;
    height: 1rem;
    opacity: 0.8;
}

.detail-value {
    color: var(--text-color-muted);
}

.domain-roles-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.domain-role-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--primary-color-2);
    border-radius: 6px;
    border: 1px solid var(--accent-color-1);
}

.domain-name {
    font-weight: 500;
    color: var(--text-color);
}

.no-domains {
    font-style: italic;
    color: var(--text-color-muted);
}

/* Domain Cards */
.domain-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.domain-card {
    background: var(--surface-color);
    border: 1px solid var(--accent-color-1);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.2s ease;
}

.domain-card:hover {
    border-color: var(--accent-color-2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.domain-card.selected {
    border-color: var(--accent-color-2);
    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.15);
}

.domain-card-header {
    padding: 1.5rem;
    background: var(--primary-color-2);
    border-bottom: 1px solid var(--accent-color-1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.domain-info {
    flex: 1;
    min-width: 0;
}

.domain-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
}

.domain-icon {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.8;
}

.status-icon {
    width: 1rem;
    height: 1rem;
    color: var(--warning-color);
}

.scanner-icon {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.8;
}

.banner-icon {
    width: 1rem;
    height: 1rem;
    opacity: 0.7;
}

.current-domain-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-icon {
    width: 0.75rem;
    height: 0.75rem;
}

.domain-actions {
    flex-shrink: 0;
}

.domain-card-body {
    padding: 1.5rem;
}

.domain-details {
    display: grid;
    gap: 1rem;
}

.domain-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--accent-color-1);
}

.domain-detail:last-child {
    border-bottom: none;
}

.domain-detail .detail-label {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9rem;
}

.domain-detail .detail-value {
    color: var(--text-color-muted);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

/* Scanner Cards */
.scanner-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.scanner-card {
    background: var(--primary-color-1);
    border: 1px solid var(--accent-color-1);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.scanner-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.scanner-card-header {
    padding: 1.5rem;
    background: var(--primary-color-2);
    border-bottom: 1px solid var(--accent-color-1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.scanner-info {
    flex: 1;
    min-width: 0;
}

.scanner-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
}

.scanner-id {
    font-size: 0.8rem;
    color: var(--text-color-muted);
    font-family: 'Courier New', monospace;
    word-break: break-all;
}

.scanner-actions {
    flex-shrink: 0;
}

.scanner-card-body {
    padding: 1.5rem;
}

.scanner-status {
    display: grid;
    gap: 1rem;
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--accent-color-1);
    gap: 1rem;
}

.status-item:last-child {
    border-bottom: none;
}

.status-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.status-value {
    color: var(--text-color-muted);
    font-size: 0.9rem;
    text-align: right;
    word-break: break-word;
}

.status-detail {
    max-width: 250px;
}

/* User Management Cards */
.user-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.user-card {
    background: var(--primary-color-1);
    border: 1px solid var(--accent-color-1);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.user-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.user-card.user-deactivated {
    opacity: 0.7;
    border-color: var(--warning-color);
}

.user-card-header {
    padding: 1.5rem;
    background: var(--primary-color-2);
    border-bottom: 1px solid var(--accent-color-1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.user-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.user-avatar-link {
    flex-shrink: 0;
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-color-1);
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.user-name-link {
    color: var(--text-color);
    text-decoration: none;
}

.user-name-link:hover {
    color: var(--accent-color-2);
}

.user-email {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-color-muted);
    word-break: break-word;
}

.user-last-login {
    font-size: 0.8rem;
    color: var(--text-color-muted);
}

.never-logged-in {
    color: var(--warning-color);
    font-style: italic;
}

.user-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.user-card-body {
    padding: 1.5rem;
}

.role-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-badge.role-reader {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

.role-badge.role-contributor {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.role-badge.role-domain-admin {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.form-help {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 6px;
    font-size: 0.9rem;
}

.help-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .avatar-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
    }
    
    .profile-avatar-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
    
    .domain-cards-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .domain-card-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .domain-actions {
        align-self: stretch;
    }
      .domain-detail {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .scanner-cards-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .scanner-card-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .scanner-actions {
        align-self: stretch;
    }
    
    .status-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
      .status-value {
        text-align: left;
    }
    
    .user-cards-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .user-card-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .user-preview {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .user-card-actions {
        align-self: stretch;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .profile-card-header,
    .profile-card-body,
    .public-profile-card-header,
    .public-profile-card-body,
    .domain-card-header,
    .domain-card-body {
        padding: 1rem;
    }
      .profile-card .profile-avatar,
    .public-profile-avatar {
        width: 60px;
        height: 60px;
    }
    
    .profile-name {
        font-size: 1.25rem;
    }
    
    .domain-name {
        font-size: 1.1rem;
    }
}

/* Lineage Management Styles */
.lineage-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--accent-color-1);
}

.lineage-tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-color-muted);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px 8px 0 0;
}

.lineage-tab-btn:hover {
    background: var(--primary-color-2);
    color: var(--text-color);
}

.lineage-tab-btn.active {
    background: var(--surface-color);
    color: var(--text-color);
    border-bottom-color: var(--accent-color-2);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.tab-icon {
    width: 1rem;
    height: 1rem;
    opacity: 0.8;
}

.lineage-tab-content {
    display: none;
}

.lineage-section {
    background: var(--surface-color);
    border-radius: 12px;
    border: 1px solid var(--accent-color-1);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
    padding: 2rem;
    background: var(--primary-color-2);
    border-bottom: 1px solid var(--accent-color-1);
}

.section-header h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
}

.section-icon {
    width: 1.5rem;
    height: 1.5rem;
    opacity: 0.8;
}

.section-description {
    margin: 0;
    color: var(--text-color-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.lineage-form-container {
    padding: 2rem;
    border-bottom: 1px solid var(--accent-color-1);
}

.lineage-form {
    max-width: none;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.lineage-form .form-group {
    margin-bottom: 0;
}

.lineage-form .form-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--accent-color-1);
}

.lineage-table-container {
    padding: 2rem;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--accent-color-1);
}

.table-header h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
}

.table-count {
    font-size: 0.9rem;
    color: var(--text-color-muted);
    font-weight: 500;
}

.lineage-table-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--accent-color-1);
}

.lineage-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-color);
}

.lineage-table thead {
    background: var(--primary-color-2);
}

.lineage-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 1px solid var(--accent-color-1);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lineage-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--accent-color-1);
    color: var(--text-color-muted);
    vertical-align: middle;
}

.lineage-table tbody tr:hover {
    background: var(--primary-color-2);
}

.lineage-table tbody tr:last-child td {
    border-bottom: none;
}

.asset-id,
.server-name,
.archive-id {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    word-break: break-all;
}

.point-source,
.location {
    font-weight: 500;
    color: var(--text-color);
}

.actions-column {
    width: 80px;
    text-align: center;
}

.actions-cell {
    text-align: center;
}

.inline-form {
    display: inline;
}

.btn-delete {
    padding: 0.5rem;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-delete:hover {
    background: var(--danger-color-hover);
    transform: translateY(-1px);
}

.btn-delete .icon {
    width: 1rem;
    height: 1rem;
}

/* PI Table specific styles */
.pi-table th:nth-child(1),
.pi-table th:nth-child(2) {
    min-width: 200px;
}

.pi-table th:nth-child(3),
.pi-table th:nth-child(4) {
    min-width: 150px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .lineage-tabs {
        flex-direction: column;
    }
    
    .lineage-tab-btn {
        padding: 0.75rem 1rem;
        border-radius: 8px;
        border-bottom: none;
        border-left: 3px solid transparent;
    }
    
    .lineage-tab-btn.active {
        border-left-color: var(--accent-color-2);
        border-bottom-color: transparent;
    }
    
    .section-header,
    .lineage-form-container,
    .lineage-table-container {
        padding: 1.5rem;
    }
    
    .table-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .lineage-table th,
    .lineage-table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .section-header,
    .lineage-form-container,
    .lineage-table-container {
        padding: 1rem;
    }
    
    .section-header h3 {
        font-size: 1.25rem;
    }
    
    .form-row {
        gap: 0.75rem;
    }
    
    .lineage-table th,
    .lineage-table td {
        padding: 0.5rem 0.25rem;
        font-size: 0.8rem;
    }
    
    .asset-id,
    .server-name,
    .archive-id {
        font-size: 0.75rem;
    }
}