/* Stage 4 Organisation B6 — Wissen & Notizen.
   Scope: notebook tabs, section navigation, page list, note editor and note metadata surfaces.
   Behavior and DOM remain unchanged. */

.tool-organisation .notes-workspace {
  display: grid;
  min-width: 0;
  gap: var(--zg-space-4);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tool-organisation .notes-toolbar {
  gap: var(--zg-toolbar-gap);
  padding: var(--zg-card-padding);
  overflow: hidden;
  border: 1px solid var(--zg-border-soft);
  border-radius: var(--zg-radius-lg);
  background: var(--zg-surface-card);
  box-shadow: var(--zg-shadow-soft);
}

.tool-organisation .notes-toolbar strong {
  color: var(--zg-text-muted);
  font-size: var(--zg-font-caption);
  letter-spacing: .06em;
}

.tool-organisation .notebook-tabs {
  gap: var(--zg-space-2);
}

.tool-organisation .notebook-tabs button {
  min-height: var(--zg-input-height-compact);
  padding: 0 var(--zg-space-4);
  border: 1px solid var(--zg-border-soft);
  border-radius: var(--zg-radius-md);
  background: var(--zg-surface-card);
  color: var(--zg-text-secondary);
  font-size: var(--zg-font-body-sm);
  font-weight: 600;
}

.tool-organisation .notebook-tabs button:hover {
  border-color: var(--zg-accent-border);
  background: var(--zg-surface-hover);
}

.tool-organisation .notebook-tabs button.is-active {
  border-color: var(--notebook-color, var(--zg-accent-primary));
  background: var(--zg-surface-subtle);
  color: var(--zg-text-primary);
  box-shadow: inset 0 -2px var(--notebook-color, var(--zg-accent-primary));
}

.tool-organisation .notebook-tabs button::before {
  background: var(--notebook-color, var(--zg-accent-primary));
}

.tool-organisation .notebook-more > summary {
  border: 1px solid var(--zg-border-soft);
  border-radius: var(--zg-radius-md);
  background: var(--zg-surface-card);
  color: var(--zg-text-muted);
}

.tool-organisation .notebook-more > summary:hover {
  border-color: var(--zg-accent-border);
  background: var(--zg-surface-hover);
  color: var(--zg-accent-primary);
}

.tool-organisation .notebook-more > div {
  border: 1px solid var(--zg-border-soft);
  border-radius: var(--zg-radius-lg);
  background: var(--zg-surface-floating);
  box-shadow: var(--zg-shadow-floating);
}

.tool-organisation .notebook-more > div button {
  color: var(--zg-text-secondary);
}

.tool-organisation .notebook-more > div button:hover {
  background: var(--zg-surface-hover);
}

.tool-organisation .note-sections {
  gap: var(--zg-space-1);
  min-height: 52px;
  padding: var(--zg-space-2) var(--zg-card-padding);
  border-bottom: 1px solid var(--zg-border-soft);
  background: var(--zg-surface-subtle);
}

.tool-organisation .note-sections > span {
  color: var(--zg-text-muted);
  font-size: var(--zg-font-caption);
  letter-spacing: .05em;
}

.tool-organisation .note-sections button {
  min-height: 34px;
  padding: 0 var(--zg-space-3);
  border-radius: var(--zg-radius-sm);
  color: var(--zg-text-muted);
  font-size: var(--zg-font-caption);
  font-weight: 600;
}

.tool-organisation .note-sections button:hover {
  background: var(--zg-surface-hover);
  color: var(--zg-text-secondary);
}

.tool-organisation .note-sections button.is-active {
  background: var(--zg-surface-card);
  color: var(--zg-accent-primary);
  box-shadow: var(--zg-shadow-soft);
}

.tool-organisation .notes-body {
  min-width: 0;
  gap: var(--zg-space-4);
  background: transparent;
}

.tool-organisation .note-pages {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--zg-border-soft);
  border-radius: var(--zg-radius-lg);
  background: var(--zg-surface-card);
  box-shadow: var(--zg-shadow-soft);
}

.tool-organisation .note-search {
  padding: var(--zg-space-3);
}

.tool-organisation .note-search input {
  min-height: var(--zg-input-height-compact);
  padding: 0 var(--zg-space-3);
  border: 1px solid var(--zg-border-default);
  border-radius: var(--zg-radius-md);
  background: var(--zg-surface-card);
  color: var(--zg-text-primary);
}

.tool-organisation .note-search input::placeholder {
  color: var(--zg-text-muted);
}

.tool-organisation .note-search input:focus,
.tool-organisation .note-metadata select:focus,
.tool-organisation .color-hex-control input:focus {
  border-color: var(--zg-accent-primary);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zg-accent-primary) 18%, transparent);
}

.tool-organisation .note-new-page {
  min-height: var(--zg-input-height-compact);
  margin: 0 var(--zg-space-3) var(--zg-space-3);
  padding: 0 var(--zg-space-4);
  border: 1px solid var(--zg-accent-border);
  border-radius: var(--zg-radius-md);
  background: var(--zg-surface-card);
  color: var(--zg-accent-primary);
  box-shadow: none;
  font-weight: 600;
}

.tool-organisation .note-new-page:hover {
  background: var(--zg-surface-hover);
}

.tool-organisation .note-archive-switch {
  gap: var(--zg-space-1);
  margin: 0 var(--zg-space-3) var(--zg-space-2);
  padding: var(--zg-space-1);
  border: 1px solid var(--zg-border-soft);
  border-radius: var(--zg-radius-md);
  background: var(--zg-surface-card);
}

.tool-organisation .note-archive-switch button {
  color: var(--zg-text-muted);
}

.tool-organisation .note-archive-switch button.is-active {
  background: var(--zg-accent-secondary);
  color: var(--zg-accent-primary);
}

.tool-organisation .note-page-list button {
  gap: var(--zg-space-1);
  padding: var(--zg-space-3) var(--zg-space-4);
  border-top: 1px solid var(--zg-border-soft);
  border-left: var(--zg-space-1) solid var(--page-color, var(--zg-accent-primary));
  background: transparent;
  color: var(--zg-text-secondary);
}

.tool-organisation .note-page-list button:hover {
  background: var(--zg-surface-hover);
}

.tool-organisation .note-page-list button.is-active {
  background: var(--zg-accent-secondary);
  box-shadow: none;
}

.tool-organisation .note-page-list button:focus-visible {
  outline: var(--zg-selection-focus-width) solid var(--zg-focus-ring);
  outline-offset: calc(-1 * var(--zg-selection-focus-width));
}

.tool-organisation .note-page-list strong {
  color: var(--zg-text-primary);
  font-size: var(--zg-font-body-sm);
}

.tool-organisation .note-page-list small,
.tool-organisation .note-page-list time {
  color: var(--zg-text-muted);
}

.tool-organisation .note-editor {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--zg-border-soft);
  border-radius: var(--zg-radius-lg);
  background: var(--zg-surface-card);
  box-shadow: var(--zg-shadow-soft);
}

.tool-organisation .notes-workspace > .note-sections,
.tool-organisation .notes-workspace > .notes-empty,
.tool-organisation .notes-body > .notes-empty {
  overflow: hidden;
  border: 1px solid var(--zg-border-soft);
  border-radius: var(--zg-radius-lg);
  background: var(--zg-surface-card);
  box-shadow: var(--zg-shadow-soft);
}

.tool-organisation .note-editor > header {
  gap: var(--zg-space-3);
  padding: var(--zg-card-padding);
  border-bottom: 1px solid var(--zg-border-soft);
  background: var(--zg-surface-card);
}

.tool-organisation .note-editor > header p {
  color: var(--zg-text-muted);
  font-size: var(--zg-font-caption);
}

.tool-organisation .note-editor > header input {
  padding-left: var(--zg-space-3);
  border-left: 4px solid var(--page-color, var(--zg-accent-primary));
  color: var(--zg-text-primary);
  font-family: inherit;
  font-size: var(--zg-font-h2);
  font-weight: 700;
  line-height: var(--zg-line-height-heading);
}

.tool-organisation .note-save-state {
  color: var(--zg-state-success);
  font-size: var(--zg-font-caption);
  font-weight: 600;
}

.tool-organisation .note-settings-button,
.tool-organisation .note-delete-icon {
  border-color: var(--zg-border-default) !important;
  background: var(--zg-surface-card) !important;
  color: var(--zg-text-muted) !important;
}

.tool-organisation .note-settings-button:hover,
.tool-organisation .note-settings-button.is-active {
  border-color: var(--page-color, var(--zg-accent-primary));
  background: var(--zg-surface-hover);
  color: var(--zg-text-primary);
}

.tool-organisation .note-delete-icon:hover {
  border-color: var(--zg-state-danger) !important;
  background: var(--zg-state-danger-soft) !important;
  color: var(--zg-state-danger) !important;
}

.tool-organisation .note-editor > textarea,
.tool-organisation .note-rte-host {
  background: var(--zg-surface-card);
  color: var(--zg-text-primary);
}

.tool-organisation .note-editor > textarea {
  padding: var(--zg-card-padding-lg);
  font-family: inherit;
  font-size: var(--zg-font-body-sm);
  line-height: 1.75;
}

.tool-organisation .note-rte-host {
  margin: 0 var(--zg-card-padding) var(--zg-card-padding);
  border: 1px solid var(--zg-border-soft);
  border-radius: var(--zg-radius-lg);
}

.tool-organisation .note-metadata {
  border: 1px solid var(--zg-border-soft);
  border-radius: var(--zg-radius-lg);
  background: var(--zg-surface-floating);
  box-shadow: var(--zg-shadow-floating);
}

.tool-organisation .note-metadata::before {
  color: var(--zg-text-primary);
  font-size: var(--zg-font-body-sm);
}

.tool-organisation .note-metadata label,
.tool-organisation .note-metadata summary {
  color: var(--zg-text-muted);
  font-size: var(--zg-font-caption);
}

.tool-organisation .note-metadata select,
.tool-organisation .color-hex-control input {
  min-height: var(--zg-input-height-compact);
  border: 1px solid var(--zg-border-default);
  border-radius: var(--zg-radius-md);
  background: var(--zg-surface-card);
  color: var(--zg-text-primary);
}

.tool-organisation .note-editor > footer {
  gap: var(--zg-space-3);
  padding: var(--zg-space-3) var(--zg-card-padding);
  border-top: 1px solid var(--zg-border-soft);
  background: var(--zg-surface-subtle);
}

.tool-organisation .note-editor > footer span {
  color: var(--zg-text-muted);
  font-size: var(--zg-font-caption);
}

.tool-organisation .notes-empty {
  color: var(--zg-text-muted);
}

.tool-organisation .notes-empty strong {
  color: var(--zg-text-primary);
}

.tool-organisation .note-delete-dialog > p {
  color: var(--zg-text-muted);
}

.tool-organisation .delete-warning-icon {
  background: var(--zg-state-danger-soft);
  color: var(--zg-state-danger);
}

.tool-organisation .delete-ack {
  border-color: color-mix(in srgb, var(--zg-state-danger) 24%, white);
  background: color-mix(in srgb, var(--zg-state-danger-soft) 55%, white);
}

@media (max-width: 900px) {
  .tool-organisation .notes-workspace,
  .tool-organisation .notes-body {
    gap: var(--zg-space-3);
  }

  .tool-organisation .notes-body {
    grid-template-columns: 250px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .tool-organisation .notes-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .tool-organisation .notebook-tabs {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
  }

  .tool-organisation .notes-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zg-space-3);
  }

  .tool-organisation .note-pages {
    border: 1px solid var(--zg-border-soft);
  }

  .tool-organisation .note-page-list {
    max-height: 260px;
  }

  .tool-organisation .note-editor > header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .tool-organisation .note-editor > header > div:first-child {
    width: 100%;
    flex-basis: 100%;
  }

  .tool-organisation .note-editor > header input {
    font-size: var(--zg-font-h3);
  }

  .tool-organisation .note-editor > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .tool-organisation .note-editor > footer .button {
    width: 100%;
  }

  .tool-organisation .note-metadata {
    right: var(--zg-space-3);
    left: var(--zg-space-3);
    width: auto;
    max-height: calc(100vh - 110px);
  }
}

@media (max-width: 430px) {
  .tool-organisation .notes-toolbar,
  .tool-organisation .note-sections,
  .tool-organisation .note-editor > header,
  .tool-organisation .note-editor > footer {
    padding-inline: var(--zg-space-3);
  }

  .tool-organisation .notebook-tabs button {
    padding-inline: var(--zg-space-3);
  }

  .tool-organisation .note-sections {
    padding-inline: var(--zg-space-3);
  }
}