/* ==========================================================================
   General States & Utilities
   ========================================================================== */

.hide,
.hide-folder .folder-name,
.hide-folder-note .is-folder-note {
    display: none;
}

.pointer-cursor,
.has-folder-note .nav-folder-title-content:hover,
.has-folder-note.view-header-breadcrumb:hover,
.nav-folder-collapse-indicator:hover,
.fn-delete-confirmation-modal-buttons span:hover,
.fn-delete-confirmation-modal-buttons input:hover {
    cursor: pointer !important;
}


/* ==========================================================================
   Tree Items
   ========================================================================== */

body:not(.is-grabbing) .tree-item-self.fn-is-active:hover,
body:not(.disable-folder-highlight) .tree-item-self.fn-is-active {
    color: var(--nav-item-color-active);
    background-color: var(--nav-item-background-active);
    font-weight: var(--nav-item-weight-active);
}


/* ==========================================================================
   Exclude Folder Settings
   ========================================================================== */

.fn-excluded-folder-heading {
    margin-top: 0 !important;
    border-top: 1px solid var(--background-modifier-border);
}

.add-exclude-folder-item,
.fn-exclude-folder-list {
    padding-bottom: 0 !important;
}

.fn-exclude-folder-list.setting-item {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.fn-exclude-folder-list .setting-item-control {
    display: flex;
    justify-content: flex-start !important;
}

.fn-exclude-folder-list .setting-item-info {
    display: none !important;
}

.fn-exclude-folder-list .search-input-container {
    width: 100%;
}


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

.fn-backup-warning-modal .fn-modal-button-container {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.fn-confirmation-modal {
    padding-bottom: 0;
}

.fn-confirmation-modal .setting-item {
    border-top: 0 !important;
    padding-top: 0 !important;
}

:not(.is-phone) .fn-confirmation-modal-button {
    margin-right: 0.7rem;
}

:not(.is-phone) .fn-delete-confirmation-modal-buttons {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

:not(.is-phone) .fn-delete-confirmation-modal-buttons .fn-confirmation-modal-button {
    margin-left: auto;
}

:not(.is-phone) .fn-delete-confirmation-modal-buttons input[type="checkbox"] {
    margin-right: 5px;
}

.is-phone .fn-delete-confirmation-modal-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.is-phone .fn-delete-confirmation-modal-buttons .fn-confirmation-modal-button {
    margin-top: 10px;
}


/* ==========================================================================
   Folder Overview
   ========================================================================== */

.folder-overview-container.fv-remove-edit-button .folder-overview-edit-button {
    display: none;
}

.cm-line:has(.fv-link-list-item),
.el-ul:has(.fv-link-list-item),
.cm-line:has(.fv-link-list-start),
.cm-line:has(.fv-link-list-end),
.fv-hide-overview {
    display: none !important;
}


.folder-overview-list {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 1.200 !important;
    padding-top: 1.200 !important;
}

.folder-overview-list-item {
    display: flex;
}

.folder-overview-list::marker {
    color: var(--text-faint);
}

.folder-list::marker {
    color: var(--text-normal) !important;
}

.folder-overview-grid {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}

.folder-overview-grid-item {
    flex: 1 1 auto;
    margin: 0 1.2rem 1.2rem 0;
}

.folder-overview-grid-item-article article {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    flex: 1;
}

.folder-overview-grid-item-article a {
    text-decoration: none !important;
}

.folder-overview-grid-item-article h1 {
    font-size: 1.2rem;
}

.overview-setting-item-fv {
    border-top: 1px solid var(--background-modifier-border);
    padding: 0.75em 0;
    align-items: center;
}

.overview-setting-item-fv .setting-item {
    padding: 0;
}


/* ==========================================================================
   File Explorer & Path Styling
   ========================================================================== */

.folder-note-underline .has-folder-note .nav-folder-title-content {
    text-decoration-line: underline;
    text-decoration-color: var(--text-faint);
    text-decoration-thickness: 2px;
    text-underline-offset: 1px;
}

.folder-note-underline-path .has-folder-note.view-header-breadcrumb {
    text-decoration-line: underline;
    text-decoration-color: var(--text-faint);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.folder-note-bold .has-folder-note .nav-folder-title-content,
.folder-note-bold-path .has-folder-note.view-header-breadcrumb {
    font-weight: bold;
}

.folder-note-cursive .has-folder-note .nav-folder-title-content,
.folder-note-cursive-path .has-folder-note.view-header-breadcrumb {
    font-style: italic;
}


/* Collapse Icon Handling */

.fn-folder-overview-collapse-icon {
    display: block !important;
}

.fn-has-no-files .collapse-icon,
.fn-hide-collapse-icon .has-folder-note.only-has-folder-note .tree-item-icon,
.fn-hide-empty-collapse-icon .fn-empty-folder .tree-item-icon,
.only-has-folder-note:not(.is-collapsed):not(.show-folder-note-in-explorer)>.nav-folder-children {
    display: none;
}


/* ==========================================================================
   Settings Tabs
   ========================================================================== */

.fn-settings-tab-bar {
    display: flex;
    flex-direction: row;
    padding-bottom: 1rem;
}

.fn-settings-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--size-4-2);
    padding: 10px;
    border: 1px solid var(--background-modifier-border);
}

.fn-settings-tab-active {
    background-color: var(--color-accent);
    color: var(--text-on-accent);
}

.fn-settings-tab-name {
    font-weight: bold;
}

.fn-settings-tab-icon {
    display: flex;
}


/* ==========================================================================
   Suggestion Container
   ========================================================================== */

.fn-suggestion-container {
    position: absolute;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--background-primary);
    max-width: 500px;
    max-height: 300px;
    border-radius: var(--radius-m);
    border: 1px solid var(--background-modifier-border);
    box-shadow: var(--shadow-s);
    z-index: var(--layer-notice);
}


/* ==========================================================================
   Whitelist Folder Input (Desktop & Mobile)
   ========================================================================== */

/* Default Desktop Layout */
.fn-whitelist-folder-input-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
}

.fn-whitelist-folder-input-container input {
    flex-grow: 1;
    width: auto;
    margin-right: 8px;
    height: 40px;
    box-sizing: border-box;
}

.fn-whitelist-folder-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
}

/* Mobile Overrides */
@media (max-width: 768px) {
    .fn-whitelist-folder-input-container {
        display: block;
        width: 100%;
        text-align: center;
    }

    .fn-whitelist-folder-input-container input {
        width: 100%;
        margin-right: 0;
    }

    .fn-whitelist-folder-buttons {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
    }

    .is-phone .fn-overview-folder-path .setting-item-control {
        display: block;
    }
}