/**
 * Base Obsidian theme CSS classes.
 *
 * Obsidian plugins render DOM using Obsidian's CSS class conventions
 * (.nav-file, .tree-item, .setting-item, etc.). These classes are
 * styled by Obsidian's built-in theme. Reams provides this minimal
 * base theme so plugin views look visually consistent with the native
 * Reams file tree sidebar (FileTreeItem.css).
 *
 * Values use Reams' CSS variables where defined (--text-primary,
 * --text-secondary, etc. from index.css) with inline rgba() fallbacks
 * for variables not yet in the global scope (--file-tree-hover-bg,
 * --file-tree-active-bg). NOT from Obsidian's variable namespace.
 *
 * Only includes classes actually used by validated plugins.
 * Add more as new plugins are tested.
 */

/* ── Tree items & Nav files ──
   .tree-item-self and .nav-file-title share identical layout styles.
   Plugins use both interchangeably (e.g. Recent Files uses both classes
   on the same element). Grouped here to avoid duplication. */

.tree-item {
  position: relative;
}

.tree-item-self,
.nav-file-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  border-radius: 0;
  user-select: none;
  -webkit-user-select: none;
  font-size: 0.875rem;
  color: var(--text-primary);
  transition: background-color 0.1s ease;
}

.tree-item-self:hover,
.nav-file-title:hover {
  background-color: var(--file-tree-hover-bg, rgba(255, 255, 255, 0.05));
}

.tree-item-self.is-active,
.nav-file-title.is-active {
  background-color: var(--file-tree-active-bg, rgba(74, 158, 255, 0.15));
}

.tree-item-self.is-active:hover,
.nav-file-title.is-active:hover {
  background-color: var(--file-tree-active-bg, rgba(74, 158, 255, 0.2));
}

.tree-item-inner,
.nav-file-title-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .tree-item-inner may contain sub-elements (icons + text spans), so it
   needs display: flex for icon + text alignment. */
.tree-item-inner {
  display: flex;
  align-items: center;
}

/* When both .tree-item-inner and .nav-file-title-content are on the same
   element (common in plugins like Recent Files), the flex display from
   .tree-item-inner breaks text-overflow: ellipsis for bare text nodes.
   Override back to block so "..." renders correctly — but only when the
   element has no child elements (text-only). Plugins that put icons +
   text spans inside still get display: flex for proper alignment. */
.tree-item-inner.nav-file-title-content:not(:has(> *)) {
  display: block;
}

.tree-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.tree-item-flair {
  font-size: 11px;
  opacity: 0.6;
  margin-left: 4px;
  flex-shrink: 0;
}

/* Spacer pushes trailing items (delete button) to the right edge.
   flex-grow: 1 fills all remaining space after .tree-item-inner's
   natural text width, pushing the delete button to the far right. */
.tree-item-spacer {
  flex-grow: 1;
}

.tree-item-children {
  padding-left: 12px;
}

/* ── Nav folder structure ── */

.nav-folder.mod-root {
  padding: 4px;
}

.nav-folder-children {
  display: flex;
  flex-direction: column;
}

.nav-file {
  position: relative;
}

.nav-file-tag {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 4px;
  flex-shrink: 0;
}

/* ── Delete/action buttons on tree/nav file items ──
   Scoped to tree-item / nav-file contexts to avoid conflicting with the
   generic .menu-item-icon (18×18) defined in obsidian-ui.css for menus. */

.tree-item-self .menu-item-icon,
.nav-file-title .menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-tertiary);
  border-radius: 0;
  transition: opacity 0.1s ease, background-color 0.1s ease;
}

.tree-item-self .menu-item-icon svg,
.nav-file-title .menu-item-icon svg {
  width: 14px;
  height: 14px;
}

.tree-item-self .menu-item-icon:hover,
.nav-file-title .menu-item-icon:hover {
  background-color: var(--file-tree-hover-bg, rgba(255, 255, 255, 0.1));
  color: var(--text-primary);
}

/* ── View content containers ── */

.view-content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.view-content-inner {
  min-height: 100%;
}

/* Setting items are defined in obsidian-ui.css (the canonical location).
   Do NOT duplicate .setting-item rules here — it causes double-border
   and property-conflict bugs due to load-order sensitivity. */

/* ── Clickable modifier ── */
.is-clickable {
  cursor: pointer;
}

/* ── Recent Files plugin overrides ──
   The plugin sets justify-content: flex-start and align-items: unset,
   which conflicts with our flex layout defaults. Override with higher
   specificity to ensure alignment matches the native file tree.
   Note: the plugin's .tree-item-spacer (flex-grow: 1) still grows to
   fill remaining space, but its effect is cosmetically irrelevant once
   the delete button is absolutely positioned and removed from flow. */

.tree-item-self.recent-files-title {
  /* Establish positioning context for the absolutely-positioned delete button */
  position: relative;
  /* Override plugin's align-items: unset to match Reams' flex layout */
  align-items: center;
  /* Reserve space for the delete button on the right edge */
  padding-right: 1.75rem;
}

/* The plugin creates a .tree-item-spacer (flex-grow: 1) to push the delete
   button right. Since we position the delete button absolutely, the spacer
   only steals space from the text content. Collapse it. */
.recent-files-title .tree-item-spacer {
  display: none;
}

/* Position the delete button absolutely so it sits at the right edge
   regardless of content length, matching the native file tree's action button */
.recent-files-title .recent-files-file-delete {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  /* Override the plugin's display: none — we control visibility ourselves */
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

/* Specificity (0,4,0) beats the plugin's hover rule (0,3,0) which loads
   later in the cascade via dynamically injected <style> element. */
.tree-item-self.recent-files-title:hover .recent-files-file-delete,
.tree-item-self.recent-files-title:focus-within .recent-files-file-delete {
  opacity: 1;
  pointer-events: auto;
}

/* ── Mobile touch targets ── */
@media (pointer: coarse) {
  .tree-item-self,
  .nav-file-title {
    min-height: 44px;
    padding: 0.5rem;
  }

  /* Only reserve extra right padding on items that actually have
     an absolutely-positioned action button. Avoids a dead zone
     on plugin items that don't use action buttons. */
  .tree-item-self.recent-files-title {
    padding-right: 2.5rem;
  }

  /* Mobile: always show the delete button (no hover on touch) */
  .recent-files-title .recent-files-file-delete {
    opacity: 1;
    pointer-events: auto;
    right: 0.5rem;
    width: 28px;
    height: 28px;
  }
}