/**
 * mesh.mutual Application Styles Bundle
 *
 * This bundle includes all application styles WITHOUT Tailwind.
 * Uses design tokens for theming.
 */

/* Import application styles */

/* Migrated to semantic design tokens */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	/* Typography */
	font-family: var(--typography-text-font-family);
	font-size: var(--typography-text-font-size);
	font-weight: var(--typography-text-font-weight);
	line-height: var(--typography-text-line-height);
	letter-spacing: var(--typography-text-letter-spacing);

	/* Colors */
	background: var(--color-app-fill-loud);
	color: var(--color-app-on-normal);

	/* Spacing */
	padding: var(--spacing-container-spacious);
	max-width: 100%;
	margin: var(--spacing-app-default);
}

/* Headings use heading font */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--typography-heading-font-family);
	font-weight: var(--typography-heading-font-weight);
}

/* Code uses mono font */

code,
pre {
	font-family: var(--typography-code-font-family);
}

/* Muted text */

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

/* Selection styling */

::selection {
	background: var(--color-brand-fill-loud);
	color: var(--color-brand-on-loud);
}

/* Focus outline for accessibility */

*:focus-visible {
	outline-width: var(--border-focus-width);
	outline-style: var(--border-focus-style);
	outline-color: var(--border-focus-color);
	outline-offset: var(--border-focus-offset);
}

/* Scrollbar styling */

::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	background: var(--color-surface-fill-quiet);
}

::-webkit-scrollbar-thumb {
	background: var(--color-neutral-fill-normal);
	border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-neutral-fill-loud);
}

/* Alpine x-cloak */

[x-cloak] {
	display: none !important;
}

/* App Container */

#app {
	display: none;
}

#app.ready {
	display: block;
}

/* Header */

.app-header {
	/* Colors */
	background: var(--color-domain-fill-normal);
	border-bottom-width: var(--border-default-width);
	border-bottom-style: var(--border-default-style);
	border-bottom-color: var(--color-domain-border-normal);

	/* Spacing */
	padding: var(--spacing-component-padding-default) var(--spacing-container-default);

	/* Elevation */
	box-shadow: var(--shadow-surface-raised);
}

.header-content {
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.app-title {
	/* Typography - Using critical hierarchy for app title */
	font-size: var(--typography-hierarchy-critical-font-size);
	font-weight: var(--typography-hierarchy-critical-font-weight);
	line-height: var(--typography-hierarchy-critical-line-height);
	letter-spacing: var(--typography-hierarchy-critical-letter-spacing);
	font-family: var(--typography-hierarchy-critical-font-family);

	/* Color */
	color: var(--color-domain-on-loud);

	/* Layout */
	display: flex;
	align-items: center;
	gap: var(--spacing-gap-tight);
}

.app-logo {
	font-size: 2rem; /* Icon size */
}

.header-actions {
	display: flex;
	gap: var(--spacing-gap-default);
	align-items: center;
}

/* Main Layout */

.app-main {
	max-width: 100%;
	margin: 0 auto;
	padding: var(--spacing-component-padding-lg);
	position: relative;
	transition: var(--transition-hover-duration) var(--transition-hover-easing);
}

.app-main.app-drag-over::before {
	content: "";
	position: fixed;
	inset: 0;
	background: var(--color-success-fill-quieter);
	backdrop-filter: blur(var(--blur-light));
	z-index: var(--layer-overlay);
	pointer-events: none;
	animation: pulse 2s ease-in-out infinite;
}

.app-main.app-drag-over::after {
	content: "📋 Drop app.json to update configuration";
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: var(--typography-hierarchy-critical-font-size);
	font-weight: var(--typography-hierarchy-critical-font-weight);
	color: var(--color-success-fill-loud);
	pointer-events: none;
	z-index: var(--layer-modal);
	text-shadow: var(--shadow-text-strong);
	background: var(--color-surface-fill-loud);
	padding: var(--spacing-section-md) var(--spacing-section-lg);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-overlay);
	border-width: var(--borders-emphasis-width);
	border-style: dashed;
	border-color: var(--color-success-border-loud);
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.7;
	}
}

/* Buttons
.btn {
	padding: var(--spacing-component-padding-sm) var(--spacing-component-padding-md);
	border: none;
	border-radius: var(--radius-md);
	font-weight: var(--typography-intent-action-font-weight);
	cursor: pointer;
	transition: var(--transition-button-duration) var(--transition-button-easing);
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-gap-xs);
	white-space: nowrap;
}

.btn-primary {
	background: var(--color-brand-fill-loud);
	color: var(--color-brand-on-loud);
}

.btn-primary:hover {
	background: var(--color-brand-fill-louder);
	transform: translateY(-1px);
	box-shadow: var(--shadow-interactive-raised);
}

.btn-secondary {
	background: var(--color-neutral-fill-normal);
	color: var(--color-neutral-on-normal);
}

.btn-secondary:hover {
	background: var(--color-neutral-fill-loud);
}

.btn-sm {
	padding: var(--spacing-component-padding-xs) var(--spacing-component-padding-sm);
	font-size: var(--typography-hierarchy-tertiary-font-size);
}

/* Button Groups
.btn-group {
	display: inline-flex;
	border-radius: var(--radius-md);
	overflow: visible;
	box-shadow: var(--shadow-component-default);
	position: relative;
}

.btn-group .btn {
	border-radius: 0;
	margin: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-group .btn:first-child {
	border-left: none;
	border-top-left-radius: var(--radius-md);
	border-bottom-left-radius: var(--radius-md);
}

.btn-group .btn:last-child {
	border-top-right-radius: var(--radius-md);
	border-bottom-right-radius: var(--radius-md);
}

.btn-group .btn:hover {
	transform: none;
	z-index: 1;
	position: relative;
}
*/

/* Storage Mode Selector */

.storage-selector {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-gap-sm);
	margin-bottom: var(--spacing-stack-md);
}

.storage-option {
	padding: var(--spacing-component-padding-md);
	border: 2px solid var(--color-neutral-border-quiet);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: var(--transition-button-duration) var(--transition-button-easing);
	text-align: center;
}

.storage-option:hover {
	border-color: var(--color-brand-border-loud);
	background: var(--color-neutral-fill-quieter);
}

.storage-option.selected {
	border-color: var(--color-brand-border-loud);
	background: var(--color-brand-fill-quieter);
}

.storage-option input[type="radio"] {
	display: none;
}

.storage-icon {
	font-size: var(--typography-hierarchy-primary-font-size);
	margin-bottom: var(--spacing-stack-xs);
}

.storage-name {
	font-weight: var(--typography-intent-action-font-weight);
	margin-bottom: var(--spacing-3xs);
}

.storage-desc {
	font-size: var(--typography-caption-font-size);
	color: var(--color-neutral-on-quiet);
}

/* Utilities */

.hidden {
	display: none !important;
}

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

.mb-4 {
	margin-bottom: var(--spacing-stack-md);
}

.empty-state {
	text-align: center;
	padding: var(--spacing-component-padding-xl);
	color: var(--color-neutral-on-quiet);
}

.empty-icon {
	font-size: var(--typography-hierarchy-primary-font-size);
	margin-bottom: var(--spacing-stack-md);
	opacity: 0.5;
}

/* ============================================================================
   Screen Position Utility Classes
   ============================================================================ */

/* Left Column */

.position-left-top {
	position: fixed;
	pointer-events: auto;
	left: var(--spacing-app-default);
	top: var(--spacing-app-default);
	z-index: var(--layer-navigation);
}

.position-left-center {
	position: fixed;
	pointer-events: auto;
	left: var(--spacing-app-default);
	top: 50%;
	transform: translateY(-50%);
	z-index: var(--layer-navigation);
}

.position-left-bottom {
	position: fixed;
	pointer-events: auto;
	left: var(--spacing-app-default);
	bottom: var(--spacing-app-default);
	z-index: var(--layer-navigation);
}

/* Center Column */

.position-center-top {
	position: fixed;
	pointer-events: auto;
	left: 50%;
	top: var(--spacing-app-default);
	transform: translateX(-50%);
	z-index: var(--layer-navigation);
}

.position-center-center {
	position: fixed;
	pointer-events: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: var(--layer-navigation);
}

.position-center-bottom {
	position: fixed;
	pointer-events: auto;
	left: 50%;
	bottom: var(--spacing-app-default);
	transform: translateX(-50%);
	z-index: var(--layer-navigation);
}

/* Right Column */

.position-right-top {
	position: fixed;
	pointer-events: auto;
	right: var(--spacing-app-default);
	top: var(--spacing-app-default);
	z-index: var(--layer-navigation);
}

.position-right-center {
	position: fixed;
	pointer-events: auto;
	right: var(--spacing-app-default);
	top: 50%;
	transform: translateY(-50%);
	z-index: var(--layer-navigation);
}

.position-right-bottom {
	position: fixed;
	pointer-events: auto;
	right: var(--spacing-app-default);
	bottom: var(--spacing-app-default);
	z-index: var(--layer-navigation);
}

/* ============================================================================
   Screen Edge Utility Classes (Full Width/Height)
   ============================================================================ */

.position-edge-bottom {
	position: fixed;
	pointer-events: auto;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: var(--layer-background);
}

.position-edge-top {
	position: fixed;
	pointer-events: auto;
	top: 0;
	left: 0;
	width: 100%;
	z-index: var(--layer-background);
}

.position-edge-left {
	position: fixed;
	pointer-events: auto;
	left: 0;
	top: 0;
	height: 100%;
	z-index: var(--layer-background);
}

.position-edge-right {
	position: fixed;
	pointer-events: auto;
	right: 0;
	top: 0;
	height: 100%;
	z-index: var(--layer-background);
}

/* ============================================================================
   Screen Position Utility Classes (40px Margin Variants)
   ============================================================================ */

/* Left Column - Spaced */

.position-left-top-spaced {
	position: fixed;
	pointer-events: auto;
	left: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	top: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	z-index: var(--layer-navigation);
}

.position-left-center-spaced {
	position: fixed;
	pointer-events: auto;
	left: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	top: 50%;
	transform: translateY(-50%);
	z-index: var(--layer-navigation);
}

.position-left-bottom-spaced {
	position: fixed;
	pointer-events: auto;
	left: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	bottom: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	z-index: var(--layer-navigation);
}

/* Center Column - Spaced */

.position-center-top-spaced {
	position: fixed;
	pointer-events: auto;
	left: 50%;
	top: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	transform: translateX(-50%);
	z-index: var(--layer-navigation);
}

.position-center-center-spaced {
	position: fixed;
	pointer-events: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: var(--layer-navigation);
}

.position-center-bottom-spaced {
	position: fixed;
	pointer-events: auto;
	left: 50%;
	bottom: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	transform: translateX(-50%);
	z-index: var(--layer-navigation);
}

/* Right Column - Spaced */

.position-right-top-spaced {
	position: fixed;
	pointer-events: auto;
	right: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	top: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	z-index: var(--layer-navigation);
}

.position-right-center-spaced {
	position: fixed;
	pointer-events: auto;
	right: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	top: 50%;
	transform: translateY(-50%);
	z-index: var(--layer-navigation);
}

.position-right-bottom-spaced {
	position: fixed;
	pointer-events: auto;
	right: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	bottom: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	z-index: var(--layer-navigation);
}

/* ============================================================================
   Screen Edge Utility Classes (40px Margin Variants)
   ============================================================================ */

.position-edge-bottom-spaced {
	position: fixed;
	pointer-events: auto;
	bottom: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	left: 0;
	width: 100%;
	z-index: var(--layer-navigation);
}

.position-edge-top-spaced {
	position: fixed;
	pointer-events: auto;
	top: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	left: 0;
	width: 100%;
	z-index: var(--layer-navigation);
}

.position-edge-left-spaced {
	position: fixed;
	pointer-events: auto;
	left: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	top: 0;
	height: 100%;
	z-index: var(--layer-navigation);
}

.position-edge-right-spaced {
	position: fixed;
	pointer-events: auto;
	right: calc(var(--spacing-stack-loose) + var(--spacing-stack-spacious));
	top: 0;
	height: 100%;
	z-index: var(--layer-navigation);
}

/* ============================================================================
   Menu and Submenu Styles
   ============================================================================ */

/* MOVED TO COMPONENTS:
   - .menu, .menu-item → components/menubar.mutual
   - .submenu, .submenu-item → components/submenu.mutual

   These styles are now encapsulated in their respective .mutual components
   to follow component-based architecture principles.
*/

/* Additional utility classes (without Tailwind) */

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

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

.cursor-pointer {
  cursor: pointer;
}

.no-underline {
  text-decoration: none;
}

/* Button styles using design tokens */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  padding: var(--spacing-component-padding-sm) var(--spacing-component-padding-md);
  border-radius: var(--radius-md);
  font-weight: var(--typography-intent-action-font-weight);
  transition: var(--transition-button-duration) var(--transition-button-easing);
  border: none;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-brand-fill-loud);
  color: var(--color-brand-on-loud);
  box-shadow: var(--shadow-interactive-default);
}

.btn-primary:hover {
  background-color: var(--color-brand-fill-louder);
  box-shadow: var(--shadow-interactive-raised);
  transform: translateY(-1px);
}

.btn-primary:active {
  background-color: var(--color-brand-fill-loud);
  box-shadow: var(--shadow-interactive-pressed);
  transform: translateY(0);
}

.btn-primary:disabled {
  background-color: var(--color-neutral-fill-quiet);
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

.btn-secondary {
  background-color: var(--color-neutral-fill-normal);
  color: var(--color-neutral-on-normal);
  border: 1px solid var(--color-neutral-border-normal);
  box-shadow: var(--shadow-component-default);
}

.btn-secondary:hover {
  background-color: var(--color-neutral-fill-loud);
  border-color: var(--color-neutral-border-loud);
  box-shadow: var(--shadow-component-raised);
}

.btn-secondary:active {
  background-color: var(--color-neutral-fill-louder);
  box-shadow: var(--shadow-component-pressed);
}

.btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-sm {
  padding: var(--spacing-component-padding-xs) var(--spacing-component-padding-sm);
  font-size: var(--typography-hierarchy-tertiary-font-size);
}

/* Card styles using design tokens */

.card {
  background-color: var(--color-surface-fill-quiet);
  color: var(--color-surface-on-normal);
  border: 1px solid var(--color-surface-border-quiet);
  border-radius: var(--radius-lg);
  padding: var(--spacing-component-padding-lg);
  box-shadow: var(--shadow-component-default);
  transition: var(--transition-hover-duration) var(--transition-hover-easing);
}

.card:hover {
  box-shadow: var(--shadow-component-raised);
  border-color: var(--color-surface-border-normal);
  transform: translateY(-2px);
}

/* Navigation link styles using design tokens */

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-sm);
  padding: var(--spacing-component-padding-sm) var(--spacing-component-padding-md);
  border-radius: var(--radius-md);
  color: var(--color-neutral-on-quiet);
  font-size: var(--typography-text-font-size);
  font-weight: var(--typography-text-font-weight);
  transition: var(--transition-hover-duration) var(--transition-hover-easing);
  cursor: pointer;
  text-decoration: none;
}

.nav-link:hover {
  background-color: var(--color-neutral-fill-quieter);
  color: var(--color-brand-fill-loud);
}

.nav-link.active {
  background-color: var(--color-brand-fill-quieter);
  color: var(--color-brand-fill-loud);
  font-weight: var(--typography-intent-action-font-weight);
}