/**
 * UI Component Styles
 *
 * Styles for editor, toast, add button, and form elements.
 */

/* -----------------------------------------------------------------------------
 * CSS Variables for UI
 * -------------------------------------------------------------------------- */

:root {
	--font-body: 'Avenir Next', 'Gill Sans', 'Segoe UI', sans-serif;
	--font-display: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;

	/* Category colors — muted palette for the weary eye */
	--cat-work: #6f8190;
	--cat-personal: #83737c;
	--cat-health: #748678;
	--cat-deadline: #9a766f;
	--cat-milestone: #978865;
	--cat-learning: #6a8a8d;
	--cat-social: #9a7a64;
	--cat-routine: #7d8085;

	/* UI colors */
	--ui-bg: #f2efe8;
	--ui-bg-elevated: #ebe6dd;
	--ui-bg-input: #f8f4ec;
	--ui-border: #b8aea0;
	--ui-text: #2a2621;
	--ui-text-muted: #6f675e;
	--ui-primary: #6c747b;
	--ui-primary-hover: #595f65;
	--ui-danger: #8f615f;
	--ui-danger-hover: #7b4f4d;
	--ui-success: #5e7764;
	--ui-warning: #8f7b57;

	/* Spacing */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;

	/* Transitions */
	--transition-fast: 100ms ease;
	--transition-normal: 200ms ease;
}

/* One law to rule them all: no rounded corners in this app. */
*,
*::before,
*::after {
	border-radius: 0 !important;
}

:root[data-contrast='high'] {
	--ui-bg: #000000;
	--ui-bg-elevated: #111111;
	--ui-bg-input: #1b1b1b;
	--ui-border: #ffffff;
	--ui-text: #ffffff;
	--ui-text-muted: #d4d4d4;
	--ui-primary: #4cc9ff;
	--ui-primary-hover: #74d7ff;
	--ui-danger: #ff7a7a;
	--ui-danger-hover: #ff9b9b;
	--ui-success: #8aff8a;
	--ui-warning: #ffe27a;
}

:root[data-palette='colorblind'] {
	--cat-work: #0072b2;
	--cat-personal: #cc79a7;
	--cat-health: #009e73;
	--cat-deadline: #d55e00;
	--cat-milestone: #f0e442;
	--cat-learning: #56b4e9;
	--cat-social: #e69f00;
	--cat-routine: #6f6f6f;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -----------------------------------------------------------------------------
 * Editor Overlay & Panel
 * -------------------------------------------------------------------------- */

.editor-overlay {
	position: fixed;
	inset: 0;
	background: rgba(36, 31, 24, 0.38);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: var(--space-md);
}

.editor-panel {
	background: var(--ui-bg);
	border-radius: 12px;
	box-shadow: 0 12px 24px rgba(31, 27, 22, 0.16);
	width: 100%;
	max-width: 500px;
	max-height: 90vh;
	overflow-y: auto;
	border: 1px solid var(--ui-border);
}

.editor-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--ui-border);
}

.editor-header h2 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ui-text);
	font-family: var(--font-display);
}

/* -----------------------------------------------------------------------------
 * Form Styles
 * -------------------------------------------------------------------------- */

.editor-form {
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	position: relative;
}

.form-field label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--ui-text);
}

.form-field .required {
	color: var(--ui-danger);
}

.form-field input,
.form-field textarea,
.form-field select {
	background: var(--ui-bg-input);
	border: 1px solid var(--ui-border);
	border-radius: 6px;
	padding: var(--space-sm) var(--space-md);
	font-size: 1rem;
	color: var(--ui-text);
	transition: border-color var(--transition-fast);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
	outline: none;
	border-color: var(--ui-primary);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
	color: var(--ui-text-muted);
}

.form-field textarea {
	resize: vertical;
	min-height: 80px;
}

.form-field .error {
	font-size: 0.75rem;
	color: var(--ui-danger);
}

.form-field .hint {
	font-size: 0.75rem;
	color: var(--ui-text-muted);
}

.form-field .char-count {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 0.75rem;
	color: var(--ui-text-muted);
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
}

/* -----------------------------------------------------------------------------
 * Category Selector
 * -------------------------------------------------------------------------- */

.category-select {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.category-option {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-sm);
	background: var(--ui-bg-input);
	border: 2px solid transparent;
	border-radius: 6px;
	color: var(--ui-text);
	font-size: 0.875rem;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.category-option:hover {
	background: var(--ui-bg-elevated);
}

.category-option.selected {
	border-color: var(--cat-color, var(--ui-primary));
	background: color-mix(
		in srgb,
		var(--cat-color, var(--ui-primary)) 20%,
		transparent
	);
}

.category-option svg {
	color: var(--cat-color, var(--ui-text));
}

/* -----------------------------------------------------------------------------
 * Editor Actions
 * -------------------------------------------------------------------------- */

.editor-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--space-md);
	border-top: 1px solid var(--ui-border);
	margin-top: var(--space-md);
}

.delete-section {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.delete-section .confirm-text {
	font-size: 0.875rem;
	color: var(--ui-danger);
}

.save-section {
	display: flex;
	gap: var(--space-sm);
	margin-left: auto;
}

/* -----------------------------------------------------------------------------
 * Buttons
 * -------------------------------------------------------------------------- */

.button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-sm) var(--space-md);
	border: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.button:focus-visible,
.icon-button:focus-visible,
.add-button:focus-visible,
.import-button:focus-visible {
	outline: 2px solid var(--ui-primary);
	outline-offset: 2px;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 35%, transparent);
}

.button.primary {
	background: var(--ui-primary);
	color: #f6f3ed;
}

.button.primary:hover {
	background: var(--ui-primary-hover);
}

.button.secondary {
	background: var(--ui-bg-input);
	color: var(--ui-text);
	border: 1px solid var(--ui-border);
}

.button.secondary:hover {
	background: var(--ui-bg-elevated);
}

.button.danger {
	background: var(--ui-danger);
	color: #f6f3ed;
}

.button.danger:hover {
	background: var(--ui-danger-hover);
}

.button.danger-outline {
	background: transparent;
	color: var(--ui-danger);
	border: 1px solid var(--ui-danger);
}

.button.danger-outline:hover {
	background: color-mix(in srgb, var(--ui-danger) 15%, transparent);
}

.icon-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: var(--ui-text-muted);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.icon-button:hover {
	background: var(--ui-bg-input);
	color: var(--ui-text);
}

/* -----------------------------------------------------------------------------
 * Add Button (FAB)
 * -------------------------------------------------------------------------- */

.add-button {
	position: fixed;
	bottom: var(--space-lg);
	right: var(--space-lg);
	width: 64px;
	height: 42px;
	border-radius: 50%;
	background: var(--ui-primary);
	color: #f6f3ed;
	border: none;
	box-shadow: 0 4px 10px rgba(39, 34, 29, 0.2);
	cursor: pointer;
	transition: all var(--transition-normal);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
}

.add-button:hover {
	background: var(--ui-primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 5px 12px rgba(39, 34, 29, 0.24);
}

.add-button:active {
	transform: scale(0.95);
}

/* -----------------------------------------------------------------------------
 * Import JSON Button
 * -------------------------------------------------------------------------- */

.import-button {
	position: fixed;
	bottom: calc(var(--space-lg) + 72px);
	right: var(--space-lg);
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-sm) var(--space-md);
	border-radius: 999px;
	background: var(--ui-bg-elevated);
	color: var(--ui-text);
	border: 1px solid var(--ui-border);
	box-shadow: 0 3px 8px rgba(39, 34, 29, 0.18);
	cursor: pointer;
	transition: all var(--transition-fast);
	z-index: 100;
}

.import-button:hover {
	background: var(--ui-bg-input);
	color: var(--ui-primary);
	transform: translateY(-1px);
}

.import-button:active {
	transform: translateY(0);
}

.import-button svg {
	flex-shrink: 0;
}

@media (max-width: 600px) {
	.import-button {
		bottom: calc(var(--space-md) + 56px);
		right: var(--space-md);
	}
}

/* -----------------------------------------------------------------------------
 * Import Modal
 * -------------------------------------------------------------------------- */

.import-panel {
	max-width: 640px;
}

.import-body {
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.import-header-text h2 {
	margin: 0;
}

.import-subtitle {
	margin: var(--space-xs) 0 0;
	color: var(--ui-text-muted);
	font-size: 0.9rem;
}

.import-hint {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	background: var(--ui-bg-input);
	border: 1px solid var(--ui-border);
	border-radius: 8px;
	padding: var(--space-sm) var(--space-md);
	color: var(--ui-text);
}

.import-hint svg {
	color: var(--ui-primary);
}

.import-keys {
	font-family:
		'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
		monospace;
	margin-left: var(--space-xs);
}

.import-errors {
	background: color-mix(in srgb, var(--ui-danger) 15%, transparent);
	border: 1px solid var(--ui-danger);
	border-radius: 8px;
	padding: var(--space-sm) var(--space-md);
	color: var(--ui-text);
}

.import-errors ul {
	margin: var(--space-xs) 0 0;
	padding-left: var(--space-md);
}

.import-errors li {
	margin: var(--space-xs) 0;
}

.import-sample {
	background: var(--ui-bg-input);
	border: 1px solid var(--ui-border);
	border-radius: 8px;
	padding: var(--space-sm);
}

.import-sample__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-xs);
	color: var(--ui-text-muted);
}

.import-sample pre {
	margin: 0;
	white-space: pre-wrap;
	font-family:
		'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
		monospace;
	color: var(--ui-text);
}

/* -----------------------------------------------------------------------------
 * Toast
 * -------------------------------------------------------------------------- */

.toast {
	position: fixed;
	bottom: var(--space-lg);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	background: var(--ui-bg);
	border-radius: 8px;
	box-shadow: 0 6px 14px rgba(39, 34, 29, 0.18);
	border: 1px solid var(--ui-border);
	z-index: 1001;
	animation: toast-in 200ms ease;
}

@keyframes toast-in {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.toast-icon {
	flex-shrink: 0;
}

.toast-success .toast-icon {
	color: var(--ui-success);
}

.toast-error .toast-icon {
	color: var(--ui-danger);
}

.toast-warning .toast-icon {
	color: var(--ui-warning);
}

.toast-info .toast-icon {
	color: var(--ui-primary);
}

.toast-message {
	color: var(--ui-text);
	font-size: 0.875rem;
}

.toast-action {
	background: transparent;
	border: none;
	color: var(--ui-primary);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	padding: var(--space-xs) var(--space-sm);
	border-radius: 4px;
	transition: background var(--transition-fast);
}

.toast-action:hover {
	background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
}

.toast-dismiss {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--ui-text-muted);
	cursor: pointer;
	padding: var(--space-xs);
	border-radius: 4px;
	transition: all var(--transition-fast);
}

.toast-dismiss:hover {
	background: var(--ui-bg-input);
	color: var(--ui-text);
}

/* -----------------------------------------------------------------------------
 * Responsive
 * -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.editor-panel {
		max-width: 100%;
		max-height: 100vh;
		border-radius: 0;
	}

	.form-row {
		grid-template-columns: 1fr;
	}

	.editor-actions {
		flex-direction: column;
		gap: var(--space-md);
	}

	.delete-section,
	.save-section {
		width: 100%;
		justify-content: center;
	}

	.add-button {
		bottom: var(--space-md);
		right: var(--space-md);
	}
}

/* -----------------------------------------------------------------------------
 * Zoom Controls
 * The cockpit for time navigation
 * -------------------------------------------------------------------------- */

.zoom-controls {
	position: fixed;
	bottom: var(--space-lg);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	background: var(--ui-bg-elevated);
	border: 1px solid var(--ui-border);
	border-radius: 12px;
	padding: var(--space-xs);
	box-shadow: 0 4px 10px rgba(39, 34, 29, 0.18);
	z-index: 100;
}

.zoom-control-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--ui-text);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.zoom-control-btn:hover:not(:disabled) {
	background: var(--ui-bg-input);
	color: var(--ui-primary);
}

.zoom-control-btn:active:not(:disabled) {
	transform: scale(0.95);
}

.zoom-control-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.zoom-control-btn--active {
	background: var(--ui-primary);
	color: var(--ui-bg);
}

.zoom-control-btn--active:hover:not(:disabled) {
	background: var(--ui-primary-hover);
	color: var(--ui-bg);
}

:root[data-contrast='high'] .zoom-control-btn {
	border: 1px solid var(--ui-border);
}

.zoom-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 60px;
	padding: 0 var(--space-sm);
}

.zoom-level {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ui-text-muted);
	font-family: var(--font-display);
}

.zoom-separator {
	width: 1px;
	height: 24px;
	background: var(--ui-border);
	margin: 0 var(--space-xs);
}

@media (max-width: 600px) {
	.zoom-controls {
		left: var(--space-md);
		right: var(--space-md);
		transform: none;
		justify-content: center;
		flex-wrap: wrap;
		padding: var(--space-xs);
		gap: var(--space-xs);
	}

	.zoom-control-btn {
		width: 44px;
		height: 44px;
	}

	.zoom-indicator {
		min-width: 50px;
	}
}

/* -----------------------------------------------------------------------------
 * Detail Panel — Hovered Item's Stage Above the Timeline
 * -------------------------------------------------------------------------- */

.detail-panel {
	position: absolute;
	top: var(--space-md);
	left: 50%;
	transform: translateX(-50%);
	background: var(--ui-bg-elevated);
	border: 1px solid var(--ui-border);
	border-radius: 8px;
	padding: var(--space-sm) var(--space-md);
	min-width: 280px;
	max-width: 90vw;
	z-index: 50;
	transition:
		opacity var(--transition-fast),
		transform var(--transition-fast);
}

.detail-panel--empty {
	opacity: 0.4;
	background: transparent;
	border-color: transparent;
}

.detail-panel__placeholder {
	font-size: 0.75rem;
	color: var(--ui-text-muted);
	font-style: italic;
}

.detail-panel__header {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.detail-panel__category-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.detail-panel__label {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ui-text);
	font-family: var(--font-display);
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.detail-panel__duration {
	font-size: 0.75rem;
	color: var(--ui-text-muted);
	background: var(--ui-bg-input);
	padding: 2px 6px;
	border-radius: 4px;
	white-space: nowrap;
}

.detail-panel__window {
	margin-top: var(--space-xs);
	font-size: 0.8rem;
	color: var(--ui-text-muted);
}

.detail-panel__notes {
	margin-top: var(--space-xs);
	font-size: 0.8rem;
	color: var(--ui-text);
	padding-top: var(--space-xs);
	border-top: 1px solid var(--ui-border);
	max-height: 3em;
	overflow: hidden;
	text-overflow: ellipsis;
}