/* 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); }

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

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