/* Quiet Gmail-style bulk-selection layer for the email list. */
.email-page .email-list.bulk-mode-active {
  --email-bulk-bar-bg: rgb(250, 250, 248) !important;
  --email-bulk-row-bg: rgba(168, 197, 184, 0.08) !important;
  --email-bulk-row-hover-bg: rgba(168, 197, 184, 0.12) !important;
  --email-bulk-row-outline: rgba(0, 0, 0, 0.08) !important;
  --email-bulk-control-bg: transparent !important;
  --email-bulk-check-border: rgba(0, 0, 0, 0.18) !important;
  --email-bulk-check-border-hover: rgba(0, 0, 0, 0.38) !important;
  --email-bulk-check-active: #6f6258 !important;
  --email-bulk-muted-text: #6b7280 !important;
}

[data-theme="dark"] .email-page .email-list.bulk-mode-active {
  --email-bulk-bar-bg: rgba(255, 255, 255, 0.04) !important;
  --email-bulk-row-bg: rgba(168, 197, 184, 0.12) !important;
  --email-bulk-row-hover-bg: rgba(168, 197, 184, 0.16) !important;
  --email-bulk-row-outline: rgba(255, 255, 255, 0.08) !important;
  --email-bulk-control-bg: transparent !important;
  --email-bulk-check-border: rgba(255, 255, 255, 0.14) !important;
  --email-bulk-check-border-hover: rgba(255, 255, 255, 0.30) !important;
  --email-bulk-check-active: #d7d1c8 !important;
  --email-bulk-muted-text: #9ca3af !important;
}

/* ─── Heading: natural height in all states ─── */
.email-page .email-list .email-list-header,
.email-page .email-list.bulk-mode-active .email-list-header {
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  background: #FFFEFB !important;
  border-bottom: 1px solid rgba(58,47,38,0.06) !important;
  padding: 20px 22px 14px !important;
  box-shadow: none !important;
}

.email-page .email-list .email-list-heading {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.email-page .email-list .email-list-title-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.email-page .email-list .email-list-title {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: var(--font-size-2xl) !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.22px !important;
  color: #3A2F26 !important;
  margin: 0 !important;
}

.email-page .email-list .cl-refresh {
  margin-left: auto !important;
}

.email-page .email-list .cl-refresh__label {
  font-size: var(--font-size-xs) !important;
  font-weight: 500 !important;
  color: #9A8E82 !important;
}

.email-page .email-list .email-list-count {
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
  color: #9A8E82 !important;
}

.email-page .email-list .cl-refresh__btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #5C4D43 !important;
  border: none !important;
}

.email-page .email-list .cl-refresh__btn:hover {
  background: rgba(110,138,126,0.10) !important;
  color: #3A2F26 !important;
}

.email-page .email-list .cl-refresh__btn:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: 2px !important;
}

/* ─── Bulk bar: slim contextual strip ─── */
.email-page .email-list.bulk-mode-active {
  overflow: visible !important;
}

.email-page .email-list > .email-bulk-bar.email-bulk-bar {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  column-gap: 12px !important;
  row-gap: 8px !important;
  padding: 10px 20px !important;
  background: linear-gradient(0deg, rgba(168,197,184,0.10), rgba(168,197,184,0.18)), #FBF8F2 !important;
  border-top: 1px solid rgba(110,138,126,0.30) !important;
  border-bottom: 1px solid rgba(110,138,126,0.20) !important;
  box-shadow: 0 6px 16px -13px rgba(58,47,38,0.45) !important;
  overflow: visible !important;
  min-height: 56px !important;
  max-height: none !important;
  height: auto !important;
  flex-wrap: nowrap !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-spacer {
  display: block !important;
  flex: 1 !important;
  visibility: visible !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-close,
.email-page .email-list > .email-bulk-bar .email-bulk-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 0 !important;
  max-height: 36px !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #5C4D43 !important;
  border: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* Calm reading order: clear · count · select-all · (spacer) · actions */
.email-page .email-list > .email-bulk-bar .email-bulk-close { order: 0 !important; }
.email-page .email-list > .email-bulk-bar .email-bulk-spacer { order: 3 !important; }
.email-page .email-list > .email-bulk-bar .email-bulk-actions {
  order: 4 !important;
  column-gap: 4px !important;
  align-items: center !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-close:hover,
.email-page .email-list > .email-bulk-bar .email-bulk-close:focus-visible {
  background: rgba(58,47,38,0.08) !important;
  color: #3A2F26 !important;
}
.email-page .email-list > .email-bulk-bar .email-bulk-icon:not(.email-bulk-icon-danger):hover,
.email-page .email-list > .email-bulk-bar .email-bulk-icon:not(.email-bulk-icon-danger):focus-visible {
  background: rgba(168,197,184,0.26) !important;
  color: #3A2F26 !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-icon.email-bulk-icon-danger {
  background: transparent !important;
  color: #5C4D43 !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-icon.email-bulk-icon-danger:hover,
.email-page .email-list > .email-bulk-bar .email-bulk-icon.email-bulk-icon-danger:focus-visible {
  background: rgba(166,89,75,0.10) !important;
  color: #A6594B !important;
}

/* Select-all reads as a quiet sage text link, not a checkbox cluster.
   The native checkbox stays in the DOM (focusable, screen-reader selectable)
   but is visually collapsed — the label text is the affordance. */
.email-page .email-list > .email-bulk-bar .email-bulk-toggle {
  order: 2 !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 36px !important;
  min-height: 0 !important;
  max-height: 36px !important;
  column-gap: 8px !important;
  padding: 0 11px !important;
  border-radius: 10px !important;
  color: #3A2F26 !important;
  font-size: var(--email-fs-body-sm) !important;
  line-height: 1.1 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}
.email-page .email-list > .email-bulk-bar .email-bulk-toggle:hover {
  background: rgba(168,197,184,0.24) !important;
}
.email-page .email-list > .email-bulk-bar .email-bulk-toggle input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.email-page .email-list > .email-bulk-bar .email-bulk-toggle-text {
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
  color: #4A7A68 !important;
  line-height: 1.1 !important;
}
.email-page .email-list > .email-bulk-bar .email-bulk-toggle:hover .email-bulk-toggle-text,
.email-page .email-list > .email-bulk-bar .email-bulk-toggle:focus-within .email-bulk-toggle-text {
  color: #3A6B57 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Selection count is the primary label — a sage-green pill (the focal point). */
.email-page .email-list > .email-bulk-bar .email-bulk-count {
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 28px !important;
  padding: 0 13px !important;
  margin: 0 2px !important;
  background: #6E8A7E !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 1px 2px rgba(58,47,38,0.20) !important;
  white-space: nowrap !important;
}

/* ─── Overflow menu: non-clipped warm popover ─── */
.email-page .email-list > .email-bulk-bar .email-bulk-overflow-wrapper {
  position: relative !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-overflow-menu {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  min-width: 240px !important;
  padding: 6px !important;
  border: 1px solid rgba(58,47,38,0.10) !important;
  border-radius: 14px !important;
  background: #FFFEFB !important;
  box-shadow: 0 8px 24px rgba(58,47,38,0.10) !important;
  z-index: 100 !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-overflow-item {
  width: 100% !important;
  display: flex !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
  color: #3A2F26 !important;
  border: none !important;
  background: transparent !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-overflow-item svg {
  color: #5C4D43 !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-overflow-item:hover,
.email-page .email-list > .email-bulk-bar .email-bulk-overflow-item:focus-visible {
  background: rgba(110,138,126,0.10) !important;
}

/* ─── Dark mode: heading + bulk bar ─── */
[data-theme="dark"] .email-page .email-list .email-list-header,
[data-theme="dark"] .email-page .email-list.bulk-mode-active .email-list-header {
  background: var(--sk-bg-surface, #1a1a1a) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .email-page .email-list .email-list-title {
  color: var(--sk-text, #e8e2da) !important;
}

[data-theme="dark"] .email-page .email-list .cl-refresh__label,
[data-theme="dark"] .email-page .email-list .email-list-count {
  color: var(--sk-text-secondary, #9A8E82) !important;
}

[data-theme="dark"] .email-page .email-list .cl-refresh__btn {
  color: var(--sk-text-secondary, #9A8E82) !important;
}

[data-theme="dark"] .email-page .email-list .cl-refresh__btn:hover {
  background: rgba(110,138,126,0.14) !important;
  color: var(--sk-text, #e8e2da) !important;
}

[data-theme="dark"] .email-page .email-list > .email-bulk-bar.email-bulk-bar {
  background: rgba(255,255,255,0.04) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 6px 16px -13px rgba(0,0,0,0.55) !important;
}

[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-close,
[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-icon {
  color: var(--sk-text-secondary, #9A8E82) !important;
}

[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-close:hover,
[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-close:focus-visible,
[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-icon:not(.email-bulk-icon-danger):hover,
[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-icon:not(.email-bulk-icon-danger):focus-visible {
  background: rgba(110,138,126,0.14) !important;
  color: var(--sk-text, #e8e2da) !important;
}

[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-icon.email-bulk-icon-danger:hover,
[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-icon.email-bulk-icon-danger:focus-visible {
  background: rgba(166,89,75,0.14) !important;
  color: #D47B6B !important;
}

[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-toggle-text {
  color: #7AA892 !important;
}

/* Dark hover/focus must lighten (not the light-mode #3A6B57, which is ~2:1 on
   the dark bar) so the select-all link keeps WCAG-AA contrast on hover/focus. */
[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-toggle:hover .email-bulk-toggle-text,
[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-toggle:focus-within .email-bulk-toggle-text {
  color: #A8C5B8 !important;
}

/* Dark toggle hover: muted sage box (the light-mode box is too bright on dark). */
[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-toggle:hover {
  background: rgba(110,138,126,0.14) !important;
}

/* Selection count stays the green pill in dark mode too (good contrast on the
   dark bar) — no count override here, so the base pill applies. */

[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-overflow-menu {
  background: var(--color-card, #2a2a2a) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.30) !important;
}

[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-overflow-item {
  color: var(--sk-text, #e8e2da) !important;
}

[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-overflow-item svg {
  color: var(--sk-text-secondary, #9A8E82) !important;
}

[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-overflow-item:hover,
[data-theme="dark"] .email-page .email-list > .email-bulk-bar .email-bulk-overflow-item:focus-visible {
  background: rgba(110,138,126,0.14) !important;
}

/* ─── Mobile ─── */
@media (max-width: 767px) {
  .email-page .email-list .email-list-header,
  .email-page .email-list.bulk-mode-active .email-list-header {
    padding: 16px 16px 12px !important;
  }

  .email-page .email-list .email-list-title {
    font-size: var(--font-size-xl) !important;
  }

  .email-page .email-list > .email-bulk-bar.email-bulk-bar {
    flex-wrap: wrap !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .email-page .email-list > .email-bulk-bar .email-bulk-spacer {
    display: none !important;
  }

  .email-page .email-list > .email-bulk-bar .email-bulk-actions {
    display: grid !important;
    flex: 1 0 100% !important;
    grid-template-columns: repeat(3, minmax(44px, 1fr)) !important;
    gap: 4px !important;
  }

  .email-page .email-list > .email-bulk-bar .email-bulk-icon {
    width: 100% !important;
    min-width: 44px !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
  }
}

/* ─── Bulk-selected row star hide ─── */
.email-page .email-list .email-list-items.bulk-mode .email-message-item.bulk-selected .email-message-star,
.email-page .email-list .email-list-items.bulk-mode .email-dense-row.bulk-selected .email-message-star {
  display: none !important;
}

/* ─── Bulk checkbox styling ─── */
.email-page .email-list > .email-bulk-bar .email-bulk-toggle input::before,
.email-page .email-list .email-list-items.bulk-mode .email-message-item .email-row-controls .email-bulk-cb::before,
.email-page .email-list .email-list-items.bulk-mode .email-dense-row .email-row-controls .email-bulk-cb::before {
  border: 1.5px solid var(--email-bulk-check-border) !important;
  background: var(--email-bulk-control-bg) !important;
  background-color: var(--email-bulk-control-bg) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-toggle input:hover::before,
.email-page .email-list > .email-bulk-bar .email-bulk-toggle input:focus-visible::before,
.email-page .email-list .email-list-items.bulk-mode .email-message-item .email-row-controls .email-bulk-cb:hover::before,
.email-page .email-list .email-list-items.bulk-mode .email-message-item .email-row-controls .email-bulk-cb:focus-visible::before,
.email-page .email-list .email-list-items.bulk-mode .email-dense-row .email-row-controls .email-bulk-cb:hover::before,
.email-page .email-list .email-list-items.bulk-mode .email-dense-row .email-row-controls .email-bulk-cb:focus-visible::before {
  border-color: var(--email-bulk-check-border-hover) !important;
}

.email-page .email-list > .email-bulk-bar .email-bulk-toggle input:checked::before,
.email-page .email-list .email-list-items.bulk-mode .email-message-item .email-row-controls .email-bulk-cb:checked::before,
.email-page .email-list .email-list-items.bulk-mode .email-dense-row .email-row-controls .email-bulk-cb:checked::before,
.email-page .email-list > .email-bulk-bar.all-visible-selected .email-bulk-toggle input::before,
.email-page .email-list .email-list-items.bulk-mode .email-message-item.bulk-selected .email-row-controls .email-bulk-cb::before,
.email-page .email-list .email-list-items.bulk-mode .email-dense-row.bulk-selected .email-row-controls .email-bulk-cb::before {
  background: var(--email-bulk-check-active) !important;
  background-color: var(--email-bulk-check-active) !important;
  border-color: var(--email-bulk-check-active) !important;
}

/* ─── Bulk-selected row styling ─── */
.email-page .email-list .email-list-items.bulk-mode .email-message-item.bulk-selected,
.email-page .email-list .email-list-items.bulk-mode .email-dense-row.bulk-selected,
.email-page .email-app.is-reader-split .email-list .email-list-items.bulk-mode .email-message-item.bulk-selected:not(.selected),
.email-page .email-app.is-reader-split .email-list .email-list-items.bulk-mode .email-dense-row.bulk-selected:not(.selected) {
  background: var(--email-bulk-row-bg) !important;
  box-shadow: none !important;
}

.email-page .email-list .email-list-items.bulk-mode .email-message-item.bulk-selected:hover,
.email-page .email-list .email-list-items.bulk-mode .email-dense-row.bulk-selected:hover,
.email-page .email-app.is-reader-split .email-list .email-list-items.bulk-mode .email-message-item.bulk-selected:not(.selected):hover,
.email-page .email-app.is-reader-split .email-list .email-list-items.bulk-mode .email-dense-row.bulk-selected:not(.selected):hover {
  background: var(--email-bulk-row-hover-bg) !important;
  box-shadow: none !important;
}

.email-page .email-list .email-list-items.bulk-mode .email-message-item.selected.bulk-selected,
.email-page .email-list .email-list-items.bulk-mode .email-dense-row.selected.bulk-selected,
.email-page .email-app.is-reader-split .email-list .email-list-items.bulk-mode .email-message-item.selected.bulk-selected,
.email-page .email-app.is-reader-split .email-list .email-list-items.bulk-mode .email-dense-row.selected.bulk-selected {
  background: var(--email-bulk-row-bg) !important;
  box-shadow: none !important;
}