/* 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;
    top: 32px;
    /* 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;
    background: var(--quindi-surface);
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
}

.tag-rail-cta {
    width: 100%;
    justify-content: center;
    margin-bottom: 4px;
}
.tag-rail-section { display: flex; flex-direction: column; gap: 2px; }
.tag-rail-divider {
    height: 1px;
    background: var(--quindi-border-soft);
    margin: 6px 4px;
}
.tag-rail-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    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: 22px; height: 22px;
    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);
}
.tag-row:hover { background: var(--quindi-surface-2); }
.tag-row.active { background: var(--accent-soft); }
.tag-row-main { flex: 1; }
.tag-row-action {
    width: 24px; height: 24px;
    background: transparent;
    border: none;
    color: var(--quindi-text-soft);
    cursor: pointer;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease;
    margin-right: 4px;
}
.tag-row:hover .tag-row-action,
.tag-row.active .tag-row-action { opacity: 1; }
.tag-row-action:hover { color: var(--accent); }

/* 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. */
.tag-row-eye {
    display: grid;
    place-items: center;
    margin-right: 0;
}
.tag-row.is-hidden .tag-row-eye { opacity: 1; }
.tag-row.is-hidden .tag-dot,
.tag-row.is-hidden .tag-name,
.tag-row.is-hidden .tag-count { opacity: 0.45; }

.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;
}
.tag-item:hover { background: var(--quindi-surface-2); }
.tag-item.active { background: var(--accent-soft); color: var(--quindi-text); font-weight: 500; }

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

.tag-name {
    flex: 1;
    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: dark pills 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: 999px;
    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 { 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: 999px;
    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;
    margin-bottom: 16px;
}
.dashboard-toolbar .search-input { 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: 999px;
    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 it
   full-width above the documents and drop the sticky behaviour so it scrolls
   away with the page instead of pinning a tall column. */
@media (max-width: 920px) {
    .dashboard.with-rail,
    .dashboard-body.with-rail {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .tag-rail {
        position: static;
        max-height: none;
    }
}