/* v0.1.26 selection bar, row menu, docked filters, rating report.
   Phone sheet stays below 1024. Tablet layouts start at 768. */

#bulkBar .action-btn,
#bulkBar select,
#bulkMoreMenu .action-btn,
#bulkMoreMenu select,
#selectAllMatch,
.channel-link,
.row-menu-extra .action-btn,
.rating-report button,
.tap-tip {
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
  font-size: 14px;
}

#bulkBar {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  box-sizing: border-box;
}
#bulkBar .bulk-buttons,
.bulk-stage-label,
#bulkBar select,
#bulkMoreMenu {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.bulk-stage-label {
  flex-wrap: wrap;
}
#bulkBar select#bulkSetStage.bulk-chip {
  width: min(100%, 240px);
  max-width: 100%;
  field-sizing: fixed;
}
.bulk-stage-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}
.bulk-section {
  margin: 8px 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bulk-danger-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
#bulkDelete {
  color: var(--b16-bad, var(--danger-soft-text));
  border-color: var(--b16-bad, var(--danger-line));
}
#bulkMoreMenu {
  min-width: min(280px, calc(100vw - 16px));
  max-height: min(70vh, 520px);
  overflow: auto;
}
.channel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.channel-link {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  height: auto;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.card-thumb-btn,
#contactsContainer.list-view .list-thumb-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  font-size: 0;
}
.card-thumb-btn::after,
#contactsContainer.list-view .list-thumb-btn::after {
  content: "\22EF";
  font-size: 22px;
  line-height: 1;
  color: inherit;
}
.card-footer .card-notes-btn,
.card-footer .card-not-a-fit,
.card-footer .card-flag-toggles,
.card-footer .b16-zoom,
.card-footer .row-menu-extra {
  display: none;
}
.card-footer.is-open {
  position: relative;
  z-index: 4;
}
.card-footer.is-open .card-notes-btn,
.card-footer.is-open .card-not-a-fit,
.card-footer.is-open .card-flag-toggles,
.card-footer.is-open .b16-zoom,
.card-footer.is-open .row-menu-extra {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}
.card-footer.is-open .action-btn,
.card-footer.is-open .card-notes-btn,
.card-footer.is-open .card-not-a-fit,
.card-footer.is-open .b16-zoom,
.card-footer.is-open .otw-check-label,
#contactsContainer.list-view .list-row-actions .action-btn,
#contactsContainer.list-view .list-row-actions .b16-zoom,
#contactsContainer.list-view .list-row-actions .otw-check-label {
  min-height: 44px;
  min-width: 44px;
  font-size: 14px;
  box-sizing: border-box;
}
.card-notes-text {
  display: inline;
}
.card-quick-rate,
.card-quick-notes {
  opacity: 1;
}

#contactsContainer.list-view .list-row-actions {
  display: none;
}
#contactsContainer.list-view .contact-list-item.show-actions .list-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 4;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

@media (min-width: 1024px) {
  body.filters-docked {
    overflow-x: hidden;
  }
  body.filters-docked .app-container {
    padding-right: min(400px, 40vw);
  }
  body.filters-docked .filters-drawer {
    inset: 0 0 0 auto;
    width: min(400px, 40vw);
    background: transparent;
    pointer-events: none;
  }
  body.filters-docked .filters-drawer-backdrop {
    display: none;
  }
  body.filters-docked .filters-drawer-sheet {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    box-shadow: none;
  }
}

.rating-report {
  position: fixed;
  z-index: 260;
  top: 72px;
  right: 16px;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - 96px);
  overflow: auto;
  padding: 16px;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.rating-report[hidden] {
  display: none !important;
}
body.filters-docked .rating-report {
  right: calc(min(400px, 40vw) + 16px);
}
.rating-report h2 {
  margin: 0 0 8px;
  font-size: 18px;
}
.rating-report p {
  margin: 0 0 12px;
  font-size: 14px;
}
.rating-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 6px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.rating-bar-fill {
  height: 12px;
  min-width: 2px;
  background: var(--text);
  border-radius: 4px;
}
.rating-bar.is-on {
  outline: 2px solid var(--text);
}
.tap-tip {
  position: fixed;
  z-index: 1400;
  max-width: min(280px, calc(100vw - 16px));
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
}
.tap-tip[hidden] {
  display: none !important;
}

/* The bar's chip rule sets display, which beats the UA [hidden] style. */
#selectAllMatch[hidden] {
  display: none !important;
}
/* The phone tab bar (z 900) sits over the bottom of the selection bar
   (z 180), so More and Delete could not be tapped. Hide it while people are
   selected, as it already hides for dialogs. */
body.has-bulk .nav16-tabbar {
  display: none !important;
}
/* Anchor More to the bar, not the button, so it never runs off the right. */
#bulkBar .bulk-more {
  position: static;
}
#bulkBar .bulk-more-menu {
  left: 12px;
  right: auto;
  width: min(640px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
}
/* Short landscape phones: the bar is most of the screen, so open More from
   the top of the screen instead of above the bar. */
@media (max-height: 480px) {
  #bulkBar .bulk-more-menu {
    position: fixed;
    top: 8px;
    bottom: auto;
    max-height: calc(100vh - 16px);
  }
}