@import "tailwindcss";

:root {
	--light-background: #f5f5f5;
	--light-foreground: #e0e0e0;
	--light-accent: #303052;
	--light-text: rgb(34, 40, 49);

	--dark-background: #181818;
	--dark-foreground: #222222;
	--dark-accent: #bebff7;
	--dark-text: rgb(238, 238, 238);
}

/* Scrollbar width */
::-webkit-scrollbar {
	width: 0px;
}

@layer base {
	body {
		@apply bg-[var(--light-background)] text-[var(--light-text)] transition-colors duration-200;
	}

	.dark body {
		@apply bg-[var(--dark-background)] text-[var(--dark-text)];
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		@apply font-medium text-[var(--light-text)];
	}

	.dark h1,
	.dark h2,
	.dark h3,
	.dark h4,
	.dark h5,
	.dark h6 {
		@apply text-[var(--dark-text)];
	}

	a {
		@apply text-[var(--light-accent)] transition-colors duration-200;
	}

	a:hover {
		@apply underline;
	}

	.dark a {
		@apply text-[var(--dark-accent)];
	}

	input,
	textarea,
	select {
		@apply rounded-lg border border-[var(--light-text)]/20 bg-[var(--light-foreground)] px-3 py-2 text-[var(--light-text)] transition-colors duration-200;
	}

	input:focus,
	select:focus {
		@apply ring-2 ring-[var(--light-accent)] outline-none;
	}

	.dark input,
	.dark textarea,
	.dark select {
		@apply border-[var(--dark-text)]/20 bg-[var(--dark-foreground)] text-[var(--dark-text)];
	}

	.dark input:focus,
	.dark select:focus {
		@apply ring-[var(--dark-accent)];
	}

	button {
		@apply rounded-md bg-[var(--light-accent)] px-4 py-2 text-[var(--light-background)] transition-all duration-200;
	}

	button:hover {
		@apply bg-[var(--light-accent)]/80;
	}

	button:focus {
		@apply ring-2 ring-[var(--light-accent)]/50 outline-none;
	}

	button:disabled {
		@apply opacity-50;
	}

	.dark button {
		@apply bg-[var(--dark-accent)] text-[var(--dark-background)];
	}

	.dark button:hover {
		@apply bg-[var(--dark-accent)]/80;
	}

	.dark button:focus {
		@apply ring-[var(--dark-accent)]/50;
	}
}

/* Reusable component classes */
@layer components {
	.card {
		@apply rounded-lg bg-[var(--light-foreground)] p-6 shadow-md transition-colors duration-200;
	}

	.dark .card {
		@apply bg-[var(--dark-foreground)];
	}

	.form-group {
		@apply mb-4 space-y-2;
	}

	.form-label {
		@apply block text-sm font-medium text-[var(--light-text)];
	}

	.dark .form-label {
		@apply text-[var(--dark-text)];
	}

	/* Error messages */
	.error {
		@apply rounded-lg bg-red-100 p-3 text-sm text-red-500;
	}

	.dark .error {
		@apply bg-red-900/30 text-red-300;
	}

	/* Success messages */
	.success {
		@apply rounded-lg bg-green-100 p-3 text-sm text-green-500;
	}

	.dark .success {
		@apply bg-green-900/30 text-green-300;
	}

	.btn-primary {
		@apply bg-[var(--light-accent)] text-[var(--light-background)];
	}

	.dark .btn-primary {
		@apply bg-[var(--dark-accent)] text-[var(--dark-background)];
	}

	.btn-secondary {
		@apply border border-[var(--light-text)]/20 bg-[var(--light-foreground)] text-[var(--light-text)];
	}

	.dark .btn-secondary {
		@apply border-[var(--dark-text)]/20 bg-[var(--dark-foreground)] text-[var(--dark-text)];
	}

	.container-page {
		@apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
	}

	/* Sidebar */
	@media (max-width: 768px) {
		.sidebar {
			@apply w-full max-w-full;
		}

		body.sidebar-open {
			@apply overflow-hidden;
		}
	}

	@media (min-width: 768px) {
		.sidebar {
			@apply w-64;
		}
	}

	.sidebar {
		@apply fixed flex h-full flex-col overflow-hidden border-r border-[var(--light-foreground)] bg-[var(--light-foreground)] transition-all duration-300;
	}

	.dark .sidebar {
		@apply border-[var(--dark-foreground)] bg-[var(--dark-foreground)];
	}

	.sidebar-header,
	.sidebar-footer {
		@apply border-[var(--light-text)]/20 p-4;
	}

	.dark .sidebar-header,
	.dark .sidebar-footer {
		@apply border-[var(--dark-text)]/20;
	}

	.sidebar-header {
		@apply border-b;
	}

	.sidebar-footer {
		@apply border-t;
	}

	.sidebar-item {
		@apply cursor-pointer p-3 transition-colors hover:bg-[var(--light-background)];
	}

	.dark .sidebar-item {
		@apply hover:bg-[var(--dark-background)];
	}

	.sidebar-item-active {
		@apply bg-[var(--light-background)];
	}

	.dark .sidebar-item-active {
		@apply bg-[var(--dark-background)];
	}

	.sidebar-item-content {
		@apply flex flex-col;
	}

	.sidebar-item-bottom-row {
		@apply mt-1 flex items-center justify-between;
	}

	.sidebar-item-text {
		@apply text-xs text-[var(--light-text)]/60;
	}

	.dark .sidebar-item-text {
		@apply text-[var(--dark-text)]/60;
	}

	.sidebar-item-delete {
		@apply flex h-6.5 w-6.5 cursor-pointer items-center justify-center rounded-lg border-1 border-[var(--light-accent)]/20 bg-transparent p-1;
	}

	.dark .sidebar-item-delete {
		@apply border-[var(--dark-accent)]/20;
	}

	.sidebar-item-delete > svg {
		@apply text-[var(--light-accent)]/50;
	}

	.dark .sidebar-item-delete > svg {
		@apply text-[var(--dark-accent)]/50;
	}

	.sidebar-item-delete:hover > svg {
		@apply text-[var(--light-accent)] transition-colors delay-100;
	}

	.dark .sidebar-item-delete:hover > svg {
		@apply text-[var(--dark-accent)];
	}

	.sidebar-divider {
		@apply divide-y divide-[var(--light-text)]/20;
	}

	.dark .sidebar-divider {
		@apply divide-[var(--dark-text)]/20;
	}

	.search-bar {
		@apply w-full rounded-md py-2 pr-3 pl-9;
	}

	.search-bar-icon {
		@apply absolute top-3 left-7 h-4 w-4 text-[var(--light-text)]/60;
	}

	.dark .search-bar-icon {
		@apply text-[var(--dark-text)]/60;
	}

	.general-sidebar-icon {
		@apply h-4 w-4 text-[var(--light-text)]/60;
	}

	.dark .general-sidebar-icon {
		@apply text-[var(--dark-text)]/60;
	}

	/* Versions dropdown */
	.versions-dropdown {
		@apply absolute right-0 z-10 mt-2 w-52 origin-top-right space-y-0.5 rounded-md bg-[var(--light-foreground)] shadow-lg ring-1 ring-[var(--light-foreground)]/10 focus:outline-none;
	}

	.dark .versions-dropdown {
		@apply bg-[var(--dark-foreground)] ring-[var(--dark-foreground)]/10;
	}

	.versions-dropdown-item {
		@apply w-full cursor-pointer bg-[var(--light-foreground)] p-3 transition-colors hover:bg-[var(--light-background)];
	}

	.dark .versions-dropdown-item {
		@apply bg-[var(--dark-foreground)] hover:bg-[var(--dark-background)];
	}

	.versions-dropdown-item-active {
		@apply bg-[var(--light-accent)]/20;
	}

	.dark .versions-dropdown-item-active {
		@apply bg-[var(--dark-accent)]/20;
	}

	.versions-dropdown-item-text {
		@apply text-xs text-[var(--light-text)]/60;
	}

	.dark .versions-dropdown-item-text {
		@apply text-[var(--dark-text)]/60;
	}

	.versions-dropdown-divider {
		@apply divide-y divide-[var(--light-text)]/20;
	}

	.dark .versions-dropdown-divider {
		@apply divide-[var(--dark-text)]/20;
	}

	/* Note editor */
	.note-title-container {
		@apply mb-4;
	}

	.note-title-input {
		@apply w-full rounded-2xl border-b border-[var(--light-text)]/20 bg-transparent pb-2 text-2xl font-bold focus:border-[var(--light-accent)];
	}

	.dark .note-title-input {
		@apply border-[var(--dark-text)]/20 focus:border-[var(--dark-accent)];
	}

	.note-char-count {
		@apply mt-2 text-xs text-[var(--light-text)]/60;
	}

	.dark .note-char-count {
		@apply text-[var(--dark-text)]/60;
	}

	.note-editor-container {
		@apply flex min-h-0 flex-1 flex-col overflow-auto;
	}

	.note-editor-wrapper {
		@apply flex h-full flex-col;
	}

	.note-editor-content {
		@apply flex h-full flex-col;
	}

	.note-textarea {
		@apply h-full max-h-full min-h-1/2 w-full resize-none rounded-2xl bg-transparent p-3.5 font-mono outline-none focus:border-4 focus:border-[var(--light-accent)]/60;
	}

	.dark .note-textarea {
		@apply focus:border-[var(--dark-accent)]/60;
	}

	.note-save-button {
		@apply fixed right-10 bottom-10 z-10;
	}

	/* Markdown preview */
	.markdown-preview h1 {
		@apply mt-6 mb-4 border-b border-[var(--light-foreground)] pb-3 text-3xl;
	}

	.dark .markdown-preview h1 {
		@apply border-[var(--dark-foreground)];
	}

	.markdown-preview h2 {
		@apply mt-6 mb-4 text-2xl;
	}

	.markdown-preview h3 {
		@apply mt-5 mb-3 text-xl;
	}

	.markdown-preview p {
		@apply my-4;
	}

	.markdown-preview ul,
	.markdown-preview ol {
		@apply my-4 pl-5;
	}

	.markdown-preview ul {
		@apply list-disc;
	}

	.markdown-preview ol {
		@apply list-decimal;
	}

	.markdown-preview li > ul,
	.markdown-preview li > ol,
	.markdown-preview ul > ul,
	.markdown-preview ul > ol,
	.markdown-preview ol > ol,
	.markdown-preview ol > ul {
		@apply my-1; /* Reduced vertical spacing for nested lists */
	}

	.markdown-preview ul ul:has(> li > input[type="checkbox"]) {
		@apply pl-11;
	}

	.markdown-preview ul ul ul:has(> li > input[type="checkbox"]) {
		@apply pl-11;
	}

	.markdown-preview li span {
		@apply ml-1.5;
	}

	.markdown-preview li:has(> input[type="checkbox"]) {
		/* Bullet removal */
		@apply -ml-4.5 list-none;
	}

	.markdown-preview input[type="checkbox"] {
		/* Actual checkbox styling */
		@apply mr-1 h-4 w-4 appearance-none rounded-full border-[var(--light-text)]/30 bg-[var(--light-foreground)] p-0 align-middle;
	}

	.dark .markdown-preview input[type="checkbox"] {
		@apply border-[var(--dark-text)]/30 bg-[var(--dark-foreground)];
	}

	.markdown-preview input[type="checkbox"]:checked {
		@apply border-[var(--light-accent)] bg-[var(--light-accent)];
	}

	.dark .markdown-preview input[type="checkbox"]:checked {
		@apply border-[var(--dark-accent)] bg-[var(--dark-accent)];
	}

	.markdown-preview hr {
		@apply border-[var(--light-text)]/20;
	}

	.dark .markdown-preview hr {
		@apply border-[var(--dark-text)]/20;
	}

	.markdown-preview code {
		@apply rounded bg-[var(--light-foreground)] px-1 py-0.5 font-mono;
	}

	.dark .markdown-preview code {
		@apply bg-[var(--dark-foreground)];
	}

	.markdown-preview pre {
		@apply overflow-x-auto rounded-2xl bg-[var(--light-foreground)] p-3;
	}

	.dark .markdown-preview pre {
		@apply bg-[var(--dark-foreground)];
	}

	.markdown-preview blockquote {
		@apply my-4 border-l-4 border-[var(--light-accent)] pl-4 text-[var(--light-text)] opacity-70;
	}

	.dark .markdown-preview blockquote {
		@apply border-[var(--dark-accent)] text-[var(--dark-text)];
	}

	.markdown-preview a {
		@apply text-[var(--light-accent)] underline;
	}

	.dark .markdown-preview a {
		@apply text-[var(--dark-accent)];
	}

	.markdown-preview table {
		@apply my-4 w-full border-collapse;
	}

	.markdown-preview th,
	.markdown-preview td {
		@apply border border-[var(--light-text)]/20 p-2 text-left;
	}

	.dark .markdown-preview th,
	.dark .markdown-preview td {
		@apply border-[var(--dark-text)]/20;
	}

	.markdown-preview th {
		@apply bg-[var(--light-foreground)];
	}

	.dark .markdown-preview th {
		@apply bg-[var(--dark-foreground)];
	}

	/* Settings modal */
	.modal-backdrop {
		@apply fixed inset-0 z-50 flex items-center justify-center backdrop-blur-xs;
	}

	.modal-content {
		@apply mx-4 max-h-[90vh] w-full max-w-md overflow-y-auto rounded-lg bg-[var(--light-background)] shadow-lg;
	}

	.dark .modal-content {
		@apply bg-[var(--dark-background)];
	}

	.modal-section {
		@apply border-b border-[var(--light-text)]/20 p-4;
	}

	.dark .modal-section {
		@apply border-[var(--dark-text)]/20;
	}

	.modal-close-button {
		@apply text-[var(--light-background)]/60 hover:text-[var(--light-background)];
	}

	.dark .modal-close-button {
		@apply text-[var(--dark-background)]/60 hover:text-[var(--dark-background)];
	}

	/* Loading spinner */
	.loading-container {
		@apply pointer-events-none flex h-screen w-full items-center justify-center;
	}

	.spinner {
		@apply relative h-10 w-10;
	}

	.spinner-dot {
		@apply absolute top-[37.5%] inline-block h-1/4 w-1/4 rounded-full bg-[var(--light-accent)];
		animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	}

	.dark .spinner-dot {
		@apply bg-[var(--dark-accent)];
	}

	.spinner .bounce1 {
		@apply left-0;
		animation-delay: -0.32s;
	}

	.spinner .bounce2 {
		@apply left-[37.5%];
		animation-delay: -0.16s;
	}

	.spinner .bounce3 {
		@apply left-3/4;
	}

	@keyframes sk-bouncedelay {
		0%,
		80%,
		100% {
			transform: scale(0);
		}
		40% {
			transform: scale(1);
		}
	}

	/* Main layout */
	.main-layout-container {
		@apply flex h-screen w-full bg-[var(--light-background)];
	}

	.dark .main-layout-container {
		@apply bg-[var(--dark-background)];
	}

	.content-wrapper {
		@apply flex h-screen flex-1 flex-col overflow-hidden;
	}

	.note-content-fixed-width {
		@apply mx-auto flex w-full max-w-[800px] flex-col px-8 py-0;
		height: calc(100% - 5rem);
	}

	@media (max-width: 768px) {
		.note-content-fixed-width {
			@apply max-w-full px-4 py-0;
		}
	}

	.main-error-popup {
		@apply fixed top-4 right-4 z-50 max-w-md;
	}

	.main-header {
		@apply flex h-20 items-center justify-between bg-[var(--light-foreground)] p-4 shadow-sm;
	}

	.dark .main-header {
		@apply bg-[var(--dark-foreground)];
	}

	.main-content {
		@apply flex min-h-0 flex-1 flex-col overflow-auto bg-[var(--light-background)] p-6;
	}

	.dark .main-content {
		@apply bg-[var(--dark-background)];
	}
}