/* Folder rail + tag chips for the dashboard. Uses the shared design tokens
   (--quindi-surface, --quindi-border, --accent) defined in tokens.css. */

/* Layout container for sidebar + main content — used to live on the .dashboard
   element itself, but the brand bar moved out as its own row above so the rail
   no longer competes with the page title for the top-left corner. */
.dashboard.with-rail,
.dashboard-body.with-rail {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    /* NO align-items: start qui — il default 'stretch' fa stirare la cella
       del rail all'altezza della gallery, dando a `position: sticky` lo
       spazio in cui ancorarsi. Con align-items:start la cella collassava
       all'altezza del rail box, sticky non aveva range di travel e la rail
       scrollava via insieme alla pagina. */
}

.tag-rail {
    position: sticky;
    /* Clears the floating .page-topbar (sticky at top:12px, ~62px tall). */
    top: 88px;
    /* Il box visuale non eredita lo stretch della cella: align-self:start
       lo riporta a height intrinseca (capped da max-height), cosi' niente
       riquadro vuoto in fondo quando la gallery e' molto piu' alta. */
    align-self: start;
    /* Recessed well: one tonal step BELOW the page surface, so the rail reads
       as carved into the page while the gallery cards float above it.
       Dashed pencil border + wobbly corners keep it inside the sketchbook. */
    background: var(--quindi-surface-0);
    border: var(--sketch-border-w) dashed var(--sketch-border);
    border-radius: var(--sketch-radius-b);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
}

.tag-rail-cta {
    width: 100%;
    justify-content: center;
    margin-bottom: 4px;
}
.tag-rail-mobile-head { display: none; }
.tag-rail-section { display: flex; flex-direction: column; gap: 2px; }
.tag-rail-divider {
    height: 0;
    border-top: var(--sketch-border-w) dashed var(--quindi-border);
    margin: 6px 4px;
}
.tag-rail-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 8px;
    font-family: var(--font-hand);
    font-size: 16px;
    color: var(--quindi-text-soft);
}
.tag-rail-empty {
    padding: 6px 8px;
    font-size: 12px;
    color: var(--quindi-text-soft);
    font-style: italic;
}
.tag-add {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-sm);
    color: var(--quindi-text-soft);
    cursor: pointer;
    line-height: 1;
}
.tag-add:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.tag-row {
    display: flex; align-items: center;
    border-radius: var(--radius-sm);
    position: relative;
}
.tag-row:hover { background: var(--quindi-surface-2); }
.tag-row.active { background: var(--accent-soft); }
/* min-width:0 lets the button shrink below its content so a long tag name
   truncates instead of pushing the count + actions out of the row. */
.tag-row-main { flex: 1; min-width: 0; }
/* Actions overlay the row's right edge (absolute), so at rest they reserve no space and
   the tag count sits flush right — aligned with the All documents / Untagged counts. */
.tag-row-action {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: transparent;
    border: none;
    color: var(--quindi-text-soft);
    cursor: pointer;
    border-radius: var(--radius-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, color 0.12s ease;
}
/* Occhio per-tag: nasconde dalla gallery i documenti che portano quel tag.
   Compare on-hover come il bottone Edit, ma resta sempre visibile quando il
   tag e' nascosto — e' l'unico indizio del perche' mancano dei documenti.
   Sta a sinistra del bottone Edit (…). */
.tag-row-eye { right: 36px; }
.tag-row:hover .tag-row-action { opacity: 1; pointer-events: auto; }
.tag-row-action:hover { color: var(--accent); }
.tag-row.is-hidden .tag-row-eye { opacity: 1; pointer-events: auto; }
.tag-row.is-hidden .tag-dot,
.tag-row.is-hidden .tag-name,
.tag-row.is-hidden .tag-count { opacity: 0.45; }

/* Shift the count left only when the actions are shown (hover, or the always-on eye when hidden),
   so they never sit on top of it. A merely-selected row keeps its count flush right. */
.tag-row:hover .tag-row-main,
.tag-row.is-hidden .tag-row-main { padding-right: 64px; }

.tag-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: none;
    color: var(--quindi-text);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 13px;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease, padding 0.12s ease;
}
.tag-item:hover { background: var(--quindi-surface-2); }
/* Highlighter pick: the active tag reads as marked with the green marker,
   wobbly edges and all. */
.tag-item.active {
    background: var(--accent-soft);
    color: var(--quindi-text);
    font-weight: 500;
    border-radius: var(--sketch-radius-sm);
}

.tag-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--quindi-text-soft);
    flex-shrink: 0;
}
.tag-dot.all { background: var(--accent); }
.tag-dot.uncategorized {
    background: transparent;
    border: 1px dashed var(--quindi-text-soft);
}
/* Icon in the dot column for the Shared by me / Shared with me entries. The 14px glyph
   centres in a 10px box (matching the dots) so the labels stay aligned. */
.tag-rail-ico {
    width: 10px;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--quindi-text-soft);
}
.tag-item.active .tag-rail-ico { color: var(--quindi-text); }

.tag-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tag-count {
    font-size: 11px;
    color: var(--quindi-text-soft);
    font-variant-numeric: tabular-nums;
}

/* Color picker in the create/edit tag modal. */
.tag-color-row {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 4px;
}
.tag-color-swatch {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    color: var(--quindi-text-soft);
    background: var(--quindi-surface-2);
    display: grid; place-items: center;
    font-size: 14px;
    transition: transform 0.12s ease, border-color 0.12s ease;
}
.tag-color-swatch:hover { transform: scale(1.08); }
.tag-color-swatch.active {
    border-color: var(--quindi-text);
    box-shadow: 0 0 0 2px var(--quindi-bg);
}
.tag-color-swatch.none {
    background: transparent;
    border: 1px dashed var(--quindi-border);
}

/* Tag chips: compact labels with subtle border. */
.tag-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: var(--quindi-surface-2);
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--quindi-text-soft);
    transition: border-color 0.12s ease, color 0.12s ease;
    line-height: 1.6;
    cursor: default;
}
.tag-chip.removable,
.tag-chip.is-clickable { cursor: pointer; }
.tag-chip:hover { border-color: var(--accent); color: var(--quindi-text); }
.tag-chip-label { white-space: nowrap; }
.tag-chip-remove {
    background: none; border: none;
    color: inherit; opacity: 0.5;
    font-size: 14px; line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}
.tag-chip-remove:hover { opacity: 1; color: var(--quindi-red); }

.tag-chip-row {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin-top: 6px;
}

/* Tag input — chip strip + bare text field that grows to fill remaining width. */
.tag-input {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 8px 10px;
    background: var(--quindi-surface-2);
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-sm);
    align-items: center;
    min-height: 38px;
}
.tag-input:focus-within { border-color: var(--accent); }
.tag-input-field {
    flex: 1; min-width: 80px;
    background: transparent; border: none; outline: none;
    color: var(--quindi-text);
    font: inherit; font-size: 13px;
    padding: 2px 0;
}

/* TagFilterPill in the dashboard header. */
.tag-filter-pill { position: relative; }
.tag-filter-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-sm);
    color: var(--quindi-text-soft);
    cursor: pointer;
    font: inherit; font-size: 13px;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.tag-filter-trigger:hover { border-color: var(--accent); color: var(--accent); }
.tag-filter-badge {
    background: var(--accent);
    color: #050505;
    border-radius: var(--radius-sm);
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    min-width: 18px;
    text-align: center;
}
.tag-filter-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 220px;
    background: var(--quindi-surface);
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);
    padding: 6px;
}
.tag-filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}
.tag-filter-list li {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
}
.tag-filter-list li:hover { background: var(--quindi-surface-2); }
.tag-filter-list li.selected { color: var(--accent); }
.tag-filter-tick {
    display: inline-block;
    width: 14px;
    color: var(--accent);
    text-align: center;
    font-size: 12px;
}
.tag-filter-empty {
    padding: 12px;
    font-size: 12px;
    color: var(--quindi-text-soft);
    font-style: italic;
}
.tag-filter-footer {
    border-top: 1px solid var(--quindi-border-soft);
    padding: 4px 8px;
    text-align: right;
}

/* MoveToFolder mini-menu. */
.tag-picker-backdrop {
    position: fixed; inset: 0;
    z-index: 60;
    background: transparent;
}
.tag-picker-menu {
    position: absolute;
    right: 8px; top: 44px;
    z-index: 61;
    min-width: 200px;
    background: var(--quindi-surface);
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);
    padding: 6px;
}
.tag-picker-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--quindi-text-soft);
    padding: 6px 8px;
}
.tag-picker-filter {
    width: calc(100% - 16px);
    margin: 0 8px 6px;
    padding: 6px 8px;
    background: var(--quindi-surface-2);
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-sm);
    color: var(--quindi-text);
    font-size: 12px;
    font-family: inherit;
    outline: none;
}
.tag-picker-filter:focus {
    border-color: var(--accent);
}
.tag-picker-divider {
    height: 1px;
    background: var(--quindi-border-soft);
    margin: 4px 0;
}
.tag-picker-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: transparent; border: none;
    color: var(--quindi-text);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 13px;
    text-align: left;
    transition: background 0.12s ease;
}
.tag-picker-item:hover { background: var(--quindi-surface-2); }
.tag-picker-item.active { background: var(--accent-soft); }
.tag-picker-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1;
}

/* Doc card extensions: extra row di tag chips colorati. */
.doc-card.has-meta { height: auto; min-height: 104px; padding-bottom: 14px; }
.doc-card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }

/* Dashboard search bar inside the main column. */
.dashboard-toolbar {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.dashboard-toolbar .search-box {
    flex: 1 1 240px;
    min-width: 180px;
    max-width: 320px;
}

/* Pillola "N hidden" accanto alla search: ricorda che l'occhio sta escludendo
   dei documenti; il click riaccende tutti i tag nascosti. */
.hidden-tags-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px dashed var(--quindi-border);
    border-radius: var(--radius-sm);
    color: var(--quindi-text-soft);
    font: inherit; font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.hidden-tags-pill:hover { border-color: var(--accent); color: var(--quindi-text); }

/* Card action: third button (move) sits to the left of rename + delete. */
.card-action-move { right: 84px; }

/* Below 920px the fixed 240px folder rail would squeeze the gallery; stack the
   layout in one column with the DOCUMENTS (and the search box) first — the rail
   is navigation and would otherwise push the content a full screen below the
   fold on phones. Flex instead of grid so `order` can flip the source order. */
@media (max-width: 920px) {
    .dashboard.with-rail,
    .dashboard-body.with-rail {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .tag-rail {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 102;
        width: min(320px, calc(100vw - 40px));
        max-height: none;
        box-sizing: border-box;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        padding: calc(14px + var(--safe-top)) 14px calc(14px + var(--safe-bottom));
        transform: translateX(-105%);
        transition: transform 180ms cubic-bezier(.2, .7, .2, 1);
        box-shadow: var(--elev-3);
        overscroll-behavior: contain;
    }
    .tag-rail.is-mobile-open { transform: translateX(0); }
    .tag-rail-mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        margin-bottom: 4px;
    }
    .tag-rail-mobile-head strong { font-size: 16px; }
    .tag-rail-close {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid var(--quindi-border);
        border-radius: 999px;
        background: var(--quindi-surface-2);
        color: var(--quindi-text);
        font-size: 22px;
        cursor: pointer;
    }
    .tag-rail-backdrop {
        position: fixed;
        inset: 0;
        z-index: 101;
        border: 0;
        background: rgba(0, 0, 0, .62);
        backdrop-filter: blur(2px);
    }
    .tag-item { min-height: 44px; }
    .tag-add,
    .tag-row-action { width: 40px; height: 40px; }
    .tag-row-eye { right: 48px; }
    .tag-row:hover .tag-row-main,
    .tag-row.is-hidden .tag-row-main { padding-right: 92px; }
}

.dashboard-browse-btn {
    display: none;
    min-height: 40px;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-sm);
    background: var(--quindi-surface-2);
    color: var(--quindi-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
@media (max-width: 920px) {
    .dashboard-browse-btn { display: inline-flex; min-height: 44px; }
    .dashboard-toolbar .search-box { max-width: none; }
}
}