/**
 * Obsidian theme: semantic aliases, third-party overrides, and surface fixes.
 * Uses --th-* tokens from base.html.
 */

:root,
.dark {
  --surface-canvas: var(--th-canvas);
  --surface-base: var(--th-panel);
  --surface-raised: var(--th-card);
  --surface-elevated: var(--th-surface-elevated);
  --surface-inset: var(--th-surface-inset);
  --surface-input: var(--th-surface-inset);
  --surface-overlay: rgba(7, 7, 9, 0.82);
  --border-subtle: var(--th-border-subtle);
  --border-default: var(--th-border-default);
  --border-strong: var(--th-border-strong);
  --text-primary: var(--th-text-primary);
  --text-secondary: var(--th-text-secondary);
  --text-tertiary: var(--th-text-tertiary);
  --interactive-hover: rgba(255, 255, 255, 0.045);
  --interactive-active: rgba(255, 255, 255, 0.08);
  --focus-ring: var(--th-border-highlight);
  --backdrop: rgba(7, 7, 9, 0.78);
  --shadow-overlay: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --accent-interactive: var(--th-accent-ivory);
  --accent-muted: var(--th-accent-steel);
}

/* Profile tab switches (Workload / Skills / Growth) */
.profile-tab-rail {
  z-index: 2;
}

.profile-tab-workspace,
.profile-top-command-row {
  min-width: 0;
}

.profile-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.profile-tab-btn-inactive {
  color: var(--text-tertiary);
}

.profile-tab-btn-inactive:hover {
  color: var(--text-primary);
  background: var(--interactive-hover);
  border-color: var(--border-subtle);
}

.profile-tab-btn-active {
  color: var(--accent-muted);
  background: var(--interactive-active);
  border-color: var(--border-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.profile-tab-btn-active [data-lucide],
.profile-tab-btn-active svg {
  color: var(--accent-muted);
}

/* History feed cards */
.history-feed-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: 1rem;
  padding: 0.625rem 1rem;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.history-feed-card .history-feed-main > p.text-sm {
  margin-top: 0.25rem;
}

.history-feed-card .history-feed-main > p.text-xs.font-mono {
  margin-top: 0.25rem;
}

.history-feed-card .history-feed-meta {
  margin-top: 0.5rem;
  gap: 0.625rem;
}

.history-feed-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-elevated);
}

.history-feed-card:has([data-history-main-link]:focus-visible) {
  border-color: var(--th-border-highlight, rgba(244, 243, 238, 0.22));
  box-shadow: 0 0 0 2px rgba(234, 232, 223, 0.18);
}

.history-feed-badge {
  background: var(--interactive-active);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.history-feed-action-badge {
  background: rgba(234, 232, 223, 0.08);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}

.history-feed-link {
  color: var(--accent-muted);
}

.history-feed-link:hover {
  color: var(--text-primary);
}

/* Soft focus flash for History deep-links into entity fields/comments */
.nf-entity-focus-flash {
  border-radius: 0.75rem;
  outline: none;
  box-shadow: none;
  animation: nf-entity-focus-flash 2s ease-in-out;
}

@keyframes nf-entity-focus-flash {
  0% {
    background-color: rgba(234, 232, 223, 0);
    box-shadow:
      inset 0 0 0 0 rgba(234, 232, 223, 0),
      inset 0 0 0 rgba(234, 232, 223, 0),
      0 0 0 0 rgba(234, 232, 223, 0);
  }
  14% {
    background-color: rgba(234, 232, 223, 0.18);
    box-shadow:
      inset 0 0 0 1px rgba(234, 232, 223, 0.42),
      inset 0 0 28px rgba(234, 232, 223, 0.1),
      0 0 0 1px rgba(234, 232, 223, 0.24);
  }
  72% {
    background-color: rgba(234, 232, 223, 0.13);
    box-shadow:
      inset 0 0 0 1px rgba(234, 232, 223, 0.34),
      inset 0 0 22px rgba(234, 232, 223, 0.07),
      0 0 0 1px rgba(234, 232, 223, 0.18);
  }
  100% {
    background-color: transparent;
    box-shadow:
      inset 0 0 0 0 rgba(234, 232, 223, 0),
      inset 0 0 0 rgba(234, 232, 223, 0),
      0 0 0 0 rgba(234, 232, 223, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nf-entity-focus-flash {
    animation: none;
    background-color: rgba(234, 232, 223, 0.16);
    box-shadow:
      inset 0 0 0 1px rgba(234, 232, 223, 0.38),
      inset 0 0 20px rgba(234, 232, 223, 0.08);
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
  }
}

/* QA Review: flash the source queue row after closing an item opened from the queue */
.qa-review-row-return-flash {
  background-color: rgba(240, 180, 255, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(240, 180, 255, 0.35);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
  pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .qa-review-row-return-flash {
    animation: qa-review-row-return-flash 2s ease-in-out;
  }
}

@keyframes qa-review-row-return-flash {
  0% {
    background-color: rgba(240, 180, 255, 0);
    box-shadow: inset 0 0 0 0 rgba(240, 180, 255, 0);
  }
  12% {
    background-color: rgba(240, 180, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(240, 180, 255, 0.42);
  }
  70% {
    background-color: rgba(240, 180, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(240, 180, 255, 0.3);
  }
  100% {
    background-color: transparent;
    box-shadow: inset 0 0 0 0 rgba(240, 180, 255, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qa-review-row-return-flash {
    animation: none;
    background-color: rgba(240, 180, 255, 0.16) !important;
    box-shadow: inset 0 0 0 1px rgba(240, 180, 255, 0.35);
  }
}

/* Task completion questionnaire overlay */
.task-completion-scrim {
  background: var(--backdrop);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.task-completion-sheet {
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-overlay);
}

.task-completion-chip {
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}

.task-completion-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--interactive-hover);
}

.task-completion-primary-btn {
  background: rgba(244, 243, 238, 0.12);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}

.task-completion-primary-btn:hover {
  background: rgba(244, 243, 238, 0.18);
  border-color: var(--focus-ring);
}

/* Native date inputs */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
.flatpickr-input {
  color-scheme: dark;
}

.neurofy-date-field input[type="date"],
.neurofy-date-field input.flatpickr-input {
  background-color: var(--surface-input);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.neurofy-date-field input[type="date"]:focus,
.neurofy-date-field input.flatpickr-input:focus {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 1px rgba(244, 243, 238, 0.12);
}

/* Flatpickr calendar */
.flatpickr-calendar {
  background: var(--surface-base) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 1rem !important;
  box-shadow: var(--shadow-overlay) !important;
  padding: 0.35rem !important;
}

.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--text-primary) !important;
  background: transparent !important;
}

span.flatpickr-weekday {
  color: var(--text-secondary) !important;
}

.flatpickr-day {
  color: var(--text-primary) !important;
  border-radius: 0.75rem !important;
  border: none !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--interactive-hover) !important;
  color: var(--text-primary) !important;
}

.flatpickr-day.today {
  border: 1px solid var(--border-strong) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--interactive-active) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--focus-ring) !important;
  box-shadow: none !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--text-tertiary) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--text-secondary) !important;
  fill: var(--text-secondary) !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: var(--text-primary) !important;
  fill: var(--text-primary) !important;
}

/* TipTap / ProseMirror */
.neurofy-editor-wrapper.has-toolbar {
  border-color: var(--border-default);
  background: var(--surface-input);
}

.tiptap.ProseMirror {
  color: var(--text-primary);
  background-color: var(--surface-input);
  border-color: var(--border-default);
}

.tiptap.ProseMirror:focus {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 1px rgba(244, 243, 238, 0.1);
}

.tiptap p.is-editor-empty:first-child::before {
  color: var(--text-tertiary);
}

.neurofy-editor-toolbar .neurofy-toolbar-btn.is-active,
.neurofy-editor-toolbar .neurofy-toolbar-btn:active {
  color: var(--text-primary);
  background: var(--interactive-active);
}

.tiptap blockquote {
  border-left-color: var(--border-strong);
  background: var(--interactive-hover);
  color: var(--text-secondary);
}

.tiptap code {
  background: var(--surface-elevated);
  color: var(--accent-muted);
  border: 1px solid var(--border-subtle);
}

.tiptap pre {
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
}

.tiptap pre code {
  color: var(--text-primary);
}

.tiptap th,
.tiptap td {
  border-color: var(--border-default);
}

.tiptap th {
  background: var(--surface-elevated);
}

.tiptap td.selectedCell,
.tiptap th.selectedCell {
  background: var(--interactive-active);
}

.tiptap ul[data-type="taskList"] li[data-type="taskItem"] > label input[type="checkbox"] {
  border-color: var(--border-strong);
  background: var(--surface-inset);
}

.tiptap ul[data-type="taskList"] li[data-type="taskItem"] > label input[type="checkbox"]:checked {
  background: var(--interactive-active);
  border-color: var(--focus-ring);
}

.tiptap .mention-chip,
.tiptap a {
  color: var(--accent-muted);
}

.tiptap ::selection {
  background: rgba(244, 243, 238, 0.14);
}

/* Dropzone */
.neurofy-dropzone-host {
  border-color: var(--border-default);
  background: rgba(11, 12, 14, 0.72);
  backdrop-filter: blur(8px);
}

.neurofy-dropzone-host.dz-drag-hover,
.neurofy-dropzone-host:hover,
.neurofy-dropzone-host.is-drag-active {
  border-color: var(--border-strong);
  background: var(--interactive-hover);
}

.neurofy-dropzone-host .dz-upload {
  background: linear-gradient(90deg, rgba(234, 232, 223, 0.35), rgba(240, 180, 255, 0.45));
}

.neurofy-dropzone-host.neurofy-dropzone-avatar {
  border-color: var(--border-default);
  background: var(--surface-input);
}

.neurofy-dropzone-host.neurofy-dropzone-avatar.dz-drag-hover,
.neurofy-dropzone-host.neurofy-dropzone-avatar:hover {
  border-color: var(--border-strong);
  background: var(--interactive-hover);
}

/* ui-patterns dropzone + prompt editor */
.neurofy-dropzone-host::before {
  background:
    linear-gradient(to bottom, rgba(234, 232, 223, 0.06), transparent 28%),
    linear-gradient(to top, rgba(240, 180, 255, 0.05), transparent 28%);
}

.neurofy-dropzone-host.dz-drag-hover,
.neurofy-dropzone-host.is-drag-active {
  border-color: var(--border-strong);
  background: var(--interactive-hover);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.neurofy-editor-wrapper.neurofy-prompt-field {
  border-color: var(--border-default);
  background: var(--surface-input);
}

.neurofy-editor-wrapper.neurofy-prompt-field.is-focused {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 1px rgba(244, 243, 238, 0.1), 0 8px 24px rgba(0, 0, 0, 0.35);
  background: var(--surface-base);
}

.neurofy-dropzone-host .dz-upload-percent {
  color: var(--accent-muted);
}

/* Suggestion drawer */
#suggestion-drawer-backdrop {
  background: var(--backdrop) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#suggestion-drawer-panel {
  background: var(--surface-base) !important;
  border-left-color: var(--border-default) !important;
}

#suggestion-drawer:not(.hidden) #suggestion-drawer-panel.translate-x-0 {
  transform: translateX(0) !important;
}

@media (min-width: 640px) {
  #suggestion-drawer-panel {
    width: 35vw !important;
    max-width: 35vw !important;
  }
}

/* Legacy drawflow (roadmap fallback) */
.drawflow .drawflow-node .input.has-connection:hover {
  background: var(--accent-muted) !important;
  box-shadow: 0 0 8px rgba(240, 180, 255, 0.25) !important;
}