/* Selection bar + selectable photo grid (album edit mode, album add screen).
   See templates/components/selection_bar.html. */

.selection-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.selection-count {
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.selection-bar-spacer {
    flex: 1;
}

/* While selecting, a click on a card selects it rather than opening the photo —
   the cursor has to say so. */
.photo-grid.is-selecting .photo-card {
    cursor: pointer;
}

/* The checkbox is drawn, not an <input>: the tiles are clickable, and a real
   control inside them would fight the tile's own click handling.

   ONE pseudo-element — the box is the element, the tick is its centred content.
   (Drawing the tick as a second, absolutely-positioned pseudo-element means its
   offsets have to agree with the box's inset, border width and radius, so any
   theme that changes --border-width nudges it off-centre.)

   Two hosts, because they are the same affordance:
     - the photo grid, while it is in selection mode (album edit / album add);
     - the faces grid, which is ALWAYS selecting — every face in a cluster starts
       selected and you untick the ones that are not that person. Its size
       overrides live in faces/index.css, next to the smaller face tiles. */
.photo-grid.is-selecting .photo-card .photo-thumb::after,
.face::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    box-shadow: var(--shadow-sm);
    /* The glyph, sized and centred by the flexbox above — no offsets to tune. */
    color: var(--color-on-accent);
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1;
}

.photo-grid.is-selecting .photo-card.is-selected .photo-thumb::after,
.face.selected::after {
    content: "✓";
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.photo-grid.is-selecting .photo-card.is-selected {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}