/*
Notebook Navigator - Plugin for Obsidian
Copyright (c) 2025-2026 Johan Sanneblad

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.

=========================================================================
GENERATED FILE - DO NOT EDIT styles.css
=========================================================================

Edit the CSS sources instead:
- src/styles/index.css (import order + per-file descriptions)
- src/styles/sections/*

Generated by: scripts/build-styles.mjs
*/
/* Source: src/styles/sections/core-variables.css */

/* ========================================================================
   CSS Variables - Defined at body level for Style Settings compatibility
   ======================================================================== */

/* Utility class for text that should only be exposed to assistive tech */
.nn-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;
}

/**
 * Hidden element used to resolve CSS variable colors to computed RGBA values.
 * Positioned offscreen and invisible to avoid layout impact while allowing getComputedStyle access.
 */
.nn-color-resolver {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    z-index: -1;
    margin: 0;
    padding: 0;
    color: var(--nn-color-resolver-value, transparent);
    background-color: var(--nn-color-resolver-value, transparent);
}

body {
    /* ========================================================================
       Padding Variables for Items and Containers
       ======================================================================== */

    /* Container/Scroller padding */
    --nn-scroller-padding: 10px; /* Horizontal padding for scroll containers */

    /* Navigation item padding */
    --nn-nav-item-padding-horizontal: 8px; /* Horizontal padding for navigation items */

    /* File item padding */
    --nn-file-item-padding-horizontal: 12px; /* Horizontal padding for file items and date headers */
    --nn-file-row-gap: 4px; /* Gap between columns inside a file row */
    --nn-file-icon-size: 16px; /* Leading icon size for file rows and pinned headers */
    --nn-file-icon-slot-width: var(--nn-file-icon-size); /* Leading icon slot width */
    --nn-file-icon-slot-gap: 6px; /* Space between leading icon slot and text (matches pinned header) */
    --nn-file-name-size-mobile: var(--nn-file-name-size); /* Mobile font size override */
    --nn-file-small-size-mobile: var(--nn-file-small-size); /* Mobile small font override */
    --nn-file-padding-vertical-mobile: var(--nn-file-padding-vertical); /* Mobile padding per side */
    --nn-file-padding-total-mobile: var(--nn-file-padding-total); /* Mobile total padding */
    --nn-file-icon-size-mobile: var(--nn-file-icon-size); /* Mobile icon size */
    --nn-file-icon-slot-width-mobile: var(--nn-file-icon-slot-width); /* Mobile icon slot width */

    /* ========================================================================
       Fixed Height Variables for Pixel-Perfect Rendering
       ======================================================================== */

    /* File item heights - fixed pixel values to prevent fractional rendering */
    --nn-file-title-line-height: 20px; /* Height of file title text */
    --nn-file-padding-vertical: 8px; /* 8px */
    --nn-file-padding-vertical-compact: 4px; /* Desktop compact mode padding */
    --nn-file-padding-vertical-compact-mobile: 8px; /* Mobile compact mode padding */
    --nn-file-padding-total: calc(var(--nn-file-padding-vertical) * 2); /* Total vertical padding (top + bottom) */
    --nn-file-single-text-line-height: 19px; /* Height for single-line text (metadata, date, or single preview) */
    --nn-file-multiline-text-line-height: 18px; /* Height for multi-line preview text */
    --nn-file-title-line-height-mobile: 21px; /* Mobile title text height */
    --nn-file-single-text-line-height-mobile: 20px; /* Mobile single-line text height */
    --nn-file-multiline-text-line-height-mobile: 19px; /* Mobile preview text height */
    --nn-file-thumbnail-min-size: 42px; /* Minimum size for file thumbnails */
    --nn-file-thumbnail-max-size: 64px; /* Maximum size for file thumbnails */

    /* Font sizes - fixed pixel values to prevent scaling with Obsidian font size */
    --nn-file-name-size: 14px; /* Fixed 14px */
    --nn-file-small-size: 13px; /* Fixed 13px */
    --nn-compact-font-size: 13px; /* Compact mode desktop font size */
    --nn-compact-font-size-mobile: 15px; /* Compact mode mobile font size */

    /* List group header heights and spacing */
    --nn-list-group-header-height: 27px; /* Header row and sticky header */
    --nn-list-group-progress-gap-after: 5px; /* Space below manual sort progress bars */
    --nn-list-group-goal-header-height: calc(var(--nn-list-group-header-height) + var(--nn-list-group-progress-gap-after));
    --nn-list-group-header-spacer-before: 20px; /* Spacer before subsequent headers */
    --nn-list-group-header-height-mobile: var(--nn-list-group-header-height);
    --nn-list-group-goal-header-height-mobile: var(--nn-list-group-goal-header-height);

    /* Navigation item heights - fixed pixel values to prevent fractional rendering */
    --nn-nav-line-height: 18px; /* Fixed line height for folder/tag names */
    --nn-navitem-count-font-size: 11px; /* Desktop count font size */
    --nn-navitem-count-font-size-mobile: 13px; /* Mobile count font size */
    /* Note: The following are dynamically set by JavaScript based on user settings:
       --nn-setting-nav-item-height
       --nn-setting-nav-item-height-mobile
       --nn-setting-nav-font-size
       --nn-setting-nav-font-size-mobile
       --nn-setting-nav-indent
    */

    /* Navigation icon size */
    --nn-nav-icon-size: 16px; /* Fixed icon size */

    /* List title area */
    --nn-list-title-padding-block: 8px; /* Vertical padding around list title */
    --nn-list-title-font-size: 16px; /* Desktop list title text size */
    --nn-file-tag-row-height-base: 22px;
    --nn-file-tag-row-gap-base: 4px;
    --nn-file-tag-row-height: var(--nn-file-tag-row-height-base);
    --nn-file-tag-row-gap: var(--nn-file-tag-row-gap-base);

    /* ========================================================================
       Header Font Sizes
       ======================================================================== */

    /* Header font sizes */
    --nn-desktop-header-font-size: 13px; /* Fixed desktop header font size */
    --nn-mobile-header-font-size: 17px; /* Fixed mobile header font size */
    --nn-root-reorder-hint-font-size: var(--font-ui-smaller);
    --nn-root-reorder-hint-font-size-mobile: var(--font-ui-small);

    /* ========================================================================
       Pane Width Constraints
       ======================================================================== */

    /* Minimum widths for panes */
    --nn-navigation-pane-min-width: 150px; /* Minimum width for navigation pane */
    --nn-list-pane-min-width: 150px; /* Minimum width for list pane */
    --nn-navigation-pane-min-height: 160px; /* Minimum height for navigation pane (vertical split) */
    --nn-list-pane-min-height: 250px; /* Minimum height for list pane (vertical split) */

    /* ========================================================================
       Notebook Navigator Theme Variables
       ======================================================================== */

    /* -- Theme Foreground -- */
    --nn-theme-foreground: var(--text-normal);
    --nn-theme-foreground-muted: color-mix(in srgb, var(--nn-theme-foreground) 70%, transparent);
    --nn-theme-foreground-faded: color-mix(in srgb, var(--nn-theme-foreground) 50%, transparent);
    --nn-theme-foreground-faint: color-mix(in srgb, var(--nn-theme-foreground) 10%, transparent);

    /* -- Navigation Pane -- */
    --nn-theme-nav-bg: var(--background-secondary);
    --nn-theme-nav-separator-color: var(--nn-theme-foreground);
    --nn-theme-nav-separator-background: linear-gradient(
        90deg,
        transparent 0%,
        var(--nn-theme-nav-separator-color) 15%,
        var(--nn-theme-nav-separator-color) 85%,
        transparent 100%
    );
    --nn-theme-nav-separator-height: 1px;
    --nn-theme-nav-separator-opacity: 0.3;
    --nn-theme-nav-indent-guide-color: var(--nn-theme-foreground-faded);
    --nn-theme-nav-leader-color: var(--nn-theme-foreground-faded);
    --nn-theme-pinned-shortcut-shadow-color: rgba(0, 0, 0, 0.03);

    /* -- Navigation Calendar -- */
    --nn-theme-calendar-header-color: var(--nn-theme-foreground);
    --nn-theme-calendar-weekday-color: var(--nn-theme-foreground-muted);
    --nn-theme-calendar-week-color: var(--nn-theme-foreground-muted);
    --nn-theme-calendar-day-in-month-color: var(--nn-theme-foreground);
    --nn-theme-calendar-day-outside-month-color: var(--nn-theme-foreground-faded);
    --nn-theme-calendar-weekend-bg: color-mix(in srgb, var(--nn-theme-foreground) 10%, transparent);
    --nn-theme-calendar-hover-bg: var(--background-modifier-hover);
    --nn-theme-calendar-note-indicator-color: var(--nn-theme-foreground-faded);
    --nn-theme-calendar-unfinished-task-indicator-color: var(--nn-theme-calendar-note-indicator-color);
    --nn-theme-calendar-feature-image-text-color: white;
    --nn-theme-calendar-feature-image-overlay-color: rgb(0 0 0 / 0.05);
    --nn-theme-calendar-day-today-color: var(--nn-theme-calendar-day-in-month-color);
    --nn-theme-calendar-day-today-bg: var(--text-selection);
    --nn-theme-calendar-day-active-border-color: var(--interactive-accent);
    --nn-theme-calendar-day-active-border-width: 2px;

    /* -- Folder & Tag Items -- */
    --nn-theme-navitem-chevron-color: var(--nn-theme-foreground-muted);
    --nn-theme-navitem-icon-color: var(--nn-theme-foreground-muted);
    --nn-theme-navitem-name-color: var(--nn-theme-foreground);
    --nn-theme-navitem-file-name-color: var(--nn-theme-navitem-name-color);
    --nn-theme-navitem-count-color: var(--nn-theme-foreground-muted);
    --nn-theme-navitem-count-bg: transparent;
    --nn-theme-navitem-count-border-radius: 8px;
    --nn-theme-navitem-border-radius: 4px;
    --nn-theme-navitem-border-width: 0px;
    --nn-theme-navitem-count-border-width: 0px;
    --nn-theme-navitem-custom-border-color: transparent;
    --nn-theme-navitem-hover-border-color: transparent;
    --nn-theme-navitem-selected-border-color: transparent;
    --nn-theme-navitem-selected-inactive-border-color: var(--nn-theme-navitem-selected-border-color);
    --nn-theme-navitem-count-border-color: transparent;
    --nn-theme-navitem-selected-count-border-color: var(--nn-theme-navitem-count-border-color);
    --nn-theme-navitem-selected-inactive-count-border-color: var(--nn-theme-navitem-selected-count-border-color);
    --nn-theme-navitem-hover-bg: var(--background-modifier-hover);
    --nn-theme-navitem-selected-bg: var(--text-selection);
    --nn-theme-navitem-selected-chevron-color: var(--nn-theme-navitem-chevron-color);
    --nn-theme-navitem-selected-icon-color: var(--nn-theme-navitem-icon-color);
    --nn-theme-navitem-selected-name-color: var(--nn-theme-navitem-name-color);
    --nn-theme-navitem-selected-count-color: var(--nn-theme-navitem-count-color);
    --nn-theme-navitem-selected-count-bg: var(--nn-theme-navitem-count-bg);
    --nn-theme-navitem-selected-inactive-bg: var(--background-modifier-hover);
    --nn-theme-navitem-selected-inactive-name-color: var(--nn-theme-navitem-name-color);
    --nn-theme-navitem-selected-inactive-chevron-color: var(--nn-theme-navitem-selected-chevron-color);
    --nn-theme-navitem-selected-inactive-icon-color: var(--nn-theme-navitem-selected-icon-color);
    --nn-theme-navitem-selected-inactive-count-color: var(--nn-theme-navitem-selected-count-color);
    --nn-theme-navitem-selected-inactive-count-bg: var(--nn-theme-navitem-selected-count-bg);
    --nn-theme-tag-positive-bg: #00800033;
    --nn-theme-tag-negative-bg: #ff000033;

    /* -- Navigation Item Text Styling -- */
    --nn-theme-navitem-file-name-font-weight: 400;
    --nn-theme-navitem-name-font-weight: 400;
    --nn-theme-navitem-count-font-weight: 400;
    --nn-theme-navitem-custom-color-file-name-font-weight: 600;
    --nn-theme-navitem-custom-color-name-font-weight: 600;
    --nn-theme-navitem-folder-note-name-font-weight: 400;
    --nn-theme-navitem-folder-note-name-decoration: underline;
    --nn-theme-navitem-folder-note-name-hover-decoration: underline;

    /* -- Pane Divider -- */
    --nn-theme-divider-border-color: var(--divider-color);
    --nn-theme-divider-resize-handle-hover-bg: var(--interactive-accent);

    /* -- List Pane (Files) -- */
    --nn-theme-list-bg: var(--background-primary);
    --nn-theme-list-header-icon-color: var(--nn-theme-foreground-muted);
    --nn-theme-list-header-breadcrumb-color: var(--nn-theme-foreground-muted);
    --nn-theme-list-header-breadcrumb-font-weight: 600;
    --nn-theme-list-search-active-bg: var(--text-highlight-bg);
    --nn-theme-list-search-border-color: var(--background-modifier-border);
    --nn-theme-list-heading-color: var(--nn-theme-foreground-muted);
    --nn-theme-list-heading-font-weight: 600;
    --nn-theme-list-group-header-color: var(--nn-theme-foreground-muted);
    --nn-theme-list-separator-color: var(--background-modifier-border);

    /* -- File Items -- */
    --nn-theme-file-name-color: var(--nn-theme-foreground);
    --nn-theme-file-preview-color: var(--nn-theme-foreground-muted);
    --nn-theme-file-task-icon-color: var(--nn-theme-navitem-icon-color);
    --nn-theme-file-feature-border-radius: 4px;
    --nn-theme-file-date-color: var(--nn-theme-foreground-faded);
    --nn-theme-file-word-count-color: var(--nn-theme-foreground-faded);
    --nn-theme-file-parent-color: var(--nn-theme-foreground-faded);
    --nn-theme-file-tag-color: var(--nn-theme-foreground-faded);
    --nn-theme-file-tag-border-color: color-mix(in srgb, var(--nn-theme-foreground) 30%, transparent);
    --nn-theme-file-property-border-color: var(--nn-theme-file-tag-border-color);
    --nn-theme-file-selected-tag-border-color: var(--nn-theme-file-tag-border-color);
    --nn-theme-file-selected-property-border-color: var(--nn-theme-file-property-border-color);
    --nn-theme-file-tag-custom-color-text-color: var(--nn-theme-navitem-name-color);
    --nn-theme-file-tag-bg: transparent;
    --nn-theme-file-property-color: var(--nn-theme-foreground-faded);
    --nn-theme-file-property-bg: transparent;
    --nn-theme-file-tag-border-radius: 10px;
    --nn-theme-file-property-border-radius: 10px;
    --nn-theme-file-border-radius: 8px;
    --nn-theme-file-border-width: 0px;
    --nn-theme-file-pill-border-width: 1px;
    --nn-theme-file-selected-border-color: transparent;
    --nn-theme-file-selected-inactive-border-color: var(--nn-theme-file-selected-border-color);
    --nn-theme-file-selected-bg: var(--text-selection);
    --nn-theme-file-selected-name-color: var(--nn-theme-file-name-color);
    --nn-theme-file-selected-preview-color: var(--nn-theme-file-preview-color);
    --nn-theme-file-selected-date-color: var(--nn-theme-foreground-muted);
    --nn-theme-file-selected-word-count-color: var(--nn-theme-foreground-muted);
    --nn-theme-file-selected-parent-color: var(--nn-theme-foreground-muted);
    --nn-theme-file-selected-tag-color: var(--nn-theme-foreground-muted);
    --nn-theme-file-selected-tag-bg: var(--nn-theme-file-tag-bg);
    --nn-theme-file-selected-property-color: var(--nn-theme-foreground-muted);
    --nn-theme-file-selected-property-bg: var(--nn-theme-file-property-bg);
    --nn-theme-file-selected-inactive-bg: var(--background-modifier-hover);
    --nn-theme-file-selected-inactive-name-color: var(--nn-theme-file-selected-name-color);
    --nn-theme-file-selected-inactive-preview-color: var(--nn-theme-file-selected-preview-color);
    --nn-theme-file-selected-inactive-date-color: var(--nn-theme-file-selected-date-color);
    --nn-theme-file-selected-inactive-word-count-color: var(--nn-theme-file-selected-word-count-color);
    --nn-theme-file-selected-inactive-parent-color: var(--nn-theme-file-selected-parent-color);
    --nn-theme-file-selected-inactive-tag-color: var(--nn-theme-file-selected-tag-color);
    --nn-theme-file-selected-inactive-tag-bg: var(--nn-theme-file-tag-bg);
    --nn-theme-file-selected-inactive-property-color: var(--nn-theme-file-selected-property-color);
    --nn-theme-file-selected-inactive-property-bg: var(--nn-theme-file-property-bg);

    /* -- File Item Text Styling -- */
    --nn-theme-list-group-header-font-weight: 600;
    --nn-theme-file-name-font-weight: 600;
    --nn-theme-file-compact-name-font-weight: 400;
    --nn-theme-file-preview-font-weight: 400;
    --nn-theme-file-date-font-weight: 400;
    --nn-theme-file-word-count-font-weight: 400;
    --nn-theme-file-parent-font-weight: 400;
    --nn-theme-file-tag-font-weight: 400;

    /* -- Quick Actions -- */
    --nn-theme-quick-actions-bg: color-mix(in srgb, var(--background-primary) 95%, transparent);
    --nn-theme-quick-actions-border: var(--background-modifier-border);
    --nn-theme-quick-actions-border-radius: 4px;
    --nn-theme-quick-actions-icon-color: var(--nn-theme-foreground-muted);
    --nn-theme-quick-actions-icon-hover-color: var(--nn-theme-foreground);
    --nn-theme-quick-actions-separator-color: var(--background-modifier-border);

    /* -- Header Buttons -- */
    --nn-theme-header-button-icon-color: var(--icon-color);
    --nn-theme-header-button-hover-bg: var(--background-modifier-hover);
    --nn-theme-header-button-active-bg: var(--background-modifier-hover);
    --nn-theme-header-button-active-icon-color: var(--text-normal);
    --nn-theme-header-button-disabled-icon-color: var(--icon-color);

    /* -- Mobile Styles -- */
    --nn-theme-mobile-bg: var(--mobile-sidebar-background);
    --nn-theme-mobile-list-header-link-color: var(--link-color);
    --nn-theme-mobile-list-header-breadcrumb-color: var(--nn-theme-foreground);
    --nn-theme-mobile-list-header-breadcrumb-font-weight: 600;
    --nn-theme-mobile-toolbar-bg: var(--background-secondary);
    --nn-theme-mobile-toolbar-button-icon-color: var(--link-color);
    --nn-theme-mobile-toolbar-button-active-bg: var(--background-modifier-hover);
    --nn-theme-mobile-toolbar-button-active-icon-color: var(--link-color);
    --nn-theme-mobile-toolbar-glass-bg: var(--background-primary);

    /* -- File Separator -- */
    --nn-separator-height: 1px;
}

.theme-dark {
    --nn-theme-pinned-shortcut-shadow-color: rgba(0, 0, 0, 0.18);
    --nn-theme-calendar-feature-image-overlay-color: rgb(0 0 0 / 0.3);
}
/* Source: src/styles/sections/layout-base.css */

/* ========================================================================
   Base Layout & Container Styles
   ======================================================================== */

/* Inline match highlight in file names while search is active */
.nn-search-highlight {
    background-color: var(--nn-theme-list-search-active-bg);
    color: inherit;
    border-radius: 3px;
}

/* Resets Obsidian's default view-content padding for cleaner integration */
.view-content.notebook-navigator {
    padding: 0;
    border: none;
}

/* Main container - establishes the plugin's layout foundation */
.notebook-navigator {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--background-primary);
    font-family: var(--font-interface);
}

.nn-svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
}

/* Removes focus outline on main container for cleaner appearance */
.notebook-navigator:focus {
    outline: none;
}

/* Split container - creates the two-pane layout structure */
.nn-split-container {
    display: flex;
    height: 100%;
    overflow: hidden;
    position: relative;
    --nn-pane-transition-duration: 0.15s;
    --nn-pane-transition-timing: ease-in-out;
    --nn-selected-file-bg-color: var(--nn-computed-file-selected-bg, var(--nn-theme-file-selected-bg));
    --nn-selected-file-name-color: var(--nn-theme-file-selected-name-color);
    --nn-selected-file-preview-color: var(--nn-theme-file-selected-preview-color);
    --nn-selected-file-date-color: var(--nn-theme-file-selected-date-color);
    --nn-selected-file-word-count-color: var(--nn-theme-file-selected-word-count-color);
    --nn-selected-file-parent-color: var(--nn-theme-file-selected-parent-color);
    --nn-selected-file-tag-color: var(--nn-theme-file-selected-tag-color);
    --nn-selected-file-tag-bg: var(--nn-theme-file-selected-tag-bg);
    --nn-selected-file-property-color: var(--nn-theme-file-selected-property-color);
    --nn-selected-file-property-bg: var(--nn-theme-file-selected-property-bg);
    --nn-selected-file-border-color: var(--nn-theme-file-selected-border-color);
    --nn-selected-navitem-bg-color: var(--nn-computed-navitem-selected-bg, var(--nn-theme-navitem-selected-bg));
    --nn-selected-navitem-name-color: var(--nn-theme-navitem-selected-name-color);
    --nn-selected-navitem-chevron-color: var(--nn-theme-navitem-selected-chevron-color);
    --nn-selected-navitem-icon-color: var(--nn-theme-navitem-selected-icon-color);
    --nn-selected-navitem-count-color: var(--nn-theme-navitem-selected-count-color);
    --nn-selected-navitem-count-bg: var(--nn-theme-navitem-selected-count-bg);
    --nn-selected-navitem-border-color: var(--nn-theme-navitem-selected-border-color);
    --nn-selected-navitem-count-border-color: var(--nn-theme-navitem-selected-count-border-color);
}

.nn-split-container:is([data-navigator-focused='false'], [data-focus-pane='navigation'], [data-focus-pane='search']) {
    --nn-selected-file-bg-color: var(--nn-computed-file-selected-inactive-bg, var(--nn-theme-file-selected-inactive-bg));
    --nn-selected-file-name-color: var(--nn-theme-file-selected-inactive-name-color);
    --nn-selected-file-preview-color: var(--nn-theme-file-selected-inactive-preview-color);
    --nn-selected-file-date-color: var(--nn-theme-file-selected-inactive-date-color);
    --nn-selected-file-word-count-color: var(--nn-theme-file-selected-inactive-word-count-color);
    --nn-selected-file-parent-color: var(--nn-theme-file-selected-inactive-parent-color);
    --nn-selected-file-tag-color: var(--nn-theme-file-selected-inactive-tag-color);
    --nn-selected-file-tag-bg: var(--nn-theme-file-selected-inactive-tag-bg);
    --nn-selected-file-property-color: var(--nn-theme-file-selected-inactive-property-color);
    --nn-selected-file-property-bg: var(--nn-theme-file-selected-inactive-property-bg);
    --nn-selected-file-border-color: var(--nn-theme-file-selected-inactive-border-color);
}

.nn-split-container:is([data-navigator-focused='false'], [data-focus-pane='files'], [data-focus-pane='search']) {
    --nn-selected-navitem-bg-color: var(--nn-computed-navitem-selected-inactive-bg, var(--nn-theme-navitem-selected-inactive-bg));
    --nn-selected-navitem-name-color: var(--nn-theme-navitem-selected-inactive-name-color);
    --nn-selected-navitem-chevron-color: var(--nn-theme-navitem-selected-inactive-chevron-color);
    --nn-selected-navitem-icon-color: var(--nn-theme-navitem-selected-inactive-icon-color);
    --nn-selected-navitem-count-color: var(--nn-theme-navitem-selected-inactive-count-color);
    --nn-selected-navitem-count-bg: var(--nn-theme-navitem-selected-inactive-count-bg);
    --nn-selected-navitem-border-color: var(--nn-theme-navitem-selected-inactive-border-color);
    --nn-selected-navitem-count-border-color: var(--nn-theme-navitem-selected-inactive-count-border-color);
}

.nn-scale-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.nn-scale-wrapper > .nn-split-container {
    width: 100%;
    height: 100%;
    transform-origin: top left;
}

.nn-scale-wrapper[data-ui-scale] > .nn-split-container {
    width: calc(100% / var(--nn-ui-scale, 1));
    height: calc(100% / var(--nn-ui-scale, 1));
    transform: scale(var(--nn-ui-scale, 1));
}
/* Source: src/styles/sections/ui-update-notice.css */

/* ========================================================================
   Update notice banner
   ======================================================================== */

.nn-update-banner {
    position: absolute;
    top: calc(var(--nn-list-group-header-height-mobile, var(--nn-list-group-header-height)) + 8px);
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
    min-width: 220px;
    max-width: calc(100% - 32px);
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
    padding: 12px 20px;
    height: auto;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font: inherit;
    text-align: left;
    opacity: 1;
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.nn-split-container .nn-update-banner {
    background: var(--interactive-accent);
    border: none;
    color: var(--text-on-accent);
    padding: 12px 20px;
    appearance: none;
}

.nn-update-banner:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--background-primary),
        0 0 0 4px var(--interactive-accent),
        0 8px 18px rgba(0, 0, 0, 0.18);
}

.nn-update-banner.fade-out {
    opacity: 0;
    transform: translate(-50%, -18px);
}

.nn-update-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nn-update-banner__label {
    font-weight: 600;
    font-size: 12px;
}

.nn-update-banner__instruction {
    font-size: 11px;
    color: var(--text-on-accent);
    opacity: 0.9;
}

.nn-update-status {
    margin-top: 6px;
    font-weight: 600;
    color: var(--color-red);
}

.nn-update-status.is-hidden {
    display: none;
}

@media (max-width: 600px) {
    .nn-update-banner {
        left: 8px;
        right: 8px;
        transform: none;
        max-width: none;
        width: auto;
        justify-content: center;
        top: 8px;
    }

    .nn-update-banner__text {
        align-items: center;
        text-align: center;
    }

    .nn-update-banner.fade-out {
        transform: translateY(-12px);
    }
}
/* Source: src/styles/sections/ui-notices.css */

/* ========================================================================
   Notices
   ======================================================================== */

.nn-cache-rebuild-notice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
}

.nn-cache-rebuild-notice-container {
    width: 100%;
    box-sizing: border-box;
}

.nn-cache-rebuild-notice-message {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
}

.nn-cache-rebuild-notice-title {
    font-weight: 600;
    line-height: 1.25;
}

.nn-cache-rebuild-notice-description {
    font-size: 13px;
    line-height: 1.25;
    opacity: 0.85;
}

.nn-cache-rebuild-notice-progress-bar {
    display: block;
    width: 100%;
    max-width: none;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
}

.nn-cache-rebuild-notice-progress-bar::-webkit-progress-bar {
    background-color: var(--background-modifier-border);
    border-radius: 999px;
}

.nn-cache-rebuild-notice-progress-bar::-webkit-progress-value {
    background-color: var(--interactive-accent);
    border-radius: 999px;
}

@media (max-width: 600px) {
    .nn-cache-rebuild-notice-description {
        font-size: 14px;
    }
}
/* Source: src/styles/sections/layout-panes.css */

/* ========================================================================
   Pane Layout
   ======================================================================== */

/* Navigation pane - contains the folder tree navigation */
.nn-navigation-pane {
    flex: 0 0 auto; /* Don't grow or shrink, use explicit width */
    min-width: var(--nn-navigation-pane-min-width);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--nn-theme-nav-bg);
    border-right: 1px solid var(--nn-theme-divider-border-color);
    position: relative; /* Enables absolute positioning for resize handles */

    /* Performance optimization for virtualized content */
    contain: layout style;
}

/* Right pane - contains the file list */
.nn-list-pane {
    flex: 1;
    min-width: var(--nn-list-pane-min-width);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--nn-theme-list-bg);
    position: relative; /* Enable absolute positioning for resize handle */

    /* Performance optimization for virtualized content */
    contain: layout style;
}

/* Override backgrounds when desktop background mode is set to primary or secondary */
/* Primary mode: use list background for navigation pane */
.nn-split-container.nn-desktop.nn-bg-primary {
    --nn-theme-nav-bg: var(--nn-theme-list-bg);
}

/* Secondary mode: use navigation background for list pane */
.nn-split-container.nn-desktop.nn-bg-secondary {
    --nn-theme-list-bg: var(--nn-theme-nav-bg);
}

/* Mobile pane backgrounds follow --nn-theme-mobile-bg */
.nn-split-container.nn-mobile {
    --nn-theme-nav-bg: var(--nn-theme-mobile-bg);
    --nn-theme-list-bg: var(--nn-theme-mobile-bg);
}

.nn-split-container.nn-orientation-vertical {
    flex-direction: column;
}

.nn-split-container.nn-orientation-vertical .nn-navigation-pane {
    width: 100%;
    min-width: 0;
    min-height: var(--nn-navigation-pane-min-height);
    flex: 0 1 auto;
    border-right: none;
}

.nn-split-container.nn-orientation-vertical .nn-list-pane {
    min-width: 0;
    width: 100%;
    min-height: var(--nn-list-pane-min-height);
}

.nn-split-container.nn-orientation-vertical:not(.nn-single-pane) .nn-navigation-pane {
    border-bottom: 1px solid var(--nn-theme-divider-border-color);
}

/* Pane divider resize handle - overlay on the left edge of list pane */
.nn-resize-handle {
    width: 3px;
    background-color: transparent;
    cursor: col-resize;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 300;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.nn-split-container.nn-orientation-vertical .nn-resize-handle {
    width: 100%;
    height: 3px;
    cursor: row-resize;
    bottom: auto;
    right: 0;
}

/* Pane divider resize handle hover state - provides visual feedback */
.nn-resize-handle:hover {
    background-color: var(--nn-theme-divider-resize-handle-hover-bg);
}

/* Pane divider resize handle active state - maintains visibility during resize */
.nn-split-container.nn-resizing .nn-resize-handle {
    background-color: var(--nn-theme-divider-resize-handle-hover-bg);
}

/* ========================================================================
   Single-pane Layout
   ======================================================================== */

/* Single-pane container - use grid for consistent structure while allowing sliding */
.nn-split-container.nn-single-pane {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: minmax(0, 1fr) auto;
    position: relative;
    overflow: hidden;
    height: 100%;
}

/* Single-pane panes - positioned in grid and animated with transforms */
.nn-split-container.nn-single-pane .nn-navigation-pane,
.nn-split-container.nn-single-pane .nn-list-pane {
    width: 100%;
    max-width: 100%;
    height: 100%;
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    transition: transform var(--nn-pane-transition-duration) var(--nn-pane-transition-timing);
}

.nn-split-container.nn-single-pane .nn-single-pane-calendar {
    grid-column: 1;
    grid-row: 2;
}

/* Disable transitions for one-frame mode changes (dual-pane -> single-pane) */
.nn-split-container.nn-single-pane.nn-suppress-pane-transitions .nn-navigation-pane,
.nn-split-container.nn-single-pane.nn-suppress-pane-transitions .nn-list-pane {
    transition: none;
}

.nn-split-container.nn-single-pane.nn-pane-transitioning .nn-navigation-pane,
.nn-split-container.nn-single-pane.nn-pane-transitioning .nn-list-pane {
    will-change: transform;
}

/* Single-pane view states - show navigation view */
.nn-split-container.nn-single-pane.show-navigation .nn-navigation-pane {
    transform: none;
}

.nn-split-container.nn-single-pane.show-navigation .nn-list-pane {
    transform: translateX(100%);
}

/* Single-pane view states - show files view */
.nn-split-container.nn-single-pane.show-files .nn-navigation-pane {
    transform: translateX(-100%);
}

.nn-split-container.nn-single-pane.show-files .nn-list-pane {
    transform: none;
}

/* ========================================================================
   Mobile Layout
   ======================================================================== */

/* Hide resize handle on mobile */
.notebook-navigator-mobile .nn-resize-handle {
    display: none;
}

/* Add touch-action to prevent browser gestures interfering */
.notebook-navigator-mobile .nn-split-container {
    touch-action: pan-y;
}
/* Source: src/styles/sections/ui-headers.css */

/* ========================================================================
   Header Styles
   ======================================================================== */

/* Pane headers - consistent header styling for both panes */
.nn-pane-header {
    padding: 8px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 32px;
    height: 32px;
}

/* File pane header needs flex layout for title and buttons */
.nn-list-pane .nn-pane-header > .nn-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Navigation pane header - matches folder tree background for visual consistency */
.nn-navigation-pane .nn-pane-header {
    background-color: var(--nn-theme-nav-bg);
}

/* File list pane header */
.nn-list-pane .nn-pane-header {
    background-color: var(--nn-theme-list-bg);
}

/* Header actions container - groups action buttons in headers */
.nn-header-actions {
    display: flex;
    gap: 2px;
    align-items: center;
}

.nn-header-actions-profile {
    gap: 8px;
    flex: 1 1 auto;
    overflow: hidden;
}

.nn-pane-header-profile {
    gap: 4px;
    padding-right: 0;
    justify-content: flex-start;
    display: inline-flex;
    align-items: center;
}

.nn-pane-header-profile[role='button'] {
    cursor: pointer;
}

.nn-pane-header-profile:focus-visible {
    outline: 1px solid var(--interactive-accent);
    outline-offset: 1px;
    border-radius: 6px;
}

.nn-pane-header-profile-chevron {
    width: var(--nn-nav-icon-size);
    height: var(--nn-nav-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--nn-theme-list-header-breadcrumb-color);
}

.nn-pane-header-title {
    font-size: var(--nn-desktop-header-font-size);
    font-weight: var(--nn-theme-list-header-breadcrumb-font-weight);
    color: var(--nn-theme-list-header-breadcrumb-color);
    padding-left: 12px;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.nn-pane-header-title.nn-pane-header-profile {
    padding-left: 0;
}

.nn-single-pane .nn-list-pane .nn-pane-header-title {
    padding-left: 2px;
}

.nn-pane-header-icon {
    width: var(--nn-nav-icon-size);
    height: var(--nn-nav-icon-size);
    margin-inline-end: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--nn-theme-list-header-icon-color);
    overflow: visible;
}

.nn-pane-header-icon svg {
    width: var(--nn-nav-icon-size);
    height: var(--nn-nav-icon-size);
}

.nn-pane-header-icon.nn-emoji-icon {
    font-size: var(--nn-nav-icon-size);
    line-height: var(--nn-nav-icon-size);
    text-align: center;
    justify-content: center;
}

.nn-pane-header-icon.nn-iconfont {
    font-size: var(--nn-nav-icon-size);
    line-height: var(--nn-nav-icon-size);
}

.nn-pane-header-text {
    line-height: var(--nn-nav-line-height);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nn-theme-list-header-breadcrumb-color);
    flex: 1;
    min-width: 0;
}

.nn-pane-header-profile .nn-pane-header-text {
    flex: 0 1 auto;
}

.nn-pane-header .nn-pane-header-folder-note {
    text-decoration: var(--nn-theme-navitem-folder-note-name-decoration);
}

.nn-pane-header .nn-pane-header-folder-note:hover {
    cursor: pointer;
    text-decoration: var(--nn-theme-navitem-folder-note-name-hover-decoration);
}

/* ========================================================================
   Mobile Headers + Breadcrumb
   ======================================================================== */

/* Mobile header - adjust for back button */
.notebook-navigator-mobile .nn-pane-header {
    flex-shrink: 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0 var(--nn-file-item-padding-horizontal);
    background-color: var(--nn-theme-list-bg);
}

/* Simplified mobile headers */
.notebook-navigator-mobile .nn-pane-header-simple {
    justify-content: center;
    text-align: center;
}

.notebook-navigator-mobile .nn-navigation-pane .nn-pane-header-simple {
    justify-content: center;
    text-align: center;
}

.notebook-navigator-mobile .nn-pane-header-simple .nn-pane-header-profile {
    width: 100%;
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
}

.notebook-navigator-mobile .nn-pane-header-simple .nn-pane-header-title {
    font-size: var(--nn-mobile-header-font-size);
    font-weight: var(--nn-theme-mobile-list-header-breadcrumb-font-weight);
    color: var(--nn-theme-mobile-list-header-breadcrumb-color);
    width: 100%;
    text-align: center;
}

.notebook-navigator-mobile .nn-pane-header-simple .nn-pane-header-profile .nn-pane-header-text {
    color: var(--nn-theme-mobile-list-header-breadcrumb-color);
}

/* Mobile header container */
.notebook-navigator-mobile .nn-mobile-header {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Scrollable breadcrumb container */
.notebook-navigator-mobile .nn-breadcrumb-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin-left: 44px; /* Start right after the arrow button */
}

/* Add right margin when no icon for centering */
.notebook-navigator-mobile .nn-mobile-header-no-icon .nn-breadcrumb-scroll {
    margin-right: 44px;
}

.notebook-navigator-mobile .nn-breadcrumb-scroll::-webkit-scrollbar {
    display: none;
}

/* Fade overlay positioned just right of back arrow */
.notebook-navigator-mobile .nn-breadcrumb-fade {
    position: absolute;
    left: 44px; /* Position just right of the back arrow */
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, var(--nn-theme-list-bg) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Mobile back button */
.notebook-navigator-mobile button.nn-back-button {
    position: absolute;
    left: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    z-index: 1;
    opacity: 1;
}

/* Increase stroke width for back button arrow and apply link color */
.notebook-navigator-mobile button.nn-back-button svg {
    stroke: var(--nn-theme-mobile-list-header-link-color);
    width: 20px; /* Default size for Android */
    height: 20px;
}

/* iOS/iPadOS-specific back button adjustments */
.notebook-navigator-mobile:not(.notebook-navigator-android) button.nn-back-button {
    padding: 4px; /* Reduce padding to allow larger icon (44px - 8px padding = 36px space) */
}

/* iOS/iPadOS-specific back button chevron styling (36px actual, ~32px visual due to Lucide padding) */
.notebook-navigator-mobile:not(.notebook-navigator-android) button.nn-back-button svg {
    width: 36px;
    height: 36px;
}

/* Mobile header title */
.notebook-navigator-mobile .nn-mobile-title {
    font-weight: var(--nn-theme-mobile-list-header-breadcrumb-font-weight);
    font-size: var(--nn-mobile-header-font-size);
    color: var(--nn-theme-mobile-list-header-breadcrumb-color);
    white-space: nowrap;
    padding-left: 12px; /* Standard padding for snap position */
}

/* Breadcrumb current segment - desktop uses list header color, mobile uses navitem color */
.nn-path-current {
    color: var(--nn-theme-list-header-breadcrumb-color);
}

/* Mobile breadcrumb current segment - use mobile-specific theme color */
.notebook-navigator-mobile .nn-path-current {
    color: var(--nn-theme-mobile-list-header-breadcrumb-color);
}

/* Mobile breadcrumb separator - use same color as current segment */
.notebook-navigator-mobile .nn-path-separator {
    color: var(--nn-theme-mobile-list-header-breadcrumb-color);
}

/* Search bar container */
.nn-search-bar-container {
    height: 0;
    overflow: hidden;
    background-color: var(--nn-theme-list-bg);
}

.nn-search-bar-container.nn-search-bar-visible {
    height: 44px;
}

/* Search input wrapper */
.nn-search-input-wrapper {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 10px 6px;
    background-color: var(--nn-theme-list-bg);
}

/* Search input container */
.nn-search-input-container {
    position: relative;
    width: 100%;
    height: 32px;
}

/* Search icon (clickable toggle between search providers) */
.nn-search-input-icon {
    position: absolute;
    left: 10px;
    top: 8px;
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    color: var(--nn-theme-list-header-icon-color);
    cursor: pointer;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nn-search-input-icon:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

.nn-search-input-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Search input field */
input.nn-search-input {
    width: 100%;
    height: 32px;
    padding: 4px 60px 4px 36px;
    font-size: 13px;
    color: var(--nn-theme-file-selected-name-color);
    background: var(--nn-theme-list-bg);
    border: 1px solid var(--nn-theme-list-search-border-color);
    border-radius: 999px;
    outline: none;
    box-sizing: border-box;
}

.nn-search-input-container--has-shortcut input.nn-search-input {
    padding-right: 84px;
}

/* Active search state - when there's a search query */
input.nn-search-input.nn-search-active {
    background: var(--nn-theme-list-search-active-bg);
}

/* Maintain highlight background on hover when search is active */
input.nn-search-input.nn-search-active:hover {
    background: var(--nn-theme-list-search-active-bg);
}

/* Focus state */
input.nn-search-input:focus {
    border-color: var(--nn-theme-list-search-border-color);
    box-shadow: 0 0 0 2px var(--nn-theme-list-search-border-color);
}

input.nn-search-input::placeholder {
    color: var(--nn-theme-list-header-breadcrumb-color);
}

/* Search tag suggestion popover */
.nn-search-tag-suggestion {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    min-height: 28px;
}

.nn-search-tag-suggestion__label {
    display: flex;
    align-items: baseline;
    width: 100%;
    min-width: 0;
    font-size: var(--nn-file-name-size-mobile, var(--nn-file-name-size));
    color: var(--nn-theme-file-name-color);
    gap: 6px;
}

.nn-search-tag-suggestion__prefix {
    font-size: var(--nn-file-small-size-mobile, var(--nn-file-small-size));
    color: var(--nn-theme-list-header-breadcrumb-color);
    flex-shrink: 0;
}

.nn-search-tag-suggestion__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nn-search-tag-suggestion__text .suggestion-highlight {
    background-color: var(--nn-theme-list-search-active-bg);
    color: var(--nn-theme-file-name-color);
    border-radius: 3px;
    padding: 0 1px;
}

/* Clear button */
/* Hide webkit search cancel button */
.nn-search-input::-webkit-search-cancel-button {
    display: none;
}
/* Source: src/styles/sections/ui-search.css */

/* ========================================================================
   Mobile Search Styles
   ======================================================================== */

/* Mobile search input wrapper - inherits padding from base styles */
.notebook-navigator-mobile .nn-search-input-wrapper {
    height: 48px;
    background-color: var(--nn-theme-list-bg);
}

/* Mobile search bar container */
.notebook-navigator-mobile .nn-search-bar-container {
    background-color: var(--nn-theme-list-bg);
}

.notebook-navigator-mobile .nn-search-bar-container.nn-search-bar-visible {
    height: 48px;
}

/* Mobile search input container */
.notebook-navigator-mobile .nn-search-input-container {
    height: 36px;
}

/* Mobile search input field */
.notebook-navigator-mobile input.nn-search-input {
    height: 36px;
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 4px 60px 4px 36px;
    border-radius: 999px;
}

.nn-search-clear-button,
.nn-search-star-button,
.nn-search-help-button {
    position: absolute;
    top: 8px;
    cursor: pointer;
    color: var(--nn-theme-foreground-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nn-search-clear-button:focus-visible,
.nn-search-star-button:focus-visible,
.nn-search-help-button:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

.nn-search-clear-button > span,
.nn-search-star-button > span,
.nn-search-help-button > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.nn-search-clear-button svg,
.nn-search-star-button svg,
.nn-search-help-button svg {
    width: 16px;
    height: 16px;
    display: block;
}

.nn-search-clear-button {
    right: 10px;
}

.nn-search-star-button {
    right: 34px;
}

.nn-search-help-button {
    right: 10px;
}

.nn-search-star-button--active {
    color: var(--interactive-accent);
}

.notebook-navigator-mobile .nn-search-clear-button {
    top: 0;
    height: 36px;
    right: 10px;
}

.notebook-navigator-mobile .nn-search-star-button {
    top: 0;
    height: 36px;
    right: 44px;
}

.notebook-navigator-mobile .nn-search-help-button {
    top: 0;
    height: 36px;
    right: 10px;
}

.notebook-navigator-mobile .nn-search-input-container--has-shortcut input.nn-search-input {
    padding-right: 94px;
}

/* Clickable path segments in header */
.nn-path-segment {
    cursor: pointer;
}

/* On mobile, use link color for clickable segments */
.is-mobile .nn-path-segment {
    color: var(--nn-theme-mobile-list-header-link-color);
    text-decoration: none;
}

/* Prevent underline on mobile tap/active state */
.is-mobile .nn-path-segment:active,
.is-mobile .nn-path-segment:focus {
    text-decoration: none;
}

/* Mobile search icon touch target */
.notebook-navigator-mobile .nn-search-input-icon {
    top: 0;
    height: 36px;
    width: 36px;
    left: 0;
}

/* Hover effects only apply on hover-capable devices (prevents "stuck hover" on touch). */
@media (hover: hover) and (pointer: fine) {
    .nn-search-input-icon:hover {
        color: var(--nn-theme-header-button-active-icon-color);
    }

    .nn-search-clear-button:hover,
    .nn-search-star-button:hover,
    .nn-search-help-button:hover {
        color: var(--nn-theme-header-button-active-icon-color);
        opacity: 1;
    }

    .nn-path-segment:hover {
        text-decoration: underline;
    }
}
/* Source: src/styles/sections/ui-buttons.css */

/* ========================================================================
   Button Styles
   ======================================================================== */

/* Icon button base style - transparent buttons matching Obsidian's design */
button.nn-icon-button {
    background: transparent;
    background-color: transparent;
    border: none;
    border-radius: var(--radius-s);
    padding: 0 8px;
    color: var(--nn-theme-header-button-icon-color);
    opacity: 0.85;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    outline: none;
}

/* Desktop pane header buttons - enforce Obsidian-muted icon color */
.nn-desktop .nn-pane-header .nn-icon-button {
    color: var(--nn-theme-header-button-icon-color);
}

.nn-desktop .nn-pane-header .nn-icon-button svg:not(.nn-vault-icon-svg) {
    stroke: currentColor;
}

/* Header buttons - match Obsidian's standard dimensions */
.nn-header-actions button.nn-icon-button {
    padding: 0 8px;
    width: auto;
    min-width: 34px;
    height: 25px;
}

/* iPad-specific adjustment for icon buttons in headers */
@media (min-width: 768px) {
    .notebook-navigator-mobile .nn-header-actions button.nn-icon-button {
        /* Maintain same dimensions as desktop for consistency */
        padding: 0 8px;
        width: auto;
        min-width: 34px;
        height: 25px;
    }
}

/* Icon button hover state - subtle background on hover - desktop only */
.nn-desktop button.nn-icon-button:hover {
    background-color: var(--nn-theme-header-button-hover-bg);
    opacity: 1;
}

/* Icon button active state - feedback on click */
.nn-icon-button:active {
    opacity: 0.8;
}

/* Icon button active state - for toggle buttons that are "ON" */
button.nn-icon-button.nn-icon-button-active {
    background-color: var(--nn-theme-header-button-active-bg);
    color: var(--nn-theme-header-button-active-icon-color);
}

/* Active button icon color */
button.nn-icon-button.nn-icon-button-active svg:not(.nn-vault-icon-svg) {
    stroke: var(--nn-theme-header-button-active-icon-color);
}

/* Icon button disabled state - visual indicator for unavailable actions */
.nn-icon-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--nn-theme-header-button-disabled-icon-color);
}

/* Disabled icon svg stroke color */
.nn-icon-button:disabled svg:not(.nn-vault-icon-svg) {
    stroke: currentColor;
}

/* Disabled hover state - no hover effect when disabled */
.nn-desktop .nn-icon-button:disabled:hover {
    background-color: transparent;
    color: var(--nn-theme-header-button-disabled-icon-color);
}

/* Disabled icon color - maintains muted appearance */
.nn-desktop .nn-icon-button:disabled:hover svg:not(.nn-vault-icon-svg) {
    stroke: currentColor;
}

/* Icon styling - consistent size and appearance for all button icons */
.nn-icon-button > span {
    color: inherit;
}

.nn-icon-button > span > svg {
    color: inherit;
}

.nn-icon-button svg {
    width: 16px;
    height: 16px;
}

.nn-icon-button svg:not(.nn-vault-icon-svg) {
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}
/* Source: src/styles/sections/layout-spacers.css */

/* ========================================================================
   Pane Spacers
   ======================================================================== */

/* Navigation pane spacers - provide visual breathing room in the list */
.nn-nav-top-spacer {
    height: 8px;
    flex-shrink: 0;
    position: relative;
}

.nn-nav-bottom-spacer {
    height: 20px;
    flex-shrink: 0;
}

.nn-nav-list-spacer {
    height: 8px;
    flex-shrink: 0;
    position: relative;
}

.nn-nav-root-spacer {
    height: var(--nn-nav-root-spacing, 0px);
    flex-shrink: 0;
    pointer-events: none;
}

.nn-nav-spacer--with-separator::after {
    content: '';
    position: absolute;
    left: calc(-1 * var(--nn-scroller-padding));
    right: calc(-1 * var(--nn-scroller-padding));
    top: calc(50% - (var(--nn-theme-nav-separator-height, 1px) / 2));
    height: var(--nn-theme-nav-separator-height, 1px);
    background: var(
        --nn-theme-nav-separator-background,
        linear-gradient(
            90deg,
            transparent 0%,
            var(--nn-theme-nav-separator-color) 15%,
            var(--nn-theme-nav-separator-color) 85%,
            transparent 100%
        )
    );
    opacity: var(--nn-theme-nav-separator-opacity, 0.3);
}

/* List pane spacers - match navigation pane for consistency */
.nn-list-top-spacer {
    height: 8px;
}

.nn-list-bottom-spacer {
    height: 20px;
}
/* Source: src/styles/sections/navigation-scroller.css */

/* ========================================================================
   Navigation Pane Scroller
   ======================================================================== */

/* Scroller container for both folder tree and tag list */

.nn-navigation-pane-chrome {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.nn-navigation-pane-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.nn-navigation-pane-scroller {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 var(--nn-scroller-padding);
    line-height: 1; /* Reset to 1 - we'll use fixed line-heights on individual elements */
    background-color: var(--nn-theme-nav-bg); /* Opaque background for GPU scroll layer optimization */

    /* Ensure scroll events work properly with virtualization */
    position: relative;
}

.nn-navigation-pane-content {
    flex: 1 0 auto;
}

.nn-navigation-pane-scroller[data-banner='true'] {
    /* Classic Windows scrollbars consume layout width when they appear. Setting a stable gutter
       keeps the width constant so TanStack Virtual's ResizeObserver doesn't retrigger endlessly
       when the navigation banner forces the content to overflow during resizing. */
    scrollbar-gutter: stable;
}

/* Container for pinned shortcuts displayed above the scrollable navigation tree */
.nn-shortcut-pinned {
    flex: 0 1 auto;
    border-bottom: 1px solid var(--nn-theme-divider-border-color);
    background-color: var(--nn-theme-nav-bg);
    position: relative;
    z-index: 1;
    overflow: visible;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.nn-shortcut-pinned-scroll {
    flex: 0 1 auto;
    min-height: 0;
    padding: 8px var(--nn-scroller-padding) 4px;
    overflow-x: hidden;
    overflow-y: hidden;
}

.nn-shortcut-pinned[data-scroll='true'] .nn-shortcut-pinned-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Remove top padding when banner is present to avoid double spacing */
.nn-shortcut-pinned[data-has-banner='true'] .nn-shortcut-pinned-scroll {
    padding-top: 0;
}

/* Add top margin to banner inside pinned shortcuts area for consistent spacing */
.nn-shortcut-pinned[data-has-banner='true'] .nn-nav-banner {
    margin-top: 8px;
}

/* Inner wrapper for pinned shortcut items */
.nn-shortcut-pinned-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nn-shortcut-pinned::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 1px);
    height: 4px;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--nn-theme-pinned-shortcut-shadow-color) 0%, transparent 100%);
}

.nn-shortcuts-resize-handle {
    height: 3px;
    cursor: row-resize;
    background-color: transparent;
    touch-action: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
}

.nn-shortcuts-resize-handle:hover {
    background-color: var(--nn-theme-divider-resize-handle-hover-bg);
}

.nn-navigation-pane[data-shortcuts-resizing='true'] .nn-shortcuts-resize-handle {
    background-color: var(--nn-theme-divider-resize-handle-hover-bg);
}

.notebook-navigator-mobile .nn-shortcuts-resize-handle {
    height: 14px;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    flex-shrink: 0;
    z-index: 0;
}

.notebook-navigator-mobile .nn-navigation-pane[data-shortcuts-resizing='true'] .nn-shortcuts-resize-handle {
    background-color: transparent;
}

.notebook-navigator-mobile .nn-shortcuts-resize-handle:hover {
    background-color: transparent;
}

@media (hover: none) {
    .nn-shortcuts-resize-handle:hover {
        background-color: transparent;
    }
}

.notebook-navigator-mobile .nn-shortcuts-resize-handle::before {
    content: '';
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 3px;
    height: 5px;
    background-color: var(--nn-theme-divider-border-color);
    border-radius: 3px;
    pointer-events: none;
}

.notebook-navigator-mobile .nn-shortcut-pinned {
    background-color: var(--nn-theme-nav-bg);
    border-bottom: none;
}

/* Vault title displayed below the navigation header (desktop only). */
.nn-vault-title-area {
    background-color: var(--nn-theme-nav-bg);
    padding: var(--nn-list-title-padding-block) var(--nn-scroller-padding) 8px;
}

.nn-vault-title-content {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--nn-nav-item-padding-horizontal);
    font-size: var(--nn-list-title-font-size);
    font-weight: var(--nn-theme-list-heading-font-weight);
    color: var(--nn-theme-list-heading-color);
    gap: 4px;
    max-width: 100%;
}

.nn-vault-title-trigger {
    cursor: pointer;
}

.nn-vault-title-trigger:focus-visible {
    outline: 1px solid var(--interactive-accent);
    outline-offset: 1px;
    border-radius: 6px;
}

.nn-vault-title-text {
    line-height: 1.2;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nn-vault-title-chevron {
    width: var(--nn-nav-icon-size);
    height: var(--nn-nav-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--nn-theme-list-heading-color);
}

/* Mobile-only: hide the pinned shortcuts shadow overlay. */
.notebook-navigator-mobile .nn-shortcut-pinned::after {
    content: none;
}

/* Navigation banner displayed above tree items */
.nn-nav-banner {
    padding: var(--nn-nav-banner-padding-vertical, 8px) var(--nn-nav-item-padding-horizontal);
    box-sizing: border-box;
}

.nn-navigation-pane-banner {
    margin-inline-start: calc(-1 * var(--nn-scroller-padding));
    margin-inline-end: calc(-1 * var(--nn-scroller-padding));
}

.nn-nav-banner-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: min(14px, var(--nn-theme-navitem-border-radius));
    background-color: var(--background-tertiary);
}
/* Source: src/styles/sections/navigation-tree.css */

/* ========================================================================
   Folder Tree Styles
   ======================================================================== */

/* Note: Navigation pane scroller styles are defined above in the Navigation Pane Scroller section */

/* Navigation item - container for each folder/tag in the tree */
.nn-navitem {
    --nn-navitem-background-bottom-overdraw: 0px;
    -webkit-user-select: none;
    user-select: none;
    background: transparent;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    min-width: 0; /* Allow folder items to shrink below min-content width */
    height: var(--nn-setting-nav-item-height); /* Fixed height for virtualizer accuracy */
    box-sizing: border-box;
    padding-inline-start: calc(var(--level, 0) * var(--nn-setting-nav-indent));
    /* Isolate layout and style calculations per item while allowing ::before/::after to extend beyond bounds */
    contain: layout style;
}

/* Touch-friendly tap targets on mobile */
.notebook-navigator-mobile .nn-navitem {
    height: var(--nn-setting-nav-item-height-mobile); /* Fixed height for virtualizer accuracy */
}

/* Nav rows that display a background overlay need positioning for the pseudo elements */
.nn-navitem.nn-has-custom-background,
.nn-navitem.nn-has-search-match,
.nn-navitem.nn-selected {
    position: relative;
}

.nn-navigation-pane[data-shortcut-sorting='true'] .nn-navitem:not(.nn-shortcut-item) {
    pointer-events: none;
}

/* Render the custom background color behind the nav item content */
.nn-navitem.nn-has-custom-background::before {
    content: '';
    position: absolute;
    top: 0px;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: var(--nn-navitem-background-bottom-overdraw);
    background-color: var(--nn-navitem-custom-bg-color);
    border-top-left-radius: var(--nn-navitem-top-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    border-top-right-radius: var(--nn-navitem-top-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    border-bottom-left-radius: var(--nn-navitem-bottom-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    border-bottom-right-radius: var(--nn-navitem-bottom-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    box-shadow: inset 0 0 0 var(--nn-theme-navitem-border-width) var(--nn-theme-navitem-custom-border-color);
    z-index: 0;
    pointer-events: none;
}

.nn-navitem.nn-has-custom-background > .nn-navitem-content {
    position: relative;
    z-index: 2;
}

/* Overdraw and zero shared corners only between adjacent filled backgrounds */
.nn-navitem.nn-navitem-has-filled-next {
    --nn-navitem-background-bottom-overdraw: -0.5px;
    --nn-navitem-bottom-left-radius: 0;
    --nn-navitem-bottom-right-radius: 0;
}

.nn-navitem.nn-navitem-has-filled-previous {
    --nn-navitem-top-left-radius: 0;
    --nn-navitem-top-right-radius: 0;
}

/* Folder content - contains folder UI elements */
.nn-navitem-content {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--nn-nav-item-padding-horizontal);
    border-radius: min(14px, var(--nn-theme-navitem-border-radius));
    margin: 0;
    background: transparent;
    position: relative;
    flex: 1;
    min-width: 0; /* Critical: allows flex children to shrink below their min-content width */
    box-sizing: border-box;
}

/* Indent guide columns shown on rows inside expanded subtrees */
.nn-navitem-indent-guide {
    --nn-indent-guide-line-width: 0.5px;
    --nn-indent-guide-padding-inline-start: var(--nn-nav-item-padding-horizontal);
    --nn-indent-guide-chevron-slot-width: var(--nn-nav-icon-size);
    --nn-indent-guide-chevron-center-origin: calc(
        var(--nn-indent-guide-padding-inline-start) + (var(--nn-indent-guide-chevron-slot-width) / 2)
    );
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: calc(
        (var(--nn-indent-guide-level, 0) - var(--level, 0)) * var(--nn-setting-nav-indent) + var(--nn-indent-guide-chevron-center-origin)
    );
    width: var(--nn-indent-guide-line-width);
    transform: translateX(-50%);
    background-color: var(--nn-theme-nav-indent-guide-color);
    pointer-events: none;
    z-index: 0;
}

.mod-rtl .nn-navitem-indent-guide {
    inset-inline-start: auto;
    inset-inline-end: calc(
        (var(--level, 0) - var(--nn-indent-guide-level, 0)) * var(--nn-setting-nav-indent) + var(--nn-indent-guide-chevron-center-origin)
    );
}

.nn-navitem-content--search-include,
.nn-navitem-content--search-exclude {
    position: relative;
    z-index: 1;
}

.nn-navitem-content--search-include::before,
.nn-navitem-content--search-exclude::before {
    content: '';
    position: absolute;
    top: 0px;
    bottom: var(--nn-navitem-background-bottom-overdraw);
    inset-inline-end: 0;
    inset-inline-start: calc(var(--level, 0) * var(--nn-setting-nav-indent) * -1);
    border-top-left-radius: var(--nn-navitem-top-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    border-top-right-radius: var(--nn-navitem-top-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    border-bottom-left-radius: var(--nn-navitem-bottom-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    border-bottom-right-radius: var(--nn-navitem-bottom-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    pointer-events: none;
    z-index: -1;
}

/* Pre-composited solid color prevents hairlines by blending alpha with pane background */
.nn-navitem-content--search-include::before {
    background-color: var(--nn-computed-tag-positive-bg, var(--nn-theme-tag-positive-bg));
}

/* Pre-composited solid color prevents hairlines by blending alpha with pane background */
.nn-navitem-content--search-exclude::before {
    background-color: var(--nn-computed-tag-negative-bg, var(--nn-theme-tag-negative-bg));
}

/* Folder hover state - desktop only, using pseudo-element for padding control */
.nn-desktop .nn-navitem:hover {
    position: relative;
}

.nn-desktop .nn-navitem:not([data-search-match]):hover::after {
    content: '';
    position: absolute;
    top: 0px;
    bottom: var(--nn-navitem-background-bottom-overdraw);
    inset-inline-start: 0;
    inset-inline-end: 0;
    background-color: var(--nn-theme-navitem-hover-bg);
    border-top-left-radius: var(--nn-navitem-top-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    border-top-right-radius: var(--nn-navitem-top-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    border-bottom-left-radius: var(--nn-navitem-bottom-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    border-bottom-right-radius: var(--nn-navitem-bottom-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    box-shadow: inset 0 0 0 var(--nn-theme-navitem-border-width) var(--nn-theme-navitem-hover-border-color);
    z-index: 1;
    pointer-events: none;
}

/* Ensure content appears above hover background */
.nn-desktop .nn-navitem:hover > .nn-navitem-content {
    position: relative;
    z-index: 2;
}

.nn-split-container.nn-resizing .nn-navitem:hover::after {
    content: none;
    background-color: transparent;
}

/* Folder chevron - expand/collapse indicator */
.nn-navitem-chevron {
    width: var(--nn-nav-icon-size);
    height: var(--nn-nav-icon-size);
    margin-inline-end: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--nn-theme-navitem-chevron-color);
}

/* Larger touch targets for chevrons on mobile */
.notebook-navigator-mobile .nn-navitem-chevron {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Chevron states for folders without children */
.nn-navitem-chevron--no-children {
    visibility: hidden;
    cursor: default;
}

/* Chevron states for folders with children */
.nn-navitem-chevron--has-children {
    visibility: visible;
}

/* Folder icon - displays folder open/closed or custom icons */
.nn-navitem-icon {
    width: var(--nn-nav-icon-size);
    height: var(--nn-nav-icon-size);
    margin-inline-end: 8px;
    flex-shrink: 0;
    color: var(--nn-theme-navitem-icon-color);
    display: flex;
    align-items: center;
}

.nn-navitem-icon svg {
    width: var(--nn-nav-icon-size);
    height: var(--nn-nav-icon-size);
}

.nn-navitem-icon.nn-iconfont {
    font-size: var(--nn-nav-icon-size);
    line-height: var(--nn-nav-icon-size);
}

/* Folder name text - truncates with ellipsis on overflow */
.nn-navitem-name {
    font-size: var(--nn-setting-nav-font-size);
    font-weight: var(--nn-theme-navitem-name-font-weight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
    color: var(--nn-theme-navitem-name-color);
}

.nn-navitem[data-nav-item-type='note'] .nn-navitem-name {
    color: var(--nn-theme-navitem-file-name-color);
}

/* Custom colored folder names */
.nn-navitem-name.nn-has-custom-color {
    font-weight: var(--nn-theme-navitem-custom-color-name-font-weight);
}

/* Folder with folder note */
.nn-navitem-name.nn-has-folder-note {
    font-weight: var(--nn-theme-navitem-folder-note-name-font-weight);
    text-decoration: var(--nn-theme-navitem-folder-note-name-decoration);
}

/* Folder with folder note and custom color uses custom color weight */
.nn-navitem-name.nn-has-folder-note.nn-has-custom-color {
    font-weight: var(--nn-theme-navitem-custom-color-name-font-weight);
}

/* Folder with folder note - show pointer cursor on hover */
.nn-navitem-name.nn-has-folder-note:hover {
    cursor: pointer;
    text-decoration: var(--nn-theme-navitem-folder-note-name-hover-decoration);
}

/* Spacer element to push count to the end */
.nn-navitem-spacer {
    --nn-nav-leader-color: var(--nn-theme-nav-leader-color);
    --nn-nav-count-leader-bottom-offset: calc((var(--nn-setting-nav-item-height) - var(--nn-nav-line-height)) / 2 + 4px);
    flex: 1;
    min-width: 8px; /* Minimum space between name and count */
}

.notebook-navigator-mobile .nn-navitem-spacer {
    --nn-nav-count-leader-bottom-offset: calc((var(--nn-setting-nav-item-height-mobile) - var(--nn-nav-line-height)) / 2 + 5px);
}

[data-nav-count-leader-style='dots'] .nn-navitem-spacer--leader,
[data-nav-count-leader-style='dashes'] .nn-navitem-spacer--leader,
[data-nav-count-leader-style='line'] .nn-navitem-spacer--leader {
    position: relative;
    align-self: stretch;
    margin-inline: 8px;
    min-width: 16px;
}

[data-nav-count-leader-style='dots'] .nn-navitem-spacer--leader::after,
[data-nav-count-leader-style='dashes'] .nn-navitem-spacer--leader::after,
[data-nav-count-leader-style='line'] .nn-navitem-spacer--leader::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: var(--nn-nav-count-leader-bottom-offset);
    pointer-events: none;
}

[data-nav-count-leader-style='dots'] .nn-navitem-spacer--leader::after {
    height: 2px;
    background-image: radial-gradient(circle, var(--nn-nav-leader-color) 0, var(--nn-nav-leader-color) 1px, transparent 1px);
    background-repeat: repeat-x;
    background-position: center;
    background-size: 6px 2px;
}

[data-nav-count-leader-style='dashes'] .nn-navitem-spacer--leader::after {
    height: 1px;
    background-image: repeating-linear-gradient(
        to right,
        var(--nn-nav-leader-color) 0,
        var(--nn-nav-leader-color) 6px,
        transparent 6px,
        transparent 10px
    );
}

[data-nav-count-leader-style='line'] .nn-navitem-spacer--leader::after {
    height: 1px;
    background-color: var(--nn-nav-leader-color);
}

/* Folder file count - shows number of files in folder */
.nn-navitem-count {
    font-size: var(--nn-navitem-count-font-size);
    font-weight: var(--nn-theme-navitem-count-font-weight);
    color: var(--nn-theme-navitem-count-color);
    background-color: var(--nn-theme-navitem-count-bg);
    flex-shrink: 0;
    /* Dynamic margin that increases with navitem border radius for better visual balance */
    margin-inline-end: calc(-2px + max(0px, calc(min(14px, var(--nn-theme-navitem-border-radius)) - 4px) * 0.3));

    /* Pill style when background is set */
    border-radius: min(8px, var(--nn-theme-navitem-count-border-radius));
    padding: 0 6px;
    height: 16px;
    line-height: 16px;
    min-width: 20px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--nn-theme-navitem-count-border-width) var(--nn-theme-navitem-count-border-color);
}

.nn-navitem-operator-indicator {
    padding-inline: 4px;
}

.nn-navitem-operator-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.nn-navitem-operator-icon svg {
    width: 12px;
    height: 12px;
}

/* Hover action button - replaces badge/count on hover */
.nn-navitem-hover-action-slot {
    position: relative;
    flex-shrink: 0;
}

.nn-navitem-hover-action-slot--overlay {
    width: 0;
    min-width: 0;
    overflow: visible;
}

button.nn-icon-button.nn-navitem-hover-action-button {
    position: absolute;
    top: 50%;
    inset-inline-end: 0;
    transform: translateY(-50%);
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
    height: 18px;
    width: 18px;
    min-height: 0;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    z-index: 1;
}

.nn-navitem-hover-action-button svg {
    width: 14px;
    height: 14px;
}

.nn-navitem-hover-action-placeholder {
    visibility: hidden;
}

.nn-desktop .nn-shortcut-item--removable:hover .nn-navitem-hover-action-button,
.nn-desktop .nn-shortcut-header-item:hover .nn-navitem-hover-action-button,
.nn-desktop .nn-properties-header-item:hover .nn-navitem-hover-action-button {
    visibility: visible;
    pointer-events: auto;
}

.nn-desktop .nn-shortcut-item--removable:hover .nn-navitem-hover-action-slot--overlay,
.nn-desktop .nn-shortcut-header-item:hover .nn-navitem-hover-action-slot--overlay,
.nn-desktop .nn-properties-header-item:hover .nn-navitem-hover-action-slot--overlay {
    width: 18px;
}

.nn-desktop .nn-shortcut-item--removable:hover .nn-navitem-hover-action-count,
.nn-desktop .nn-shortcut-header-item:hover .nn-navitem-hover-action-count,
.nn-desktop .nn-properties-header-item:hover .nn-navitem-hover-action-count {
    opacity: 0;
}

/* Shortcut section styling */
.nn-shortcut-header-item .nn-navitem-name {
    font-weight: 400;
}

.nn-shortcut-header-item .nn-navitem-count {
    font-size: var(--nn-navitem-count-font-size);
}

.nn-drag-item {
    position: relative;
}

.nn-drag-item .nn-navitem-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.nn-drag-item .nn-shortcut-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nn-shortcut-item .nn-shortcut-label {
    font-weight: var(--nn-theme-navitem-file-name-font-weight);
}

.nn-shortcut-item .nn-shortcut-label[data-has-color='true'] {
    font-weight: var(--nn-theme-navitem-custom-color-file-name-font-weight);
}

.nn-shortcut-item--missing .nn-shortcut-label {
    text-decoration: line-through;
}

/* Styles for shortcut labels that have an associated folder note */
.nn-shortcut-item .nn-navitem-name.nn-has-folder-note .nn-shortcut-label {
    font-weight: var(--nn-theme-navitem-folder-note-name-font-weight);
    text-decoration: var(--nn-theme-navitem-folder-note-name-decoration);
}

/* Folder note shortcuts with custom color use custom color weight */
.nn-shortcut-item .nn-navitem-name.nn-has-folder-note.nn-has-custom-color .nn-shortcut-label {
    font-weight: var(--nn-theme-navitem-custom-color-file-name-font-weight);
}

/* Pointer cursor on hover for clickable folder note shortcuts */
.nn-shortcut-item .nn-navitem-name.nn-has-folder-note:hover .nn-shortcut-label {
    cursor: pointer;
    text-decoration: var(--nn-theme-navitem-folder-note-name-hover-decoration);
}

.nn-drag-item .nn-shortcut-description {
    flex-shrink: 0;
}

.nn-navitem-accessory {
    display: flex;
    gap: 0.25rem;
    margin-inline-start: 0.5rem;
}

.nn-drag-item-has-handle .nn-navitem-content {
    gap: 0.25rem;
}

.nn-drag-handle {
    width: 28px;
    height: calc(var(--nn-setting-nav-item-height) - 4px);
    margin-inline-start: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none;
    color: var(--nn-theme-navitem-icon-color);
    flex-shrink: 0;
}

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

.nn-drag-handle-disabled {
    color: var(--nn-theme-header-button-disabled-icon-color);
    opacity: 0.4;
    cursor: default;
}

.nn-drag-handle:focus {
    outline: none;
}

.nn-drag-handle .nn-iconfont,
.nn-drag-handle svg {
    width: 16px;
    height: 16px;
}

.nn-root-reorder-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 0;
}

.nn-root-reorder-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
}

.nn-root-reorder-title {
    font-size: var(--nn-desktop-header-font-size);
    font-weight: var(--nn-theme-list-header-breadcrumb-font-weight);
    line-height: 1.3;
}

.notebook-navigator-mobile .nn-root-reorder-title {
    font-size: var(--nn-mobile-header-font-size);
}

.nn-root-reorder-title,
.nn-root-reorder-hint {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nn-root-reorder-hint {
    font-size: var(--nn-root-reorder-hint-font-size);
    color: var(--nn-theme-foreground-muted);
    line-height: 1.25;
}

.notebook-navigator-mobile .nn-root-reorder-hint {
    font-size: var(--nn-root-reorder-hint-font-size-mobile);
}

.nn-root-reorder-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.nn-root-reorder-section {
    display: flex;
    flex-direction: column;
    position: relative;
}

.nn-root-reorder-item {
    cursor: default;
}

.nn-root-reorder-item .nn-shortcut-label {
    font-weight: var(--nn-theme-navitem-name-font-weight);
}

.nn-root-reorder-item .nn-shortcut-label[data-has-color='true'] {
    font-weight: var(--nn-theme-navitem-custom-color-name-font-weight);
}

.nn-root-reorder-item--missing .nn-shortcut-label {
    text-decoration: line-through;
    color: var(--nn-theme-foreground-muted);
}

.nn-root-reorder-actions {
    margin-top: 0.75rem;
    display: flex;
    justify-content: center;
}

.nn-root-reorder-remove {
    color: var(--text-accent);
    font-size: var(--nn-setting-nav-font-size);
    font-weight: var(--font-semibold);
    cursor: pointer;
    display: inline;
    text-decoration: underline;
}

.nn-root-reorder-remove:hover,
.nn-root-reorder-remove:focus {
    color: var(--text-accent);
    text-decoration: underline;
}

.nn-root-reorder-remove:focus-visible {
    outline: none;
}

.nn-root-reorder-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    cursor: pointer;
}

.nn-root-reorder-reset-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.nn-root-reorder-section-controls {
    display: flex;
    gap: 0.25rem;
}

.nn-root-reorder-section-button {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    color: var(--nn-theme-header-button-icon-color);
    flex-shrink: 0;
}

.nn-root-reorder-section-button svg {
    width: 16px;
    height: 16px;
}

.nn-desktop .nn-root-reorder-section-button:hover {
    background-color: var(--nn-theme-header-button-hover-bg);
}

.nn-root-reorder-section-button:disabled {
    color: var(--nn-theme-header-button-disabled-icon-color);
    opacity: 0.4;
    cursor: not-allowed;
}

.nn-shortcut-disabled {
    --nn-theme-navitem-chevron-color: var(--nn-theme-foreground);
    --nn-theme-navitem-icon-color: var(--nn-theme-foreground);
    --nn-theme-navitem-name-color: var(--nn-theme-foreground);
    --nn-theme-navitem-file-name-color: var(--nn-theme-foreground);
    --nn-theme-navitem-count-color: var(--nn-theme-foreground);
    opacity: 0.5;
    pointer-events: none;
}
/* Source: src/styles/sections/navigation-properties.css */

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

/* Property tree rows reuse the shared navigation row layout from navigation-tree.css. */
.nn-navitem.nn-property .nn-navitem-name {
    unicode-bidi: plaintext;
}
/* Source: src/styles/sections/calendar.css */

/* ========================================================================
   Section index
   1. Shared tokens and shell (overlay + right sidebar)
   2. Header controls (shared)
   3. Header mode: split
   4. Year panel (shared)
   5. Month grid and day cells
   6. Hover and day-state styling
   7. Hover tooltip
   8. Right sidebar shell
   9. Header mode: compact yearly (right sidebar)
   ======================================================================== */

/* ========================================================================
   Shared tokens and shell (overlay + right sidebar)
   ======================================================================== */

:is(.nn-navigation-pane, .nn-list-pane, .nn-single-pane-calendar) {
    /* Shared calendar sizing and spacing tokens for overlay and sidebar layouts. */
    --nn-calendar-week-count: 6;
    --nn-calendar-scrollbar-gap: var(--scrollbar-size, 12px);
    --nn-calendar-week-gap: 1px;
    --nn-calendar-weekday-row-height: 14px;
    --nn-calendar-header-row-height: 28px;
    --nn-calendar-header-font-size: 12px;
    --nn-calendar-nav-button-size: 28px;
    --nn-calendar-nav-icon-size: 18px;
    --nn-calendar-today-height: 28px;
    --nn-calendar-today-font-size: 12px;
    --nn-calendar-weekday-font-size: 11px;
    --nn-calendar-weeknumber-font-size: var(--nn-calendar-day-font-size);
    --nn-calendar-day-font-size: 12px;
    --nn-calendar-section-gap: 6px;
    --nn-calendar-year-panel-padding-top: 8px;
    --nn-calendar-padding: 8px;
    --nn-calendar-safe-area: 0px;
    --nn-calendar-border-width: 1px;
    --nn-calendar-weeknumber-column-width: 28px;
    --nn-calendar-weeknumber-padding-right: 4px;
    --nn-calendar-note-indicator-size: 15%;
    --nn-calendar-note-indicator-max-size: 5px;
    --nn-calendar-note-indicator-center-offset: clamp(6px, calc(var(--nn-calendar-day-font-size) * 0.65), 12px);
    --nn-calendar-task-indicator-offset-x: clamp(5px, calc(var(--nn-calendar-day-font-size) * 0.42), 9px);
    --nn-calendar-weekend-corner-radius: 6px;
    --nn-calendar-header-chip-bg: var(--nn-theme-nav-bg);
    --nn-calendar-note-indicator-color: var(--nn-theme-calendar-note-indicator-color);
    --nn-calendar-task-indicator-color: var(--nn-theme-calendar-unfinished-task-indicator-color);
    --nn-calendar-active-editor-border-color: var(--nn-theme-calendar-day-active-border-color);
    --nn-calendar-active-editor-border-width: var(--nn-theme-calendar-day-active-border-width);
}

.notebook-navigator-mobile :is(.nn-navigation-pane, .nn-list-pane, .nn-single-pane-calendar) {
    --nn-calendar-safe-area: var(--nn-mobile-safe-area-bottom);
    --nn-calendar-scrollbar-gap: 0px;
    --nn-calendar-border-width: 0px;
    --nn-calendar-weekday-row-height: 16px;
    --nn-calendar-header-row-height: 32px;
    --nn-calendar-header-font-size: 14px;
    --nn-calendar-nav-button-size: 32px;
    --nn-calendar-nav-icon-size: 18px;
    --nn-calendar-today-height: 32px;
    --nn-calendar-today-font-size: 14px;
    --nn-calendar-weekday-font-size: 12px;
    --nn-calendar-weeknumber-font-size: var(--nn-calendar-day-font-size);
    --nn-calendar-day-font-size: 13px;
}

.nn-single-pane-calendar,
.nn-navigation-calendar-overlay {
    flex-shrink: 0;
    box-sizing: border-box;
    padding: var(--nn-calendar-padding) calc(var(--nn-scroller-padding) + var(--nn-calendar-scrollbar-gap))
        calc(var(--nn-calendar-padding) + var(--nn-calendar-safe-area)) var(--nn-scroller-padding);
    border-top: var(--nn-calendar-border-width) solid var(--nn-theme-divider-border-color);
    background-color: var(--nn-theme-nav-bg);
}

.nn-navigation-calendar {
    height: auto;
    container-type: inline-size;
    --nn-calendar-day-font-size: clamp(9px, 4.6cqw, 12px);
    --nn-calendar-weekday-font-size: clamp(8px, 3.6cqw, 12px);
    --nn-calendar-weeknumber-font-size: var(--nn-calendar-day-font-size);
    --nn-calendar-weeknumber-column-width: clamp(20px, 9cqw, 44px);
    --nn-calendar-weeknumber-padding-right: clamp(2px, 1.2cqw, 8px);
    --nn-calendar-note-indicator-center-offset: clamp(4px, calc(var(--nn-calendar-day-font-size) * 0.65), 12px);
    display: flex;
    flex-direction: column;
    gap: var(--nn-calendar-section-gap);
    user-select: none;
}

.nn-navigation-calendar-grid {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--nn-calendar-section-gap);
}

/* ========================================================================
   Header controls (shared)
   ======================================================================== */

.nn-navigation-calendar-header {
    height: var(--nn-calendar-header-row-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.nn-navigation-calendar-month {
    font-size: var(--nn-calendar-header-font-size);
    font-weight: 600;
    color: var(--nn-theme-calendar-header-color);
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    line-height: 1;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.nn-navigation-calendar-month .nn-navigation-calendar-period-month {
    flex: 0 1 auto;
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.nn-navigation-calendar-month .nn-navigation-calendar-period-year {
    flex: 0 0 auto;
}

.nn-navigation-calendar-month .nn-navigation-calendar-quarter-button {
    flex: 0 0 auto;
}

:is(.nn-navigation-pane, .nn-list-pane, .nn-single-pane-calendar) .nn-navigation-calendar-month {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: visible;
    z-index: 0;
}

:is(.nn-navigation-pane, .nn-list-pane, .nn-single-pane-calendar) .nn-navigation-calendar-month .nn-navigation-calendar-period-month {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

button.nn-navigation-calendar-period-button,
button.nn-navigation-calendar-nav-button,
button.nn-navigation-calendar-today,
button.nn-navigation-calendar-year-month,
button.nn-navigation-calendar-weeknumber-button,
button.nn-navigation-calendar-day {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: none;
    outline: none;
}

.nn-navigation-calendar-period-button,
.nn-navigation-calendar-weeknumber {
    position: relative;
}

button.nn-navigation-calendar-period-button {
    background: var(--nn-calendar-header-chip-bg);
    color: var(--nn-theme-calendar-header-color);
    font: inherit;
    box-sizing: border-box;
    height: var(--nn-calendar-today-height);
    padding: 0 1px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nn-navigation-calendar-period-button.has-period-note::after {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 2px;
    height: 1px;
    background-color: currentColor;
    pointer-events: none;
    z-index: 1;
}

.nn-navigation-calendar-period-button.is-active-editor-file .nn-navigation-calendar-active-outline,
.nn-navigation-calendar-weeknumber.is-active-editor-file .nn-navigation-calendar-active-outline {
    display: block;
}

.nn-navigation-calendar button.nn-navigation-calendar-period-button {
    color: var(--nn-theme-calendar-header-color);
}

.nn-navigation-calendar-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

:is(.nn-navigation-pane, .nn-list-pane, .nn-single-pane-calendar) .nn-navigation-calendar-nav {
    flex: 0 0 auto;
    margin-left: auto;
    position: relative;
    z-index: 2;
}

.nn-navigation-calendar-help-inline {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    color: var(--nn-theme-foreground-muted);
    z-index: 0;
    flex: 0 0 auto;
}

.nn-navigation-calendar-month-help {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nn-theme-foreground-muted);
    z-index: 0;
}

.nn-navigation-calendar-month.has-inline-month-nav {
    display: grid;
    grid-template-columns: var(--nn-calendar-nav-button-size) minmax(0, 1fr) var(--nn-calendar-nav-button-size);
    align-items: center;
    gap: 0;
}

.nn-navigation-calendar-inline-month-center {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.nn-navigation-calendar-month.has-inline-month-nav .nn-navigation-calendar-inline-month-center {
    grid-column: 2;
    justify-self: center;
}

.nn-navigation-calendar-month.has-inline-help .nn-navigation-calendar-inline-month-center {
    position: relative;
    overflow: visible;
}

.nn-navigation-calendar-month.has-inline-help:not(.has-inline-month-nav) .nn-navigation-calendar-inline-help {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    width: 0;
    min-width: 0;
    height: 20px;
    margin-left: 0;
    padding: 0;
    overflow: hidden;
    flex: 0 0 auto;
}

.nn-navigation-calendar-month.has-inline-month-nav .nn-navigation-calendar-inline-month-center .nn-navigation-calendar-period-month {
    padding-inline: 1px;
}

.nn-navigation-calendar-month.has-inline-help.has-inline-month-nav .nn-navigation-calendar-inline-help {
    position: absolute;
    left: calc(100% + 2px);
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

.nn-navigation-calendar-quarter-inline {
    flex: 0 0 auto;
}

.nn-navigation-calendar-month.has-inline-month-nav .nn-navigation-calendar-year-nav-button {
    position: static;
    top: auto;
    transform: none;
    z-index: 1;
}

.nn-navigation-calendar-month.has-inline-month-nav .nn-navigation-calendar-inline-month-nav-prev {
    grid-column: 1;
    justify-self: start;
}

.nn-navigation-calendar-month.has-inline-month-nav .nn-navigation-calendar-inline-month-nav-next {
    grid-column: 3;
    justify-self: end;
}

button.nn-navigation-calendar-nav-button.nn-navigation-calendar-nav-prev {
    width: 24px;
    justify-content: flex-start;
}

button.nn-navigation-calendar-nav-button.nn-navigation-calendar-nav-next {
    width: 24px;
    justify-content: flex-end;
}

button.nn-navigation-calendar-nav-button {
    width: var(--nn-calendar-nav-button-size);
    height: var(--nn-calendar-nav-button-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--nn-theme-foreground-muted);
    padding: 0;
    line-height: 0;
}

button.nn-navigation-calendar-today {
    background: transparent;
    color: var(--nn-theme-foreground-muted);
    font: inherit;
    font-size: var(--nn-calendar-today-font-size);
    font-weight: 600;
    height: var(--nn-calendar-today-height);
    padding: 0 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.nn-navigation-calendar button:is(.nn-navigation-calendar-nav-button, .nn-navigation-calendar-today) {
    color: var(--nn-theme-foreground-muted);
}

/* ========================================================================
   Header mode: split
   ======================================================================== */

.nn-navigation-calendar[data-split-header='true'] .nn-navigation-calendar-header {
    position: relative;
    height: var(--nn-calendar-header-row-height);
    min-height: var(--nn-calendar-header-row-height);
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    overflow: hidden;
}

.nn-navigation-calendar[data-split-header='true'] .nn-navigation-calendar-nav {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    z-index: 3;
    background-color: var(--nn-calendar-header-chip-bg);
    border-radius: 8px;
    padding: 0 2px;
}

.nn-navigation-calendar[data-split-header='true'] .nn-navigation-calendar-month {
    flex: 1 1 auto;
    max-width: none;
    overflow: hidden;
    z-index: 1;
}

.nn-navigation-calendar[data-split-header='true'] .nn-navigation-calendar-month .nn-navigation-calendar-period-month {
    flex: 0 0 auto;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

/* ========================================================================
   Year panel (shared)
   ======================================================================== */

.nn-navigation-calendar-year-panel {
    display: flex;
    flex-direction: column;
    gap: var(--nn-calendar-section-gap);
    padding-top: var(--nn-calendar-year-panel-padding-top);
}

.nn-navigation-calendar-year-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

button.nn-navigation-calendar-nav-button.nn-navigation-calendar-year-nav-button {
    width: 24px;
    height: var(--nn-calendar-nav-button-size);
}

button.nn-navigation-calendar-year-label {
    color: var(--nn-theme-foreground-muted);
    font-size: var(--nn-calendar-today-font-size);
    font-weight: 600;
    height: var(--nn-calendar-today-height);
    line-height: 1;
    min-width: 64px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

.nn-navigation-calendar-year-label.nn-navigation-calendar-period-button {
    color: var(--nn-theme-calendar-header-color);
}

.nn-navigation-calendar-year-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 1px;
    aspect-ratio: 16 / 9;
}

button.nn-navigation-calendar-year-month {
    position: relative;
    background-color: transparent;
    color: var(--nn-theme-calendar-day-in-month-color);
    font: inherit;
    font-size: var(--nn-calendar-day-font-size);
    line-height: 1;
    min-height: 0;
    padding: 6px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.nn-navigation-calendar-day.has-feature-image::before,
.nn-navigation-calendar-year-month.has-feature-image::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03) 24%, rgba(255, 255, 255, 0) 48%),
        linear-gradient(
            var(--nn-theme-calendar-feature-image-overlay-color, rgb(0 0 0 / 0.05)),
            var(--nn-theme-calendar-feature-image-overlay-color, rgb(0 0 0 / 0.05))
        );
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    pointer-events: none;
    z-index: 0;
}

.nn-navigation-calendar-active-outline {
    display: none;
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: var(--nn-calendar-active-editor-border-width) solid var(--nn-calendar-active-editor-border-color);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

.nn-navigation-calendar-day.has-feature-image.is-active-editor-file .nn-navigation-calendar-active-outline,
.nn-navigation-calendar-year-month.has-feature-image.is-selected-month .nn-navigation-calendar-active-outline {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.nn-navigation-calendar-year-month-label {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nn-navigation-calendar-year-month.has-daily-note:not(.has-feature-image):not(.has-feature-image-key)::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, var(--nn-calendar-note-indicator-center-offset));
    height: min(var(--nn-calendar-note-indicator-size), var(--nn-calendar-note-indicator-max-size));
    aspect-ratio: 1 / 1;
    width: auto;
    border-radius: 999px;
    background-color: var(--nn-calendar-note-indicator-color);
    z-index: 1;
    pointer-events: none;
}

.nn-navigation-calendar-year-month.has-daily-note.has-unfinished-tasks:not(.has-feature-image):not(.has-feature-image-key)::after {
    transform: translate(calc(-50% - (var(--nn-calendar-task-indicator-offset-x) / 2)), var(--nn-calendar-note-indicator-center-offset));
}

.nn-navigation-calendar-year-month-unfinished-task-indicator {
    display: none;
}

.nn-navigation-calendar-year-month.has-unfinished-tasks .nn-navigation-calendar-year-month-unfinished-task-indicator {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, var(--nn-calendar-note-indicator-center-offset));
    height: min(var(--nn-calendar-note-indicator-size), var(--nn-calendar-note-indicator-max-size));
    aspect-ratio: 1 / 1;
    width: auto;
    border-radius: 999px;
    border: 1px solid var(--nn-calendar-task-indicator-color);
    background-color: transparent;
    z-index: 1;
    pointer-events: none;
    display: block;
}

.nn-navigation-calendar-year-month.has-daily-note.has-unfinished-tasks:not(.has-feature-image):not(.has-feature-image-key)
    .nn-navigation-calendar-year-month-unfinished-task-indicator {
    transform: translate(calc(-50% + (var(--nn-calendar-task-indicator-offset-x) / 2)), var(--nn-calendar-note-indicator-center-offset));
}

.nn-navigation-calendar-year-month.has-unfinished-tasks.has-feature-image .nn-navigation-calendar-year-month-unfinished-task-indicator,
.nn-navigation-calendar-year-month.has-unfinished-tasks.has-feature-image-key .nn-navigation-calendar-year-month-unfinished-task-indicator {
    border-color: currentColor;
}

.nn-navigation-calendar-year-month.is-selected-month {
    color: var(--nn-theme-calendar-day-in-month-color);
}

.nn-navigation-calendar-year-month.is-selected-month .nn-navigation-calendar-active-outline {
    display: block;
}

.nn-navigation-calendar-year-month.is-selected-month.has-feature-image {
    color: var(--nn-theme-calendar-feature-image-text-color);
}

.nn-navigation-calendar[data-highlight-today='true']
    .nn-navigation-calendar-year-month.is-current-month:not(.has-feature-image):not(.has-feature-image-key) {
    background-color: var(--nn-theme-calendar-day-today-bg);
    color: var(--nn-theme-calendar-day-today-color);
}

.nn-navigation-calendar button.nn-navigation-calendar-year-month {
    color: var(--nn-theme-calendar-day-in-month-color);
}

.nn-navigation-calendar button.nn-navigation-calendar-year-month.has-feature-image {
    color: var(--nn-theme-calendar-feature-image-text-color);
}

.nn-navigation-calendar button.nn-navigation-calendar-year-month.is-selected-month {
    color: var(--nn-theme-calendar-day-in-month-color);
}

.nn-navigation-calendar button.nn-navigation-calendar-year-month.is-selected-month.has-feature-image {
    color: var(--nn-theme-calendar-feature-image-text-color);
}

.nn-navigation-calendar[data-highlight-today='true']
    button.nn-navigation-calendar-year-month.is-current-month:not(.has-feature-image):not(.has-feature-image-key) {
    color: var(--nn-theme-calendar-day-today-color);
}

.nn-navigation-calendar[data-highlight-today='true']
    button.nn-navigation-calendar-year-month.is-current-month.is-selected-month:not(.has-feature-image):not(.has-feature-image-key) {
    color: var(--nn-theme-calendar-day-today-color);
}

/* Calendar month navigation icon sizing (ServiceIcon renders an SVG). */
.nn-navigation-calendar-nav-button svg {
    width: var(--nn-calendar-nav-icon-size);
    height: var(--nn-calendar-nav-icon-size);
    stroke-width: 2.5;
}

.nn-navigation-calendar-help svg,
.nn-navigation-calendar-month-help svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* ========================================================================
   Month grid and day cells
   ======================================================================== */

.nn-navigation-calendar-weekdays {
    min-height: var(--nn-calendar-weekday-row-height);
    display: grid;
    align-items: center;
    gap: 0 1px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    color: var(--nn-theme-calendar-weekday-color);
    font-size: var(--nn-calendar-weekday-font-size);
    line-height: 1;
}

.nn-navigation-calendar-weekdays[data-weeknumbers='true'] {
    grid-template-columns: var(--nn-calendar-weeknumber-column-width) 1px repeat(7, minmax(0, 1fr));
}

.nn-navigation-calendar-weekday,
.nn-navigation-calendar-weeknumber-spacer {
    text-align: center;
}

.nn-navigation-calendar-weekdays[data-weeknumbers='true'] .nn-navigation-calendar-weeknumber-spacer {
    text-align: right;
    padding-right: var(--nn-calendar-weeknumber-padding-right);
}

.nn-navigation-calendar-weeks {
    display: flex;
    flex-direction: column;
    gap: var(--nn-calendar-week-gap);
}

.nn-navigation-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 1px;
    align-items: center;
}

.nn-navigation-calendar-weeks[data-weeknumbers='true'] .nn-navigation-calendar-week {
    grid-template-columns: var(--nn-calendar-weeknumber-column-width) 1px repeat(7, minmax(0, 1fr));
}

.nn-navigation-calendar-week-spacer {
    pointer-events: none;
}

.nn-navigation-calendar-weeknumber-divider {
    width: 1px;
    height: 100%;
    background-color: var(--nn-theme-calendar-hover-bg);
    pointer-events: none;
}

.nn-navigation-calendar-week.has-next-week .nn-navigation-calendar-weeknumber-divider {
    position: relative;
}

.nn-navigation-calendar-week.has-next-week .nn-navigation-calendar-weeknumber-divider::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 100%;
    height: var(--nn-calendar-week-gap);
    background-color: var(--nn-theme-calendar-hover-bg);
    pointer-events: none;
}

.nn-navigation-calendar-weekdays .nn-navigation-calendar-weeknumber-divider {
    background-color: transparent;
}

.nn-navigation-calendar-weeknumber {
    height: auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--nn-calendar-weeknumber-padding-right);
    color: var(--nn-theme-calendar-week-color);
    font-size: var(--nn-calendar-weeknumber-font-size);
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

button.nn-navigation-calendar-weeknumber-button {
    width: 100%;
    background-color: transparent;
}

.nn-navigation-calendar button.nn-navigation-calendar-weeknumber {
    color: var(--nn-theme-calendar-week-color);
}

.nn-navigation-calendar-weeknumber-button.has-period-note {
    text-decoration: none;
}

.nn-navigation-calendar-weeknumber-spacer-row {
    visibility: hidden;
}

.nn-navigation-calendar-weeknumber-value {
    display: inline-block;
    position: relative;
}

.nn-navigation-calendar-weeknumber.has-period-note .nn-navigation-calendar-weeknumber-value::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 2px;
    width: clamp(2px, 1.9cqw, var(--nn-calendar-note-indicator-max-size));
    height: clamp(2px, 1.9cqw, var(--nn-calendar-note-indicator-max-size));
    border-radius: 999px;
    background-color: var(--nn-calendar-note-indicator-color);
    pointer-events: none;
}

.nn-navigation-calendar-weeknumber.has-period-note.has-unfinished-tasks .nn-navigation-calendar-weeknumber-value::after {
    transform: translateX(calc(-50% - (var(--nn-calendar-task-indicator-offset-x) / 2)));
}

.nn-navigation-calendar-weeknumber.has-unfinished-tasks .nn-navigation-calendar-weeknumber-value::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(calc(-50% + (var(--nn-calendar-task-indicator-offset-x) / 2)));
    margin-top: 2px;
    width: clamp(2px, 1.9cqw, var(--nn-calendar-note-indicator-max-size));
    height: clamp(2px, 1.9cqw, var(--nn-calendar-note-indicator-max-size));
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid var(--nn-calendar-task-indicator-color);
    background-color: transparent;
    pointer-events: none;
}

.nn-navigation-calendar-day-cell {
    position: relative;
    min-width: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.nn-navigation-calendar-day-cell.is-weekend::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--nn-theme-calendar-weekend-bg);
    border-radius: 0;
    pointer-events: none;
    z-index: 0;
}

.nn-navigation-calendar-day-cell.is-weekend.has-weekend-before::before {
    inset-inline-start: -0.5px;
}

.nn-navigation-calendar-day-cell.is-weekend.has-weekend-after::before {
    inset-inline-end: -0.5px;
}

.nn-navigation-calendar-day-cell.is-weekend.has-weekend-above::before {
    inset-block-start: -0.5px;
}

.nn-navigation-calendar-day-cell.is-weekend.has-weekend-below::before {
    inset-block-end: -0.5px;
}

.nn-navigation-calendar-day-cell.is-weekend.round-weekend-top-left::before {
    border-top-left-radius: var(--nn-calendar-weekend-corner-radius);
}

.nn-navigation-calendar-day-cell.is-weekend.round-weekend-top-right::before {
    border-top-right-radius: var(--nn-calendar-weekend-corner-radius);
}

.nn-navigation-calendar-day-cell.is-weekend.round-weekend-bottom-left::before {
    border-bottom-left-radius: var(--nn-calendar-weekend-corner-radius);
}

.nn-navigation-calendar-day-cell.is-weekend.round-weekend-bottom-right::before {
    border-bottom-right-radius: var(--nn-calendar-weekend-corner-radius);
}

button.nn-navigation-calendar-day {
    position: relative;
    height: auto;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--nn-theme-calendar-day-in-month-color);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.nn-navigation-calendar-day-spacer {
    min-width: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
}

/* ========================================================================
   Hover and day-state styling
   ======================================================================== */

/* Hover effects only apply on hover-capable devices (prevents "stuck hover" on touch). */
@media (hover: hover) and (pointer: fine) {
    .nn-navigation-calendar-nav-button:hover {
        background-color: var(--nn-theme-calendar-hover-bg);
    }

    .nn-navigation-calendar-help:hover {
        background-color: transparent;
    }

    .nn-navigation-calendar-month-help:hover {
        background-color: transparent;
    }

    .nn-navigation-calendar-month.has-inline-help .nn-navigation-calendar-inline-help {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .nn-navigation-calendar-month.has-inline-help:hover .nn-navigation-calendar-inline-help,
    .nn-navigation-calendar-month.has-inline-help:focus-within .nn-navigation-calendar-inline-help {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nn-navigation-calendar-month.has-inline-help:not(.has-inline-month-nav):hover .nn-navigation-calendar-inline-help,
    .nn-navigation-calendar-month.has-inline-help:not(.has-inline-month-nav):focus-within .nn-navigation-calendar-inline-help {
        width: 20px;
        min-width: 20px;
        margin-left: 2px;
    }

    :is(.nn-navigation-pane, .nn-list-pane, .nn-single-pane-calendar) .nn-navigation-calendar-header .nn-navigation-calendar-help-inline {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    :is(.nn-navigation-pane, .nn-list-pane, .nn-single-pane-calendar)
        .nn-navigation-calendar-header:is(:hover, :focus-within)
        .nn-navigation-calendar-help-inline {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nn-navigation-calendar[data-split-header='true'] .nn-navigation-calendar-header .nn-navigation-calendar-help-inline {
        width: 0;
        min-width: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .nn-navigation-calendar[data-split-header='true'] .nn-navigation-calendar-header:hover .nn-navigation-calendar-help-inline,
    .nn-navigation-calendar[data-split-header='true'] .nn-navigation-calendar-header:focus-within .nn-navigation-calendar-help-inline {
        width: var(--nn-calendar-nav-button-size);
        min-width: var(--nn-calendar-nav-button-size);
    }

    .nn-navigation-calendar-today:hover {
        background-color: var(--nn-theme-calendar-hover-bg);
    }

    .nn-navigation-calendar-period-button:hover,
    .nn-navigation-calendar-weeknumber-button:hover {
        filter: brightness(1.05);
        background-color: var(--nn-theme-calendar-hover-bg);
    }

    .nn-navigation-calendar-day:hover {
        filter: brightness(1.05);
    }

    .nn-navigation-calendar-day:hover:not(.has-feature-image):not(.has-feature-image-key) {
        background-color: var(--nn-theme-calendar-hover-bg);
    }

    .nn-navigation-calendar-year-month:hover {
        filter: brightness(1.05);
    }

    .nn-navigation-calendar-year-month:hover:not(.is-selected-month):not(.has-feature-image):not(.has-feature-image-key) {
        background-color: var(--nn-theme-calendar-hover-bg);
    }
}

.nn-navigation-calendar-day.is-outside-month:not(.has-feature-image):not(.has-feature-image-key) {
    color: var(--nn-theme-calendar-day-outside-month-color);
}

.nn-navigation-calendar[data-highlight-today='true']
    .nn-navigation-calendar-day.is-today:not(.has-feature-image):not(.has-feature-image-key) {
    color: var(--nn-theme-calendar-day-today-color);
}

.nn-navigation-calendar[data-highlight-today='true']
    .nn-navigation-calendar-day.is-today:not(.has-feature-image):not(.has-feature-image-key)::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--nn-theme-calendar-day-today-bg);
    z-index: 0;
}

.nn-navigation-calendar-day.has-daily-note:not(.has-feature-image):not(.has-feature-image-key)::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, var(--nn-calendar-note-indicator-center-offset));
    height: min(var(--nn-calendar-note-indicator-size), var(--nn-calendar-note-indicator-max-size));
    aspect-ratio: 1 / 1;
    width: auto;
    border-radius: 999px;
    background-color: var(--nn-calendar-note-indicator-color);
    z-index: 1;
    pointer-events: none;
}

.nn-navigation-calendar-day.is-active-editor-file .nn-navigation-calendar-active-outline {
    display: block;
}

/* Center the two-indicator group horizontally when both note and unfinished-task indicators are visible. */
.nn-navigation-calendar-day.has-daily-note.has-unfinished-tasks:not(.has-feature-image):not(.has-feature-image-key)::after {
    transform: translate(calc(-50% - (var(--nn-calendar-task-indicator-offset-x) / 2)), var(--nn-calendar-note-indicator-center-offset));
}

.nn-navigation-calendar-day-unfinished-task-indicator {
    display: none;
}

.nn-navigation-calendar-day.has-unfinished-tasks .nn-navigation-calendar-day-unfinished-task-indicator {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, var(--nn-calendar-note-indicator-center-offset));
    height: min(var(--nn-calendar-note-indicator-size), var(--nn-calendar-note-indicator-max-size));
    aspect-ratio: 1 / 1;
    width: auto;
    border-radius: 999px;
    border: 1px solid var(--nn-calendar-task-indicator-color);
    background-color: transparent;
    z-index: 1;
    pointer-events: none;
    display: block;
}

.nn-navigation-calendar-day.has-daily-note.has-unfinished-tasks:not(.has-feature-image):not(.has-feature-image-key)
    .nn-navigation-calendar-day-unfinished-task-indicator {
    transform: translate(calc(-50% + (var(--nn-calendar-task-indicator-offset-x) / 2)), var(--nn-calendar-note-indicator-center-offset));
}

.nn-navigation-calendar-day.has-unfinished-tasks.has-feature-image .nn-navigation-calendar-day-unfinished-task-indicator,
.nn-navigation-calendar-day.has-unfinished-tasks.has-feature-image-key .nn-navigation-calendar-day-unfinished-task-indicator {
    border-color: currentColor;
}

.nn-navigation-calendar-day.is-today .nn-navigation-calendar-day-number,
.nn-navigation-calendar-day.has-feature-image .nn-navigation-calendar-day-number,
.nn-navigation-calendar-day.has-feature-image-key .nn-navigation-calendar-day-number {
    font-weight: 600;
}

.nn-navigation-calendar-day.has-feature-image {
    color: var(--nn-theme-calendar-feature-image-text-color);
}

.nn-navigation-calendar-year-month.has-feature-image {
    color: var(--nn-theme-calendar-feature-image-text-color);
}

.nn-navigation-calendar-day.has-feature-image .nn-navigation-calendar-day-number {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.88),
        0 2px 8px rgba(0, 0, 0, 0.65);
}

.nn-navigation-calendar-year-month.has-feature-image .nn-navigation-calendar-year-month-label {
    font-weight: 600;
    overflow: visible;
    text-overflow: clip;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.88),
        0 2px 8px rgba(0, 0, 0, 0.65);
}

.nn-navigation-calendar-year-month.has-feature-image-key .nn-navigation-calendar-year-month-label {
    font-weight: 600;
}

.nn-navigation-calendar-day-number {
    font-size: var(--nn-calendar-day-font-size);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
}

/* ========================================================================
   Hover tooltip
   ======================================================================== */

.nn-navigation-calendar-hover-tooltip {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    width: 240px;
    max-width: min(260px, calc(100vw - 16px));
    padding: 8px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    box-shadow: var(--shadow-s, 0 6px 18px rgba(0, 0, 0, 0.2));
}

.nn-navigation-calendar-hover-tooltip-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ========================================================================
   Right sidebar shell
   ======================================================================== */

.nn-calendar-right-sidebar {
    --nn-calendar-right-sidebar-bg: var(--background-secondary);
    overflow: auto;
    background-color: var(--nn-calendar-right-sidebar-bg);
}

.nn-calendar-right-sidebar .nn-navigation-calendar {
    --nn-calendar-header-chip-bg: var(--nn-calendar-right-sidebar-bg);
    --nn-calendar-header-font-size: 16px;
    --nn-calendar-today-font-size: 13px;
}

.notebook-navigator-mobile .nn-calendar-right-sidebar .nn-navigation-calendar {
    --nn-calendar-header-font-size: 18px;
    --nn-calendar-today-font-size: 14px;
}

.nn-calendar-right-sidebar .nn-navigation-calendar-year-grid {
    width: 100%;
}

.nn-calendar-right-sidebar .nn-navigation-calendar-year-month {
    width: 100%;
    height: 100%;
}

.is-mobile .nn-calendar-right-sidebar {
    --nn-calendar-right-sidebar-bg: var(--mobile-sidebar-background);
}

.nn-calendar-right-sidebar-content {
    padding: 10px 12px;
}
/* Source: src/styles/sections/list-files.css */

/* ========================================================================
   File List Styles
   ======================================================================== */

/* File list container - scrollable area for files */
.nn-list-pane-chrome {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.nn-list-pane-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.nn-list-pane-scroller {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0 var(--nn-scroller-padding);
    background-color: var(--nn-theme-list-bg); /* Opaque background for GPU scroll layer optimization */
    position: relative;
}

.nn-list-pane-content {
    flex: 1 0 auto;
}

.nn-list-title-area {
    background-color: var(--nn-theme-list-bg);
    padding: var(--nn-list-title-padding-block) var(--nn-scroller-padding) 8px;
}

.nn-list-title-content {
    display: flex;
    align-items: center;
    padding: 0 var(--nn-file-item-padding-horizontal);
    font-size: var(--nn-list-title-font-size);
    font-weight: var(--nn-theme-list-heading-font-weight);
    color: var(--nn-theme-list-heading-color);
}

.nn-list-title-text {
    line-height: 1.2;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nn-list-title-label--folder-note {
    text-decoration: var(--nn-theme-navitem-folder-note-name-decoration);
}

.nn-list-title-label--folder-note:hover {
    cursor: pointer;
    text-decoration: var(--nn-theme-navitem-folder-note-name-hover-decoration);
}

/* File - container for each file in the list */
.nn-file {
    --nn-file-item-border-radius: min(16px, var(--nn-theme-file-border-radius));
    background: transparent;
    padding: 0;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    height: 100%;

    /* CSS Custom Properties for file items - themes can override these */
    /* Isolate layout and style calculations per item while allowing ::before to extend beyond bounds */
    contain: layout style;
}

/* Remove shadows */
.nn-file,
.nn-desktop .nn-file:hover {
    box-shadow: none;
}

/* File content wrapper - contains all file information */
.nn-file-content {
    padding: var(--nn-file-padding-vertical-mobile, var(--nn-file-padding-vertical)) var(--nn-file-item-padding-horizontal);
    margin: 0;
    border-radius: var(--nn-file-item-border-radius);
    background: transparent;
    position: relative; /* For absolute positioning of reveal overlay */
    height: 100%;
    box-sizing: border-box;
}

.nn-file.nn-has-custom-background::before {
    content: '';
    position: absolute;
    top: 0px;
    inset-inline-start: 0;
    inset-inline-end: 0;
    /* Extend slightly beyond bottom item bounds (height rounding issue) to prevent hairline gaps when zoomed */
    bottom: -0.5px;
    background-color: var(--nn-file-custom-bg-color);
    border-top-left-radius: var(--nn-file-top-left-radius, var(--nn-file-item-border-radius));
    border-top-right-radius: var(--nn-file-top-right-radius, var(--nn-file-item-border-radius));
    border-bottom-left-radius: var(--nn-file-bottom-left-radius, var(--nn-file-item-border-radius));
    border-bottom-right-radius: var(--nn-file-bottom-right-radius, var(--nn-file-item-border-radius));
    box-shadow: inset 0 0 0 var(--nn-theme-file-border-width) transparent;
    z-index: 0;
    pointer-events: none;
}

.nn-file.nn-has-custom-background > .nn-file-content {
    z-index: 2;
}

.nn-virtual-file-item-has-filled-background-previous > .nn-file,
.nn-virtual-file-item-has-custom-background-previous > .nn-file.nn-has-custom-background {
    --nn-file-top-left-radius: 0;
    --nn-file-top-right-radius: 0;
}

.nn-virtual-file-item-has-filled-background-next > .nn-file,
.nn-virtual-file-item-has-custom-background-next > .nn-file.nn-has-custom-background {
    --nn-file-bottom-left-radius: 0;
    --nn-file-bottom-right-radius: 0;
}

/* File inner content - flex container for actual content */
.nn-file-inner-content {
    display: flex;
    flex-direction: row;
    gap: var(--nn-file-row-gap);
    align-items: flex-start;
    position: relative;
    height: 100%;
}

.nn-file-icon-slot {
    width: var(--nn-file-icon-slot-width-mobile, var(--nn-file-icon-slot-width));
    flex: 0 0 var(--nn-file-icon-slot-width-mobile, var(--nn-file-icon-slot-width));
    display: flex;
    align-items: center;
    align-self: flex-start;
    justify-content: center;
    margin-inline-end: max(0px, calc(var(--nn-file-icon-slot-gap) - var(--nn-file-row-gap)));
    margin-top: max(0px, calc((var(--nn-file-title-line-height) - var(--nn-file-icon-size-mobile, var(--nn-file-icon-size))) / 2));
}

.nn-file-icon-rectangle {
    min-width: 18px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 4px;
    border-radius: 4px;
    background-color: var(--background-secondary);
    box-sizing: border-box;
}

.nn-file-icon-rectangle-text {
    font-family: var(--font-monospace);
    font-size: 9px;
    font-weight: 700;
    color: var(--nn-theme-foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.1px;
    line-height: 1;
}

/* Virtual list file separator */

.nn-virtual-file-item:not(.nn-last-file)::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: calc(
        var(--nn-file-item-padding-horizontal) + var(--nn-file-icon-slot-width-mobile, var(--nn-file-icon-slot-width)) +
            var(--nn-file-icon-slot-gap)
    );
    inset-inline-end: var(--nn-file-item-padding-horizontal);
    height: var(--nn-separator-height);
    background-color: var(--nn-theme-list-separator-color);
    z-index: 100; /* Very high to ensure it's always on top */
    pointer-events: none; /* Ensure it doesn't interfere with clicks */
}

/* Hide separator when flagged by renderer (selection) or context menu */
.nn-virtual-file-item.nn-hide-separator-selection::after,
.nn-virtual-file-item.nn-hide-separator-context-menu::after,
.nn-virtual-file-item.nn-virtual-file-item-has-filled-background::after,
.nn-virtual-file-item.nn-virtual-file-item-has-filled-background-next::after,
.nn-virtual-file-item.nn-virtual-file-item-has-custom-background::after,
.nn-virtual-file-item.nn-virtual-file-item-has-custom-background-next::after {
    display: none;
}

/* Hide separators in compact mode */
.nn-compact-mode .nn-virtual-file-item::after {
    display: none;
}

/* File text content - left side container for name and preview */
.nn-file-text-content {
    flex: 1;
    min-width: 0; /* Enable text truncation */
    display: flex;
    flex-direction: column;
    gap: 0;
    order: 1; /* Ensure it appears on the left */
    height: 100%;
    min-height: 0;
    justify-content: flex-start;
}

/* Compact mode file text content - same as above but without min-height */
.nn-compact-file-text-content {
    flex: 1;
    min-width: 0; /* Enable text truncation */
    display: flex;
    flex-direction: column;
    gap: 0;
    order: 1; /* Ensure it appears on the left */
    justify-content: flex-start; /* Top-align content */
}

/* Manual property sort editing */
.nn-manual-sort-scroller {
    padding: 0 var(--nn-scroller-padding);
}

.nn-manual-sort-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 0 1rem;
}

.nn-manual-sort-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0 var(--nn-file-item-padding-horizontal);
}

.nn-manual-sort-header-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nn-manual-sort-title {
    font-size: var(--nn-desktop-header-font-size);
    font-weight: var(--nn-theme-list-header-breadcrumb-font-weight);
    line-height: 1.3;
    color: var(--nn-theme-list-heading-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nn-manual-sort-hint {
    font-size: var(--nn-root-reorder-hint-font-size);
    color: var(--nn-theme-foreground-muted);
    line-height: 1.25;
}

.nn-manual-sort-done {
    flex-shrink: 0;
    padding: 0 0.75rem;
    cursor: pointer;
}

.nn-manual-sort-done:disabled {
    cursor: default;
}

.nn-manual-sort-list {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.nn-manual-sort-section-header {
    margin-top: var(--nn-list-group-header-spacer-before);
}

.nn-manual-sort-list > .nn-manual-sort-section-header:first-child {
    margin-top: 0;
}

.nn-manual-sort-sortable-item {
    position: relative;
    width: 100%;
}

.nn-manual-sort-sortable-item-sorting {
    z-index: 2;
}

.nn-manual-sort-row {
    display: flex;
    align-items: stretch;
    min-width: 0;
    cursor: grab;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.nn-manual-sort-row-sorting {
    z-index: 2;
}

.nn-manual-sort-row-sorting::after {
    display: none;
}

.nn-manual-sort-row-has-filled-background-previous .nn-file,
.nn-manual-sort-row-has-custom-background-previous .nn-file.nn-has-custom-background {
    --nn-file-top-left-radius: 0;
    --nn-file-top-right-radius: 0;
}

.nn-manual-sort-row-has-filled-background-next .nn-file,
.nn-manual-sort-row-has-custom-background-next .nn-file.nn-has-custom-background {
    --nn-file-bottom-left-radius: 0;
    --nn-file-bottom-right-radius: 0;
}

.nn-manual-sort-row-drag-block .nn-file.nn-selected .nn-file-content::before {
    box-shadow: inset 0 0 0 2px var(--interactive-accent);
}

.nn-manual-sort-row-disabled {
    cursor: default;
}

.nn-manual-sort-row:not(.nn-manual-sort-row-last)::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: calc(
        var(--nn-file-item-padding-horizontal) + var(--nn-file-icon-slot-width-mobile, var(--nn-file-icon-slot-width)) +
            var(--nn-file-icon-slot-gap)
    );
    inset-inline-end: var(--nn-file-item-padding-horizontal);
    height: var(--nn-separator-height);
    background-color: var(--nn-theme-list-separator-color);
    z-index: 100;
    pointer-events: none;
}

.nn-manual-sort-row.nn-manual-sort-row-hide-separator::after,
.nn-manual-sort-row.nn-manual-sort-row-has-filled-background::after,
.nn-manual-sort-row.nn-manual-sort-row-has-filled-background-next::after,
.nn-manual-sort-row.nn-manual-sort-row-has-custom-background::after,
.nn-manual-sort-row.nn-manual-sort-row-has-custom-background-next::after {
    display: none;
}

.nn-manual-sort-file {
    flex: 1;
    min-width: 0;
}

.nn-manual-sort-file .nn-file,
.nn-manual-sort-file .nn-file-content,
.nn-manual-sort-file .nn-file-inner-content {
    height: auto;
}

.nn-file-manual-sort-disabled {
    opacity: 0.55;
}

.notebook-navigator-mobile .nn-manual-sort-title {
    font-size: var(--nn-mobile-header-font-size);
}

.notebook-navigator-mobile .nn-manual-sort-hint {
    font-size: var(--nn-root-reorder-hint-font-size-mobile);
}

.notebook-navigator-mobile .nn-manual-sort-row {
    cursor: default;
}

.notebook-navigator-mobile .nn-manual-sort-row-draggable:not(.nn-manual-sort-row-last)::after {
    inset-inline-start: calc(
        var(--nn-file-item-padding-horizontal) + var(--nn-file-icon-slot-width-mobile, var(--nn-file-icon-slot-width)) +
            var(--nn-file-icon-slot-gap)
    );
    inset-inline-end: calc(var(--nn-file-item-padding-horizontal) + 28px + var(--nn-file-item-padding-horizontal));
}

.notebook-navigator-mobile .nn-manual-sort-row .nn-drag-handle {
    align-self: center;
    width: calc(28px + var(--nn-file-item-padding-horizontal));
    padding-inline-end: var(--nn-file-item-padding-horizontal);
    box-sizing: border-box;
}

/* File name - primary text with ellipsis overflow */
.nn-file-name {
    font-size: var(--nn-file-name-size-mobile, var(--nn-file-name-size));
    font-weight: var(--nn-theme-file-name-font-weight);
    color: var(--nn-theme-file-name-color);
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: var(--filename-rows, 1);
    -webkit-box-orient: vertical;
    line-height: var(--nn-file-title-line-height);
    word-break: break-word;
    max-height: calc(var(--nn-file-title-line-height) * var(--filename-rows, 1));
}

.nn-file-name[data-title-rows='1'] {
    display: block;
    white-space: nowrap;
    word-break: normal;
}

.nn-file-name[data-has-color='true'] {
    color: var(--nn-file-name-custom-color);
}

.nn-file-word-count-suffix {
    color: var(--nn-theme-file-word-count-color);
    font-weight: var(--nn-theme-file-word-count-font-weight);
}

.nn-file-icon {
    width: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
    height: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--nn-theme-navitem-icon-color);
}

.nn-file-icon svg {
    width: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
    height: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
}

.nn-file-icon.nn-emoji-icon,
.nn-file-icon .nn-emoji-icon {
    font-size: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
    width: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
    height: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
    line-height: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
    display: flex;
    align-items: center;
    justify-content: center;
}

.nn-file-icon[data-has-color='false'] {
    color: var(--nn-theme-navitem-icon-color);
}

.nn-file.nn-selected .nn-file-icon[data-has-color='false'] {
    color: var(--nn-theme-navitem-selected-icon-color);
}

.nn-file-icon.nn-file-icon-unfinished-task[data-has-color='false'] {
    color: var(--nn-theme-file-task-icon-color);
}

.nn-file.nn-selected .nn-file-icon.nn-file-icon-unfinished-task[data-has-color='false'] {
    color: var(--nn-theme-file-task-icon-color);
}

/* Quick actions panel - horizontal container for action icons */
.nn-quick-actions-panel {
    position: absolute;
    top: 8px; /* Default: 8px for normal mode */
    inset-inline-end: 8px;
    height: 20px;
    display: flex;
    background: var(--nn-theme-quick-actions-bg);
    border: 1px solid var(--nn-theme-quick-actions-border);
    border-radius: min(12px, var(--nn-theme-quick-actions-border-radius));
    z-index: 10;
    flex-direction: row;
    align-items: center;
    /* Dynamic padding that scales with border radius for better visual balance (clamped to max 6px at 12px radius) */
    padding: 0 max(4px, calc(min(12px, var(--nn-theme-quick-actions-border-radius)) * 0.5));
    gap: 0;
}

/* Individual quick action items */
.nn-quick-action-item {
    width: 16px;
    height: 16px;
    cursor: pointer;
    color: var(--nn-theme-quick-actions-icon-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon highlights when hovering directly on it */
.nn-quick-action-item:hover {
    color: var(--nn-theme-quick-actions-icon-hover-color);
}

/* Separator between quick actions */
.nn-quick-action-separator {
    width: 1px;
    height: 14px;
    background: var(--nn-theme-quick-actions-separator-color);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Compact mode with 1 title row and no tags: center vertically */
.nn-quick-actions-panel.nn-compact-mode[data-title-rows='1'][data-has-tags='false'] {
    top: max(0px, calc((var(--nn-file-title-line-height) + var(--nn-file-padding-vertical-compact) * 2 - 20px) / 2));
}

/* Compact mode with tags or more than 1 title row: align with compact padding */
.nn-quick-actions-panel.nn-compact-mode:not([data-title-rows='1']),
.nn-quick-actions-panel.nn-compact-mode[data-has-tags='true'] {
    top: var(--nn-file-padding-vertical-compact);
}

/* Second line container - holds date and preview text */
.nn-file-second-line {
    display: flex;
    align-items: center; /* Center align for better icon/text alignment */
    gap: 4px;
}

/* File date - modification date display */
.nn-file-date {
    font-size: var(--nn-file-small-size-mobile, var(--nn-file-small-size));
    font-weight: var(--nn-theme-file-date-font-weight);
    color: var(--nn-theme-file-date-color);
    flex-shrink: 0;
    white-space: nowrap;
    margin-inline-end: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: auto;
    line-height: var(--nn-file-single-text-line-height);
}

/* Date + parent folder (same line): match legacy spacing when dot separator is disabled. */
.nn-file-second-line > .nn-file-date + .nn-parent-folder[data-dot-separator='false'] {
    margin-inline-start: 8px;
}

/* Date + parent folder (same line): dot separator */
.nn-file-second-line > .nn-file-date + .nn-parent-folder[data-dot-separator='true']::before {
    content: '•';
    flex-shrink: 0;
    margin-inline-end: 4px;
    font-size: 0.65em;
}

.nn-file-second-line .nn-parent-folder {
    flex: 0 1 auto;
}

/* File preview text - secondary line showing file content */
.nn-file-preview {
    font-size: var(--nn-file-small-size-mobile, var(--nn-file-small-size));
    font-weight: var(--nn-theme-file-preview-font-weight);
    color: var(--nn-theme-file-preview-color);
    line-height: var(--nn-file-multiline-text-line-height);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--preview-rows, 1);
    -webkit-box-orient: vertical;
    word-break: break-word;
    max-height: calc(var(--nn-file-multiline-text-line-height) * var(--preview-rows, 1));
}

/* Parent folder indicator shown under file names */
.nn-parent-folder {
    font-size: var(--nn-file-small-size-mobile, var(--nn-file-small-size));
    font-weight: var(--nn-theme-file-parent-font-weight);
    color: var(--nn-theme-file-parent-color);
    display: flex;
    align-items: center;
    overflow: hidden;
    line-height: var(--nn-file-single-text-line-height); /* Use second line height for consistent spacing */
    flex: 1;
    min-width: 0;
}

.nn-parent-folder-content {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
}

.nn-parent-folder-content[data-has-background='true'] {
    box-sizing: border-box;
    height: var(--nn-file-single-text-line-height);
    line-height: calc(var(--nn-file-single-text-line-height) - 2px);
    border-radius: 4px;
    padding: 1px 4px;
}

.nn-parent-folder-content[data-reveal='true'] {
    cursor: pointer;
    user-select: none;
}

.nn-parent-folder-content[data-reveal='true']:hover .nn-parent-folder-label,
.nn-parent-folder-content[data-reveal='true']:focus-visible .nn-parent-folder-label {
    text-decoration: underline;
}

.nn-parent-folder-content[data-reveal='true']:focus-visible {
    outline: 1px solid var(--interactive-accent);
    outline-offset: 2px;
}

/* Folder indicator text */
.nn-parent-folder span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Folder icon styling */
.nn-parent-folder-icon {
    width: calc(var(--icon-size) * 0.8);
    height: calc(var(--icon-size) * 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nn-parent-folder-label {
    font-weight: var(--nn-theme-file-parent-font-weight);
}

.nn-parent-folder-label.nn-parent-folder-label--colored {
    font-weight: var(--nn-theme-navitem-custom-color-name-font-weight);
}
/* Source: src/styles/sections/list-tags.css */

/* ========================================================================
   Tag & Property Value Display Styles
   ======================================================================== */

/* Tag container */
.nn-file-tags,
.nn-file-property-row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--nn-file-tag-row-gap);
    margin-top: var(--nn-file-tag-row-gap);
    overflow-x: auto;
    overflow-y: hidden;
    height: var(--nn-file-tag-row-height);
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nn-file-tags::-webkit-scrollbar,
.nn-file-property-row::-webkit-scrollbar {
    display: none;
}

/* Individual tag pill */
.nn-file-tag {
    --nn-file-pill-border-color-resolved: var(--nn-theme-file-tag-border-color);
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--nn-file-tag-row-height);
    line-height: 1;
    padding: 0 8px;
    background-color: var(--nn-theme-file-tag-bg);
    color: var(--nn-theme-file-tag-color);
    border-radius: min(10px, var(--nn-theme-file-tag-border-radius));
    border-style: solid;
    border-width: var(--nn-theme-file-pill-border-width);
    border-color: var(--nn-file-pill-border-color-resolved);
    font-size: 12px;
    font-weight: var(--nn-theme-file-tag-font-weight);
    white-space: nowrap;
    flex-shrink: 0;
}

.nn-file-pill-inline-icon {
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    color: currentColor;
    flex-shrink: 0;
}

.nn-file-pill-inline-icon svg {
    width: 12px;
    height: 12px;
}

.nn-file-tag[data-has-color='true'],
.nn-file-tag[data-has-background='true'] {
    --nn-file-pill-border-color-resolved: color-mix(in srgb, currentColor 30%, transparent);
}

.nn-file-property {
    --nn-file-pill-border-color-resolved: var(--nn-theme-file-property-border-color);
    background-color: var(--nn-theme-file-property-bg);
    color: var(--nn-theme-file-property-color);
    border-radius: min(10px, var(--nn-theme-file-property-border-radius));
}

.nn-file-tag[data-has-background='true'] {
    background-color: var(--nn-theme-nav-bg);
    background-image: linear-gradient(var(--nn-file-tag-custom-bg, transparent), var(--nn-file-tag-custom-bg, transparent));
}

.nn-file-tag[data-has-color='true'] {
    font-weight: var(--nn-theme-navitem-custom-color-name-font-weight);
}

.nn-file-tag[data-has-color='true']:not([data-has-background='true']) {
    background-color: var(--nn-theme-list-bg);
    background-image: linear-gradient(color-mix(in srgb, currentColor 10%, transparent), color-mix(in srgb, currentColor 10%, transparent));
}

.nn-file-tag[data-has-background='true']:not([data-has-color='true']) {
    color: var(--nn-theme-file-tag-custom-color-text-color);
}

/* Tag pill hover effect - darken/lighten all tags on hover */
.nn-file-tag.nn-clickable-tag:hover {
    filter: brightness(0.9);
}

/* Clickable tag styling */
.nn-file-tag.nn-clickable-tag {
    cursor: pointer;
}

/* Underline property pills that render clickable link values */
.nn-file-tag.nn-file-property.nn-file-property-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Dark mode tag hover - lighten instead of darken */
.theme-dark .nn-file-tag.nn-clickable-tag:hover {
    filter: brightness(1.05);
}

/* Selected file tag styles - only for tags without custom colors */
.nn-file.nn-selected .nn-file-tag:not(.nn-file-property):not([data-has-color='true']):not([data-has-background='true']) {
    --nn-file-pill-border-color-resolved: var(--nn-theme-file-selected-tag-border-color);
    background-color: var(--nn-selected-file-tag-bg);
    color: var(--nn-selected-file-tag-color);
}

.nn-file.nn-selected .nn-file-tag.nn-file-property:not([data-has-color='true']):not([data-has-background='true']) {
    --nn-file-pill-border-color-resolved: var(--nn-theme-file-selected-property-border-color);
    background-color: var(--nn-selected-file-property-bg);
    color: var(--nn-selected-file-property-color);
}

/* Selected file text colors */
.nn-file.nn-selected .nn-file-name {
    color: var(--nn-selected-file-name-color);
}

.nn-file.nn-selected .nn-file-name[data-has-color='true'] {
    color: var(--nn-file-name-custom-color);
}

.nn-file.nn-selected .nn-file-preview {
    color: var(--nn-selected-file-preview-color);
}

.nn-file.nn-selected .nn-file-date {
    color: var(--nn-selected-file-date-color);
}

.nn-file.nn-selected .nn-file-word-count-suffix {
    color: var(--nn-selected-file-word-count-color);
}

.nn-file.nn-selected .nn-parent-folder {
    color: var(--nn-selected-file-parent-color);
}
/* Source: src/styles/sections/list-compact-mode.css */

/* ========================================================================
   Compact Mode Styles
   ======================================================================== */

/* Compact file item - more compact list appearance */
.nn-file.nn-compact {
    --nn-file-item-border-radius: min(14px, var(--nn-theme-navitem-border-radius));
}

.nn-file.nn-compact .nn-file-content {
    padding: var(--nn-file-padding-vertical-compact) var(--nn-file-item-padding-horizontal); /* Reduced vertical padding */
}

/* Mobile compact file items use larger touch targets. */
.notebook-navigator-mobile .nn-file.nn-compact .nn-file-content {
    padding: var(--nn-file-padding-vertical-compact-mobile) var(--nn-file-item-padding-horizontal);
}

/* Compact file name - no bold, smaller font like folder items */
.nn-file.nn-compact .nn-file-name {
    font-size: var(--nn-compact-font-size, var(--nn-file-small-size-mobile, var(--nn-file-small-size)));
    font-weight: var(--nn-theme-file-compact-name-font-weight);
    margin-bottom: 0;
    line-height: var(--nn-file-title-line-height);
}

/* Mobile compact mode file names use the mobile compact font variable. */
.notebook-navigator-mobile .nn-file.nn-compact .nn-file-name {
    font-size: var(--nn-compact-font-size-mobile, var(--nn-compact-font-size, 15px));
}

/* Apply standard font weight to colored file names in compact mode */
.nn-file.nn-compact .nn-file-name[data-has-color='true'] {
    font-weight: var(--nn-theme-file-name-font-weight);
}

.nn-compact-file-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nn-compact-file-header .nn-file-name {
    flex: 1;
    min-width: 0;
}

.nn-compact-extension-badge {
    margin-left: auto;
    display: flex;
}

/* Selected compact file - maintain selection styles */
.nn-file.nn-compact.nn-selected .nn-file-name {
    color: var(--nn-selected-file-name-color);
}

/* Preserve custom color for colored file names even when selected in compact mode */
.nn-file.nn-compact.nn-selected .nn-file-name[data-has-color='true'] {
    color: var(--nn-file-name-custom-color);
}
/* Source: src/styles/sections/list-file-thumbnails.css */

/* ========================================================================
   File Thumbnail Styles
   ======================================================================== */

/* File thumbnail container - right-aligned thumbnail slot */
.nn-file-thumbnail {
    flex-shrink: 0;
    border-radius: min(32px, var(--nn-theme-file-feature-border-radius));
    overflow: hidden;
    background-color: transparent;
    position: relative;
    order: 2; /* Ensure it appears on the right */
    align-self: center;
}

.nn-file-thumbnail--square {
    width: var(--nn-file-thumbnail-min-size);
    height: var(--nn-file-thumbnail-min-size);
}

.nn-file-thumbnail--natural {
    width: auto;
    height: var(--nn-file-thumbnail-min-size);
    aspect-ratio: var(--nn-file-thumbnail-aspect-ratio, 1);
}

.nn-file-thumbnail--hidden {
    display: none;
}

/* Dynamic sizing based on calculated item height */
.nn-virtual-file-item .nn-file-thumbnail {
    /* Size based on the same padded content box as the text stack. */
    --image-size: clamp(
        var(--nn-file-thumbnail-min-size),
        calc(var(--item-height) - var(--nn-file-padding-total-mobile, var(--nn-file-padding-total))),
        var(--nn-file-thumbnail-max-size)
    );
}

.nn-virtual-file-item .nn-file-thumbnail--square {
    width: var(--image-size);
    height: var(--image-size);
}

.nn-virtual-file-item .nn-file-thumbnail--extension-badge {
    width: var(--nn-file-thumbnail-min-size);
    height: var(--nn-file-thumbnail-min-size);
}

.nn-virtual-file-item .nn-file-thumbnail--natural {
    height: var(--image-size);
    max-height: var(--image-size);
}

/* Thumbnail image element - covers container with proper aspect ratio */
.nn-file-thumbnail-img {
    width: 100%;
    height: 100%;
}

.nn-file-thumbnail--inset-highlight::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    pointer-events: none;
    z-index: 1;
}

.nn-file-thumbnail--square .nn-file-thumbnail-img {
    object-fit: cover;
    object-position: center top;
}

.nn-file-thumbnail--natural .nn-file-thumbnail-img {
    object-fit: contain;
    object-position: center;
}

/* Selected file image - slightly transparent when selected */
.nn-file.nn-selected .nn-file-thumbnail {
    opacity: 0.9;
}

/* File extension badge - shown for non-markdown/non-image files */
.nn-file-extension-badge {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-secondary);
    font-family: var(--font-monospace);
    padding: 2px;
    box-sizing: border-box;
}

.nn-file-extension-text {
    font-size: 9px;
    font-weight: 700;
    color: var(--nn-theme-foreground-muted);
    text-transform: uppercase;
    letter-spacing: 0.1px;
}

.nn-file-extension-icon {
    width: min(24px, 42%);
    height: min(24px, 42%);
    color: var(--nn-theme-foreground-muted);
}
/* Source: src/styles/sections/list-group-headers.css */

/* ========================================================================
   List Group Headers
   ======================================================================== */

/* List group headers for grouped files */
.nn-list-group-header {
    height: var(--nn-list-group-header-height-mobile, var(--nn-list-group-header-height));
    box-sizing: border-box;
    padding: 0 var(--nn-file-item-padding-horizontal);
    font-size: var(--nn-file-small-size-mobile, var(--nn-file-small-size));
    font-weight: var(--nn-theme-list-group-header-font-weight);
    color: var(--nn-theme-list-group-header-color);
    background-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nn-list-group-header-spacer {
    height: var(--item-height);
}

.nn-list-sticky-header {
    position: sticky;
    top: 0;
    /* Keep the sticky copy out of layout so it overlays the virtualized list rows. */
    height: 0;
    flex: 0 0 0;
    overflow: visible;
    z-index: 200;
    pointer-events: none;
}

.nn-list-pane-scroller .nn-virtual-list-group-header:not(.nn-hide-list-group-header-separator)::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: var(--nn-file-item-padding-horizontal);
    inset-inline-end: var(--nn-file-item-padding-horizontal);
    height: var(--nn-separator-height);
    background-color: var(--nn-theme-list-separator-color);
    z-index: 100;
    pointer-events: none;
}

.nn-list-pane-scroller .nn-virtual-list-group-header.nn-hide-separator-selection::after {
    display: none;
}

.nn-list-sticky-header .nn-list-group-header {
    position: relative;
    overflow: visible;
    background-color: var(--nn-theme-list-bg);
    pointer-events: auto;
}

.nn-list-sticky-header .nn-list-group-header::before {
    content: '';
    position: absolute;
    top: -1px;
    bottom: 0;
    inset-inline-start: calc(-1 * var(--nn-scroller-padding));
    inset-inline-end: calc(-1 * var(--nn-scroller-padding));
    background-color: var(--nn-theme-list-bg);
    z-index: -1;
}

.nn-list-sticky-header .nn-manual-sort-group-header-shell {
    overflow: visible;
    background-color: var(--nn-theme-list-bg);
    pointer-events: auto;
}

.nn-list-sticky-header .nn-manual-sort-group-header-shell::before {
    content: '';
    position: absolute;
    top: -1px;
    bottom: 0;
    inset-inline-start: calc(-1 * var(--nn-scroller-padding));
    inset-inline-end: calc(-1 * var(--nn-scroller-padding));
    background-color: var(--nn-theme-list-bg);
    z-index: -1;
}

.nn-list-sticky-header .nn-manual-sort-group-header-shell .nn-list-group-header {
    background-color: transparent;
}

.nn-list-sticky-header .nn-manual-sort-group-header-shell .nn-list-group-header::before {
    content: none;
}

.nn-list-group-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nn-list-group-header-icon-size, var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)));
    height: var(--nn-list-group-header-icon-size, var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)));
    color: var(--nn-theme-list-group-header-color);
    flex: 0 0 auto;
}

.nn-list-group-header-icon svg {
    width: 100%;
    height: 100%;
}

.nn-list-group-header--manual-sort {
    --nn-manual-sort-group-header-accent: var(--interactive-accent);
}

.nn-manual-sort-group-header-shell {
    --nn-manual-sort-group-header-accent: var(--interactive-accent);
    height: var(--nn-list-group-goal-header-height-mobile, var(--nn-list-group-goal-header-height));
    position: relative;
    overflow: hidden;
    background-color: var(--nn-theme-list-bg);
}

.nn-manual-sort-group-header-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nn-manual-sort-group-header-content--accent-all {
    color: var(--nn-manual-sort-group-header-accent);
}

.nn-manual-sort-group-header-custom-icon {
    flex: 0 0 auto;
    width: var(--nn-list-group-header-icon-size, var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)));
    height: var(--nn-list-group-header-icon-size, var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)));
    color: currentColor;
}

.nn-manual-sort-group-header-content--accent-icon .nn-manual-sort-group-header-custom-icon {
    color: var(--nn-manual-sort-group-header-accent);
}

.nn-manual-sort-group-header-custom-icon svg {
    width: 100%;
    height: 100%;
}

.nn-manual-sort-group-header-title {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nn-manual-sort-group-header-count {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    color: var(--nn-theme-foreground-muted);
}

.nn-manual-sort-group-header-content--accent-all .nn-manual-sort-group-header-count {
    color: inherit;
}

.nn-manual-sort-group-header-percent {
    flex: 0 0 auto;
    margin-inline-start: auto;
    font-weight: 600;
    color: var(--nn-manual-sort-group-header-accent);
}

.nn-manual-sort-group-header-progress {
    position: relative;
    width: 100%;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
}

.nn-manual-sort-group-header-progress::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--nn-manual-sort-group-header-accent);
    opacity: 0.1;
}

.nn-manual-sort-group-header-progress-fill {
    position: relative;
    width: var(--nn-manual-sort-group-header-progress);
    height: 100%;
    border-radius: inherit;
    background-color: var(--nn-manual-sort-group-header-accent);
}

.nn-manual-sort-group-header-progress-row {
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: var(--nn-list-group-progress-gap-after);
    height: 3px;
    display: flex;
    align-items: center;
    padding: 0 var(--nn-file-item-padding-horizontal);
    pointer-events: none;
}

.nn-list-group-header-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nn-list-group-header-text--custom-color {
    font-weight: var(--nn-theme-navitem-custom-color-name-font-weight);
}

.nn-list-group-header-path {
    display: inline-flex;
    align-items: center;
}

.nn-list-group-header-folder-segment {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nn-list-group-header-folder-segment:not(:last-child) {
    flex-shrink: 0;
}

.nn-list-group-header-folder-segment:last-child {
    flex: 1 1 auto;
}

.nn-list-group-header-path-separator {
    flex: 0 0 auto;
    padding-inline: 4px;
}

button.nn-list-group-header-collapse-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--nn-list-group-header-height-mobile, var(--nn-list-group-header-height));
    height: var(--nn-list-group-header-height-mobile, var(--nn-list-group-header-height));
    margin-inline-start: auto;
    margin-inline-end: -6px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: var(--nn-theme-list-group-header-color);
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

button.nn-list-group-header-collapse-button:focus-visible {
    color: var(--text-normal);
    background-color: var(--background-modifier-hover);
}

button.nn-list-group-header-collapse-button .nn-list-group-header-icon {
    width: var(--nn-list-group-header-icon-size, var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)));
    height: var(--nn-list-group-header-icon-size, var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)));
}

.nn-list-group-header-text--folder-note {
    text-decoration: var(--nn-theme-navitem-folder-note-name-decoration);
}

.nn-list-group-header-text--folder-note:hover {
    cursor: pointer;
    text-decoration: var(--nn-theme-navitem-folder-note-name-hover-decoration);
}

.nn-pinned-section-header {
    align-items: center;
    user-select: none;
}

/* Virtual list item - absolute positioning for list pane items */
.nn-list-pane-scroller .nn-virtual-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* Skeleton view - minimal loading state */
.nn-skeleton-navigation-pane {
    background-color: var(--nn-theme-nav-bg);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.nn-skeleton-list-pane {
    background-color: var(--nn-theme-list-bg);
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nn-skeleton-navigation-pane-vertical {
    width: 100%;
    min-height: var(--nn-navigation-pane-min-height);
    flex: 0 1 auto;
}

.nn-skeleton-list-pane-vertical {
    min-height: var(--nn-list-pane-min-height);
}

.nn-skeleton-nav-header {
    height: 32px;
    background-color: var(--nn-theme-nav-bg);
    flex-shrink: 0;
}

/* Add right border to nav header in dual pane mode */
.nn-split-container.nn-orientation-horizontal:not(.nn-single-pane) .nn-skeleton-nav-header {
    border-right: 1px solid var(--nn-theme-divider-border-color);
}

.nn-split-container.nn-orientation-vertical:not(.nn-single-pane) .nn-skeleton-nav-header {
    border-right: none;
    border-bottom: 1px solid var(--nn-theme-divider-border-color);
}

.nn-skeleton-list-header {
    height: 32px;
    background-color: var(--nn-theme-list-bg);
    flex-shrink: 0;
}

.nn-skeleton-content {
    flex: 1;
    overflow: hidden;
    background-color: inherit;
}

.nn-skeleton-search-bar {
    height: 40px;
    background-color: var(--nn-theme-list-bg);
    flex-shrink: 0;
}

/* Add right border only to nav content area in dual pane mode */
.nn-split-container.nn-orientation-horizontal:not(.nn-single-pane) .nn-skeleton-navigation-pane .nn-skeleton-content {
    border-right: 1px solid var(--nn-theme-divider-border-color);
}

.nn-split-container.nn-orientation-vertical:not(.nn-single-pane) .nn-skeleton-navigation-pane .nn-skeleton-content {
    border-right: none;
    border-bottom: 1px solid var(--nn-theme-divider-border-color);
}
/* Source: src/styles/sections/inline-rename.css */

/* ========================================================================
   Inline Rename Styles
   ======================================================================== */

.nn-inline-rename-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 6px;
    border: 1px solid var(--interactive-accent);
    border-radius: 4px;
    background-color: var(--background-primary);
    color: var(--text-normal);
    font: inherit;
    line-height: normal;
}

.nn-inline-rename-input:focus {
    outline: 2px solid var(--interactive-accent);
    outline-offset: -2px;
}

.nn-inline-rename-input:disabled {
    opacity: 0.75;
}

.nn-navitem-inline-rename {
    height: calc(var(--nn-setting-nav-item-height) - 8px);
    font-size: var(--nn-setting-nav-font-size);
    font-weight: var(--nn-theme-navitem-name-font-weight);
}

.notebook-navigator-mobile .nn-navitem-inline-rename {
    height: calc(var(--nn-setting-nav-item-height-mobile) - 10px);
}

.nn-file-name--inline-renaming {
    display: flex;
    align-items: center;
    gap: 0;
    max-height: none;
    overflow: visible;
    white-space: nowrap;
    word-break: normal;
}

.nn-file-name--inline-renaming .nn-file-ext-suffix {
    flex-shrink: 0;
}

.nn-file-inline-rename {
    height: var(--nn-file-title-line-height);
    font-size: var(--nn-file-name-size-mobile, var(--nn-file-name-size));
    font-weight: var(--nn-theme-file-name-font-weight);
}
/* Source: src/styles/sections/ui-empty-state.css */

/* ========================================================================
   Empty State
   ======================================================================== */

/* Empty state container - shown when no files in folder */
.nn-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 20px;
    text-align: center;
    color: var(--nn-theme-foreground-muted);
    font-size: 14px;
}

/* Empty state message text */
.nn-empty-message {
    text-align: center;
}
/* Source: src/styles/sections/state-selection.css */

/* ========================================================================
   Selection States
   ======================================================================== */

/* Selected file background pseudo-element - better control over styling */
.nn-file.nn-selected .nn-file-content::before {
    content: '';
    position: absolute;
    top: 0px;
    inset-inline-start: 0;
    inset-inline-end: 0;
    /* Extend slightly beyond bottom item bounds (height rounding issue) to prevent hairline gaps when zoomed */
    bottom: -0.5px;
    /* Pre-composited solid color prevents hairlines by blending alpha with pane background */
    background-color: var(--nn-selected-file-bg-color);
    border-top-left-radius: var(--nn-file-top-left-radius, var(--nn-file-item-border-radius));
    border-top-right-radius: var(--nn-file-top-right-radius, var(--nn-file-item-border-radius));
    border-bottom-left-radius: var(--nn-file-bottom-left-radius, var(--nn-file-item-border-radius));
    border-bottom-right-radius: var(--nn-file-bottom-right-radius, var(--nn-file-item-border-radius));
    box-shadow: inset 0 0 0 var(--nn-theme-file-border-width) var(--nn-selected-file-border-color);
    z-index: 0; /* Below separator lines */
}

/* Adjust rounded corners for multiselection */
.nn-file.nn-selected.nn-has-selected-above .nn-file-content::before {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.nn-file.nn-selected.nn-has-selected-below .nn-file-content::before {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.nn-navitem.nn-selected > .nn-navitem-content:not(.nn-navitem-content--search-include):not(.nn-navitem-content--search-exclude) {
    background: transparent;
}

/* Selection overlay lives above the custom background while mirroring trimmed corners */
.nn-navitem.nn-selected::after {
    content: '';
    position: absolute;
    top: 0px;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: var(--nn-navitem-background-bottom-overdraw);
    /* Pre-composited solid color prevents hairlines by blending alpha with pane background */
    background-color: var(--nn-selected-navitem-bg-color);
    border-top-left-radius: var(--nn-navitem-top-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    border-top-right-radius: var(--nn-navitem-top-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    border-bottom-left-radius: var(--nn-navitem-bottom-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    border-bottom-right-radius: var(--nn-navitem-bottom-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
    box-shadow: inset 0 0 0 var(--nn-theme-navitem-border-width) var(--nn-selected-navitem-border-color);
    z-index: 1;
    pointer-events: none;
}

.nn-navitem.nn-selected > .nn-navitem-content {
    position: relative;
    z-index: 2;
}

/* Selected file inner content z-index - ensures content above background */
.nn-file.nn-selected .nn-file-inner-content {
    position: relative;
    z-index: 5; /* Above selection background but below separators */
}
/* Source: src/styles/sections/state-focus.css */

/* ========================================================================
   Focus States
   ======================================================================== */

/* Navigation selection adornments follow the container focus state */
.nn-navitem.nn-selected .nn-navitem-chevron {
    color: var(--nn-selected-navitem-chevron-color);
}

.nn-navitem.nn-selected .nn-navitem-icon {
    color: var(--nn-selected-navitem-icon-color);
}

.nn-navitem.nn-selected .nn-navitem-name {
    color: var(--nn-selected-navitem-name-color);
}

.nn-navitem.nn-selected[data-nav-item-type='note'] .nn-navitem-name {
    color: var(--nn-selected-file-name-color);
}

.nn-navitem.nn-selected .nn-navitem-count {
    color: var(--nn-selected-navitem-count-color);
    background-color: var(--nn-selected-navitem-count-bg);
    box-shadow: inset 0 0 0 var(--nn-theme-navitem-count-border-width) var(--nn-selected-navitem-count-border-color);
}
/* Source: src/styles/sections/state-hover.css */

/* ========================================================================
   Hover States
   ======================================================================== */

/* File rows intentionally keep their existing styling on hover. */
/* Source: src/styles/sections/state-drag-and-drop.css */

/* ========================================================================
   Drag and Drop States
   ======================================================================== */

/* Dragging state - visual feedback during drag operations */
.nn-dragging {
    opacity: 0.5;
}

/* Resizing state - prevents text selection during pane resize */
body.nn-resizing {
    -webkit-user-select: none;
    user-select: none;
}

/* Drag over state - highlights valid drop targets */
.nn-navitem.nn-drag-over {
    background-color: var(--text-selection);
    border-radius: min(14px, var(--nn-theme-navitem-border-radius));
}

.nn-list-pane-scroller.nn-drag-over {
    outline: 2px solid var(--text-selection);
    outline-offset: -2px;
}

/* Special visual feedback for tag drop zones - uses pre-composited solid color */
[data-drop-zone='tag'].nn-drag-over {
    background-color: var(--nn-computed-tag-positive-bg, var(--nn-theme-tag-positive-bg));
    border-radius: min(14px, var(--nn-theme-navitem-border-radius));
}

[data-drop-zone='tag-root'].nn-drag-over {
    background-color: var(--nn-computed-tag-positive-bg, var(--nn-theme-tag-positive-bg));
    border-radius: min(14px, var(--nn-theme-navitem-border-radius));
}

/* Different style for untagged drop zone - uses pre-composited solid color */
[data-drop-zone='tag'][data-tag='__untagged__'].nn-drag-over {
    background-color: var(--nn-computed-tag-negative-bg, var(--nn-theme-tag-negative-bg));
    border-radius: min(14px, var(--nn-theme-navitem-border-radius));
}

/* Disable drag and drop feedback on mobile */
.notebook-navigator-mobile [draggable='true'] {
    cursor: default;
}

.notebook-navigator-mobile .nn-navitem.nn-drag-over,
.notebook-navigator-mobile [data-drop-zone].nn-drag-over {
    background-color: transparent;
}

.notebook-navigator-mobile .nn-list-pane-scroller.nn-drag-over {
    outline: none;
}

/* Offscreen element used as the browser-native drag image */
.nn-drag-native-preview {
    position: fixed;
    left: -1000px;
    top: -1000px;
    display: inline-flex;
    padding: 10px 0 0 12px;
    pointer-events: none;
    z-index: 999999;
    opacity: 0.9;
}

/* Badge shown in the native drag image for multiple files */
.nn-drag-preview-badge {
    background-color: #dc3545;
    color: white;
    font-weight: bold;
    font-size: 14px;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Icon shown in the native drag image for single items */
.nn-drag-preview-icon {
    background-color: #000000; /* Default black for light mode */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Dark mode: use dark gray background */
.theme-dark .nn-drag-preview-icon {
    background-color: var(--background-modifier-border-hover);
}

/* Style the Lucide icon inside the drag preview */
.nn-drag-preview-icon svg {
    width: 16px;
    height: 16px;
    color: #ffffff;
    stroke: #ffffff;
    stroke-width: 2.5;
    fill: none;
}

/* Header actions layout variations 
   Different layouts are needed for mobile vs desktop views:
   - space-between: Mobile file pane (back button + folder name + actions)
*/
.nn-header-actions--space-between {
    width: 100%;
    justify-content: space-between;
}
/* Source: src/styles/sections/state-context-menu.css */

/* ========================================================================
   Context Menu States
   ======================================================================== */

/* Context menu active folder - prepares for outline */
.nn-navitem.nn-context-menu-active {
    position: relative;
}

/* Context menu outline for folders - shows which item menu affects */
.nn-navitem.nn-context-menu-active:not(.nn-selected)::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
    /* Use pre-composited solid color for consistent border appearance */
    border: 2px solid var(--nn-computed-navitem-selected-bg, var(--nn-theme-navitem-selected-bg));
    border-radius: min(14px, var(--nn-theme-navitem-border-radius));
    pointer-events: none;
    z-index: 10;
}

/* Context menu active file - prepares for outline */
.nn-file.nn-context-menu-active .nn-file-content {
    position: relative;
}

/* Context menu outline for files - shows which item menu affects */
.nn-file.nn-context-menu-active:not(.nn-selected) .nn-file-content::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0; /* Extend to bottom edge to cover separator space */
    /* Use pre-composited solid color for consistent border appearance */
    border: 2px solid var(--nn-computed-navitem-selected-bg, var(--nn-theme-navitem-selected-bg));
    border-radius: min(16px, var(--nn-theme-file-border-radius));
    pointer-events: none;
    z-index: 10;
}

.nn-file.nn-compact.nn-context-menu-active:not(.nn-selected) .nn-file-content::after {
    border-radius: min(14px, var(--nn-theme-navitem-border-radius));
}
/* Source: src/styles/sections/state-hidden-items.css */

/* ========================================================================
   Hidden Items - Dimmed appearance for hidden folders and tags
   ======================================================================== */

/* Hidden items (folders and tags) - dimmed appearance */
.nn-navitem.nn-excluded {
    --nn-theme-navitem-chevron-color: var(--nn-theme-foreground);
    --nn-theme-navitem-icon-color: var(--nn-theme-foreground);
    --nn-theme-navitem-count-color: var(--nn-theme-foreground);
    --nn-theme-navitem-selected-chevron-color: var(--nn-theme-foreground);
    --nn-theme-navitem-selected-icon-color: var(--nn-theme-foreground);
    --nn-theme-navitem-selected-count-color: var(--nn-theme-foreground);
    --nn-theme-navitem-selected-inactive-chevron-color: var(--nn-theme-foreground);
    --nn-theme-navitem-selected-inactive-icon-color: var(--nn-theme-foreground);
    --nn-theme-navitem-selected-inactive-count-color: var(--nn-theme-foreground);
}

.nn-navitem.nn-excluded .nn-navitem-chevron,
.nn-navitem.nn-excluded .nn-navitem-icon,
.nn-navitem.nn-excluded .nn-navitem-name,
.nn-navitem.nn-excluded .nn-navitem-count {
    opacity: 0.5;
}

/* Hidden files surfaced via "show hidden" toggle */
.nn-file.nn-hidden-file {
    --nn-theme-file-name-color: var(--nn-theme-foreground);
    --nn-theme-file-preview-color: var(--nn-theme-foreground);
    --nn-theme-file-date-color: var(--nn-theme-foreground);
    --nn-theme-file-word-count-color: var(--nn-theme-foreground);
    --nn-theme-file-parent-color: var(--nn-theme-foreground);
    --nn-theme-file-tag-color: var(--nn-theme-foreground);
    --nn-theme-file-property-color: var(--nn-theme-foreground);
    --nn-theme-file-selected-name-color: var(--nn-theme-foreground);
    --nn-theme-file-selected-preview-color: var(--nn-theme-foreground);
    --nn-theme-file-selected-date-color: var(--nn-theme-foreground);
    --nn-theme-file-selected-word-count-color: var(--nn-theme-foreground);
    --nn-theme-file-selected-parent-color: var(--nn-theme-foreground);
    --nn-theme-file-selected-tag-color: var(--nn-theme-foreground);
    --nn-theme-file-selected-property-color: var(--nn-theme-foreground);
    --nn-theme-file-selected-inactive-name-color: var(--nn-theme-foreground);
    --nn-theme-file-selected-inactive-preview-color: var(--nn-theme-foreground);
    --nn-theme-file-selected-inactive-date-color: var(--nn-theme-foreground);
    --nn-theme-file-selected-inactive-word-count-color: var(--nn-theme-foreground);
    --nn-theme-file-selected-inactive-parent-color: var(--nn-theme-foreground);
    --nn-theme-file-selected-inactive-tag-color: var(--nn-theme-foreground);
    --nn-theme-file-selected-inactive-property-color: var(--nn-theme-foreground);
    --nn-theme-navitem-icon-color: var(--nn-theme-foreground);
    --nn-theme-navitem-selected-icon-color: var(--nn-theme-foreground);
    --nn-theme-navitem-selected-inactive-icon-color: var(--nn-theme-foreground);
    opacity: 0.5;
}
/* Source: src/styles/sections/modal-base.css */

/* ========================================================================
   Modal Styles
   ======================================================================== */

/* Modal input field - used in rename/create dialogs */
.nn-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background-color: var(--background-primary);
    color: var(--nn-theme-foreground);
    font-size: 14px;
    margin: 16px 0;
}

/* Modal input focus state */
.nn-input:focus {
    outline: none;
    border-color: var(--interactive-accent);
}

.nn-input-description {
    color: var(--nn-theme-foreground-muted);
    font-size: var(--font-ui-small);
    margin-top: 12px;
}

.nn-merge-notes-summary {
    margin-bottom: 8px;
}

.nn-merge-notes-details {
    color: var(--nn-theme-foreground-muted);
    font-size: var(--font-ui-small);
    unicode-bidi: plaintext;
}

.nn-merge-notes-warning {
    color: var(--text-error);
    font-weight: 700;
    unicode-bidi: plaintext;
}

.nn-input-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    cursor: pointer;
    font-size: var(--font-ui-small);
}

.nn-input-checkbox-row input[type='checkbox'] {
    margin: 0;
}

/* Modal button container - right-aligned button group */
.nn-button-container {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.nn-folder-note-type-modal .modal-content {
    padding-top: 16px;
}

.nn-folder-note-type-modal .modal-title {
    width: 100%;
    text-align: center;
}

.nn-folder-note-type-info {
    margin-bottom: 4px;
    color: var(--nn-theme-foreground-muted);
    text-align: center;
}

.nn-folder-note-type-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.nn-folder-note-type-buttons button {
    width: 100%;
}

/* ========================================================================
   Search help modal
   ======================================================================== */

.modal.nn-search-help-modal {
    /* Desktop layout with bounded width while keeping viewport margins */
    width: min(600px, calc(100vw - 80px));
    max-width: min(600px, calc(100vw - 80px));
    /* Shorter desktop layout so the modal does not dominate vertical space */
    max-height: min(70vh, 640px);
}

.modal.nn-search-help-modal .modal-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal.nn-search-help-modal .nn-search-help-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
}

.modal.nn-search-help-modal strong {
    font-size: inherit;
    font-weight: 600;
}

.is-mobile .modal.nn-search-help-modal {
    max-height: min(560px, calc(100vh - 24px));
    max-width: calc(100vw - 24px);
}

.is-mobile .modal.nn-search-help-modal .modal-content {
    padding-right: 12px;
}
/* Source: src/styles/sections/modal-select-vault-profile.css */

/* ========================================================================
   Select Vault Profile Modal
   ======================================================================== */

.modal.nn-select-profile-modal .modal-content {
    display: flex;
    flex-direction: column;
    gap: var(--size-2-3);
    padding: var(--size-4-4);
}

.nn-select-profile-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-2-2);
    width: 100%;
}

.nn-select-profile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--size-2-3) var(--size-4-2);
    border-radius: var(--radius-m);
    background-color: transparent;
    color: var(--nn-theme-foreground);
    cursor: pointer;
    transition: background-color 120ms ease;
}

.nn-select-profile-item:focus {
    outline: none;
}

.nn-select-profile-item:focus-visible {
    box-shadow: 0 0 0 2px var(--interactive-accent);
}

.nn-select-profile-item:hover {
    background-color: var(--background-modifier-hover);
}

.nn-select-profile-item.is-selected {
    background-color: var(--background-modifier-hover);
}

.nn-select-profile-item.is-current .nn-select-profile-item-name {
    color: var(--interactive-accent);
}

.nn-select-profile-item-name {
    font-size: var(--font-ui-medium);
}

.nn-select-profile-item-badge {
    font-size: var(--font-ui-small);
    color: var(--nn-theme-foreground-muted);
    font-weight: var(--font-semibold);
}

.nn-select-profile-empty {
    margin: 0;
    padding: var(--size-4-4) 0;
    color: var(--nn-theme-foreground-muted);
    font-size: var(--font-ui-small);
    text-align: center;
}
/* Source: src/styles/sections/modal-action-button.css */

/* ========================================================================
   Shared Modal Action Button
   ======================================================================== */

.nn-action-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: transparent;
    color: var(--nn-theme-foreground-muted);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.nn-action-btn:hover:not(:disabled):not(.mod-warning) {
    background: var(--background-modifier-hover);
    color: var(--nn-theme-foreground);
    border-color: var(--background-modifier-border-hover);
}

.nn-action-btn:disabled {
    color: var(--nn-theme-foreground);
    opacity: 0.4;
    cursor: not-allowed;
}

.nn-action-btn.mod-warning:disabled {
    color: var(--text-error);
}

.nn-action-btn.mod-warning {
    background: transparent;
    color: var(--text-error);
    border-color: var(--background-modifier-border);
}

.nn-action-btn.mod-warning:hover:not(:disabled) {
    background: var(--background-modifier-error);
    color: var(--text-error);
    border-color: var(--background-modifier-error-hover);
}

.nn-action-btn svg {
    width: 16px;
    height: 16px;
}
/* Source: src/styles/sections/modal-edit-vault-profiles.css */

/* ========================================================================
   Edit Vault Profiles Modal
   ======================================================================== */

.modal.nn-edit-profiles-modal .modal-content {
    display: flex;
    flex-direction: column;
    gap: var(--size-2-2);
    padding: var(--size-4-4);
}

.nn-edit-profiles-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-1-5);
    width: 100%;
}

.nn-edit-profiles-row {
    display: flex;
    align-items: center;
    gap: var(--size-2-1);
}

.nn-edit-profiles-row .nn-input {
    flex: 1;
    min-width: 0;
}

.nn-edit-profiles-actions {
    display: flex;
    gap: var(--size-1-5);
    flex-shrink: 0;
}
/* Source: src/styles/sections/modal-file-icon-rule-editor.css */

/* ========================================================================
   File Icon Rule Editor Modal
   ======================================================================== */

.modal.nn-file-icon-rule-editor-modal {
    width: 420px;
    max-width: calc(100vw - 40px);
    max-height: 500px;
}

.modal.nn-file-icon-rule-editor-modal .modal-content {
    display: flex;
    flex-direction: column;
    gap: var(--size-2-2);
    padding: var(--size-4-4);
    overflow: hidden;
}

.nn-file-icon-rule-editor-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    padding-bottom: var(--size-1-5);
}

.nn-file-icon-rule-editor-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-1-5);
    width: 100%;
}

.nn-file-icon-rule-editor-footer {
    flex-shrink: 0;
    margin-top: 0;
    padding-top: var(--size-2-2);
    border-top: 1px solid var(--background-modifier-border);
}

.nn-file-icon-rule-row {
    display: flex;
    align-items: center;
    gap: var(--size-2-2);
}

.nn-file-icon-rule-key {
    flex: 1;
    min-width: 0;
}

.nn-file-icon-rule-row-invalid .nn-file-icon-rule-key {
    border-color: var(--background-modifier-error);
}
/* Source: src/styles/sections/modal-ux-icon-map.css */

/* ========================================================================
   UX Icon Map Modal
   ======================================================================== */

.modal.nn-ux-icon-map-modal {
    width: 520px;
    max-width: calc(100vw - 40px);
    max-height: 500px;
}

.is-mobile .modal.nn-ux-icon-map-modal {
    width: 560px;
    max-width: calc(100vw - 24px);
    max-height: min(560px, calc(100vh - 24px));
}

.modal.nn-ux-icon-map-modal .modal-content {
    display: flex;
    flex-direction: column;
    gap: var(--size-2-2);
    padding: var(--size-4-4);
    overflow: hidden;
}

.is-mobile .modal.nn-ux-icon-map-modal .modal-content {
    gap: var(--size-2-3);
    padding: var(--size-4-6);
}

.nn-ux-icon-map-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    padding-bottom: var(--size-1-5);
}

.is-mobile .modal.nn-ux-icon-map-modal .nn-ux-icon-map-scroll {
    padding-bottom: var(--size-2-2);
}

.nn-ux-icon-map-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-1-5);
    width: 100%;
}

.is-mobile .modal.nn-ux-icon-map-modal .nn-ux-icon-map-list {
    gap: var(--size-2-2);
}

.nn-ux-icon-map-footer {
    flex-shrink: 0;
    margin-top: 0;
    padding-top: var(--size-2-2);
    border-top: 1px solid var(--background-modifier-border);
}

.is-mobile .modal.nn-ux-icon-map-modal .nn-ux-icon-map-footer {
    padding-top: var(--size-2-3);
}

.nn-ux-icon-map-row {
    display: flex;
    align-items: center;
    gap: var(--size-2-2);
}

.is-mobile .modal.nn-ux-icon-map-modal .nn-ux-icon-map-row {
    gap: var(--size-2-3);
}

.nn-ux-icon-map-label {
    flex: 1;
    min-width: 0;
}

.is-mobile .modal.nn-ux-icon-map-modal .nn-ux-icon-map-label {
    font-size: 1.05em;
}

.is-mobile .modal.nn-ux-icon-map-modal .nn-action-btn {
    min-width: 36px;
    min-height: 36px;
}

.nn-ux-icon-map-group-heading {
    margin: 0;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--nn-theme-foreground);
}

.is-mobile .modal.nn-ux-icon-map-modal .nn-ux-icon-map-group-heading {
    font-size: 1em;
}

.nn-ux-icon-map-group-heading--spaced {
    margin-top: var(--size-4-4);
}
/* Source: src/styles/sections/modal-welcome.css */

/* ========================================================================
   Welcome Modal
   ======================================================================== */

.modal.nn-welcome-modal {
    width: 620px;
    max-width: calc(100vw - 40px);
}

.modal.nn-welcome-modal .modal-content {
    padding: 16px;
}

.modal.nn-welcome-modal .modal-title {
    width: 100%;
    text-align: center;
}

.modal.nn-welcome-modal .modal-close-button {
    z-index: 10;
    pointer-events: auto;
}

.nn-welcome-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    text-align: left;
}

.nn-welcome-text {
    margin: 0;
    color: var(--nn-theme-foreground);
    line-height: 1.5;
    font-size: 14px;
}

.nn-welcome-thumbnail-link {
    display: block;
    width: 100%;
    max-width: 560px;
    align-self: center;
}

.nn-welcome-thumbnail-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--background-secondary);
    border-radius: var(--radius-m);
    border: 1px solid var(--background-modifier-border);
    overflow: hidden;
}

.nn-welcome-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nn-welcome-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

@media (max-width: 768px) {
    .modal.nn-welcome-modal {
        width: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
        margin: 0 auto;
    }

    .modal.nn-welcome-modal .modal-content {
        padding: 12px;
    }

    .nn-welcome-text {
        font-size: 15px;
        line-height: 1.6;
    }
}
/* Source: src/styles/sections/modal-whats-new.css */

/* ========================================================================
   What's New Modal
   ======================================================================== */

/* What's new modal width */
.modal.nn-whats-new-modal {
    width: 600px;
    max-width: calc(100vw - 40px);
    overflow: hidden;
}

/* What's new content layout */
.modal.nn-whats-new-modal .modal-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 16px;
}

.modal.nn-whats-new-modal .modal-close-button {
    z-index: 10;
    pointer-events: auto;
}

/* What's new scrollable container */
.nn-whats-new-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    margin-bottom: 0;
    padding-right: 8px;
    padding-bottom: 16px;
}

/* Version container */
.nn-whats-new-version {
    margin-bottom: 16px;
}

/* Version container - last child no margin */
.nn-whats-new-version:last-child {
    margin-bottom: 0;
}

/* Version header */
.nn-whats-new-version h3 {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--nn-theme-foreground);
    background: var(--background-secondary);
    margin: 0 0 4px;
    padding: 6px 10px;
    border-radius: 6px;
}

/* Feature list */
.nn-whats-new-features {
    margin-left: 16px;
}

/* Category headers */
.nn-whats-new-category {
    font-weight: bold;
    margin-top: 8px;
    margin-bottom: 4px;
}

/* Info text */
.nn-whats-new-info {
    margin-bottom: 12px;
    color: var(--nn-theme-foreground);
    line-height: 1.5;
    /* Match list item text size on desktop */
    font-size: 14px;
}

/* What's new divider */
.nn-whats-new-divider {
    border-top: 1px solid var(--background-modifier-border);
    margin-top: 0;
    margin-bottom: 16px;
}

/* Release banner image */
.nn-whats-new-banner {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    margin-bottom: 12px;
    text-decoration: none;
}

.nn-whats-new-banner:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

.nn-whats-new-banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Release video */
.nn-whats-new-video-frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    margin-bottom: 12px;
}

.nn-whats-new-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000000;
}

.nn-whats-new-video-open {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-normal);
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    opacity: 0.9;
    text-decoration: none;
}

.nn-whats-new-video-open:hover {
    color: var(--text-normal);
    background: var(--background-secondary);
}

.nn-whats-new-video-open:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

.nn-whats-new-video-open svg {
    width: 16px;
    height: 16px;
}

/* YouTube link preview */
.nn-whats-new-youtube-link {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    text-decoration: none;
}

.nn-whats-new-youtube-link:focus-visible .nn-whats-new-youtube-thumbnail {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

.nn-whats-new-youtube-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
}

.nn-whats-new-youtube-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nn-whats-new-youtube-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nn-theme-foreground-muted);
    font-size: 13px;
}

.nn-whats-new-youtube-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 36px;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    background-color: #ff0000;
    opacity: 0.9;
    pointer-events: none;
}

.nn-whats-new-youtube-play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #ffffff;
}

.nn-whats-new-youtube-link:hover .nn-whats-new-youtube-play {
    background-color: #cc0000;
}

/* Feature list */
.nn-whats-new-version ul {
    list-style: disc;
    margin: 0;
    padding-left: 16px;
}

/* Feature list item */
.nn-whats-new-version li {
    margin-bottom: 4px;
    color: var(--nn-theme-foreground);
    font-size: 14px;
    line-height: 1.5;
}

/* Highlight emphasis */
.nn-highlight {
    background-color: var(--text-highlight-bg);
    color: var(--nn-theme-foreground);
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 600;
}

.nn-whats-new-info code,
.nn-whats-new-version li code {
    color: var(--code-normal);
    background-color: var(--code-background);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Support container */
.nn-whats-new-support {
    margin-top: 0;
    padding-top: 0;
}

/* Support text */
.nn-whats-new-support-text {
    color: var(--nn-theme-foreground-muted);
    font-size: 14px;
    margin-bottom: 12px;
}

/* Button container */
.nn-whats-new-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
}

/* Support button styling */
.nn-support-button-small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.nn-support-button-icon {
    display: inline-flex;
    font-size: 14px;
    line-height: 1;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .modal.nn-whats-new-modal {
        width: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
        margin: 0 auto;
    }

    .modal.nn-whats-new-modal .modal-content {
        padding: 12px;
    }

    .nn-whats-new-scroll {
        max-height: min(60vh, 360px);
        padding-right: 4px;
    }

    /* Use standard text sizing for readability on mobile */
    .nn-whats-new-info,
    .nn-whats-new-version li,
    .nn-whats-new-category {
        font-size: 15px;
        line-height: 1.6;
    }

    /* Version header size on mobile */
    .nn-whats-new-version h3 {
        font-size: 15px;
    }
}

/* Obsidian mobile app adjustments */
.is-mobile {
    /* Body text and labels */
    .nn-whats-new-info,
    .nn-whats-new-version li,
    .nn-whats-new-category {
        font-size: 15px;
        line-height: 1.6;
    }

    /* Version header */
    .nn-whats-new-version h3 {
        font-size: 15px;
    }
}
/* Source: src/styles/sections/modal-icon-picker.css */

/* ========================================================================
   Icon Picker Modal
   ======================================================================== */

/* Icon picker modal width - adjust for mobile */
.modal.nn-icon-picker-modal {
    width: 480px;
    max-width: calc(100vw - 40px);
    height: auto;
}

/* Icon picker content layout */
.modal.nn-icon-picker-modal .modal-content {
    padding: 0;
    height: 100%;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal.nn-icon-picker-modal .modal-close-button {
    z-index: 10;
    pointer-events: auto;
}

/* Icon search container with bottom border */
.nn-icon-search-container {
    padding: 12px;
    border-bottom: 1px solid var(--background-modifier-border);
}

/* Icon search input field */
.nn-icon-search-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
}

/* Icon search input focus */
.nn-icon-search-input:focus {
    outline: none;
    border-color: var(--interactive-accent);
}

/* Icon results scrollable container */
.nn-icon-results-container {
    height: 240px;
    min-height: 240px;
    overflow-y: auto;
    padding: 8px;
    flex: 0 0 auto;
}

.nn-icon-button-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--background-modifier-border);
}

/* Icon category headers */
.nn-icon-section-header {
    font-size: var(--font-ui-small);
    font-weight: 600;
    color: var(--nn-theme-foreground-muted);
    letter-spacing: 0.5px;
    margin-top: 12px;
    margin-bottom: 4px;
}

.nn-icon-section-header:first-child {
    margin-top: 0;
}

/* Icon grid layout - 5 columns */
.nn-icon-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

/* Individual icon item */
.nn-icon-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border-radius: var(--radius-s);
}

.nn-icon-recent-remove-button {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 1;
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
    color: var(--nn-theme-foreground-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .nn-icon-recent-remove-button {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 120ms ease;
    }

    .nn-icon-item:hover .nn-icon-recent-remove-button,
    .nn-icon-item:focus-within .nn-icon-recent-remove-button {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

.nn-icon-recent-remove-button:hover {
    color: var(--nn-theme-foreground);
    border-color: var(--interactive-accent);
}

.nn-icon-recent-remove-button:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 1px;
}

.nn-icon-recent-remove-glyph {
    font-size: 11px;
    line-height: 1;
    transform: translateY(-1px);
    pointer-events: none;
}

/* Icon item hover/focus states */
.nn-icon-item:hover,
.nn-icon-item:focus {
    background-color: var(--background-modifier-hover);
    outline: none;
}

/* Icon item keyboard focus indicator */
.nn-icon-item:focus-visible {
    box-shadow: 0 0 0 2px var(--interactive-accent);
}

/* Icon preview container */
.nn-icon-item-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
    color: var(--nn-theme-foreground-muted);
}

/* Icon SVG size */
.nn-icon-item-preview svg {
    width: 24px;
    height: 24px;
}

.nn-icon-item-preview.nn-iconfont {
    font-size: 28px;
    line-height: 1;
}

.nn-icon-item-preview.nn-emoji-icon {
    font-size: 24px;
    line-height: 1;
}

/* Icon name label */
.nn-icon-item-name {
    font-size: 11px;
    color: var(--nn-theme-foreground-muted);
    text-align: center;
    word-break: break-word;
    line-height: 1.2;
    max-width: 100%;
}

/* Empty search and additional icons messages */
.nn-icon-empty-message,
.nn-icon-more-message {
    text-align: center;
    color: var(--nn-theme-foreground-muted);
    padding: 24px;
    font-size: 14px;
}
/* Source: src/styles/sections/modal-property-keys.css */

/* ========================================================================
   Property Keys Modal
   ======================================================================== */

.modal.nn-property-keys-modal {
    width: 560px;
    max-width: calc(100vw - 40px);
    height: min(580px, calc(100vh - 40px));
}

.is-mobile .modal.nn-property-keys-modal {
    max-width: calc(100vw - 24px);
    height: min(520px, calc(100vh - 24px));
}

.modal.nn-property-keys-modal .modal-content {
    display: flex;
    flex-direction: column;
    padding: var(--size-4-4);
    gap: var(--size-2-2);
    overflow: hidden;
}

.modal.nn-property-keys-modal .modal-title {
    width: 100%;
    text-align: center;
}

.nn-property-keys-description {
    text-align: center;
    color: var(--nn-theme-foreground-muted);
    font-size: var(--font-smallest);
    margin: var(--size-4-2) 0 0;
    line-height: 1.4;
}

.is-mobile .modal.nn-property-keys-modal .modal-content {
    gap: var(--size-2-3);
    padding: var(--size-4-6);
}

.modal.nn-property-keys-modal .nn-property-keys-search-container {
    position: relative;
}

.modal.nn-property-keys-modal input.nn-property-keys-search {
    margin: 0;
    height: 32px;
    padding: 4px 36px 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--nn-theme-list-search-border-color);
}

.modal.nn-property-keys-modal input.nn-property-keys-search.is-active {
    background: var(--nn-theme-list-search-active-bg);
}

.modal.nn-property-keys-modal input.nn-property-keys-search:focus {
    border-color: var(--nn-theme-list-search-border-color);
    box-shadow: 0 0 0 2px var(--nn-theme-list-search-border-color);
}

.modal.nn-property-keys-modal .nn-property-keys-search-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    color: var(--nn-theme-foreground-muted);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1;
    cursor: pointer;
}

.modal.nn-property-keys-modal .nn-property-keys-search-clear.is-visible {
    display: inline-flex;
}

.modal.nn-property-keys-modal .nn-property-keys-search-clear:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

.modal.nn-property-keys-modal .nn-property-keys-search-clear svg {
    width: 16px;
    height: 16px;
}

.modal.nn-property-keys-modal .nn-property-keys-search-clear:hover:not(:disabled) {
    color: var(--nn-theme-foreground);
}

.nn-property-keys-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-top: var(--size-4-2);
    padding-right: 4px;
    padding-bottom: var(--size-1-5);
}

.is-mobile .modal.nn-property-keys-modal .nn-property-keys-scroll {
    padding-bottom: var(--size-2-2);
}

.nn-property-keys-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-1-5);
    width: 100%;
}

.is-mobile .modal.nn-property-keys-modal .nn-property-keys-list {
    gap: var(--size-2-2);
}

.nn-property-keys-row {
    display: flex;
    align-items: center;
    gap: var(--size-2-2);
    padding-left: var(--size-2-2);
    padding-right: var(--size-2-2);
    border-radius: var(--radius-s);
    transition: background-color 120ms ease;
}

.is-mobile .modal.nn-property-keys-modal .nn-property-keys-row {
    gap: var(--size-2-3);
}

.modal.nn-property-keys-modal .nn-property-keys-list .nn-property-keys-row:hover {
    background: var(--nn-theme-foreground-faint);
}

.nn-property-keys-label {
    flex: 1;
    min-width: 0;
    color: var(--nn-theme-foreground-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nn-property-keys-row.is-enabled .nn-property-keys-label {
    color: var(--nn-theme-foreground);
}

.nn-property-keys-row.is-enabled {
    font-weight: var(--font-semibold);
}

.nn-property-keys-row.is-enabled .nn-property-keys-count {
    color: var(--nn-theme-foreground);
}

.nn-property-keys-header-row {
    margin-bottom: var(--size-1-2);
    background: var(--nn-theme-foreground-faint);
    border-radius: var(--radius-s);
}

.nn-property-keys-select-all-row {
    margin-top: var(--size-1-2);
    padding-top: var(--size-2-2);
    border-top: 1px solid var(--background-modifier-border);
}

.nn-property-keys-count {
    color: var(--nn-theme-foreground-muted);
}

.nn-property-keys-actions {
    display: flex;
    align-items: center;
    gap: var(--size-1-3);
}

.is-mobile .modal.nn-property-keys-modal .nn-property-keys-toggle {
    min-width: 36px;
    min-height: 36px;
}

.modal.nn-property-keys-modal .nn-property-keys-toggle {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--nn-theme-foreground-muted);
}

.modal.nn-property-keys-modal .nn-property-keys-toggle:focus-visible {
    outline: 1px solid var(--interactive-accent);
    outline-offset: 1px;
}

.modal.nn-property-keys-modal .nn-property-keys-toggle:hover:not(:disabled) {
    background: var(--background-modifier-hover);
}

.modal.nn-property-keys-modal .nn-property-keys-toggle.is-enabled {
    color: var(--nn-theme-foreground);
    background: transparent;
}

.nn-property-keys-header-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    pointer-events: none;
}

.nn-property-keys-header-icon svg {
    width: 16px;
    height: 16px;
}

.nn-property-keys-empty {
    padding: var(--size-2-3);
    text-align: center;
    color: var(--nn-theme-foreground-muted);
}

.nn-property-keys-footer {
    flex-shrink: 0;
    margin-top: var(--size-2-2);
    padding-top: var(--size-2-2);
    border-top: 1px solid var(--background-modifier-border);
}

.is-mobile .modal.nn-property-keys-modal .nn-property-keys-footer {
    padding-top: var(--size-2-3);
}
/* Source: src/styles/sections/modal-manual-sort-group-header.css */

/* ========================================================================
   Manual Sort Group Header Modal
   ======================================================================== */

.modal.nn-manual-sort-group-header-modal {
    width: min(360px, calc(100vw - 32px));
}

.modal.nn-manual-sort-group-header-modal .modal-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.nn-manual-sort-header-description {
    margin: 0;
}

.nn-manual-sort-header-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nn-manual-sort-header-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nn-manual-sort-header-field-label {
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
}

.nn-manual-sort-header-input {
    width: 100%;
}

.nn-manual-sort-header-appearance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.nn-manual-sort-header-action-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.nn-manual-sort-header-style-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.nn-manual-sort-header-style-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-muted);
}

.nn-manual-sort-header-style-preview svg {
    width: 16px;
    height: 16px;
}

.nn-manual-sort-header-style-preview.nn-color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--background-modifier-border);
    background-color: var(--nn-manual-sort-header-preview-color);
}

.nn-manual-sort-header-style-preview.is-empty.nn-color-swatch {
    background-color: transparent;
}

.nn-manual-sort-header-style-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nn-manual-sort-header-toggle-setting {
    border: 0;
    padding: 0;
}
/* Source: src/styles/sections/modal-settings-transfer.css */

/* ========================================================================
   Settings transfer modal
   ======================================================================== */

.modal.nn-settings-transfer-modal {
    width: min(720px, calc(100vw - 80px));
    max-width: min(720px, calc(100vw - 80px));
}

.modal.nn-settings-transfer-modal .modal-content {
    display: flex;
    flex-direction: column;
}

.nn-settings-transfer-editor-setting {
    margin-bottom: 0;
}

.nn-settings-transfer-editor {
    min-height: 280px;
    margin-top: 8px;
    margin-bottom: 0;
    resize: vertical;
    font-family: var(--font-monospace);
    line-height: 1.5;
}

.is-mobile .modal.nn-settings-transfer-modal {
    max-width: calc(100vw - 24px);
}

.is-mobile .modal.nn-settings-transfer-modal .nn-settings-transfer-editor {
    min-height: 220px;
}
/* Source: src/styles/sections/layout-virtual-list.css */

/* ========================================================================
   Virtual List Styles
   ======================================================================== */

/* Virtual container wrapper - ensures proper absolute positioning context */

.nn-navigation-pane-scroller > .nn-virtual-container,
.nn-list-pane-scroller > .nn-virtual-container {
    position: relative;
}

/* Virtual list container - holds all virtual items */
.nn-virtual-container {
    width: 100%;
    position: relative;
}

/* Virtual items container */
.nn-navigation-pane-scroller [data-index],
.nn-list-pane-scroller [data-index] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* Virtual navigation item (folders and tags) */
.nn-virtual-nav-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* Virtual file item wrapper - position relative for separator positioning */
.nn-virtual-file-item {
    position: relative;
    height: var(--item-height);
    /* Isolate layout and style calculations per item while allowing overlays to extend beyond bounds */
    contain: layout style;
}
/* Source: src/styles/sections/settings-page.css */

/* ========================================================================
   Settings Page Styles
   ======================================================================== */

/* Settings layout root */
.nn-settings-tab-root {
    display: block;
    min-height: 0;
}

.nn-settings-tab-root .setting-group.nn-settings-lifecycle-group {
    display: none;
}

.nn-settings-tab-root .setting-group.nn-settings-lifecycle-group + .setting-group {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Settings section header spacing */
.nn-settings-tab-root .setting-item-heading {
    margin-top: 30px;
}

/* First settings header - no top margin */
.nn-settings-tab-root .setting-item-heading:first-child {
    margin-top: 0;
}

.nn-settings-legacy-titlebar {
    padding-inline: 0;
}

.nn-settings-legacy-titlebar .setting-item-name {
    display: flex;
    align-items: center;
    gap: var(--size-2-2);
}

.nn-settings-legacy-page-link:focus-visible {
    outline: 2px solid var(--background-modifier-border-focus);
    outline-offset: -2px;
}

/* Utility class for conditionally hidden settings */
.nn-setting-hidden {
    display: none;
}

.nn-setting-warning {
    color: var(--text-error);
    font-weight: 600;
}

.nn-setting-calendar-pattern-example-text {
    font-size: inherit;
    font-weight: var(--font-semibold);
}

.nn-setting-property-keys-count-line {
    margin-top: var(--size-2-1);
}

.nn-setting-property-keys-summary-text {
    font-size: inherit;
    font-weight: var(--font-semibold);
}

/* Sync mode toggle button (cloud/device) */
.nn-setting-sync-toggle {
    color: var(--text-muted);
    opacity: 0.85;
}

.nn-setting-sync-toggle:hover {
    color: var(--text-normal);
    opacity: 1;
}

/* Container for additional info below settings */
.nn-setting-info-container {
    margin-top: 8px;
    margin-bottom: 8px;
}

.nn-setting-info-list ol {
    margin: 6px 0 0 1.5em;
    padding: 0;
}

.nn-setting-info-list li + li {
    margin-top: 4px;
}

/* Wider text inputs for settings that benefit from more space */
.nn-setting-wide-input input[type='text'],
.nn-setting-wide-input textarea {
    width: 300px;
    max-width: 100%;
}

.nn-toolbar-visibility-control {
    width: 100%;
}

.nn-setting-color-preview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-end: var(--size-2-2);
}

.nn-setting-color-swatch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.nn-setting-color-swatch-button:hover {
    border-color: var(--text-muted);
}

.nn-setting-color-swatch-button.nn-setting-color-swatch-button-dark {
    background: #111827;
    border-color: #374151;
}

.nn-setting-color-swatch-button.nn-setting-color-swatch-button-dark:hover {
    border-color: #4b5563;
}

.nn-setting-color-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.nn-setting-color-copy-button:hover {
    color: var(--text-normal);
}

.nn-setting-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid var(--background-modifier-border);
    box-sizing: border-box;
}

.nn-toolbar-visibility-sections {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-4);
}

.nn-toolbar-visibility-group {
    display: flex;
    flex-direction: column;
    gap: var(--size-2-2);
}

.nn-toolbar-visibility-group-label {
    font-size: var(--font-ui-small);
    font-weight: var(--font-semibold);
    color: var(--nn-theme-foreground-muted);
}

.nn-toolbar-visibility-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-2-3);
}

.nn-quick-actions-control {
    display: flex;
    align-items: center;
    gap: 0;
}

.nn-quick-actions-buttons,
.nn-toolbar-visibility-grid-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
}

.nn-toolbar-visibility-grid-scroll {
    justify-content: flex-end;
}

.nn-quick-actions-buttons.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.nn-quick-actions-master-toggle {
    margin-inline-start: auto;
}

button.nn-toolbar-visibility-toggle.nn-mobile-toolbar-button {
    position: relative;
    padding: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
}

button.nn-toolbar-visibility-toggle.nn-mobile-toolbar-button:not(.nn-mobile-toolbar-button-active) {
    opacity: 0.6;
}

button.nn-toolbar-visibility-toggle.nn-mobile-toolbar-button.nn-mobile-toolbar-button-active {
    color: var(--nn-theme-mobile-toolbar-button-active-icon-color);
    background-color: var(--nn-theme-mobile-toolbar-button-active-bg);
}

button.nn-toolbar-visibility-toggle.nn-mobile-toolbar-button.nn-mobile-toolbar-button-active .nn-toolbar-visibility-icon {
    color: var(--nn-theme-mobile-toolbar-button-active-icon-color);
}

button.nn-toolbar-visibility-toggle.nn-mobile-toolbar-button.nn-mobile-toolbar-button-active svg:not(.nn-vault-icon-svg) {
    stroke: var(--nn-theme-mobile-toolbar-button-active-icon-color);
    stroke-width: 2;
}

.nn-toolbar-visibility-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--nn-theme-foreground);
}

.nn-toolbar-visibility-icon svg:not(.nn-vault-icon-svg) {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
}

.nn-toolbar-visibility-icon svg.nn-vault-icon-svg {
    width: 18px;
    height: 18px;
}

/* Mobile-specific toolbar visibility button styles */
.is-mobile .nn-toolbar-visibility-control {
    width: 100%;
}

.is-mobile .nn-toolbar-visibility-sections {
    width: 100%;
}

.is-mobile .nn-toolbar-visibility-group {
    width: 100%;
}

.is-mobile .nn-toolbar-visibility-group-label {
    text-align: center;
}

.is-mobile .nn-toolbar-visibility-grid {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: space-between;
}

/* YouTube-style play button used in settings */
button.nn-youtube-button {
    background-color: #ff0000;
    border: none;
    color: #ffffff;
    min-width: 54px;
}

button.nn-youtube-button:hover {
    background-color: #cc0000;
}

button.nn-youtube-button svg {
    color: #ffffff;
    fill: #ffffff;
    stroke: none;
}

.is-mobile button.nn-toolbar-visibility-toggle.nn-mobile-toolbar-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

.is-mobile .nn-toolbar-visibility-icon {
    width: 24px;
    height: 24px;
}

.is-mobile .nn-toolbar-visibility-icon svg {
    width: 24px;
    height: 24px;
}

/* Android-specific adjustments for smaller buttons */
.notebook-navigator-android button.nn-toolbar-visibility-toggle.nn-mobile-toolbar-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

.notebook-navigator-android .nn-toolbar-visibility-icon {
    width: 22px;
    height: 22px;
}

.notebook-navigator-android .nn-toolbar-visibility-icon svg {
    width: 22px;
    height: 22px;
}

.nn-setting-profile-dropdown select {
    width: 160px;
    max-width: 100%;
}

.is-mobile .nn-setting-profile-dropdown select {
    width: 100%;
    max-width: none;
}

.nn-slider-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nn-slider-control input[type='range'] {
    flex: 0 0 100px;
}

.nn-slider-value {
    flex: 0 0 48px;
    font-size: var(--font-ui-smaller);
    color: var(--nn-theme-foreground-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Source: src/styles/sections/settings-sponsor-button.css */

/* ========================================================================
   Sponsor Button Styles
   ======================================================================== */

/* Support button hover - subtle opacity change */
.nn-support-button:hover {
    opacity: 0.8;
}
/* Source: src/styles/sections/settings-mobile.css */

/* ========================================================================
   Mobile Styles
   ======================================================================== */

/* Mobile-specific wide input fields - full width on mobile */
.is-mobile .nn-setting-wide-input input[type='text'],
.is-mobile .nn-setting-wide-input textarea {
    width: 100%;
}
/* Source: src/styles/sections/settings-database-statistics.css */

/* ========================================================================
   Database Statistics Section
   ======================================================================== */

/* Container for database statistics */
.nn-database-stats {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--background-modifier-border);
}

/* Statistics text styling */
.nn-stats-text {
    font-size: var(--font-ui-smaller);
    color: var(--nn-theme-foreground-muted);
    line-height: 1.5;
}

/* Remove default setting item chrome when statistics are displayed */
.nn-stats-section.setting-item {
    border: none;
    padding: 0;
    margin-top: 0;
}
/* Source: src/styles/sections/modal-color-picker.css */

/* ========================================================================
   Color Picker Modal - Compact Mobile-Friendly Design
   ======================================================================== */

/* Modal size - use natural width */
.modal.nn-color-picker-modal {
    max-height: 80vh;
}

/* Modal content padding */
.modal.nn-color-picker-modal .modal-content {
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.modal.nn-color-picker-modal .modal-close-button {
    z-index: 10;
    pointer-events: auto;
}

/* Header */
.nn-color-picker-header,
.nn-icon-picker-header {
    margin-bottom: 16px;
    text-align: center;
}

.nn-color-picker-header h3,
.nn-icon-picker-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--nn-theme-foreground);
}

/* Two column layout */
.nn-color-picker-content {
    display: flex;
    gap: 20px;
    flex: 1 1 auto;
    overflow-y: auto;
    padding-bottom: 8px;
}

.nn-color-picker-left,
.nn-color-picker-right {
    display: flex;
    flex-direction: column;
}

.nn-color-picker-left {
    flex: 0 1 250px;
    min-width: 180px;
}

.nn-color-picker-right {
    flex: 1 1 200px;
    min-width: 0;
}

/* Preview section */
.nn-color-preview-section {
    margin-bottom: auto; /* Push preset colors to bottom */
}

.nn-color-preview-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nn-preview-current,
.nn-preview-new {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.nn-preview-label,
.nn-hex-title {
    font-size: 11px;
    color: var(--nn-theme-foreground-muted);
    font-weight: 500;
}

.nn-preview-color {
    width: 100%;
    height: 50px;
    border-radius: var(--radius-m);
    border: 1px solid var(--background-modifier-border);
}

.nn-color-swatch {
    position: relative;
    overflow: hidden;
}

.nn-color-swatch::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--nn-color-swatch-color, transparent);
    pointer-events: none;
}

.nn-checkerboard,
.nn-preview-color.nn-no-color {
    background-image:
        linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%, #cccccc),
        linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%, #cccccc);
    background-size: 10px 10px;
    background-position:
        0 0,
        5px 5px;
    background-color: #ffffff;
}

.theme-dark .nn-checkerboard,
.theme-dark .nn-preview-color.nn-no-color {
    background-image:
        linear-gradient(45deg, #444444 25%, transparent 25%, transparent 75%, #444444 75%, #444444),
        linear-gradient(45deg, #444444 25%, transparent 25%, transparent 75%, #444444 75%, #444444);
    background-color: #222222;
}

.nn-preview-arrow {
    width: 20px;
    height: 20px;
    color: var(--nn-theme-foreground-muted);
    flex-shrink: 0;
    margin-top: 18px;
}

.nn-preview-arrow svg {
    width: 16px;
    height: 16px;
}

/* Visual color picker section */
.nn-color-area-section,
.nn-color-preview-section {
    padding-bottom: 15px;
}

.nn-color-area-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: auto; /* Push everything below to the bottom */
}

.nn-color-controls {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Header above the saturation/value area; matches the preset header height so the picker
   lines up with the swatch grid in the left column. Hidden on mobile where the area sits
   beside the sliders. */
.nn-sv-header {
    display: flex;
    align-items: center;
    min-height: 20px;
    margin-bottom: 8px;
}

.nn-sv-area {
    position: relative;
    width: 100%;
    height: 150px;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    background-color: var(--nn-sv-hue, #ff0000);
    background-image: linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
    cursor: crosshair;
    touch-action: none;
}

.nn-sv-thumb {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--nn-thumb-color, #ffffff);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.nn-color-slider {
    position: relative;
    width: calc(100% - 16px);
    height: 14px;
    margin: 0 8px;
    border-radius: 7px;
    cursor: pointer;
    touch-action: none;
}

.nn-hue-slider {
    background: linear-gradient(
        to right,
        #ff0000 0%,
        #ffff00 16.66%,
        #00ff00 33.33%,
        #00ffff 50%,
        #0000ff 66.66%,
        #ff00ff 83.33%,
        #ff0000 100%
    );
}

.nn-alpha-gradient {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--nn-alpha-color, #000000));
    pointer-events: none;
}

.nn-color-slider .nn-slider-thumb {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

/* Hex input section - sits at the bottom of the picker, below the alpha slider */
.nn-hex-section {
    margin-bottom: 0;
}

.nn-hex-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.nn-hex-title {
    display: block;
    height: 17px; /* Match the preview label height for alignment */
    margin-bottom: 0;
}

.nn-hex-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nn-hex-label {
    font-size: 14px;
    color: var(--nn-theme-foreground);
    font-weight: 500;
}

.nn-hex-input {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-primary);
    color: var(--nn-theme-foreground);
    font-family: var(--font-monospace);
    font-size: 13px;
}

.nn-hex-input:focus {
    outline: none;
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 2px var(--interactive-accent-hover);
}

/* Recent colors header */
.nn-preset-header,
.nn-recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.nn-section-label {
    font-size: 12px;
    color: var(--nn-theme-foreground-muted);
    font-weight: 500;
}

.nn-preset-buttons {
    display: flex;
    gap: 4px;
}

.nn-preset-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nn-preset-toggle-label {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: var(--nn-theme-foreground-muted);
    cursor: pointer;
    font-weight: 500;
}

.nn-preset-toggle-label.nn-preset-toggle-active {
    color: var(--nn-theme-foreground);
    font-weight: 700;
}

.nn-preset-toggle-separator {
    color: var(--nn-theme-foreground-muted);
    font-size: 12px;
    line-height: 1;
}

.nn-preset-action-button,
.nn-clear-recent {
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    color: var(--nn-theme-foreground-muted);
    border: 1px solid var(--background-modifier-border);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

.nn-preset-action-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.nn-preset-action-hidden {
    display: none;
}

.nn-preset-action-button:hover,
.nn-clear-recent:hover {
    background: var(--background-modifier-hover);
    color: var(--nn-theme-foreground);
    border-color: var(--background-modifier-border-hover);
}

.nn-preset-action-button svg {
    width: 14px;
    height: 14px;
}

/* Preset and Recent colors sections */
.nn-preset-section {
    margin-top: auto; /* Align to bottom */
}

.nn-recent-section {
    margin-top: 0;
}

.nn-preset-colors,
.nn-recent-colors {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    overflow: hidden;
}

.nn-recent-colors {
    grid-template-columns: repeat(10, 36px);
}

.nn-recent-colors .nn-color-dot {
    width: 36px;
    height: 36px;
    aspect-ratio: auto;
}

.nn-preset-colors {
    margin-top: 8px;
}

/* Color dots */
.nn-color-dot {
    aspect-ratio: 1;
    border-radius: var(--radius-s);
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.nn-recent-remove-button {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 1;
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
    color: var(--nn-theme-foreground-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .nn-recent-remove-button {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 120ms ease;
    }

    .nn-color-dot:hover .nn-recent-remove-button,
    .nn-color-dot:focus-within .nn-recent-remove-button {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

.nn-recent-remove-button:hover {
    color: var(--nn-theme-foreground);
    border-color: var(--interactive-accent);
}

.nn-recent-remove-button:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 1px;
}

.nn-recent-remove-glyph {
    font-size: 11px;
    line-height: 1;
    transform: translateY(-1px);
    pointer-events: none;
}

/* Touch target enhancement for mobile */
.nn-color-dot::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
}

.nn-color-dot:hover::after {
    outline: 3px solid var(--interactive-accent);
    outline-offset: -3px;
}

.nn-user-color-selected::after {
    outline: 2px solid var(--interactive-accent);
    outline-offset: -2px;
}

/* Empty color slot */
.nn-color-dot.nn-color-empty {
    background: var(--background-secondary);
    border: 1px dashed var(--background-modifier-border);
    cursor: default;
    opacity: 0.3;
}

.nn-color-dot.nn-color-empty:hover::after {
    outline: none;
}

.nn-color-dot.nn-drop-hover {
    outline: 3px solid var(--interactive-accent);
    outline-offset: -3px;
}

.nn-drag-preview {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

/* Button container */
.nn-color-button-container {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--background-modifier-border);
    justify-content: center;
}

/* Dark theme adjustments */
.theme-dark .nn-preview-color {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .nn-color-picker-content {
        flex-direction: column;
        gap: 16px;
        padding-bottom: 0;
        overflow-y: hidden;
        overflow-x: hidden;
        touch-action: none;
    }

    .nn-color-picker-left,
    .nn-color-picker-right {
        flex: 1 1 auto;
        width: 100%;
    }

    .nn-preset-colors,
    .nn-recent-colors {
        grid-template-columns: repeat(8, 1fr);
    }

    .nn-sv-header {
        display: none;
    }

    /* Saturation/value area on the left, hue + transparency + hex stacked on the right.
       The SV area stretches to match the height of that stack. */
    .nn-color-area-section {
        flex-direction: row;
        align-items: stretch;
        gap: 14px;
    }

    .nn-sv-area {
        flex: 1 1 0;
        width: auto;
        height: auto;
    }

    .nn-color-controls {
        flex: 1 1 0;
        min-width: 0;
    }

    .modal.nn-color-picker-modal .modal-content {
        padding: 16px 16px 12px;
        gap: 12px;
    }

    .nn-color-button-container {
        margin-top: 12px;
        padding-top: 12px;
    }
}
/* Source: src/styles/sections/modal-appearance.css */

/* ========================================================================
   Appearance Modal - icon, foreground color, and background color editor
   ======================================================================== */

.modal.nn-appearance-modal {
    width: 620px;
    max-width: calc(100vw - 40px);
    max-height: 86vh;
}

.modal.nn-appearance-modal .modal-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    padding: 16px;
    overflow: hidden;
}

.modal.nn-appearance-modal .modal-close-button {
    z-index: 10;
    pointer-events: auto;
}

.nn-appearance-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    background: var(--background-secondary);
}

@media (hover: hover) and (pointer: fine) {
    .nn-appearance-preview-item:hover .nn-appearance-clear-button,
    .nn-appearance-preview-item:focus-within .nn-appearance-clear-button {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

.nn-appearance-clear-button.nn-appearance-clear-hidden {
    display: none;
}

.nn-appearance-preview-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-s);
    background: var(--nn-preview-bg, var(--background-secondary));
    color: var(--nn-preview-fg, var(--nn-theme-foreground));
    font-size: 14px;
    font-weight: 600;
}

.nn-appearance-preview-icon {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.nn-appearance-preview-icon svg {
    width: 18px;
    height: 18px;
}

.nn-appearance-preview-icon-empty {
    display: none;
}

.nn-appearance-preview-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nn-appearance-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--background-modifier-border);
}

.nn-appearance-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 12px;
    margin: 0 0 -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--nn-theme-foreground-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.nn-appearance-tab:hover {
    color: var(--nn-theme-foreground);
}

.nn-appearance-tab.nn-active {
    border-bottom-color: var(--interactive-accent);
    color: var(--nn-theme-foreground);
}

.nn-appearance-tab-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--background-modifier-border);
}

.nn-appearance-tab-icon-chip {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-s);
    color: var(--nn-theme-foreground);
}

.nn-appearance-tab-icon-chip svg {
    width: 16px;
    height: 16px;
}

.nn-appearance-tab-color-chip {
    width: 32px;
    height: 18px;
    border-radius: 4px;
}

.nn-appearance-tab-chip-empty {
    opacity: 0.55;
}

.nn-appearance-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nn-appearance-body {
    flex: 1 1 auto;
    height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
}

.nn-appearance-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    min-height: 0;
}

.nn-appearance-panel-hidden {
    display: none;
}

.nn-appearance-reset-button {
    padding: 4px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--nn-theme-foreground-muted);
    font-size: 12px;
    cursor: pointer;
}

.nn-appearance-reset-button:hover {
    border-color: var(--background-modifier-border-hover);
    color: var(--nn-theme-foreground);
}

.nn-appearance-reset-button.nn-appearance-reset-active {
    border-color: var(--interactive-accent);
    color: var(--interactive-accent);
}

.nn-appearance-picker-host {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}

.nn-appearance-picker-host .nn-icon-provider-tabs {
    margin-bottom: 0;
}

.nn-appearance-picker-host .nn-icon-search-container {
    padding: 0 8px;
    border-bottom: 0;
}

.nn-appearance-picker-host .nn-icon-results-container {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.nn-appearance-picker-host .nn-color-picker-content {
    gap: 16px;
    padding-bottom: 0;
    overflow: visible;
}

.nn-appearance-picker-host .nn-color-picker-left {
    flex-basis: 220px;
}

.nn-appearance-picker-host .nn-color-picker-left-no-preview .nn-preset-section {
    margin-top: 0;
}

.nn-appearance-picker-host .nn-recent-section {
    margin-top: 4px;
}

.nn-appearance-picker-host .nn-preset-header,
.nn-appearance-picker-host .nn-hex-header,
.nn-appearance-picker-host .nn-recent-header {
    justify-content: flex-start;
    gap: 8px;
}

.nn-appearance-picker-host .nn-recent-colors {
    grid-template-columns: repeat(5, 1fr);
}

.nn-appearance-picker-host .nn-recent-colors .nn-color-dot {
    width: auto;
    height: auto;
    aspect-ratio: 1;
}

.nn-icon-item.nn-icon-item-selected {
    outline: 2px solid var(--interactive-accent);
    outline-offset: -2px;
}

.nn-appearance-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--background-modifier-border);
}

.nn-appearance-footer-actions {
    display: flex;
    gap: 8px;
}

@media (max-width: 600px) {
    .modal.nn-appearance-modal {
        width: 100%;
        max-width: calc(100vw - 20px);
    }

    .nn-appearance-tabs {
        overflow-x: auto;
    }

    .nn-appearance-tab {
        flex: 0 0 auto;
    }

    /* Size the body to its content rather than a fixed height so the modal adapts to large
       fonts and display scaling. The base max-height caps it to the viewport and the body
       scrolls instead of clipping. The modal resizes between tabs because each tab fits its
       own content. */
    .nn-appearance-body {
        height: auto;
        min-height: 0;
    }

    .nn-appearance-picker-host .nn-icon-results-container {
        flex: 0 0 auto;
        height: 240px;
        min-height: 240px;
    }

    .nn-appearance-picker-host .nn-recent-colors {
        grid-template-columns: repeat(8, 1fr);
    }
}
/* Source: src/styles/sections/theme-folder-colors.css */

/* ========================================================================
   Folder Color Styles
   ======================================================================== */
/* Source: src/styles/sections/mobile-variables.css */

/* ========================================================================
   Mobile-specific Folder Text Size
   ======================================================================== */

/* Mobile root variables */
.nn-mobile {
    --nn-nav-icon-size: 20px;
    --nn-file-name-size-mobile: 16px;
    --nn-file-small-size-mobile: 15px;
    --nn-file-padding-vertical-mobile: calc(var(--nn-file-padding-vertical) + 4px);
    --nn-file-padding-total-mobile: calc(var(--nn-file-padding-vertical-mobile) * 2);
    --nn-file-icon-size-mobile: calc(var(--nn-file-icon-size) + 4px);
    --nn-file-icon-slot-width-mobile: var(--nn-file-icon-size-mobile);
    --nn-file-title-line-height: var(--nn-file-title-line-height-mobile);
    --nn-file-single-text-line-height: var(--nn-file-single-text-line-height-mobile);
    --nn-file-multiline-text-line-height: var(--nn-file-multiline-text-line-height-mobile);
    --nn-list-group-header-height-mobile: calc(var(--nn-list-group-header-height) + 8px);
    --nn-list-group-goal-header-height-mobile: calc(var(--nn-list-group-header-height-mobile) + var(--nn-list-group-progress-gap-after));
}

/* Folder text size on mobile */
.notebook-navigator-mobile .nn-navitem-name {
    font-size: var(--nn-setting-nav-font-size-mobile);
}

/* Increase folder count size on mobile to match folder text */
.notebook-navigator-mobile .nn-navitem-count {
    font-size: var(--nn-navitem-count-font-size-mobile);
}

/* Mobile folder content padding adjustment for proper selection height */
.notebook-navigator-mobile .nn-navitem-content {
    padding: 0 var(--nn-nav-item-padding-horizontal);
    padding-inline-start: 4px;
    height: 100%;
}

.notebook-navigator-mobile .nn-navitem-indent-guide {
    --nn-indent-guide-padding-inline-start: 4px;
    --nn-indent-guide-chevron-slot-width: 32px;
}

.notebook-navigator-mobile .nn-root-reorder-remove {
    font-size: var(--nn-setting-nav-font-size-mobile);
}
/* Source: src/styles/sections/mobile-panes.css */

/* ========================================================================
   Mobile Pane Layout
   ======================================================================== */

/* Make panes flex containers on mobile to accommodate mobile toolbars. */
.notebook-navigator-mobile .nn-navigation-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    border-right: none;
    background-color: var(--nn-theme-nav-bg);
}

.notebook-navigator-mobile .nn-list-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Ensure scrollers take remaining space. */
.notebook-navigator-mobile .nn-navigation-pane-scroller {
    flex: 1;
    min-height: 0; /* Important for proper scrolling */
    -webkit-overflow-scrolling: touch;
    /* Keep horizontal pane bounce/chaining disabled while allowing native vertical edge feedback. */
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
}

/* Mobile list pane scroller uses the mobile list surface. */
.notebook-navigator-mobile .nn-list-pane-scroller {
    flex: 1;
    min-height: 0; /* Important for proper scrolling */
    -webkit-overflow-scrolling: touch;
    /* Keep horizontal pane bounce/chaining disabled while allowing native vertical edge feedback. */
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
    background-color: var(--nn-theme-list-bg); /* Opaque background on scroller for GPU scroll layer (see .nn-list-pane-scroller) */
}
/* Source: src/styles/sections/mobile-tab-bars.css */

/* ========================================================================
   Mobile Tab Bars - iOS-style bottom navigation
   ======================================================================== */

/* Mobile toolbar container */
.nn-mobile-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--nn-theme-list-bg);
    flex-shrink: 0;
    padding: 0 8px;

    /* Use platform-specific safe area variable */
    padding-bottom: var(--nn-mobile-safe-area-bottom);

    /* Adjust height to include safe area padding */
    height: calc(49px + var(--nn-mobile-safe-area-bottom));
    min-height: calc(49px + var(--nn-mobile-safe-area-bottom));
}

/* Mobile toolbars: distribute buttons evenly; iOS floating toolbars override this via platform stylesheet. */
.notebook-navigator-mobile .nn-mobile-toolbar {
    justify-content: space-evenly;
}

.nn-pane-bottom-toolbar {
    flex-shrink: 0;
}

/* Mobile toolbar grouping containers */
.nn-mobile-toolbar-left {
    display: flex;
    flex: 1;
    min-width: 0;
}

.nn-mobile-toolbar-right {
    display: flex;
    flex: 0 0 auto;
}

/* Mobile toolbar button grouping container */
.nn-mobile-toolbar-pill {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
}

.nn-mobile-toolbar-circle {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile toolbar buttons */
button.nn-mobile-toolbar-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--radius-m);
    color: var(--nn-theme-mobile-toolbar-button-icon-color);
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
    cursor: pointer;
    padding: 0;
    box-shadow: none;
}

.nn-mobile-toolbar-button-circle {
    border-radius: 999px;
}

/* Mobile toolbar button icons */
.nn-mobile-toolbar-button svg {
    width: 24px;
    height: 24px;
}

.nn-mobile-toolbar-button svg:not(.nn-vault-icon-svg) {
    stroke-width: 1.5;
    stroke: var(--nn-theme-mobile-toolbar-button-icon-color);
}

/* Mobile toolbar button tap feedback */
.nn-mobile-toolbar-button:active {
    opacity: 0.7;
}

/* Active mobile toolbar button state - toggled on */
.notebook-navigator-mobile button.nn-mobile-toolbar-button.nn-mobile-toolbar-button-active {
    color: var(--nn-theme-mobile-toolbar-button-active-icon-color);
    background-color: var(--nn-theme-mobile-toolbar-button-active-bg);
}

.notebook-navigator-mobile button.nn-mobile-toolbar-button.nn-mobile-toolbar-button-active svg:not(.nn-vault-icon-svg) {
    stroke: var(--nn-theme-mobile-toolbar-button-active-icon-color);
    stroke-width: 2;
}

/* Disabled mobile toolbar button */
.nn-mobile-toolbar-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Source: src/styles/sections/platform-ios.css */

/* ========================================================================
   iOS Platform Overrides
   ======================================================================== */

.notebook-navigator-ios {
    /* Obsidian accounts for iOS safe areas in the view chrome. */
    --nn-mobile-safe-area-bottom: 0px;
}

/* iOS: view container background */
/* Targets Obsidian's `.view-content` wrapper to ensure the area behind the navigator matches the mobile pane background. */
.view-content.notebook-navigator.notebook-navigator-ios {
    background-color: var(--nn-theme-mobile-bg);
}

/* iOS: bottom padding inside the navigator viewport */
/* Applied to the internal split container so the bottom edge doesn't touch the view chrome and the toolbar shadow can render into the padding (8px matches the top spacer). */
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-split-container {
    padding-bottom: 8px;
    box-sizing: border-box;
}

/* iOS: allow the glass toolbar shadow to render into the split container padding */
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane,
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane {
    overflow: visible;
}

/* iOS: anchor floating toolbar to the panel (above the calendar). */
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane-panel,
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane-panel {
    position: relative;
}

/* iOS: bottom overlays are positioned above the scroller. */
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-pane-bottom-toolbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
}

/* iOS: reserve scroll space for the floating toolbar so rows can scroll under it. */
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane-scroller,
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane-scroller {
    padding-bottom: var(--nn-ios-pane-bottom-overlay-height);
}

/* iOS: navigation pane calendar safe area */
.notebook-navigator-ios .nn-navigation-pane,
.notebook-navigator-ios .nn-list-pane {
    /* Obsidian accounts for iOS safe areas in the view chrome. */
    --nn-calendar-safe-area: 0px;
}

/* iOS glass toolbar */
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar {
    pointer-events: none;
    justify-content: space-between;
    align-items: flex-start;
    background-color: transparent;
    border-top: none;
    /* 2px for border effect + 2px to match Obsidian view selector dropdown */
    padding-left: calc(var(--nn-scroller-padding) + 4px); /* 4px horizontal spacer for glass pill */
    padding-right: calc(var(--nn-scroller-padding) + 4px); /* 4px horizontal spacer for glass pill */
    padding-bottom: 0; /* No extra bottom padding in iOS */
    /* The glass outline is painted via box-shadow and extends outside the pill/circle box. Add a small top spacer so
       auto-revealed rows are not positioned behind the outline. */
    padding-top: var(--nn-ios-toolbar-glass-visual-overlap-top);
    /* Adds an invisible spacer under the glass pills to create the visual bottom gap without shifting sticky positioning. */
    height: calc(
        var(--nn-ios-toolbar-height) + var(--nn-ios-toolbar-bottom-offset) + var(--nn-ios-toolbar-glass-visual-overlap-top)
    ); /* Includes bottom offset spacer + top overlap */
    min-height: calc(
        var(--nn-ios-toolbar-height) + var(--nn-ios-toolbar-bottom-offset) + var(--nn-ios-toolbar-glass-visual-overlap-top)
    ); /* Match toolbar box height */
}

.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-left,
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-right {
    display: flex;
    pointer-events: auto;
    flex: 0 0 auto;
}

.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars {
    --nn-theme-mobile-toolbar-button-icon-color: var(--nn-theme-foreground);
    --nn-ios-toolbar-glass-bg: color-mix(in srgb, var(--nn-theme-mobile-toolbar-glass-bg) 45%, transparent);
    --nn-ios-toolbar-glass-outline: rgba(255, 255, 255, 0.6);
    --nn-ios-toolbar-glass-shadow: 0 0 0 2px var(--nn-ios-toolbar-glass-outline), 0 16px 32px rgba(0, 0, 0, 0.09);
    --nn-ios-toolbar-glass-filter: blur(3px) saturate(160%);
    --nn-theme-mobile-toolbar-button-active-bg: transparent;
    /* Visual overflow above the pills caused by the glass outline (box-shadow spread). */
    --nn-ios-toolbar-glass-visual-overlap-top: 2px;
    /* Visual bottom gap between the glass pills and the view edge (implemented via toolbar height + fade, not sticky offset). */
    --nn-ios-toolbar-bottom-offset: 12px;
    --nn-ios-toolbar-height: 44px; /* 38px button + (1px padding + 2px border) * 2 */
    --nn-ios-pane-bottom-fade-height: 64px; /* Fade height behind the toolbar */
    --nn-ios-pane-bottom-fade-opacity: 0.8; /* Fade opacity behind the toolbar */
    --nn-ios-pane-bottom-overlay-height: calc(
        var(--nn-ios-toolbar-height) + var(--nn-ios-toolbar-bottom-offset) + var(--nn-ios-toolbar-glass-visual-overlap-top)
    );
}

.theme-dark .notebook-navigator-ios.notebook-navigator-ios-floating-toolbars {
    --nn-ios-toolbar-glass-outline: rgba(255, 255, 255, 0.1);
    --nn-ios-toolbar-glass-shadow: 0 0 0 2px var(--nn-ios-toolbar-glass-outline), 0 16px 32px rgba(0, 0, 0, 0.3);
}

.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-pill,
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-circle {
    display: flex;
    position: relative;
    z-index: 0;
    border-radius: 999px;
    background: var(--nn-ios-toolbar-glass-bg);
    border: 2px solid transparent; /* Glass outline thickness */
    -webkit-backdrop-filter: var(--nn-ios-toolbar-glass-filter);
    backdrop-filter: var(--nn-ios-toolbar-glass-filter);
    box-shadow: var(--nn-ios-toolbar-glass-shadow);
    overflow: hidden;

    /*
     * Warped glass (disabled)
     * Enable when WebKit supports SVG `url(#...)` values for `-webkit-backdrop-filter`.
     *
     * Requirements:
     * - Inject the SVG filter defs into the document (filter id: `notebook-navigator-frosted`)
     * - Set:
     *   -webkit-backdrop-filter: url(#notebook-navigator-frosted);
     *   backdrop-filter: url(#notebook-navigator-frosted);
     */
}

.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-pill > .nn-mobile-toolbar-button,
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-circle > .nn-mobile-toolbar-button {
    position: relative;
    z-index: 1;
}

.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-pill {
    width: auto;
    justify-content: flex-start;
    gap: 6px; /* Spacing between buttons inside the pill */
    padding: 1px 10px; /* 1px vertical + 10px horizontal pill inset */
}

.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-circle {
    padding: 1px; /* 1px inset around the circular button */
}

.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-button {
    width: 38px; /* Button diameter inside the glass pill */
    height: 38px; /* Button diameter inside the glass pill */
    min-width: 38px; /* Prevent button shrink */
    min-height: 38px; /* Prevent button shrink */
    border-radius: 999px;
}

.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-button svg:not(.nn-vault-icon-svg) {
    stroke-width: 2;
}

.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane-content,
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane-content {
    position: relative;
    z-index: 1;
}

/* iOS: bottom fade layer */
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-pane-bottom-toolbar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Covers the toolbar height plus the visual bottom gap so the fade reaches the edge below. */
    height: calc(var(--nn-ios-pane-bottom-fade-height) + var(--nn-ios-toolbar-bottom-offset));
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--nn-theme-mobile-bg) 0%, transparent),
        color-mix(in srgb, var(--nn-theme-mobile-bg) calc(var(--nn-ios-pane-bottom-fade-opacity) * 100%), transparent)
    );
    z-index: -1;
}

/*
 * iOS: WebKit paint workaround for virtualized lists.
 *
 * Symptom:
 * - The list can render blank (rows not visible) after preview text / feature image updates when the list is short
 *   enough that the scroller does not overflow (scrollHeight === clientHeight).
 * - The DOM still contains the virtualized row elements and TanStack Virtual still reports virtual items, but the
 *   scroll layer does not repaint until a user interaction (tap) or a layout-triggering event (rotation).
 *
 * Workaround:
 * - Force each rendered virtual row wrapper onto its own composited layer. This makes WebKit repaint the rows
 *   reliably when the virtualizer remeasures and updates absolute positioning.
 */
.notebook-navigator-ios .nn-list-pane .nn-virtual-item {
    transform: translateZ(0);
}

/*
 * iOS/iPadOS: WebKit paint workaround for pinned navigation shortcuts.
 *
 * Pinned shortcuts can remain mounted and measurable while their row contents stop repainting after the mobile
 * single-pane transform finishes. Keep the pinned shortcut surface and its rows on composited layers.
 */
.notebook-navigator-ios .nn-shortcut-pinned,
.notebook-navigator-ios .nn-shortcut-pinned-scroll,
.notebook-navigator-ios .nn-shortcut-pinned .nn-navitem {
    transform: translateZ(0);
}
/* Source: src/styles/sections/platform-android.css */

/* ========================================================================
   Android Platform Overrides
   ======================================================================== */

/* Android: match the view container background to mobile pane surfaces */
.view-content.notebook-navigator.notebook-navigator-android {
    background-color: var(--nn-theme-mobile-bg);
}

/* Android: bottom padding inside the navigator viewport */
/* Applied to the internal split container so the bottom edge doesn't touch the view chrome (8px matches the top spacer). */
.notebook-navigator-android .nn-split-container {
    background-color: var(--nn-theme-mobile-bg);
    padding-bottom: 8px;
    box-sizing: border-box;
}
/* Source: src/styles/sections/android-toolbar.css */

/* ========================================================================
   Android Toolbar Positioning
   Android displays toolbar at top, iOS at bottom
   ======================================================================== */

/* Android: toolbar at top with reduced height */
.notebook-navigator-mobile.notebook-navigator-android .nn-mobile-toolbar {
    background-color: var(--nn-theme-list-bg);
    border: none;
    padding-bottom: 0;
    justify-content: center;
    gap: 16px;
    height: 44px;
    min-height: 44px;
}

/* Android: smaller toolbar buttons */
.notebook-navigator-android .nn-mobile-toolbar-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}
/* Source: src/styles/sections/android-textzoom.css */

/* ========================================================================
   Android textZoom Compensation

   Android WebView scales text via textZoom property. This affects font-size
   and line-height at the rendering level. We detect the scale factor in JS
   and set --nn-android-font-scale, then CSS compensates by dividing values
   by that factor so Android scaling produces correct final sizes.

   Font-size compensation is handled via inline styles in androidFontScale.ts.
   Line-height compensation is handled here in CSS because the .nn-mobile class
   redefines variables and would override inline styles on the outer container.
   ======================================================================== */

/* Override line-height variables with compensated values
   Note: We use a reciprocal variable for division since calc(x / var) can have issues */
.notebook-navigator-android .nn-mobile {
    --nn-android-font-scale-reciprocal: calc(1 / var(--nn-android-font-scale, 1));
    --nn-file-title-line-height: calc(var(--nn-file-title-line-height-mobile) * var(--nn-android-font-scale-reciprocal, 1));
    --nn-file-single-text-line-height: calc(var(--nn-file-single-text-line-height-mobile) * var(--nn-android-font-scale-reciprocal, 1));
    --nn-file-multiline-text-line-height: calc(
        var(--nn-file-multiline-text-line-height-mobile) * var(--nn-android-font-scale-reciprocal, 1)
    );
    /* Note: Do NOT compensate icon size variables - they're used for SVG width/height
       which Android doesn't scale. Only compensate font-size on emoji elements directly. */
}

/* Note counts in navigation pane */
.notebook-navigator-android .nn-mobile .nn-navitem-count {
    font-size: calc(
        var(--nn-navitem-count-font-size-mobile, var(--nn-navitem-count-font-size)) * var(--nn-android-font-scale-reciprocal, 1)
    );
}

/* Root reorder panel text */
.notebook-navigator-android .nn-mobile .nn-root-reorder-hint {
    font-size: calc(
        var(--nn-root-reorder-hint-font-size-mobile, var(--nn-root-reorder-hint-font-size)) * var(--nn-android-font-scale-reciprocal, 1)
    );
}

/* Emoji and webfont icons - Android scales font-size but not SVG dimensions.
   Only apply to .nn-emoji-icon and .nn-iconfont to avoid breaking Lucide SVG icons. */
.notebook-navigator-android .nn-mobile .nn-emoji-icon,
.notebook-navigator-android .nn-mobile .nn-iconfont {
    font-size: calc(var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)) * var(--nn-android-font-scale-reciprocal, 1));
}

/* Clamp height compensation - Android doesn't scale max-height, so match the compensated line-height after textZoom applies. */
.notebook-navigator-android .nn-file-name {
    max-height: calc(var(--nn-file-title-line-height) * var(--filename-rows, 1) * var(--nn-android-font-scale, 1));
}

.notebook-navigator-android .nn-file-preview {
    max-height: calc(var(--nn-file-multiline-text-line-height) * var(--preview-rows, 1) * var(--nn-android-font-scale, 1));
}

/* Icon vertical centering - line-height is pre-compensated, icon size is not */
.notebook-navigator-android .nn-file-icon-slot {
    margin-top: max(
        0px,
        calc(
            (
                    var(--nn-file-title-line-height) * var(--nn-android-font-scale, 1) -
                        var(--nn-file-icon-size-mobile, var(--nn-file-icon-size))
                ) /
                2
        )
    );
}
/* Source: src/styles/sections/rtl-support.css */

/* ========================================================================
   RTL (Right-to-Left) Support
   ======================================================================== */

/* Single-pane slide animations for RTL */
.mod-rtl .nn-split-container.nn-single-pane.show-navigation .nn-list-pane {
    transform: translateX(-100%);
}

.mod-rtl .nn-split-container.nn-single-pane.show-files .nn-navigation-pane {
    transform: translateX(100%);
}

.mod-rtl .nn-file-name,
.mod-rtl .nn-file-preview {
    text-align: right;
}

/* Bidi-safe text runs */
.nn-navitem-name,
.nn-file-name,
.nn-file-preview,
.nn-file-date,
.nn-parent-folder,
.nn-list-group-header {
    unicode-bidi: plaintext;
}

/* Fix icon mirroring - Obsidian auto-mirrors icons, but we may need to prevent it for some icons */

/* Currently, all our icons (chevrons, folders, etc.) should be mirrored in RTL, so no overrides needed */
/* Source: src/styles/sections/icons-system.css */

/* =================================================================================
   Icon System
   ================================================================================= */

/* Plugin icon - ensure transparent background */
.svg-icon.notebook-navigator {
    background: transparent;
    overflow: visible;
}

/* Emoji icon styles */
.nn-emoji-icon {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-align: center;
    text-decoration: none;

    /* Prevent text selection of emoji icons */
    user-select: none;
    -webkit-user-select: none;
}

/* Ensure emojis in navigation items display properly */
.nn-navitem-icon.nn-emoji-icon {
    font-size: var(--nn-nav-icon-size);
    width: var(--nn-nav-icon-size);
    height: var(--nn-nav-icon-size);
    line-height: var(--nn-nav-icon-size);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure proper sizing when used in buttons */
.nn-icon-button .nn-emoji-icon {
    width: 1em;
    height: 1em;
    font-size: inherit;
}

/* ========================================================================
   ServiceIcon Alignment
   ======================================================================== */

/*
 * `ServiceIcon` renders into a `<span>` container and injects an inline SVG.
 * Ensure the span/SVG don't participate in baseline alignment, so icons stay vertically centered inside flex buttons.
 */
.nn-icon-button > span,
.nn-mobile-toolbar-button > span,
.nn-navigation-calendar-nav-button > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.nn-icon-button > span > svg,
.nn-mobile-toolbar-button > span > svg,
.nn-navigation-calendar-nav-button > span > svg {
    display: block;
}

/* Icon font styles */
.nn-iconfont {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    text-rendering: optimizeLegibility;
}

.nn-iconfont-fa-solid,
.nn-iconfont-rpg-awesome,
.nn-iconfont-bootstrap-icons,
.nn-iconfont-material-icons,
.nn-iconfont-phosphor,
.nn-iconfont-simple-icons {
    font-style: normal;
}

.nn-iconfont-fa-solid {
    font-weight: 900;
    font-family: 'NotebookNavigatorFontAwesomeSolid', 'Font Awesome 7 Free', sans-serif;
}

.nn-iconfont-rpg-awesome,
.nn-iconfont-bootstrap-icons,
.nn-iconfont-material-icons,
.nn-iconfont-phosphor,
.nn-iconfont-simple-icons {
    font-weight: 400;
}

.nn-iconfont-rpg-awesome {
    font-family: 'NotebookNavigatorRpgAwesome', 'RPG Awesome', sans-serif;
}

.nn-iconfont-bootstrap-icons {
    font-family: 'NotebookNavigatorBootstrapIcons', 'Bootstrap Icons', sans-serif;
}

.nn-iconfont-material-icons {
    font-family: 'NotebookNavigatorMaterialIcons', 'Material Icons', sans-serif;
}

.nn-iconfont-phosphor {
    font-family: 'NotebookNavigatorPhosphorIcons', 'Phosphor', sans-serif;
}

.nn-iconfont-simple-icons {
    font-family: 'NotebookNavigatorSimpleIcons', 'Simple Icons', sans-serif;
}

.nn-vault-icon-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.nn-icon-provider-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--background-modifier-border);
    padding-bottom: 2px;
}

.nn-icon-provider-link-row {
    padding: 8px 12px 0;
    text-align: center;
}

.nn-icon-provider-link-row-hidden {
    display: none;
}

.nn-icon-provider-link-row a {
    display: inline-flex;
    align-items: center;
    color: var(--text-accent);
    font-size: 12px;
    text-decoration: none;
}

.nn-icon-provider-link-row a:hover {
    text-decoration: underline;
}

.nn-icon-provider-tab {
    padding: 4px 12px;
    border-radius: var(--radius-s);
    color: var(--nn-theme-foreground-muted);
    white-space: nowrap;
}

.nn-icon-provider-tab:hover {
    background-color: var(--background-modifier-hover);
    color: var(--nn-theme-foreground);
}

.nn-icon-provider-tab.nn-active {
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
}

/* Emoji preview in icon picker */
.nn-icon-item-preview.nn-emoji-preview {
    font-size: 24px;
}
/* Source: src/styles/sections/settings-metadata-info.css */

/* ========================================================================
   Metadata Info Styles
   ======================================================================== */

/* Error text styling */
.nn-metadata-error-text {
    color: var(--text-error);
    font-weight: bold;
}
/* Source: src/styles/sections/settings-style-settings.css */

/* @settings

name: Notebook Navigator
id: notebook-navigator-style-settings
settings:
    -
        id: nn-theme-foreground-heading
        title: Theme foreground
        description: Base foreground color variables used by Notebook Navigator.
        type: heading
        level: 1
        collapsed: true
    -
        id: nn-theme-foreground-colors-heading
        title: Foreground colors
        type: heading
        level: 2
        collapsed: false
    -
        id: nn-theme-foreground
        title: Base foreground
        description: Base foreground color.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-foreground-muted
        title: Muted foreground
        description: Muted foreground color.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-foreground-faded
        title: Faded foreground
        description: Faded foreground color.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-foreground-faint
        title: Faint foreground
        description: Faint foreground color.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-borders-heading
        title: Borders
        description: Border colors and border widths on navigation and file items.
        type: heading
        level: 1
        collapsed: true
    -
        id: nn-border-nav-heading
        title: Navigation borders
        type: heading
        level: 2
        collapsed: false
    -
        id: nn-theme-navitem-border-width
        title: Navigation item border width
        description: Border width on navigation item backgrounds, hover state, and selection.
        type: variable-number-slider
        default: 0
        format: px
        min: 0
        max: 4
        step: 1
    -
        id: nn-theme-navitem-custom-border-color
        title: Custom background border color
        description: Border color on folders and tags with custom backgrounds.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-hover-border-color
        title: Hover border color
        description: Border color on hovered navigation items.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-border-color
        title: Selection border color
        description: Border color on selected navigation items.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-inactive-border-color
        title: Selection border color (inactive)
        description: Border color on selected navigation items when pane is inactive.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-count-border-width
        title: File count border width
        description: Border width on navigation file count badges.
        type: variable-number-slider
        default: 0
        format: px
        min: 0
        max: 4
        step: 1
    -
        id: nn-theme-navitem-count-border-color
        title: File count border color
        description: Border color on navigation file count badges.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-count-border-color
        title: Selected file count border color
        description: Border color on file count badges when selected.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-inactive-count-border-color
        title: Selected file count border color (inactive)
        description: Border color on file count badges when selected and pane is inactive.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-border-file-heading
        title: File item borders
        type: heading
        level: 2
        collapsed: false
    -
        id: nn-theme-file-border-width
        title: Selection border width
        description: Border width on selected file items.
        type: variable-number-slider
        default: 0
        format: px
        min: 0
        max: 4
        step: 1
    -
        id: nn-theme-file-selected-border-color
        title: Selection border color
        description: Border color on selected file items.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-inactive-border-color
        title: Selection border color (inactive)
        description: Border color on selected file items when pane is inactive.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-border-pill-heading
        title: Pill borders
        type: heading
        level: 2
        collapsed: false
    -
        id: nn-theme-file-pill-border-width
        title: Pill border width
        description: Border width on tag and custom property pills.
        type: variable-number-slider
        default: 1
        format: px
        min: 0
        max: 4
        step: 1
    -
        id: nn-theme-file-tag-border-color
        title: Tag pill border color
        description: Border color on tag pills without custom colors.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-property-border-color
        title: Custom property pill border color
        description: Border color on custom property pills without custom colors.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-tag-border-color
        title: Selected tag pill border color
        description: Border color on tag pills without custom colors in selected files.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-property-border-color
        title: Selected custom property pill border color
        description: Border color on custom property pills without custom colors in selected files.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-header-heading
        title: Headers
        description: Customize pane header appearance.
        type: heading
        level: 1
        collapsed: true
    -
        id: nn-header-actions-heading
        title: Header action buttons
        type: heading
        level: 2
        collapsed: false
    -
        id: nn-theme-header-button-icon-color
        title: Button icon color
        description: Default icon color for header buttons.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-header-button-hover-bg
        title: Button hover background
        description: Background color when hovering header buttons.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-header-button-active-bg
        title: Button active background
        description: Background color for active/toggled header buttons.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-header-button-active-icon-color
        title: Button active icon color
        description: Icon color for active/toggled header buttons.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-header-button-disabled-icon-color
        title: Button disabled icon color
        description: Icon color for disabled header buttons.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-calendar-heading
        title: Calendar
        description: Customize the daily notes calendar.
        type: heading
        level: 1
        collapsed: true
    -
        id: nn-theme-calendar-header-color
        title: Header text color
        description: Text color for month/year and header buttons.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-calendar-weekday-color
        title: Weekday label text color
        description: Text color for weekday labels (Mon, Tue, Wed...).
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-calendar-week-color
        title: Week number text color
        description: Text color for week numbers.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-calendar-day-in-month-color
        title: Day text color (current month)
        description: Text color for days within the current month.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-calendar-day-outside-month-color
        title: Day text color (outside month)
        description: Text color for days outside the current month.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-calendar-weekend-bg
        title: Weekend day background
        description: Background color for weekend day cells.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-calendar-hover-bg
        title: Hover background
        description: Background color when hovering calendar buttons and days.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-calendar-note-indicator-color
        title: Daily note indicator
        description: Color for the dot indicator shown on dates with a daily note.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-calendar-unfinished-task-indicator-color
        title: Unfinished task indicator
        description: Color for the hollow indicator shown on dates with unfinished tasks.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-calendar-feature-image-text-color
        title: Feature image text color
        description: Text color for dates with feature images.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-calendar-feature-image-overlay-color
        title: Feature image overlay color
        description: Adds a color overlay to darken or tint feature images in calendar days and months. Set separate colors for light and dark mode.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-calendar-day-today-color
        title: Day text color (today)
        description: Text color for today's date.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-calendar-day-today-bg
        title: Today highlight background
        description: Background color for today's date highlight.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-calendar-day-active-border-color
        title: Selection outline color
        description: Border color for active calendar outlines.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-calendar-day-active-border-width
        title: Selection outline thickness
        description: Border width for active calendar outlines.
        type: variable-number-slider
        default: 2
        format: px
        min: 1
        max: 4
        step: 1
    -
        id: nn-nav-pane-heading
        title: Navigation pane (folders, tags, shortcuts)
        description: Customize the background and items within the navigation pane.
        type: heading
        level: 1
        collapsed: true
    -
        id: nn-theme-nav-bg
        title: Navigation pane background
        description: Background color of the navigation pane (desktop only).
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-nav-separator-color
        title: Navigation separator color
        description: Line color for separators rendered inside navigation spacers.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-nav-indent-guide-color
        title: Indent guide color
        description: Line color for navigation indent guides.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-nav-leader-color
        title: Leader color
        description: Color for leaders between item names and trailing values.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-nav-pane-items-heading
        title: Folder & tag items
        type: heading
        level: 2
        collapsed: false
    -
        id: nn-theme-navitem-chevron-color
        title: Expand/collapse arrow color
        description: Color for expand/collapse arrows.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-icon-color
        title: Icon color
        description: Icon color for folders and tags.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-name-color
        title: Text color
        description: Text color for folder and tag names.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-file-name-color
        title: File text color
        description: Text color for file shortcuts and recent files. Defaults to folder/tag text color.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-count-color
        title: File count text color
        description: Text color for file count badges.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-count-bg
        title: File count background
        description: Background color for file count badges.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-count-border-radius
        title: File count border radius
        description: Corner radius for file count badges.
        type: variable-number-slider
        default: 8
        format: px
        min: 0
        max: 8
        step: 1
    -
        id: nn-theme-navitem-border-radius
        title: Item border radius
        description: Corner radius for folder and tag items.
        type: variable-number-slider
        default: 4
        format: px
        min: 0
        max: 14
        step: 1
    -
        id: nn-theme-navitem-hover-bg
        title: Hover background
        description: Item hover background color.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-bg
        title: Selection background
        description: Selected item background color.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-chevron-color
        title: Selected chevron color
        description: Expand/collapse arrow color when item is selected.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-icon-color
        title: Selected icon color
        description: Icon color when item is selected.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-name-color
        title: Selected name color
        description: Folder/tag name color when selected.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-count-color
        title: Selected count text color
        description: File count text color when item is selected.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-count-bg
        title: Selected count background
        description: File count background color when selected.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-inactive-chevron-color
        title: Selected chevron color (inactive)
        description: Expand/collapse arrow color when item is selected and pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-inactive-icon-color
        title: Selected icon color (inactive)
        description: Icon color when item is selected and pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-inactive-count-color
        title: Selected count text color (inactive)
        description: File count text color when item is selected and pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-inactive-count-bg
        title: Selected count background (inactive)
        description: File count background color when item is selected and pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-inactive-bg
        title: Selection background (inactive)
        description: Selected item background color when pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-navitem-selected-inactive-name-color
        title: Selected name color (inactive)
        description: Folder/tag name color when selected and pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-tag-positive-bg
        title: Tag highlight (include)
        description: Background color for positive tag highlights and tag drop targets.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-tag-negative-bg
        title: Tag highlight (exclude)
        description: Background color for negative tag highlights and the untagged drop target.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-navitem-text-styling-heading
        title: Text styling
        type: heading
        level: 2
        collapsed: false
    -
        id: nn-theme-navitem-file-name-font-weight
        title: Default file name weight
        description: Default font weight for file names in shortcuts and recent files.
        type: variable-number-slider
        default: 400
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-navitem-name-font-weight
        title: Default folder/tag weight
        description: Default font weight for folder and tag names.
        type: variable-number-slider
        default: 400
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-navitem-count-font-weight
        title: File count font weight
        description: Font weight for file count badges.
        type: variable-number-slider
        default: 400
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-navitem-custom-color-file-name-font-weight
        title: Custom color file name weight
        description: Font weight for file names with custom colors (overrides default file weight).
        type: variable-number-slider
        default: 600
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-navitem-custom-color-name-font-weight
        title: Custom color folder/tag weight
        description: Font weight for folders and tags with custom colors (overrides default folder/tag weight).
        type: variable-number-slider
        default: 600
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-navitem-folder-note-name-font-weight
        title: Folder note weight
        description: Font weight for folders with notes (overrides all others).
        type: variable-number-slider
        default: 400
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-navitem-folder-note-name-decoration
        title: Folder note decoration
        description: Text decoration for folders with notes.
        type: variable-select
        default: underline
        options:
          -
            label: None
            value: none
          -
            label: Underline
            value: underline
          -
            label: Dotted underline
            value: underline dotted
    -
        id: nn-theme-navitem-folder-note-name-hover-decoration
        title: Folder note hover decoration
        description: Text decoration when hovering folders with notes.
        type: variable-select
        default: underline
        options:
          -
            label: None
            value: none
          -
            label: Underline
            value: underline
          -
            label: Dotted underline
            value: underline dotted
    -
        id: nn-pinned-shortcuts-heading
        title: Pinned shortcuts
        type: heading
        level: 2
        collapsed: false
    -
        id: nn-theme-pinned-shortcut-shadow-color
        title: Pinned shortcut shadow color
        description: Gradient overlay color rendered beneath pinned shortcuts.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-file-list-heading
        title: List pane (files)
        description: Customize the file list appearance.
        type: heading
        level: 1
        collapsed: true
    -
        id: nn-theme-list-bg
        title: List pane background
        description: Background color of the list pane (desktop only).
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-list-search-active-bg
        title: Search field active background
        description: Background color for the search field when a search query is active (desktop only).
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-list-search-border-color
        title: Search border color
        description: Border and focus ring color for the search field.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-list-heading-color
        title: List heading text color
        description: Text color for the list pane title area and vault title.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-list-heading-font-weight
        title: List heading font weight
        description: Font weight for the list pane title area and vault title.
        type: variable-number-slider
        default: 600
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-list-header-icon-color
        title: List header icon color
        description: Color for the folder/tag icon shown beside the desktop list header breadcrumb.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-list-header-breadcrumb-color
        title: List header breadcrumb color
        description: Text color for the breadcrumb path in the desktop list header.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-list-header-breadcrumb-font-weight
        title: List header breadcrumb font weight
        description: Font weight for breadcrumb text in the desktop list header.
        type: variable-number-slider
        default: 600
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-list-group-header-color
        title: Group header text color
        description: Text color for date groups and pinned section.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-list-separator-color
        title: List separator color
        description: Divider line color between files.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-file-list-items-heading
        title: File items
        type: heading
        level: 2
        collapsed: false
    -
        id: nn-theme-file-task-icon-color
        title: Unfinished task icon color
        description: Icon color for notes with unfinished tasks.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-name-color
        title: File name color
        description: Text color for file names.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-preview-color
        title: File preview text color
        description: Text color for content preview.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-feature-border-radius
        title: Feature image border radius
        description: Corner radius for feature images.
        type: variable-number-slider
        default: 4
        format: px
        min: 0
        max: 32
        step: 1
    -
        id: nn-theme-file-date-color
        title: File date color
        description: Text color for creation or modification dates.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-word-count-color
        title: File word count color
        description: Text color for word count suffixes.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-parent-color
        title: File parent folder color
        description: Text color for parent folder path (when showing subfolders).
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-tag-color
        title: File tag text color
        description: Text color for tag pills.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-tag-custom-color-text-color
        title: Custom tag text color
        description: Text color for tags with custom colors.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-tag-bg
        title: File tag background
        description: Background color for tag pills.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-property-color
        title: Custom property text color
        description: Text color for custom property pill.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-property-bg
        title: Custom property background
        description: Background color for custom property pill.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-tag-border-radius
        title: Tag pill border radius
        description: Corner radius for tag pills.
        type: variable-number-slider
        default: 10
        format: px
        min: 0
        max: 10
        step: 1
    -
        id: nn-theme-file-property-border-radius
        title: Custom property pill border radius
        description: Corner radius for custom property pills.
        type: variable-number-slider
        default: 10
        format: px
        min: 0
        max: 10
        step: 1
    -
        id: nn-theme-file-border-radius
        title: File item border radius
        description: Corner radius for file items.
        type: variable-number-slider
        default: 8
        format: px
        min: 0
        max: 16
        step: 1
    -
        id: nn-theme-file-selected-bg
        title: Selection background
        description: Selected file background color.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-name-color
        title: Selected file name color
        description: Text color for file names when selected.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-preview-color
        title: Selected file preview color
        description: Text color for content preview when selected.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-date-color
        title: Selected file date color
        description: Text color for file dates when selected.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-word-count-color
        title: Selected file word count color
        description: Text color for word count suffixes when selected.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-parent-color
        title: Selected file parent folder color
        description: Text color for parent folder path when selected.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-tag-color
        title: Selected file tag text color
        description: Text color for tag pills when selected.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-tag-bg
        title: Selected file tag background
        description: Background color for tag pills when selected.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-property-color
        title: Selected custom property text color
        description: Text color for custom property pill when selected.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-property-bg
        title: Selected custom property background
        description: Background color for custom property pill when selected.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-inactive-preview-color
        title: Selected file preview color (inactive)
        description: Content preview color when file is selected and pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-inactive-date-color
        title: Selected file date color (inactive)
        description: File date color when selected and pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-inactive-word-count-color
        title: Selected file word count color (inactive)
        description: Word count suffix color when file is selected and pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-inactive-parent-color
        title: Selected file parent folder color (inactive)
        description: Parent folder color when file is selected and pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-inactive-tag-color
        title: Selected file tag text color (inactive)
        description: Tag text color when file is selected and pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-inactive-tag-bg
        title: Selected file tag background (inactive)
        description: Tag background color when file is selected and pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-inactive-property-color
        title: Selected custom property text color (inactive)
        description: Text color for custom property pill when file is selected and pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-inactive-property-bg
        title: Selected custom property background (inactive)
        description: Background color for custom property pill when file is selected and pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-inactive-bg
        title: Selection background (inactive)
        description: Selected file background color when pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-file-selected-inactive-name-color
        title: Selected file name color (inactive)
        description: File name color when selected and pane is inactive.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-file-text-styling-heading
        title: Text styling
        type: heading
        level: 2
        collapsed: false
    -
        id: nn-theme-list-group-header-font-weight
        title: Group header font weight
        description: Font weight for date groups and pinned section.
        type: variable-number-slider
        default: 600
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-file-name-font-weight
        title: File name font weight
        description: Font weight for file names.
        type: variable-number-slider
        default: 600
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-file-compact-name-font-weight
        title: File name font weight (compact mode)
        description: Font weight for file names in compact mode.
        type: variable-number-slider
        default: 400
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-file-preview-font-weight
        title: File preview font weight
        description: Font weight for file preview text.
        type: variable-number-slider
        default: 400
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-file-date-font-weight
        title: Date font weight
        description: Font weight for file dates.
        type: variable-number-slider
        default: 400
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-file-word-count-font-weight
        title: Word count font weight
        description: Font weight for word count suffixes.
        type: variable-number-slider
        default: 400
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-file-parent-font-weight
        title: Parent folder font weight
        description: Font weight for parent folder path.
        type: variable-number-slider
        default: 400
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-file-tag-font-weight
        title: Tag text font weight
        description: Font weight for tag pill text.
        type: variable-number-slider
        default: 400
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-quick-actions-heading
        title: Quick actions
        type: heading
        level: 2
        collapsed: false
    -
        id: nn-theme-quick-actions-bg
        title: Toolbar background
        description: Background color of quick actions toolbar (supports transparency).
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-quick-actions-border
        title: Toolbar border color
        description: Border color of quick actions toolbar.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-quick-actions-border-radius
        title: Toolbar border radius
        description: Corner radius for quick actions panel.
        type: variable-number-slider
        default: 4
        format: px
        min: 0
        max: 12
        step: 1
    -
        id: nn-theme-quick-actions-icon-color
        title: Icon color
        description: Icon color for quick action buttons.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-quick-actions-icon-hover-color
        title: Icon hover color
        description: Icon color when hovering quick action buttons.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-quick-actions-separator-color
        title: Separator color
        description: Divider color between quick action buttons.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-pane-divider-heading
        title: Pane divider
        description: Vertical divider between navigation and file list panes.
        type: heading
        level: 1
        collapsed: true
    -
        id: nn-theme-divider-border-color
        title: Divider border color
        description: Color of the vertical border between panes.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-divider-resize-handle-hover-bg
        title: Resize handle hover background
        description: Background color when hovering the pane divider to resize.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-mobile-heading
        title: Mobile styles
        description: Customize mobile interface elements.
        type: heading
        level: 1
        collapsed: true
    -
        id: nn-theme-mobile-bg
        title: Mobile pane background
        description: Background color of navigation and list panes on mobile.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-mobile-list-header-link-color
        title: Mobile header link color
        description: Color for back button and clickable breadcrumb segments on mobile.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-mobile-list-header-breadcrumb-color
        title: Mobile header breadcrumb color
        description: Color for current folder and separators in breadcrumb on mobile.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-mobile-list-header-breadcrumb-font-weight
        title: Mobile breadcrumb font weight
        description: Font weight for mobile header breadcrumb.
        type: variable-number-slider
        default: 600
        min: 100
        max: 900
        step: 100
    -
        id: nn-theme-mobile-toolbar-bg
        title: Mobile toolbar background
        description: Background color of the mobile toolbar.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-mobile-toolbar-glass-bg
        title: iOS glass toolbar background
        description: Background color of the iOS glass toolbar (used for border and background, supports transparency).
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-mobile-toolbar-button-icon-color
        title: Toolbar button icon color
        description: Icon color in mobile toolbar.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-mobile-toolbar-button-active-bg
        title: Toolbar button active background
        description: Background color for active toolbar button.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: nn-theme-mobile-toolbar-button-active-icon-color
        title: Toolbar button active icon color
        description: Icon color for active toolbar button.
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'

*/
