/* ══════════════════════════════════════════════════════════════
   Notespark — SIDEBAR row controls
   (renamed from nota-sections.css, which was too easily confused with
    nota-section.css — that one styles the SectionView page instead.)

   This file: notebook + section rows in the sidebar — the edit/delete
   pencil and bin, the notebook actions, the padlock state.
   ══════════════════════════════════════════════════════════════ */
.nav-item-edit {
    opacity: 0;
    width: 0;
    overflow: hidden;
    background: none;
    border: none;
    color: var(--n-text-4);
    cursor: pointer;
    font-size: 13px;
    border-radius: 6px;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.15s;
}

.nav-item:hover .nav-item-edit {
    opacity: 1;
    width: 20px;
}

.nav-item-edit:hover {
    color: var(--n-accent-text, #7C5CE7);
}

/* ── Desktop sidebar (RenderSidebar) section rows use .sb-sec, not
   .nav-item — so the pencil needs its own reveal-on-hover here. ── */
.sb-sec-edit {
    opacity: 0;
    width: 0;
    overflow: hidden;
    background: none;
    border: none;
    color: var(--n-text-4);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    transition: opacity 0.15s, width 0.15s, color 0.15s;
}

.sb-sec:hover .sb-sec-edit {
    opacity: 1;
    width: 18px;
    margin-right: 4px;
}

.sb-sec-edit:hover {
    color: var(--n-accent-text, #7C5CE7);
}

/* ── Delete (×) on desktop sidebar section rows ──
   Matches .sb-sec-edit's reveal-on-hover so the two sit together. */
.sb-sec-del {
    opacity: 0;
    width: 0;
    overflow: hidden;
    background: none;
    border: none;
    color: var(--n-text-4);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    transition: opacity 0.15s, width 0.15s, color 0.15s;
}

.sb-sec:hover .sb-sec-del {
    opacity: 1;
    width: 18px;
    margin-right: 4px;
}

.sb-sec-del:hover {
    color: var(--n-danger);
}


/* ── Lucide icons in the section row buttons ──
   The edit/delete buttons were sized for text glyphs (✎ ×); SVGs need
   flex centring and a fixed box so they sit level with the row text. */
.sb-sec-edit,
.sb-sec-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
}

.sb-sec:hover .sb-sec-edit,
.sb-sec:hover .sb-sec-del {
    width: 20px;
    margin-right: 2px;
}

/* ── Notebook row actions (edit / share / lock / delete) ──
   Sized for Lucide SVGs rather than the old emoji glyphs. */
.sb-act {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
}

/* A protected notebook shows its padlock in amber so the state reads
   at a glance, matching the lock badge used on contacts. */
.nota.theme-light .sb-act.locked {
    color: #b58a3c !important;
}

.nota.theme-light .sb-lock {
    display: inline-flex;
    align-items: center;
    color: #b58a3c;
}

/* ── Reorder arrows on notebook + section rows ──
   Sit before the other actions and reveal on hover like them, but a touch
   quieter — they're used less often than edit/delete. */
.sb-move {
    color: var(--n-text-4) !important;
}

    .sb-move:hover {
        color: var(--n-accent-text) !important;
        background: var(--n-surface-hover) !important;
    }

/* Rows now carry up to 6 controls; keep them tight so titles keep their room.
   IMPORTANT: do NOT set `display` here — nota-layout.css uses
   `.sb-nb-actions { display:none }` + `.sb-nb-row:hover { display:flex }` to
   reveal the buttons on hover. Setting display here forced them permanently
   visible and crushed the notebook titles to "Ch…". Style only the spacing. */
.sb-nb-row:hover .sb-nb-actions {
    align-items: center;
    gap: 1px;
}

.sb-sec:hover .sb-move {
    width: 18px;
    margin-right: 0;
}

/* ── Keep titles readable when the hover actions appear ──
   Six buttons is a lot for a narrow sidebar. Let the title shrink
   gracefully with an ellipsis rather than squeezing to two characters,
   and keep the button cluster from growing. */
.sb-nb-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-nb-row:hover .sb-nb-actions {
    flex: 0 0 auto;
}

    .sb-nb-row:hover .sb-nb-actions .sb-act {
        width: 20px;
        height: 20px;
    }