/* Groups, selecting chargers and bulk commands (groups.js, chargers.js). */

/* the groups line on a charger tile */
.tile-body .tags-line { color: var(--gold-deep); font-weight: 600; margin-top: 2px; }

/* a charger's groups in its Settings */
.grp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.grp-tag { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 6px 0 14px; border-radius: 999px; background: var(--gold-tint); color: var(--gold-deep); font: 600 13px var(--body); }
.grp-tag:not(:has(button)) { padding-right: 14px; }
.grp-tag button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.grp-tag button:hover { background: rgba(201, 150, 42, .16); }
.grp-tag button .i { font-size: 13px; }
.grp-add { display: flex; gap: 8px; }
.grp-add input { flex: 1; min-width: 0; font: 400 16px var(--body); color: var(--ink); min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface2); outline: 0; }
.grp-add input:focus { border-color: var(--gold-deep); background: #fff; }

/* group chips on the Chargers page */
.tag-chips .chip .i { font-size: 12px; }

/* selecting chargers */
.tiles.picking .tile { cursor: pointer; }
.tiles.picking .tile:hover { transform: none; }
.tile .pick-box { position: absolute; top: 10px; right: 10px; z-index: 1; width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1.5px rgba(27, 27, 31, .22); color: transparent; }
.tile .pick-box .i { font-size: 16px; stroke-width: 3; }
.tile.picked { box-shadow: 0 0 0 2px var(--gold-deep), 0 10px 30px -12px rgba(232, 184, 74, .5); }
.tile.picked .pick-box { background: var(--gold-deep); box-shadow: none; color: #fff; }
.tiles.picking .tile-pic .kw { display: none; }
.pick-bar { position: fixed; z-index: 55; left: 50%; bottom: 22px; transform: translateX(-50%); width: max-content; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 32px);
  padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, .96); box-shadow: 0 0 0 1px var(--line), 0 16px 34px -10px rgba(27, 27, 31, .3); }
.pick-bar b { font: 600 14px var(--head); white-space: nowrap; }
/* room under the last tiles for the bar */
.page:has(.pick-bar:not([hidden])) { padding-bottom: 220px; }
.pick-bar .btn { min-height: 40px; }
.pick-bar .btn.primary { min-height: 40px; font-size: 14px; }
@media (max-width: 760px) {
  .pick-bar { left: 16px; right: 16px; transform: none; width: auto; max-width: none; flex-wrap: wrap; bottom: calc(80px + env(safe-area-inset-bottom)); border-radius: 22px; padding: 10px; gap: 6px; }
  .pick-bar b { width: 100%; text-align: center; }
  .pick-bar .btn { flex: 1 1 auto; padding: 0 10px; }
}

/* the bulk sheet */
.bulk-pick { cursor: pointer; }
.bulk-pick input { width: 16px; height: 16px; flex: none; margin: 0; accent-color: var(--gold-deep); }
.bulk-pick:has(input:checked) { background: var(--gold-tint); }
.bulk-pick + .bulk-pick:has(input:checked) { border-radius: 0; }
.bulk-bar { height: 8px; border-radius: 999px; background: var(--surface2); overflow: hidden; margin-bottom: 12px; }
.bulk-bar i { display: block; height: 100%; background: var(--gold-deep); border-radius: inherit; transition: width .4s; }