/* Document folders — the "Sketchbook filesystem".
   The signature is the hand-drawn folder card: a sketched folder glyph tinted with
   the folder's colour whose lid lifts on hover, so the filesystem reads as cut from
   the same world as the Excalidraw canvas. Everything else stays quiet and glassy,
   consistent with the existing tokens. Names use the regular UI font for legibility —
   the sketch character lives in the folder glyph, not the text. */

/* ── Folder grid (subfolders inside the current folder) ─────────────────────── */
.folder-strip {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 12px;
}

/* ── Folder card (the signature element) ────────────────────────────────────── */
.folder-card {
    --folder-accent: var(--quindi-green);
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 14px;
    border-radius: var(--sketch-radius-a);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--folder-accent) 8%, transparent), transparent 60%),
        linear-gradient(180deg, var(--quindi-card-top), var(--quindi-card-bottom));
    border: var(--sketch-border-w) solid var(--sketch-border);
    box-shadow: var(--elev-1);
    cursor: pointer;
    text-align: left;
    color: var(--quindi-text);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
/* Alternate wobble + a whisper of tilt, so a row of folders looks laid out
   by hand rather than stamped; hover lifts and squares them up. */
.folder-strip .folder-card:nth-child(odd)  { transform: rotate(-0.25deg); }
.folder-strip .folder-card:nth-child(even) { transform: rotate(0.25deg); border-radius: var(--sketch-radius-b); }
.folder-strip .folder-card:nth-child(odd):hover,
.folder-strip .folder-card:nth-child(even):hover,
.folder-strip .folder-card:nth-child(odd):focus-visible,
.folder-strip .folder-card:nth-child(even):focus-visible { transform: translateY(-2px) rotate(0deg); }
.folder-card:hover,
.folder-card:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--folder-accent) 45%, var(--quindi-border));
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
    outline: none;
}
.folder-card:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--folder-accent) 60%, transparent); }

/* Drag-and-drop: a document (or folder) hovering over this card as a drop target. */
.folder-card.is-drop-target {
    border-color: var(--folder-accent);
    background: color-mix(in srgb, var(--folder-accent) 16%, var(--glass-bg-strong));
    transform: translateY(-2px) scale(1.01);
}
/* Scoped to beat the nth-child rest tilts: the drop target squares up. */
.folder-strip .folder-card.is-drop-target { transform: translateY(-2px) scale(1.01) rotate(0deg); }

/* The hand-drawn folder glyph. The lid is a separate group so it can lift on hover. */
.folder-card__glyph { flex: 0 0 auto; width: 44px; height: 40px; }
.folder-card__glyph svg { width: 100%; height: 100%; overflow: visible; display: block; }
.folder-glyph__body { fill: color-mix(in srgb, var(--folder-accent) 22%, transparent); }
.folder-glyph__stroke {
    fill: none;
    stroke: var(--folder-accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.folder-glyph__lid {
    fill: color-mix(in srgb, var(--folder-accent) 34%, transparent);
    stroke: var(--folder-accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: bottom center;
    transition: transform .2s cubic-bezier(.2, .8, .3, 1);
}
.folder-card:hover .folder-glyph__lid,
.folder-card:focus-visible .folder-glyph__lid,
.folder-card.is-drop-target .folder-glyph__lid {
    transform: translateY(-3px) rotate(-4deg);
}

.folder-card__body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.folder-card__name {
    /* Names use the regular UI font for legibility — the hand-drawn character lives in
       the folder glyph, not the label. */
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--quindi-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.folder-card__count { font-size: 11.5px; color: var(--quindi-text-soft); }

.folder-card__menu {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 7px; background: transparent;
    color: var(--quindi-text-soft); cursor: pointer;
    opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.folder-card:hover .folder-card__menu,
.folder-card:focus-within .folder-card__menu { opacity: 1; }
.folder-card__menu:hover { background: var(--quindi-surface-2); color: var(--quindi-text); }

/* ── Breadcrumb ─────────────────────────────────────────────────────────────── */
.folder-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
    margin: 0 0 14px; min-height: 30px;
}
.folder-crumb {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px; border-radius: var(--radius-sm);
    background: transparent; border: none; cursor: pointer;
    color: var(--quindi-text-soft); font-size: 13.5px;
    transition: background .15s ease, color .15s ease;
}
.folder-crumb:hover { background: var(--quindi-surface-2); color: var(--quindi-text); }
.folder-crumb.is-current { color: var(--quindi-text); cursor: default; }
.folder-crumb.is-current:hover { background: transparent; }
.folder-crumb.is-drop-target { background: var(--accent-soft); color: var(--quindi-text); box-shadow: inset 0 0 0 1px var(--accent); }
.folder-crumb-sep { color: var(--quindi-text-soft); opacity: .5; user-select: none; }
.folder-crumb-dot { width: 8px; height: 8px; border-radius: 3px; flex: 0 0 auto; }

/* ── Folder tree (left rail) ────────────────────────────────────────────────── */
.folder-tree { display: flex; flex-direction: column; gap: 1px; }
.folder-tree-row {
    display: flex; align-items: center; gap: 4px;
    width: 100%; padding: 5px 8px 5px 6px; border-radius: 9px;
    background: transparent; border: none; cursor: pointer;
    color: var(--quindi-text-soft); font-size: 13px;
    transition: background .12s ease, color .12s ease;
}
.folder-tree-row:hover { background: var(--quindi-surface-2); color: var(--quindi-text); }
.folder-tree-row.is-selected {
    background: var(--accent-soft);
    color: var(--quindi-text);
    border-radius: var(--sketch-radius-sm);
}
.folder-tree-row.is-drop-target { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--quindi-text); box-shadow: inset 0 0 0 1px var(--accent); }

.folder-tree-twisty {
    flex: 0 0 auto; width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--quindi-text-soft);
    cursor: pointer; border-radius: 4px; padding: 0;
    transition: transform .15s ease;
}
.folder-tree-twisty svg { width: 10px; height: 10px; }
.folder-tree-twisty.is-open { transform: rotate(90deg); }
.folder-tree-twisty.is-leaf { visibility: hidden; }

.folder-tree-ico { flex: 0 0 auto; width: 15px; height: 15px; color: var(--folder-accent, var(--quindi-text-soft)); display: inline-flex; }
.folder-tree-ico svg { width: 100%; height: 100%; }
.folder-tree-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.folder-tree-count { flex: 0 0 auto; font-size: 11px; color: var(--quindi-text-soft); font-variant-numeric: tabular-nums; }
.folder-tree-add {
    flex: 0 0 auto; width: 20px; height: 20px; border: none; background: transparent;
    color: var(--quindi-text-soft); cursor: pointer; border-radius: 5px; font-size: 15px; line-height: 1;
    opacity: 0; transition: opacity .12s ease, background .12s ease;
}
.folder-tree-row:hover .folder-tree-add { opacity: 1; }
.folder-tree-add:hover { background: var(--quindi-surface); color: var(--quindi-text); }
.folder-tree-empty { padding: 6px 10px; font-size: 12px; color: var(--quindi-text-soft); }

/* ── Move-to-folder popover (single-select destination picker) ──────────────── */
.folder-picker-backdrop { position: fixed; inset: 0; z-index: 60; }
.folder-picker-menu {
    position: absolute; z-index: 61; min-width: 230px; max-width: 300px;
    max-height: 340px; overflow-y: auto;
    margin-top: 6px; padding: 6px;
    background: var(--quindi-surface); border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md); box-shadow: var(--glass-shadow);
}
.folder-picker-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--quindi-text-soft); padding: 4px 8px 6px; }
.folder-picker-filter {
    width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 6px 9px;
    background: var(--quindi-bg); border: 1px solid var(--quindi-border);
    border-radius: 8px; color: var(--quindi-text); font-size: 13px;
}
.folder-picker-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 8px; border: none; background: transparent; border-radius: 8px;
    color: var(--quindi-text); font-size: 13px; cursor: pointer; text-align: left;
    transition: background .12s ease;
}
.folder-picker-item:hover { background: var(--quindi-surface-2); }
.folder-picker-item.is-current { color: var(--quindi-text-soft); cursor: default; }
.folder-picker-item.is-current:hover { background: transparent; }
.folder-picker-ico { flex: 0 0 auto; width: 15px; height: 15px; display: inline-flex; color: var(--folder-accent, var(--quindi-text-soft)); }
.folder-picker-ico svg { width: 100%; height: 100%; }
.folder-picker-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-picker-check { margin-left: auto; color: var(--accent); font-size: 12px; }
.folder-picker-indent { flex: 0 0 auto; }

/* ── Folder delete (two choices; the destructive one is gated on typing YES) ──── */
.folder-delete-opts { display: flex; flex-direction: column; gap: 10px; }
.folder-delete-opt {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 12px 14px; border-radius: var(--radius-md);
    border: 1px solid var(--quindi-border); background: var(--quindi-surface);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.folder-delete-opt:hover { border-color: var(--quindi-text-soft); }
.folder-delete-opt input[type="radio"] { margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.folder-delete-opt.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.folder-delete-opt.danger input[type="radio"] { accent-color: var(--quindi-red); }
.folder-delete-opt.danger.is-selected {
    border-color: var(--quindi-red);
    background: color-mix(in srgb, var(--quindi-red) 12%, var(--quindi-surface));
}
.folder-delete-opt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.folder-delete-opt-title { font-size: 13.5px; font-weight: 600; color: var(--quindi-text); }
.folder-delete-opt-desc { font-size: 12.5px; line-height: 1.45; color: var(--quindi-text-soft); }

.folder-delete-confirm-box {
    margin-top: 12px; padding: 11px 13px; border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--quindi-red) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--quindi-red) 30%, transparent);
}
.folder-delete-confirm-box label { display: block; font-size: 12.5px; color: var(--quindi-text); margin-bottom: 7px; }
.folder-delete-confirm-box code { background: var(--quindi-surface-2); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.folder-delete-confirm-box .search-input { width: 100%; box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
    .folder-card, .folder-glyph__lid, .folder-card__menu { transition: none; }
    .folder-card:hover { transform: none; }
    .folder-card:hover .folder-glyph__lid { transform: none; }
}