styles.css

/*
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 */

    /* Date header heights and padding */
    --nn-date-header-height: 35px; /* First header */
    --nn-date-header-height-subsequent: 50px; /* Headers with margin */
    --nn-date-header-padding-top: 24px; /* Top padding for subsequent headers */
    --nn-date-header-padding-bottom: 6px; /* Bottom padding for subsequent headers */
    --nn-date-header-height-mobile: var(--nn-date-header-height);
    --nn-date-header-height-subsequent-mobile: var(--nn-date-header-height-subsequent);
    --nn-date-header-padding-top-mobile: var(--nn-date-header-padding-top);
    --nn-date-header-padding-bottom-mobile: var(--nn-date-header-padding-bottom);

    /* 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-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(--nn-theme-foreground-faded);

    /* -- 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-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-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-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-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-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-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-date-header-height-mobile, var(--nn-date-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);
}

.notebook-navigator-mobile .nn-navigation-pane {
    border-right: none;
}

.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;
}

.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 .nn-navigation-pane {
    border-right: none;
}

.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: 10;
    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% !important;
    max-width: 100% !important;
    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
   ======================================================================== */

/* Make navigation pane flexible on mobile to handle resize gracefully */
.notebook-navigator-mobile .nn-navigation-pane {
    flex: 1;
    background-color: var(--nn-theme-nav-bg) !important;
}

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

/* 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 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-icon[data-has-color='true'] svg {
    stroke-width: 2.4;
}

.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-folder-note {
    text-decoration: var(--nn-theme-navitem-folder-note-name-decoration) !important;
}

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

/* ========================================================================
   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 .nn-back-button {
    position: absolute;
    left: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    z-index: 1;
    opacity: 1 !important;
}

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

/* iOS/iPadOS-specific back button adjustments */
.notebook-navigator-mobile:not(.notebook-navigator-android) .nn-back-button {
    padding: 4px !important; /* 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) .nn-back-button svg {
    width: 36px !important;
    height: 36px !important;
}

/* 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 10px;
    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 */
.nn-search-input {
    width: 100%;
    height: 32px;
    padding: 4px 60px 4px 36px !important;
    font-size: 13px;
    color: var(--nn-theme-file-selected-name-color) !important;
    background: var(--nn-theme-list-bg) !important;
    border: 1px solid var(--nn-theme-list-search-border-color) !important;
    border-radius: 999px !important;
    outline: none;
    box-sizing: border-box;
}

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

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

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

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

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

/* 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 .nn-search-input {
    height: 36px;
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 4px 60px 4px 36px !important;
    border-radius: 999px !important;
}

/* Mobile search icon */
.notebook-navigator-mobile .nn-search-input-icon {
    top: 10px;
}

/* Mobile clear button */
.notebook-navigator-mobile .nn-search-clear-button {
    top: 0;
}

.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 svg,
.nn-search-star-button svg,
.nn-search-help-button svg {
    width: 16px;
    height: 16px;
}

.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,
.notebook-navigator-mobile .nn-search-star-button,
.notebook-navigator-mobile .nn-search-help-button {
    top: 0;
    height: 36px;
}

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

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

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

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

/* 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 */
.nn-icon-button {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    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 !important;
    outline: none !important;
}

/* 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 {
    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 .nn-icon-button:hover {
    background-color: var(--nn-theme-header-button-hover-bg) !important;
    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" */
.nn-icon-button-active {
    background-color: var(--nn-theme-header-button-active-bg) !important;
    color: var(--nn-theme-header-button-active-icon-color) !important;
}

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

/* 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 {
    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 {
    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;
    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 {
    -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;
    /* Extend slightly beyond bottom item bounds (height rounding issue) to prevent hairline gaps when zoomed */
    bottom: -0.2px;
    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;
}

/* Zero shared corners when consecutive background overlays touch */
.nn-navitem:is(.nn-has-custom-background, .nn-has-search-match) + .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match) {
    --nn-navitem-top-left-radius: 0;
    --nn-navitem-top-right-radius: 0;
}

.nn-navitem:is(.nn-has-custom-background, .nn-has-search-match):has(+ .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match)) {
    --nn-navitem-bottom-left-radius: 0;
    --nn-navitem-bottom-right-radius: 0;
}

/* Apply the same corner trimming within the virtualized row wrapper */
.nn-virtual-nav-item:has(> .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match))
    + .nn-virtual-nav-item:has(> .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match))
    > .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match) {
    --nn-navitem-top-left-radius: 0;
    --nn-navitem-top-right-radius: 0;
}

.nn-virtual-nav-item:has(> .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match)):has(
        + .nn-virtual-nav-item > .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match)
    )
    > .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match) {
    --nn-navitem-bottom-left-radius: 0;
    --nn-navitem-bottom-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-foreground-faint);
    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;
    /* Extend slightly beyond bottom item bounds (height rounding issue) to prevent hairline gaps when zoomed */
    bottom: -0.2px;
    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: 0;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    background-color: var(--nn-theme-navitem-hover-bg);
    border-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);
}

.nn-navitem-icon[data-has-color='true'] svg {
    stroke-width: 2.4;
}

/* 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) !important;
    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) !important;
}

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

/* 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) !important;
}

/* 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) !important;
}

/* Spacer element to push count to the end */
.nn-navitem-spacer {
    flex: 1;
    min-width: 8px; /* Minimum space between name and count */
}

/* 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);
}

/* 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;
}

.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 !important;
    width: 18px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    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) !important;
}

.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) !important;
    text-decoration: var(--nn-theme-navitem-folder-note-name-decoration) !important;
}

/* 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) !important;
}

/* 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) !important;
}

.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) !important;
}

.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);
}

.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,
.nn-navigation-calendar-month .nn-navigation-calendar-quarter-label {
    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;
}

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

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

.nn-navigation-calendar-period-label {
    display: inline-flex;
    align-items: center;
    padding: 2px 1px;
    border-radius: 6px;
    background-color: var(--nn-calendar-header-chip-bg);
    line-height: 1;
}

.nn-navigation-calendar-period-button.has-period-note {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

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

.nn-navigation-calendar-quarter-button.has-period-note .nn-navigation-calendar-quarter-value {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.nn-navigation-calendar-period-button.is-active-editor-file,
.nn-navigation-calendar-weeknumber.is-active-editor-file {
    box-shadow: inset 0 0 0 2px var(--nn-calendar-active-editor-border-color) !important;
}

.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-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 !important;
    height: 20px !important;
}

.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;
}

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

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

.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 !important;
    color: var(--nn-theme-foreground-muted);
    padding: 0;
    line-height: 0;
}

.nn-navigation-calendar-today {
    background: transparent !important;
    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;
}

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

.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;
}

.nn-navigation-calendar-year-month {
    position: relative;
    background-color: transparent !important;
    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-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 {
    box-shadow: inset 0 0 0 2px var(--nn-calendar-active-editor-border-color) !important;
    color: var(--nn-theme-calendar-day-in-month-color);
}

.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) !important;
    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;
    column-gap: 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));
    column-gap: 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;
}

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

.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);
}

.nn-navigation-calendar-day {
    position: relative;
    height: auto;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    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) !important;
    }

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

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

    .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;
    }

    :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 !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        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) !important;
        min-width: var(--nn-calendar-nav-button-size) !important;
    }

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

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

    .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) !important;
    }

    .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) !important;
    }
}

.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 {
    box-shadow: inset 0 0 0 2px var(--nn-calendar-active-editor-border-color) !important;
}

.nn-navigation-calendar[data-highlight-today='true']
    .nn-navigation-calendar-day.is-today.is-active-editor-file:not(.has-feature-image):not(.has-feature-image-key)::before {
    box-shadow: inset 0 0 0 2px var(--nn-calendar-active-editor-border-color);
}

/* 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 !important;
}

.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-right-sidebar .nn-navigation-calendar-year-grid {
    width: 100%;
}

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

/* ========================================================================
   Header mode: compact yearly (right sidebar)
   ======================================================================== */

.nn-calendar-right-sidebar .nn-navigation-calendar[data-compact-header='true'] .nn-navigation-calendar-header {
    height: auto;
    min-height: var(--nn-calendar-header-row-height);
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
}

.nn-calendar-right-sidebar .nn-navigation-calendar[data-compact-header='true'] .nn-navigation-calendar-month {
    width: 100%;
    justify-content: center;
    font-size: calc(var(--nn-calendar-header-font-size) + 2px);
}

.nn-calendar-right-sidebar
    .nn-navigation-calendar[data-compact-header='true']
    .nn-navigation-calendar-month
    .nn-navigation-calendar-period-month {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.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) !important;
}

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

/* 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;

    /* 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 */
}

.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.2px;
    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(> .nn-file.nn-has-custom-background)::after,
.nn-virtual-file-item:has(+ .nn-virtual-file-item > .nn-file.nn-has-custom-background)::after {
    display: none;
}

.nn-virtual-file-item:has(> .nn-file.nn-has-custom-background)
    + .nn-virtual-file-item:has(> .nn-file.nn-has-custom-background)
    > .nn-file.nn-has-custom-background {
    --nn-file-top-left-radius: 0;
    --nn-file-top-right-radius: 0;
}

.nn-virtual-file-item:has(> .nn-file.nn-has-custom-background):has(+ .nn-virtual-file-item > .nn-file.nn-has-custom-background)
    > .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;
}

.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 {
    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 */
    min-height: var(--nn-file-thumbnail-min-size); /* Minimum height to match minimum thumbnail size */
    justify-content: flex-start; /* Top-align content */
    /* No align-self - let it stretch naturally */
}

/* 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 */
}

/* 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;
    min-height: calc(var(--nn-file-title-line-height) * var(--filename-rows, 1));
    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-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);
}

.nn-file-icon[data-has-color='true'] svg {
    stroke-width: 2.4;
}

/* 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 2 title rows: align with compact padding */
.nn-quick-actions-panel.nn-compact-mode[data-title-rows='2'],
.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 + preview (same line): match legacy spacing. */
.nn-file-second-line > .nn-file-date + .nn-file-preview {
    margin-inline-start: 8px;
}

/* 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;
}

/* 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;
    flex: 1;
}

/* Multi-line preview - always take up configured number of lines */
.nn-file-preview:not(.nn-file-second-line .nn-file-preview) {
    min-height: calc(var(--nn-file-multiline-text-line-height) * var(--preview-rows, 1));
    height: calc(var(--nn-file-multiline-text-line-height) * var(--preview-rows, 1));
}

/* Preview on same line as date - match date line-height for alignment */
.nn-file-second-line .nn-file-preview {
    line-height: var(--nn-file-single-text-line-height);
    display: block;
    white-space: nowrap;
    word-break: normal;
}

/* 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'] {
    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-icon[data-has-color='true'] svg {
    stroke-width: 2.4;
}

.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;
    height: 20px;
    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-parent-folder {
    color: var(--nn-selected-file-parent-color);
}
/* Source: src/styles/sections/list-compact-mode.css */

/* ========================================================================
   Compact Mode Styles - When date, preview, and image are all disabled
   ======================================================================== */

/* 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 */
}

/* 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);
}

/* 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 item height minus total padding */
    --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--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;
}
/* Source: src/styles/sections/list-date-headers.css */

/* ========================================================================
   Date Group Headers
   ======================================================================== */

/* Date group headers for grouped files */
.nn-date-group-header {
    height: var(--nn-date-header-height-subsequent-mobile, var(--nn-date-header-height-subsequent));
    box-sizing: border-box;
    padding: var(--nn-date-header-padding-top-mobile, var(--nn-date-header-padding-top)) var(--nn-file-item-padding-horizontal)
        var(--nn-date-header-padding-bottom-mobile, var(--nn-date-header-padding-bottom)) 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 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

/* First date header - no top margin or extra padding for first group */
.nn-date-group-header.nn-first-header {
    height: var(--nn-date-header-height-mobile, var(--nn-date-header-height));
    padding: 0 var(--nn-file-item-padding-horizontal);
    align-items: center;
}

.nn-date-group-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nn-date-header-icon-size, var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)));
    height: var(--nn-date-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-date-group-header-icon svg {
    width: 100%;
    height: 100%;
}

.nn-date-group-header-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

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

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

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

/* 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/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.2px;
    /* Pre-composited solid color prevents hairlines by blending alpha with pane background */
    background-color: var(--nn-selected-file-bg-color);
    border-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;
    /* Extend slightly beyond bottom item bounds (height rounding issue) to prevent hairline gaps when zoomed */
    bottom: -0.2px;
    /* 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;
}

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

.notebook-navigator-mobile .nn-drag-over {
    background-color: transparent !important;
}

/* 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));
}

/* Empty placeholder to hide browser's default drag preview */
.nn-drag-empty-placeholder {
    position: absolute;
    width: 1px;
    height: 1px;
    left: -9999px;
    top: -9999px;
    opacity: 0;
}

/* Drag ghost element - follows the cursor during drag */
.nn-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 999999;
    opacity: 0.9;
    will-change: transform;
    left: 0;
    top: 0;
    transform: translate(var(--nn-drag-ghost-x, -1000px), var(--nn-drag-ghost-y, -1000px));
}

/* Badge shown on drag ghost for multiple files - Apple-style red badge */
.nn-drag-ghost-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 on drag ghost for single file/folder - dark circular background */
.nn-drag-ghost-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-ghost-icon {
    background-color: var(--background-modifier-border-hover);
}

/* Style the Lucide icon inside drag ghost - white icon */
.nn-drag-ghost-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-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-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-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-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);
}

/* What's new content layout */
.modal.nn-whats-new-modal .modal-content {
    padding: 16px;
}

.modal.nn-whats-new-modal .modal-close-button {
    z-index: 10;
    pointer-events: auto;
}

/* What's new header */
.nn-whats-new-header {
    margin-bottom: 16px;
}

/* What's new scrollable container */
.nn-whats-new-scroll {
    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;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--background-modifier-border);
}

/* Version container - last child no border */
.nn-whats-new-version:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Version header */
.nn-whats-new-version h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--nn-theme-foreground);
    margin: 0 0 4px 0;
}

/* 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;
}

/* Version date */
.nn-whats-new-date {
    color: var(--nn-theme-foreground-muted);
    font-size: 12px;
    display: block;
    margin-bottom: 8px;
}

/* Release banner image */
.nn-whats-new-banner {
    position: relative;
    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-banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 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;
}

/* 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;
    }

    /* Mobile header size for the modal title */
    .nn-whats-new-header {
        font-size: 16px;
    }

    /* Version header and date sizes on mobile */
    .nn-whats-new-version h3 {
        font-size: 15px;
    }

    .nn-whats-new-date {
        font-size: 14px;
    }
}

/* Obsidian mobile app adjustments */
.is-mobile {
    /* Modal title */
    .nn-whats-new-header {
        font-size: 16px;
    }

    /* 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;
    }

    /* Date line */
    .nn-whats-new-date {
        font-size: 14px;
    }
}
/* 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);
}

/* Icon picker content layout */
.modal.nn-icon-picker-modal .modal-content {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Icon picker modal height control */
.modal.nn-icon-picker-modal {
    height: auto;
}

/* Prevent icon picker content overflow */
.modal.nn-icon-picker-modal .modal-content {
    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: 13px;
    font-weight: 400;
    color: var(--nn-theme-foreground-muted);
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

/* 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 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 .nn-property-keys-search {
    margin: 0;
    height: 32px;
    padding: 4px 36px 4px 12px !important;
    border-radius: 999px !important;
    border: 1px solid var(--nn-theme-list-search-border-color) !important;
}

.modal.nn-property-keys-modal .nn-property-keys-search.is-active {
    background: var(--nn-theme-list-search-active-bg) !important;
}

.modal.nn-property-keys-modal .nn-property-keys-search:focus {
    border-color: var(--nn-theme-list-search-border-color) !important;
    box-shadow: 0 0 0 2px var(--nn-theme-list-search-border-color) !important;
}

.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-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;
    /* 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 page indentation for sub-settings */
.nn-sub-settings {
    margin-inline-start: 20px;
    padding-left: 1em;
}

/* Restore bottom padding on last setting inside sub-settings containers
   (Obsidian's .setting-item:last-child removes it, but nested containers need it) */
.nn-sub-settings > .setting-item:last-child {
    padding-bottom: var(--size-4-4);
}

/* Settings layout root */
.nn-settings-tab-root {
    display: block;
    min-height: 0;
}

/* Settings tabs layout and navigation */
.nn-settings-tabs {
    display: block;
    min-height: 0;
}

.nn-settings-tabs-nav {
    display: flex;
    flex-direction: column;
    gap: var(--size-2-3);
    flex-shrink: 0;
    margin-bottom: var(--size-4-4);
}

.nn-settings-tabs-nav-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-2-3);
}

.nn-settings-tabs-nav-row.is-hidden {
    display: none;
}

.nn-settings-tabs-nav-row.is-icons-hidden .nn-settings-tab-icon {
    display: none;
}

/* Separator between primary and secondary tab rows */
.nn-settings-tabs-nav-secondary {
    gap: var(--size-2-2);
    border-top: 1px solid var(--background-modifier-border);
    padding-top: var(--size-2-3);
}

.nn-settings-tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-2-2);
    padding: 6px 12px;
    font-size: var(--font-ui-small);
}

/* Icon inside settings tab buttons */
.nn-settings-tab-icon {
    display: inline-flex;
    align-items: center;
}

.nn-settings-tab-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.nn-settings-tab-button.is-hidden {
    display: none;
}

.nn-settings-tab-button-primary.is-group-active {
    background-color: transparent;
    color: var(--interactive-accent);
    opacity: 0.85;
}

.nn-settings-tab-button-primary.is-group-active:hover {
    background-color: var(--background-modifier-hover);
    opacity: 1;
}

.nn-settings-tab-button-secondary {
    padding: 5px 10px;
}

.nn-settings-tab-button-secondary.is-active {
    background-color: var(--background-modifier-hover);
    color: var(--text-normal);
}

.nn-settings-tabs-content {
    position: static;
    min-height: 0;
    overflow: visible;
    box-sizing: border-box;
    padding-inline-end: 0;
}

/* Hide tabs by default, show only active tab */
.nn-settings-tab {
    display: none;
}

.nn-settings-tab.is-active {
    display: block;
}

/* Settings section header spacing */
.setting-item-heading {
    margin-top: 30px;
}

/* First settings header - no top margin */
.setting-item-heading:first-child {
    margin-top: 0;
}

/* 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;
}

/* Setting name marker appended to setting names */
.nn-settings-tab-root .setting-item-name.nn-setting-name-marker::after {
    content: ' ' attr(data-nn-setting-marker);
    color: var(--text-muted);
    font-weight: normal;
}

.mod-rtl .nn-settings-tab-root .setting-item-name.nn-setting-name-marker::after {
    content: '';
}

.mod-rtl .nn-settings-tab-root .setting-item-name.nn-setting-name-marker::before {
    content: attr(data-nn-setting-marker) ' ';
    color: var(--text-muted);
    font-weight: normal;
}

/* Dim disabled calendar pattern text inputs */
.nn-settings-tab-root .setting-item.nn-setting-disabled input[type='text']:disabled {
    opacity: 0.6;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Container for additional info below settings */
.nn-setting-info-container {
    margin-top: 8px;
    margin-bottom: 8px;
}

.nn-setting-info-container.nn-setting-info-centered.setting-item {
    justify-content: center;
}

.nn-setting-info-container.nn-setting-info-centered .setting-item-info,
.nn-setting-info-container.nn-setting-info-centered .setting-item-description {
    text-align: center;
}

.nn-sub-settings > .setting-item.nn-setting-property-keys-info:last-child {
    padding-bottom: 0;
}

/* 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;
}

.nn-toolbar-visibility-toggle {
    position: relative;
    padding: 0;
    /* Override mobile toolbar button dimensions for settings */
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
}

.nn-toolbar-visibility-toggle:not(.nn-mobile-toolbar-button-active) {
    opacity: 0.6;
}

.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 {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
}

/* 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 */
.nn-youtube-button {
    background-color: #ff0000 !important;
    border: none !important;
    color: #ffffff !important;
    min-width: 54px;
}

.nn-youtube-button:hover {
    background-color: #cc0000 !important;
}

.nn-youtube-button svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: none !important;
}

.is-mobile .nn-toolbar-visibility-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
}

.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 .nn-toolbar-visibility-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
}

.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-value {
    margin-left: 12px;
    font-size: var(--font-ui-smaller);
    color: var(--nn-theme-foreground-muted);
    min-width: 48px;
    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);
    text-align: center;
    line-height: 1.5;
}

/* Remove duplicate borders when statistics are displayed */
.nn-stats-section {
    border: none !important;
    padding: 0 !important;
}

/* Ensure proper spacing from previous sections */
.nn-stats-section.setting-item {
    margin-top: 0;
}

/* Advanced > Local cache: center text by removing the empty control column */
.nn-local-cache-stats-setting .setting-item-control {
    display: none;
}

.nn-local-cache-stats-setting .setting-item-info {
    width: 100%;
}

.nn-local-cache-stats-setting .nn-stats-text {
    text-align: center;
}
/* 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-rgb-label,
.nn-rgb-title,
.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, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
        linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
    background-size: 10px 10px;
    background-position:
        0 0,
        5px 5px;
    background-color: #fff;
}

.theme-dark .nn-checkerboard,
.theme-dark .nn-preview-color.nn-no-color {
    background-image:
        linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444),
        linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444);
    background-color: #222;
}

.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;
}

/* RGB sliders section */
.nn-rgb-section,
.nn-color-preview-section {
    padding-bottom: 15px;
}

.nn-rgb-section {
    margin-bottom: auto; /* Push everything below to the bottom */
}

.nn-rgb-title {
    margin-bottom: 6px;
}

.nn-rgb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.nn-rgb-row:last-child {
    margin-bottom: 0;
}

.nn-rgb-label {
    width: 16px;
}

.nn-rgb-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--background-modifier-border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

/* Slider thumb */
.nn-rgb-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--interactive-accent);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.nn-rgb-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--interactive-accent);
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* RGB value display */
.nn-rgb-value {
    width: 32px;
    text-align: right;
    font-size: 11px;
    color: var(--nn-theme-foreground-muted);
    font-family: var(--font-monospace);
}

/* Color gradients for sliders */
.nn-rgb-slider-r {
    background: linear-gradient(to right, #000000, #ff0000);
}

.nn-rgb-slider-g {
    background: linear-gradient(to right, #000000, #00ff00);
}

.nn-rgb-slider-b {
    background: linear-gradient(to right, #000000, #0000ff);
}

/* Hex input section */
.nn-hex-section {
    margin-bottom: 20px;
}

.nn-hex-title {
    display: block;
    margin-bottom: 6px;
    height: 17px; /* Match the preview label height for alignment */
}

.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,
.nn-recent-section {
    margin-top: auto; /* Align to bottom */
}

.nn-preset-colors,
.nn-recent-colors {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    overflow: hidden;
}

.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);
    }

    .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/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-date-header-height-mobile: calc(var(--nn-date-header-height) + 8px);
    --nn-date-header-height-subsequent-mobile: calc(var(--nn-date-header-height-subsequent) + 8px);
    --nn-date-header-padding-top-mobile: calc(var(--nn-date-header-padding-top) + 4px);
    --nn-date-header-padding-bottom-mobile: calc(var(--nn-date-header-padding-bottom) + 2px);
}

/* 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-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; Obsidian 1.11+ iOS overrides this via platform stylesheet. */
.notebook-navigator-mobile .nn-mobile-toolbar {
    justify-content: space-evenly;
}

.nn-pane-bottom-toolbar {
    flex-shrink: 0;
}

.notebook-navigator-mobile .nn-mobile-toolbar-left,
.notebook-navigator-mobile .nn-mobile-toolbar-right,
.notebook-navigator-mobile .nn-mobile-toolbar-pill,
.notebook-navigator-mobile .nn-mobile-toolbar-circle {
    display: contents;
}

/* 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 */
.nn-mobile-toolbar-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: transparent !important;
    background-color: transparent !important;
    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 !important;
}

.nn-mobile-toolbar-button-circle {
    border-radius: 999px;
}

/* Mobile toolbar button icons */
.nn-mobile-toolbar-button svg {
    width: 24px;
    height: 24px;
    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 */
.nn-mobile-toolbar-button-active {
    color: var(--nn-theme-mobile-toolbar-button-active-icon-color) !important;
    background-color: var(--nn-theme-mobile-toolbar-button-active-bg) !important;
}

.nn-mobile-toolbar-button-active svg {
    stroke: var(--nn-theme-mobile-toolbar-button-active-icon-color) !important;
    stroke-width: 2;
}

/* Disabled mobile toolbar button */
.nn-mobile-toolbar-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Source: src/styles/sections/platform-ios-obsidian-1-11.css */

/* ========================================================================
   iOS + Obsidian 1.11+ iOS Platform Overrides
   ======================================================================== */

/* Platform-specific safe area definitions */
.notebook-navigator-ios {
    /* iOS uses env() for dynamic safe areas (notch, home indicator) */
    --nn-mobile-safe-area-bottom: env(safe-area-inset-bottom, 8px);
}

.notebook-navigator-obsidian-1-11-plus-ios {
    /* Obsidian 1.11+ already accounts for iOS safe areas in the view chrome. */
    --nn-mobile-safe-area-bottom: 0px;
}

.notebook-navigator-ios:not(.notebook-navigator-obsidian-1-11-plus-ios)
    .nn-navigation-pane[data-calendar='true']
    .nn-pane-bottom-toolbar
    .nn-mobile-toolbar,
.notebook-navigator-ios:not(.notebook-navigator-obsidian-1-11-plus-ios)
    .nn-list-pane[data-calendar='true']
    .nn-pane-bottom-toolbar
    .nn-mobile-toolbar {
    padding-bottom: 0;
    height: 49px;
    min-height: 49px;
}

/* Obsidian 1.11+ 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-obsidian-1-11-plus-ios {
    background-color: var(--nn-theme-mobile-bg);
}

/* Obsidian 1.11+ 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-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-split-container {
    padding-bottom: 8px;
    box-sizing: border-box;
}

/* iOS (Obsidian 1.11+): allow the glass toolbar shadow to render into the split container padding */
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane,
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane {
    overflow: visible;
}

/* iOS (Obsidian 1.11+): anchor floating toolbar to the panel (above the calendar). */
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane-panel,
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane-panel {
    position: relative;
}

/* iOS (Obsidian 1.11+): bottom overlays are positioned above the scroller. */
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-pane-bottom-toolbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
}

/* iOS (Obsidian 1.11+): reserve scroll space for the floating toolbar so rows can scroll under it. */
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane-scroller,
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane-scroller {
    padding-bottom: var(--nn-ios-pane-bottom-overlay-height);
}

/* Navigation pane calendar safe area for Obsidian 1.11+ iOS */
.notebook-navigator-obsidian-1-11-plus-ios .nn-navigation-pane,
.notebook-navigator-obsidian-1-11-plus-ios .nn-list-pane {
    /* Obsidian 1.11+ already accounts for iOS safe areas in the view chrome. */
    --nn-calendar-safe-area: 0px;
}

/* Obsidian 1.11+ iOS glass toolbar */
.notebook-navigator-obsidian-1-11-plus-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 1.11+ */
    /* 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-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-left,
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-right {
    display: flex;
    pointer-events: auto;
    flex: 0 0 auto;
}

.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-pill,
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-circle {
    display: flex;
}

.notebook-navigator-obsidian-1-11-plus-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-obsidian-1-11-plus-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-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-pill,
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-circle {
    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-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-pill > .nn-mobile-toolbar-button,
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-circle > .nn-mobile-toolbar-button {
    position: relative;
    z-index: 1;
}

.notebook-navigator-obsidian-1-11-plus-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-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-circle {
    padding: 1px; /* 1px inset around the circular button */
}

.notebook-navigator-obsidian-1-11-plus-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-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-button svg {
    stroke-width: 2;
}

.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane-content,
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane-content {
    position: relative;
    z-index: 1;
}

/* Obsidian 1.11+ iOS: bottom fade layer */
.notebook-navigator-obsidian-1-11-plus-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 + Obsidian 1.11+: 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-obsidian-1-11-plus-ios .nn-list-pane .nn-virtual-item {
    transform: translateZ(0);
}
/* Source: src/styles/sections/platform-android-obsidian-1-11.css */

/* ========================================================================
   Android + Obsidian 1.11+ Platform Overrides
   ======================================================================== */

/* Obsidian 1.11+ Android: match the view container background to mobile pane surfaces */
.view-content.notebook-navigator.notebook-navigator-obsidian-1-11-plus-android {
    background-color: var(--nn-theme-mobile-bg);
}

/* Obsidian 1.11+ 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-obsidian-1-11-plus-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;
}

/* Make panes flex containers on mobile to accommodate tab bars */
.notebook-navigator-mobile .nn-navigation-pane,
.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,
.notebook-navigator-mobile .nn-list-pane-scroller {
    flex: 1;
    min-height: 0; /* Important for proper scrolling */
    -webkit-overflow-scrolling: touch;
    /* Prevent the rubber-band/glow overscroll effect on mobile. */
    overscroll-behavior: none;
}

/* Mobile list pane scroller - use mobile background */
.notebook-navigator-mobile .nn-list-pane-scroller {
    background-color: var(--nn-theme-list-bg); /* Opaque background on scroller for GPU scroll layer (see .nn-list-pane-scroller) */
}

/* Mobile compact file items - 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);
}

/* Mobile compact mode file names - use dedicated 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));
}
/* 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 - !important needed to override other rules */
.notebook-navigator-android .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)
    ) !important;
}

/* Root reorder panel text */
.notebook-navigator-android .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)
    ) !important;
}

/* 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-emoji-icon,
.notebook-navigator-android .nn-iconfont {
    font-size: calc(var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)) * var(--nn-android-font-scale-reciprocal, 1)) !important;
}

/* Height compensation - Android doesn't scale height/min-height, but we need them
   to match the (now compensated) line-height after Android applies textZoom.
   Since line-height var is pre-divided by scale, multiplying by scale here gives
   the original value (21px, 20px, 19px) which matches the scaled line-height. */
.notebook-navigator-android .nn-file-name {
    min-height: calc(var(--nn-file-title-line-height) * var(--filename-rows, 1) * var(--nn-android-font-scale, 1));
    height: calc(var(--nn-file-title-line-height) * var(--filename-rows, 1) * var(--nn-android-font-scale, 1));
}

.notebook-navigator-android .nn-file-preview:not(.nn-file-second-line .nn-file-preview) {
    min-height: calc(var(--nn-file-multiline-text-line-height) * var(--preview-rows, 1) * var(--nn-android-font-scale, 1));
    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-date-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;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-align: center;

    /* 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;
}

/* Prevent emoji icons from being affected by text styles */
.nn-emoji-icon {
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
}

/* 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 Picker Modal Styles */
.modal.nn-icon-picker-modal .modal-content {
    min-height: 380px;
}

/* 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 12px;
    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;
}

/* Icon section headers for categories */
.nn-icon-section-header {
    font-size: var(--font-ui-small);
    font-weight: 600;
    color: var(--nn-theme-foreground-muted);
    margin-top: 12px;
    margin-bottom: 4px;
}

.nn-icon-section-header:first-child {
    margin-top: 0;
}
/* Source: src/styles/sections/settings-metadata-info.css */

/* ========================================================================
   Metadata Info Styles
   ======================================================================== */

/* Container for metadata parsing info - flex row layout */
.nn-metadata-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* Text container - takes up available space */
.nn-metadata-info-text {
    flex: 1;
}

/* Error text styling */
.nn-metadata-error-text {
    color: var(--text-error);
    font-weight: bold;
}

/* Export button - stays on the right */
.nn-metadata-export-button {
    flex-shrink: 0;
}

/* Make delete menu items red (items with trash icon) */
.menu-item:has(.menu-item-icon svg.lucide-trash) {
    color: var(--text-error);
}
.menu-item:has(.menu-item-icon svg.lucide-trash) .menu-item-icon {
    color: var(--text-error);
}
/* 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: Active day outline color
        description: Border color for the outline shown on the active day in the calendar.
        type: variable-themed-color
        opacity: true
        format: rgb
        default-light: '#'
        default-dark: '#'
    -
        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-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-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-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-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-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 Obsidian 1.11+ 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: '#'

*/