/**
 * SecuBox Cascade Layout System
 * Provides cascading layers for menus, tabs, categories and contextual views.
 * SPDX-License-Identifier: Apache-2.0
 */

[data-cascade-root],
.sb-cascade-root {
	display: flex;
	flex-direction: column;
	gap: var(--cyber-space-md, 1rem);
}

.sb-cascade-layer {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--cyber-space-sm, 0.5rem);
	position: relative;
}

.sb-cascade-layer[data-cascade-layer="menu"],
.sb-cascade-layer[data-cascade-layer="tabs"],
.sb-cascade-layer[data-cascade-layer="categories"] {
	padding: calc(var(--cyber-space-sm, 0.5rem) + 2px);
	background: rgba(15, 23, 42, 0.85);
	border-radius: var(--cyber-radius-lg, 20px);
	border: 1px solid rgba(148, 163, 184, 0.15);
	backdrop-filter: blur(14px);
	box-shadow: 0 18px 36px rgba(2, 6, 23, 0.45);
}

.sb-cascade-layer[data-cascade-layer="menu"]::after,
.sb-cascade-layer[data-cascade-layer="tabs"]::after {
	content: '';
	position: absolute;
	inset: 6px;
	border-radius: inherit;
	border: 1px solid rgba(255, 255, 255, 0.05);
	pointer-events: none;
}

.sb-cascade-layer[data-cascade-layer="view"] {
	display: grid;
	gap: var(--cyber-space-md, 1rem);
}

.sb-cascade-layer[data-cascade-layer="actions"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cyber-space-sm, 0.5rem);
	justify-content: flex-end;
}

.sb-cascade-layer[data-cascade-depth="1"] {
	gap: var(--cyber-space-md, 1rem);
}

.sb-cascade-layer[data-cascade-depth="2"] {
	gap: var(--cyber-space-sm, 0.5rem);
}

.sb-cascade-layer[data-cascade-depth="3"] {
	gap: var(--cyber-space-xs, 0.25rem);
}

.sb-cascade-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cyber-space-xs, 0.25rem);
	padding: 0.55rem 1.1rem;
	border-radius: var(--cyber-radius-sm, 10px);
	border: 1px solid rgba(148, 163, 184, 0.35);
	background: transparent;
	color: var(--cyber-text-secondary, #94a3b8);
	font-family: var(--cyber-font-body, 'Inter', sans-serif);
	font-size: var(--cyber-text-sm, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition:
		color var(--cyber-transition, 0.22s ease),
		background var(--cyber-transition, 0.22s ease),
		border-color var(--cyber-transition, 0.22s ease),
		box-shadow var(--cyber-transition-fast, 0.12s ease),
		transform var(--cyber-transition-fast, 0.12s ease);
	cursor: pointer;
	text-decoration: none;
}

.sb-cascade-layer[data-cascade-layer="categories"] .sb-cascade-item {
	text-transform: none;
	letter-spacing: 0.02em;
}

.sb-cascade-item:hover {
	border-color: rgba(99, 102, 241, 0.6);
	color: var(--cyber-text-primary, #e2e8f0);
	box-shadow: 0 10px 24px rgba(11, 22, 63, 0.45);
	transform: translateY(-1px);
}

.sb-cascade-item[data-state="active"] {
	color: var(--cyber-text-inverse, #0a0e27);
	background: var(--cyber-gradient-primary, linear-gradient(135deg, #667eea, #764ba2));
	border-color: transparent;
	box-shadow: 0 18px 36px rgba(102, 126, 234, 0.45);
}

.sb-cascade-item[data-state="disabled"],
.sb-cascade-item[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.sb-cascade-item[data-state="pending"] {
	border-color: rgba(6, 182, 212, 0.5);
	color: var(--cyber-accent-secondary, #06b6d4);
}

.sb-cascade-icon {
	font-size: 1.1rem;
	line-height: 1;
}

.sb-cascade-badge {
	min-width: 1.5rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	font-size: 0.7rem;
	line-height: 1.2;
	background: rgba(15, 118, 110, 0.18);
	color: #5eead4;
	border: 1px solid rgba(94, 234, 212, 0.35);
}

.sb-cascade-layer[data-cascade-layer="view"][data-cascade-role="modules"] {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.sb-cascade-layer[data-cascade-layer="view"][data-cascade-role="modules"][data-cascade-filter="list"] {
	grid-template-columns: 1fr;
}

.sb-cascade-layer[data-cascade-layer="view"][data-cascade-role="modules"]::before {
	content: attr(data-cascade-context);
	display: none;
}

.sb-cascade-layer[data-cascade-layer="view"] [data-cascade-item] {
	position: relative;
}

.sb-cascade-layer[data-cascade-layer="view"] [data-module-enabled="0"] {
	opacity: 0.85;
}

.sb-cascade-layer[data-cascade-layer="view"] [data-module-installed="0"] {
	opacity: 0.6;
}

.sb-cascade-layer[data-cascade-layer="actions"] .sb-cascade-item {
	text-transform: none;
}

.sb-cascade-layer[data-cascade-layer="actions"] .sb-cascade-item[data-cascade-action="enable"] {
	background: rgba(34, 197, 94, 0.12);
	border-color: rgba(34, 197, 94, 0.6);
	color: #4ade80;
}

.sb-cascade-layer[data-cascade-layer="actions"] .sb-cascade-item[data-cascade-action="disable"] {
	background: rgba(239, 68, 68, 0.12);
	border-color: rgba(239, 68, 68, 0.5);
	color: #f87171;
}

.sb-cascade-layer[data-cascade-layer="actions"] .sb-cascade-item[data-cascade-action="navigate"] {
	background: rgba(99, 102, 241, 0.15);
	border-color: rgba(99, 102, 241, 0.4);
	color: #c7d2fe;
}

@media (max-width: 768px) {
	.sb-cascade-layer[data-cascade-layer="menu"],
	.sb-cascade-layer[data-cascade-layer="tabs"],
	.sb-cascade-layer[data-cascade-layer="categories"] {
		overflow-x: auto;
		flex-wrap: nowrap;
		scroll-snap-type: x mandatory;
	}

	.sb-cascade-item {
		scroll-snap-align: start;
	}
}