/* =========================================================
Global
========================================================= */

* {
  box-sizing: border-box;
}

html {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

body {
  margin: 0;
  background: #f5f7fa;
  color: #1f2937;
}

/* =========================================================
Navigation
========================================================= */

.navbar {
  position: fixed;
  top: 0;
  left: 0;

  width: 240px;
  height: 100vh;

  display: flex;
  flex-direction: column;

  background: #111827;
  color: #ffffff;

  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);

  z-index: 1000;
}

/* Brand */

.navbar-header {
  height: 72px;

  display: flex;
  align-items: center;

  padding: 0 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar-brand {
  color: #ffffff;
  text-decoration: none;

  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Navigation links */

.navbar-menu {
  display: flex;
  flex-direction: column;

  padding: 16px 12px;
  gap: 4px;
}

.nav-link {
  display: flex;
  align-items: center;

  gap: 12px;

  padding: 11px 12px;

  color: #9ca3af;
  text-decoration: none;

  border-radius: 8px;

  font-size: 0.95rem;
  font-weight: 500;

  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.nav-link:hover {
  color: #ffffff;
  background: #1f2937;
}

.nav-link.active {
  color: #ffffff;
  background: #2563eb;
}

/* Icons */

.nav-icon {
  width: 22px;

  display: inline-flex;
  justify-content: center;

  font-size: 1.1rem;
}

/* =========================================================
Main content
========================================================= */

main {
  margin-left: 240px;

  min-height: 100vh;

  padding: 40px;
}

/* =========================================================
Mobile navigation
========================================================= */

.navbar-toggle {
  display: none;

  width: 42px;
  height: 42px;

  margin-left: auto;

  border: none;
  border-radius: 8px;

  background: transparent;

  cursor: pointer;

  padding: 9px;
}

.navbar-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

.navbar-toggle span {
  display: block;

  height: 2px;

  margin: 5px 0;

  background: #ffffff;

  border-radius: 2px;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* =========================================================
Hashtags
========================================================= */

a.hashtag {
  background-color: #e0e0e0;

  border-radius: 4px;

  padding: 2px 6px;

  color: #3b6ea5;

  text-decoration: none;

  font-weight: 500;

  transition: background-color 0.2s ease;
}

a.hashtag:hover {
  background-color: #cfd8dc;

  text-decoration: underline;
}

/* =========================================================
Note
========================================================= */

.note {
  height: calc(100vh - 80px);
  margin: 0 auto;

  display: flex;
  flex-direction: column;

  min-height: 0;
}

/* =========================================================
Note header
========================================================= */

.note-header {
  flex-shrink: 0;

  width: 100%;

  display: flex;
  flex-wrap: wrap;
  align-items: center;

  background: #f5f7fa;

  z-index: 10;
}

/* =========================================================
Filename
========================================================= */

.filename_title {
  flex: 1 1 auto;

  width: auto;
  min-width: 0;

  margin: 0;
  padding: 0 0 0.5rem 0;

  color: grey;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
Actions
========================================================= */

.note-actions {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  margin-left: 20px;
  padding: 0 0 0.5rem 0;
}

/* =========================================================
Save button
========================================================= */

.note-save-button {
  flex: 0 0 auto;

  border: none;
  border-radius: 6px;

  padding: 7px 14px;

  background: #2563eb;
  color: white;

  font-size: 0.875rem;
  font-weight: 500;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    opacity 0.15s ease;
}

.note-save-button:hover {
  background: #1d4ed8;
}

.note-save-button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.note-save-button[hidden] {
  display: none;
}

/* =========================================================
Header separator
========================================================= */

.note-header hr {
  flex: 0 0 100%;

  width: 100%;

  border: 0;
  border-top: 1px solid #e5e7eb;

  margin: 0;
}

/* =========================================================
Markdown content
========================================================= */

.note-content {
  flex: 1;

  min-width: 0;
  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 1.5rem 0;
}

.note-content > :first-child {
  margin-top: 0;
}

/* =========================================================
Footer
========================================================= */

.note-footer {
  flex-shrink: 0;

  padding-top: 1rem;

  border-top: 1px solid #e5e7eb;

  background: #f5f7fa;
}

.note-footer a {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color: #3b6ea5;
  text-decoration: none;
}

.note-footer a:hover {
  text-decoration: underline;
}

.note-footer .material-symbols-outlined {
  font-size: 20px;
}

/* =========================================================
Scrollbar
========================================================= */

.note-content::-webkit-scrollbar {
  width: 8px;
}

.note-content::-webkit-scrollbar-track {
  background: transparent;
}

.note-content::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}

.note-content::-webkit-scrollbar-button,
.note-content::-webkit-scrollbar-button:start,
.note-content::-webkit-scrollbar-button:end,
.note-content::-webkit-scrollbar-button:vertical:start,
.note-content::-webkit-scrollbar-button:vertical:end,
.note-content::-webkit-scrollbar-button:single-button,
.note-content::-webkit-scrollbar-button:double-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.note-content.is-scrolling::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.55);
}

.note-content.is-scrolling::-webkit-scrollbar-thumb:hover {
  background: rgba(71, 85, 105, 0.75);
}

/* =========================================================
Task Lists
========================================================= */

ul.task-list {
  list-style: none;
  padding-left: 0;
}

ul.task-list > li.task-list-item {
  list-style: none;
}

/* =========================================================
Notes layout
========================================================= */

.notes-layout {
  --notes-sidebar-width: 18%;
  --metadata-sidebar-width: 18%;

  height: calc(100vh - 80px);

  display: grid;

  grid-template-columns:
    var(--notes-sidebar-width)
    minmax(0, 1fr)
    var(--metadata-sidebar-width);

  gap: 24px;

  min-height: 0;
  margin: 0 auto;
}

/* =========================================================
Left sidebar - Notes
========================================================= */

.notes-sidebar {
  min-width: 0;
  min-height: 0;

  overflow-y: auto;

  padding-right: 16px;

  border-right: 1px solid #e5e7eb;
}

.notes-sidebar h1 {
  margin-top: 0;
}

/* =========================================================
Notes tree
========================================================= */

.notes-tree {
  list-style: none;

  padding: 0;
  margin: 0;
}

/* =========================================================
Folder
========================================================= */

.tree-folder {
  margin: 0;
  padding: 0;
}

/* Folder button */

.tree-folder-toggle {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 6px;

  padding: 7px 8px;

  border: none;
  border-radius: 6px;

  background: transparent;

  color: #374151;

  font: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.tree-folder-toggle:hover {
  background: #e5e7eb;
}

/* Folder arrow */

.tree-folder-icon {
  width: 14px;

  flex-shrink: 0;

  color: #6b7280;

  font-size: 0.8rem;

  transition: transform 0.15s ease;
}

/* =========================================================
Folder children
========================================================= */

.tree-children {
  list-style: none;

  margin: 0;
  padding: 0 0 0 18px;
}

/* =========================================================
Collapsed folder
========================================================= */

.tree-folder.collapsed > .tree-children {
  display: none;
}

.tree-folder.collapsed > .tree-folder-toggle .tree-folder-icon {
  transform: rotate(-90deg);
}

/* =========================================================
Files
========================================================= */

.tree-file {
  margin: 2px 0;
}

.note-link {
  display: flex;
  align-items: center;

  gap: 6px;

  width: 100%;

  padding: 7px 8px;

  border-radius: 6px;

  color: #374151;

  text-decoration: none;

  white-space: nowrap;

  overflow: hidden;

  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.note-link:hover {
  background: #e5e7eb;
}

.note-link.active {
  background: #2563eb;

  color: white;
}

/* File icon */

.tree-file-icon {
  width: 18px;

  flex-shrink: 0;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  color: #6b7280;

  font-size: 17px;
}

.note-link.active .tree-file-icon {
  color: rgba(255, 255, 255, 0.85);
}

/* File name */

.tree-file-name {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* Empty state */

.notes-empty {
  padding: 8px;

  color: #9ca3af;

  font-size: 0.9rem;
}

/* =========================================================
Middle - Note viewer
========================================================= */

.note-viewer {
  min-width: 0;
  min-height: 0;

  overflow: hidden;
}

/* =========================================================
Right sidebar - Metadata
========================================================= */

.metadata-sidebar {
  min-width: 0;
  min-height: 0;

  overflow-y: auto;

  padding-left: 16px;

  border-left: 1px solid #e5e7eb;

  color: #6b7280;
}

.metadata-sidebar h2 {
  margin-top: 0;

  font-size: 0.95rem;
  font-weight: 600;

  color: #374151;
}

.metadata-placeholder {
  font-size: 0.875rem;
}

/* =========================================================
Empty state
========================================================= */

.note-placeholder {
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #9ca3af;
}

.note-error {
  padding: 20px;

  color: #b91c1c;
}

/* =========================================================
Markdown editor
========================================================= */

.note-editor {
  width: 100%;
  height: 100%;

  min-height: 400px;

  padding: 1.5rem 0;

  border: none;
  outline: none;

  background: transparent;

  color: #1f2937;

  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace;

  font-size: 0.95rem;
  line-height: 1.6;

  resize: none;
}

/* =========================================================
Dirty state
========================================================= */

.note.is-dirty .filename_title::after {
  content: " •";

  color: #f59e0b;
}

/* =========================================================
Plain text
========================================================= */

.text-content {
  margin: 0;

  white-space: pre-wrap;

  overflow-wrap: anywhere;

  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace;

  font-size: 0.95rem;
  line-height: 1.6;

  color: #1f2937;
}

/* =========================================================
Images
========================================================= */

.note-content img {
  display: block;

  width: auto;
  max-width: 100%;

  height: auto;

  max-height: calc(100vh - 180px);

  object-fit: contain;

  border-radius: 6px;
}

/* =========================================================
PDF
========================================================= */

.note-content iframe,
.note-content embed,
.note-content object {
  display: block;

  width: 100%;

  height: calc(100vh - 180px);

  min-height: 600px;

  border: none;
}

/* =========================================================
Metadata
========================================================= */

.metadata-content {
  font-size: 0.8rem;
}

.metadata-section {
  margin-bottom: 1.5rem;
}

.metadata-section h3 {
  margin: 0 0 0.75rem;

  font-size: 0.75rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.06em;

  color: #9ca3af;
}

.metadata-list {
  margin: 0;
}

.metadata-list > div {
  display: flex;
  flex-direction: column;

  gap: 2px;

  margin-bottom: 0.7rem;
}

.metadata-list dt {
  color: #9ca3af;

  font-size: 0.7rem;
}

.metadata-list dd {
  margin: 0;

  color: #374151;

  overflow-wrap: anywhere;
}

.metadata-placeholder {
  color: #9ca3af;
}

/* =========================================================
Responsive
========================================================= */

@media (max-width: 768px) {

  .navbar {
    width: 100%;
    height: auto;

    position: fixed;
    top: 0;
    left: 0;

    display: block;
  }

  .navbar-header {
    height: 64px;
  }

  .navbar-toggle {
    display: block;
  }

  .navbar-menu {
    display: none;

    padding: 8px 12px 16px;
  }

  .navbar-menu.open {
    display: flex;
  }

  main {
    margin-left: 0;

    padding: 88px 20px 30px;
  }

  .notes-layout {
    height: auto;

    grid-template-columns: 1fr;

    gap: 20px;
  }

  .notes-sidebar {
    max-height: 250px;

    padding-right: 0;
    padding-bottom: 20px;

    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  .note-viewer {
    min-height: 500px;
  }

  .note-header {
    width: 100%;
  }

  .filename_title {
    min-width: 0;
  }

  .note-actions {
    flex-shrink: 0;
  }

  .note-content img {
    max-width: 100%;
    max-height: none;
  }

  .note-content iframe,
  .note-content embed,
  .note-content object {
    width: 100%;
    height: 600px;
    min-height: 600px;
  }
}
.upload-controls { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.upload-controls input[type="text"] { box-sizing: border-box; width: 100%; }
#upload-status { overflow-wrap: anywhere; font-size: .9rem; }

/* Compact Material actions and selectable folder destinations */
.notes-sidebar-header {display:flex; align-items:center; justify-content:space-between; gap:12px;}
.notes-sidebar-header h1 {margin:0;}
.notes-toolbar {display:flex; gap:6px; position:relative;}
.material-button {display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; border-radius:12px; background:#e8eefc; color:#2563eb; cursor:pointer; transition:background .15s, box-shadow .15s;}
.material-button:hover {background:#dbe7ff; box-shadow:0 2px 6px #2563eb20;}
.material-button:focus-visible, .tree-folder-select:focus-visible, .tree-folder-toggle:focus-visible {outline:2px solid #2563eb; outline-offset:2px;}
.upload-menu {position:absolute; right:0; top:48px; z-index:20; min-width:210px; padding:6px; border:1px solid #e2e8f0; border-radius:12px; background:white; box-shadow:0 8px 24px #0f172a18;}
.upload-menu[hidden] {display:none;}
.upload-menu button {display:flex; align-items:center; gap:10px; width:100%; border:0; padding:10px; border-radius:8px; background:transparent; color:#334155; font:inherit; text-align:left; cursor:pointer;}
.upload-menu button:hover {background:#eff6ff;}
.selected-directory {font-size:.8rem; color:#64748b; overflow-wrap:anywhere; margin:12px 0;}
.tree-folder-row {display:flex; align-items:center; gap:2px;}
.tree-folder-toggle {width:28px; flex:0 0 28px; padding:7px 5px;}
.tree-folder-select {display:flex; align-items:center; gap:6px; flex:1; min-width:0; width:100%; border:0; border-radius:6px; padding:7px 8px; color:#374151; background:transparent; font:inherit; text-align:left; cursor:pointer; overflow-wrap:anywhere;}
.tree-folder-select .material-symbols-outlined {font-size:20px; flex-shrink:0;}
.tree-folder-select:hover {background:#e5e7eb;}
.tree-folder-select.active {background:#dbeafe; color:#1d4ed8;}
.tree-folder.collapsed > .tree-folder-row .tree-folder-icon {transform:rotate(-90deg);}
.tree-root {margin-bottom:4px;}
.frontmatter-table {width:100%; table-layout:fixed; border-collapse:collapse; margin:0 0 10px; font-size:.8rem;}
.frontmatter-key-column {width:35%;}
.frontmatter-action-column {width:26px;}
.frontmatter-table th {padding:4px 5px 7px; font-size:.7rem; font-weight:500; color:#94a3b8; text-align:left; border-bottom:1px solid #e2e8f0;}
.frontmatter-table td {padding:7px 4px; vertical-align:top; border-bottom:1px solid #e2e8f0;}
.frontmatter-field input, .frontmatter-field textarea, .frontmatter-field select {box-sizing:border-box; width:100%; min-width:0; border:1px solid transparent; border-radius:3px; padding:3px; font:inherit; color:#334155; background:transparent;}
.frontmatter-field input {color:#64748b;}
.frontmatter-field textarea {display:block; resize:vertical; min-height:28px;}
.frontmatter-field select {display:block; width:auto; max-width:100%; color:#94a3b8; font-size:.65rem; padding:1px;}
.frontmatter-field input:hover, .frontmatter-field textarea:hover, .frontmatter-field select:hover {border-color:#cbd5e1;}
.frontmatter-field input:focus, .frontmatter-field textarea:focus, .frontmatter-field select:focus {outline:1px solid #2563eb; border-color:#2563eb; background:#fff;}
.frontmatter-remove {display:flex; align-items:center; justify-content:center; border:0; padding:3px 0; background:transparent; color:#94a3b8; cursor:pointer;}
.frontmatter-remove .material-symbols-outlined {font-size:16px;}
.frontmatter-remove:hover {color:#b91c1c;}
.visually-hidden {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.frontmatter-actions {display:flex; flex-wrap:wrap; gap:6px;}
.frontmatter-actions button {border:1px solid #cbd5e1; border-radius:8px; padding:8px 10px; background:white; color:#334155; cursor:pointer;}
.frontmatter-actions button[type=submit] {background:#2563eb; color:white; border-color:#2563eb;}
.frontmatter-actions button:disabled {opacity:.5; cursor:default;}
#frontmatter-status {font-size:.8rem; overflow-wrap:anywhere;}
.standalone-note-layout {display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,280px); gap:24px;}
@media(max-width:800px) {.standalone-note-layout {grid-template-columns:1fr;}}

/* =========================================================
File actions bar (Upload / New / Rename / Move / Delete)
========================================================= */

.notes-file-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;

  margin: 0 0 8px;
  padding: 4px 6px;

  border-radius: 10px;
  background: #f1f5f9;
}

.file-actions-label {
  min-width: 0;
  flex: 1;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
}

.file-actions-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.file-actions-group {
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
}

.file-actions-divider {
  width: 1px;
  height: 20px;
  background: #cbd5e1;
  margin: 0 2px;
  flex-shrink: 0;
}

.file-actions-buttons .material-button {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.file-actions-buttons .material-button .material-symbols-outlined {
  font-size: 17px;
}

/* Upload dropdown — positioned relative to its group */
.file-actions-group .upload-menu {
  position: absolute;
  left: 0;
  top: 36px;
  z-index: 20;
  min-width: 200px;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: white;
  box-shadow: 0 8px 24px #0f172a18;
}

.file-actions-group .upload-menu[hidden] {
  display: none;
}

.file-actions-group .upload-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  padding: 10px;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.file-actions-group .upload-menu button:hover {
  background: #eff6ff;
}

.material-button:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}

.material-button:disabled:hover {
  background: #e8eefc;
  box-shadow: none;
}

.material-button-danger {
  color: #b91c1c;
  background: #fee2e2;
}

.material-button-danger:hover:not(:disabled) {
  background: #fecaca;
  box-shadow: 0 2px 6px #b91c1c20;
}

/* Selected folder highlight in tree */
.tree-folder-select.selected {
  background: #dbeafe;
  color: #1d4ed8;
  outline: 1px solid #93c5fd;
}

/* =========================================================
File type icon colors
========================================================= */

/* Markdown — light blue */
.tree-file-icon.icon-md {
  color: #0ea5e9;
}

/* Plain text — gray */
.tree-file-icon.icon-txt {
  color: #6b7280;
}

/* PDF — red */
.tree-file-icon.icon-pdf {
  color: #dc2626;
}

/* Images — purple */
.tree-file-icon.icon-png,
.tree-file-icon.icon-jpg,
.tree-file-icon.icon-jpeg,
.tree-file-icon.icon-gif,
.tree-file-icon.icon-webp {
  color: #9333ea;
}

/* Attachments (xlsx, docx, zip) — gray */
.tree-file-icon.icon-xlsx,
.tree-file-icon.icon-docx,
.tree-file-icon.icon-zip {
  color: #6b7280;
}

/* Folder icons — Windows Explorer yellow */
.tree-folder-icon {
  color: #eab308;
}

/* Active file link: keep icon color visible on blue background */
.note-link.active .tree-file-icon {
  color: rgba(255, 255, 255, 0.9);
}

/* =========================================================
Auth pages (Login / Register)
========================================================= */

.auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
  margin-left: 0;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 2.5rem 2rem;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.auth-card h1 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
}

.auth-subtitle {
  margin: 0 0 1.5rem;
  color: #6b7280;
  font-size: 0.9rem;
}

.auth-flash {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.auth-flash-error {
  background: #fee2e2;
  color: #b91c1c;
}

.auth-flash-success {
  background: #dcfce7;
  color: #15803d;
}

.auth-flash-info {
  background: #dbeafe;
  color: #1d4ed8;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.auth-field input {
  padding: 0.6rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s;
}

.auth-field input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px #2563eb20;
}

.auth-field small {
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 400;
}

.auth-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
}

.auth-submit {
  padding: 0.7rem;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.auth-submit:hover {
  background: #1d4ed8;
}

.auth-footer {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;
}

.auth-footer a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
}

.auth-footer a:hover {
  text-decoration: underline;
}

/* =========================================================
Navbar user section
========================================================= */

.navbar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #9ca3af;
  font-size: 0.9rem;
}

.navbar-username {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-link-logout {
  color: #9ca3af;
}

.nav-link-logout:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

/* =========================================================
Tree trailing menu toggle (⋮)
========================================================= */

.tree-file-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.tree-file-row .note-link {
  flex: 1;
  min-width: 0;
}

.tree-folder-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.tree-folder-row .tree-folder-select {
  flex: 1;
  min-width: 0;
}

.tree-item-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;
  flex-shrink: 0;

  border: none;
  border-radius: 6px;
  padding: 0;

  background: transparent;
  color: #94a3b8;

  cursor: pointer;

  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.tree-item-menu-toggle .material-symbols-outlined {
  font-size: 18px;
}

.tree-file-row:hover .tree-item-menu-toggle,
.tree-folder-row:hover .tree-item-menu-toggle,
.tree-item-menu-toggle:focus-visible,
.tree-item-menu-toggle[aria-expanded="true"] {
  opacity: 1;
}

.tree-item-menu-toggle:hover {
  background: #e5e7eb;
  color: #374151;
}

.tree-item-menu-toggle[aria-expanded="true"] {
  background: #dbeafe;
  color: #1d4ed8;
}

/* =========================================================
Tree context menu (dropdown)
========================================================= */

.tree-context-menu {
  position: fixed;
  z-index: 1000;

  min-width: 180px;
  padding: 6px;

  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.tree-context-menu[hidden] {
  display: none;
}

.ctx-action {
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  padding: 8px 10px;

  border: none;
  border-radius: 8px;
  background: transparent;

  color: #334155;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;

  cursor: pointer;

  transition: background-color 0.12s ease;
}

.ctx-action:hover {
  background: #eff6ff;
}

.ctx-action:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

.ctx-action .material-symbols-outlined {
  font-size: 18px;
  color: #64748b;
}

.ctx-action:hover .material-symbols-outlined {
  color: #2563eb;
}

.ctx-action-danger {
  color: #b91c1c;
}

.ctx-action-danger .material-symbols-outlined {
  color: #b91c1c;
}

.ctx-action-danger:hover {
  background: #fee2e2;
}

.ctx-divider {
  height: 1px;
  margin: 4px 6px;
  background: #e2e8f0;
}

.ctx-divider[hidden] {
  display: none;
}

/* =========================================================
Mermaid diagrams
========================================================= */

/*
 * Block-Container (kein flex!):
 * Mermaid misst die verfügbare Breite am
 * Container. Bei display:flex skaliert
 * z.B. das Gantt-Diagramm nicht mit und
 * wird zu schmal dargestellt.
 */

.mermaid {
  margin: 1.5rem 0;
  overflow-x: auto;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* =========================================================
Chart.js charts
========================================================= */

.chart-container {
  position: relative;
  max-width: 800px;
  margin: 1.5rem auto;
  padding: 1rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.chart-container canvas {
  max-width: 100%;
}

.chart-error {
  padding: 1rem;
  margin: 1rem 0;
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 8px;
  font-size: 0.875rem;
}