/* ==================== Custom Cursors ==================== */
/* Text cursor for editable areas */
[contenteditable="true"],
.editable {
  cursor: text;
}

/* Pointer cursor for interactive elements */
button,
.btn,
.toc-item,
.nav-item,
.clickable,
a,
.footnote-ref {
  cursor: pointer;
}

/* Grab cursor for draggable elements */
.drag-handle {
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

/* ==================== CSS Variables - Theme ==================== */
:root,
.theme-day {
  --color-bg: #e8e4db;
  --color-bg-sidebar: #f0ece3;
  --color-bg-card: #ffffff;
  --color-text: #2c2c2c;
  --color-text-secondary: #5a5a5a;
  --color-text-muted: #9a9a9a;
  --color-primary: #b8860b;
  --color-primary-hover: #996600;
  --color-primary-light: #faf0d7;
  --color-accent: #1a1a2e;
  --color-border: #d8d4ca;
  --color-border-light: #ece8df;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-success: #16a34a;
  --color-paper: #fdfaf3;
  --color-paper-text: #2c2c2c;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08);
  --shadow-paper: 0 2px 8px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
  --font-sans: 'Noto Sans SC', system-ui, sans-serif;
  --font-serif: 'Noto Serif SC', 'SimSun', serif;
  --font-kaiti: 'STKaiti', 'KaiTi', 'Noto Serif SC', serif;
  --font-fangsong: '华文仿宋', 'STFangsong', 'FangSong', 'Noto Serif SC', serif;
  --font-heiti: 'Source Han Sans CN Bold', 'Noto Sans SC', 'SimHei', 'Microsoft YaHei', sans-serif;
  --font-heiti-bold: 'Source Han Sans CN Bold', 'Noto Sans SC Bold', 'SimHei', 'Microsoft YaHei', sans-serif;
  --font-body: 'Noto Serif SC', 'SimSun', serif;
}

.font-serif {
  --font-body: 'Noto Serif SC', 'SimSun', serif;
}

.font-sans {
  --font-body: 'Source Han Sans CN Bold', 'Noto Sans SC', 'SimHei', 'Microsoft YaHei', sans-serif;
}

.theme-night {
  --color-bg: #0a0a14;
  --color-bg-sidebar: #1e1e32;
  --color-bg-card: #242438;
  --color-text: #e0e0e8;
  --color-text-secondary: #b0b0c0;
  --color-text-muted: #808090;
  --color-primary: #eab308;
  --color-primary-hover: #ca8a04;
  --color-primary-light: rgba(234, 179, 8, 0.15);
  --color-accent: #e0e0e8;
  --color-border: #2a2a40;
  --color-border-light: #222236;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-success: #22c55e;
  --color-paper: #1c1c30;
  --color-paper-text: #d0d0d8;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3);
  --shadow-paper: 0 2px 8px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.2);
}

/* Ensure all backgrounds are dark in night mode */
.theme-night body,
.theme-night #app,
.theme-night .main,
.theme-night .editor-panel,
.theme-night .sidebar,
.theme-night .toolbar,
.theme-night .panel,
.theme-night .modal,
.theme-night .dropdown-menu {
  background-color: var(--color-bg);
}

.theme-night .sidebar {
  background-color: var(--color-bg-sidebar);
}

.theme-night .toolbar {
  background-color: var(--color-bg-sidebar);
  border-bottom-color: var(--color-border);
}

.theme-night .editor-panel {
  background: #141424;
}

.theme-night .sidebar {
  --color-text: #c0c0d0;
  --color-text-secondary: #9090a0;
  --color-text-muted: #606070;
}

.theme-night .tree-node-content:not(.active) {
  color: #b0b0c0;
}

.theme-night .tree-node-content:hover {
  color: #d0d0e0;
}

/* ==================== Reset & Base ==================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  overflow: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  transition: background 0.3s ease;
}

/* ==================== Utility Classes ==================== */
.hidden { display: none !important; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.text-sm { font-size: 0.875rem; }
.text-muted { color: var(--color-text-muted); }

/* ==================== Background Color Options ==================== */
.bg-paper { --color-bg: #e8e4db; }
.bg-white { --color-bg: #f5f5f5; }
.bg-cream { --color-bg: #fdfaf3; }
.bg-gray { --color-bg: #e0e0e0; }
.bg-sepia { --color-bg: #f4ecd8; }
.bg-dark { --color-bg: #1a1a2e; }

.bg-paper .theme-day { --color-bg: #e8e4db; }
.bg-white .theme-day { --color-bg: #f5f5f5; }
.bg-cream .theme-day { --color-bg: #fdfaf3; }
.bg-gray .theme-day { --color-bg: #e0e0e0; }
.bg-sepia .theme-day { --color-bg: #f4ecd8; }
.bg-dark .theme-day, .bg-dark .theme-night { --color-bg: #1a1a2e; }

/* ==================== Scrollbar ==================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

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

/* ==================== Contenteditable Styles ==================== */
[contenteditable="true"]:focus {
  outline: none;
  background-color: transparent !important;
  caret-color: var(--color-text);
}

[contenteditable="true"]:hover {
  background-color: transparent;
}

/* Placeholder via JS class */
.editable.is-empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-muted);
  font-style: italic;
  pointer-events: none;
  display: block;
}

.editable.is-empty {
  display: block;
  min-height: 1.5em;
}

.editable.is-empty:focus {
  outline: none;
}

.editable:hover {
  outline: 1px dashed var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Links cursor */
.book-text a,
a {
  cursor: pointer;
  color: var(--color-accent);
}