/* Global Selection Toolbar Shared Styles */
.selection-toolbar {
    display: none;
    position: fixed;
    bottom: var(--sp-5);
    left: calc(50% + 130px);
    transform: translateX(-50%);
    background: var(--nav-surface);
    color: var(--nav-text);
    border-radius: var(--radius-card);
    box-shadow: var(--sh-2);
    z-index: 1000;
    /* Standard row metrics: --sp-2 vertical (the table-cell pad) keeps the bar at
       table/row height, not header height. Sections are spaced by the flex gap. */
    padding: var(--sp-2) var(--sp-4);
    align-items: center;
    gap: var(--sp-3);
    transition: var(--transition);
}
.main.no-sidebar .selection-toolbar {
    left: 50%;
}
.selection-toolbar.active {
    display: flex;
    align-items: center;
    animation: slideUp 0.3s ease;
}
.selection-count {
    /* Inverted coding, like a checked checkbox: raised surface box, accent border +
       accent number (not an accent fill). Standard minimal control radius — not the
       larger card radius, which read as too round for a small counter. */
    background: var(--surface-raised);
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-control);
    font-size: var(--fs-1);
    font-weight: var(--fw-700);
}
.padded-selection-toolbar {
    padding: var(--sp-2) var(--sp-4);
}
.selection-toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.selection-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

/* Generalised vertical section divider — a thin full-height bar between logical
   groups in a toolbar (count | permissions | date | actions | back). Spacing is
   owned by the parent flex gap; the bar itself just stretches edge-to-edge. */
.toolbar-divider {
    flex: 0 0 auto;
    align-self: stretch;
    width: 1px;
    background: color-mix(in srgb, var(--nav-text) 22%, transparent);
}

/* Confirm-morph mirrors the in-row action cell: confirm + cancel sit flush
   edge-to-edge (gap 0) so the two segments read as one connected control. Buttons
   keep the STANDARD square --field-h icon-button size (same as every other control
   height) — only the corner radius is dropped so the segments join cleanly. The
   left spacer reserves one icon-slot so state-1 and state-2 are equal width and the
   centre-anchored bar never resizes (cancel lands where the trigger was). */
.selection-toolbar .actions-wrapper .state-1-wrapper,
.selection-toolbar .actions-wrapper .state-2-wrapper { gap: 0; }
.selection-toolbar .btn-icon { border-radius: 0; }
/* The selection toolbar sits on the themeable nav surface (--nav-surface), so all
   text/affordances are expressed in nav tokens (--nav-text) + --border to stay legible
   whether branding makes that surface light or dark. */
.selection-toolbar .btn-ghost { color: var(--nav-text); }
.selection-toolbar .btn-ghost:hover { background: color-mix(in srgb, var(--nav-text) 12%, transparent); color: var(--nav-text); }

/* Bulk-edit controls reuse the SAME row components (perm checkboxes + calendar)
   on the dark toolbar — only the labels/affordances are lightened for contrast.
   The checkbox box itself is already light (--surface-raised), so it stays as-is. */
.selection-toolbar .perm-group { gap: var(--sp-3); }
.selection-toolbar .perm-group svg.icon { color: var(--nav-text); }
.selection-toolbar .calendar-trigger {
    color: var(--nav-text);
    background: color-mix(in srgb, var(--nav-text) 12%, transparent);
    border-color: var(--border);
}
.selection-toolbar .calendar-trigger .icon { color: var(--nav-text); }