/* Outreach - Custom Styles */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Smooth horizontal pan on touch devices when table scrolls */
.table-wrap {
  -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar for tables */
.table-wrap::-webkit-scrollbar {
  height: 6px;
}
.table-wrap::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 4px;
}
.table-wrap::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 4px;
}
.table-wrap::-webkit-scrollbar-thumb:hover {
  background: #a3a3a3;
}

/* Table row hover */
.monk-table tbody tr:hover {
  background-color: rgb(251, 248, 245); /* primary-50 approx */
}

/* Campaign filters: intrinsic width per select; row wraps — no horizontal filter strip scroll */
#table-controls select {
  flex-shrink: 0;
}

/* Campaign results: ~15px between column contents (7.5px padding each side, collapsed borders) */
table.campaign-results-table {
  border-collapse: collapse;
}

table.campaign-results-table thead th,
table.campaign-results-table tbody td {
  padding-left: 10px;
  padding-right: 10px;
}

/* Column % widths sum to 100% so the grid fills the card (no dead right margin) */
table.campaign-results-table col:nth-child(1) {
  width: 3%;
}
table.campaign-results-table col:nth-child(2) {
  width: 5.5%;
}
table.campaign-results-table col:nth-child(3) {
  width: 23.5%;
}
table.campaign-results-table col:nth-child(4) {
  width: 8%;
}
table.campaign-results-table col:nth-child(5) {
  width: 10%;
}
table.campaign-results-table col:nth-child(6) {
  width: 6.5%;
}
table.campaign-results-table col:nth-child(7) {
  width: 12%;
}
table.campaign-results-table col:nth-child(8) {
  width: 18%;
}
table.campaign-results-table col:nth-child(9) {
  width: 13.5%;
}

table.campaign-results-table tbody td {
  min-width: 0;
  vertical-align: top;
}

/* Headers: same vertical alignment and type; body cells match column padding */
table.campaign-results-table thead th.campaign-th {
  vertical-align: middle;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(115 115 115);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.25;
  overflow: hidden;
}
table.campaign-results-table thead th.campaign-th-left {
  text-align: left;
}
table.campaign-results-table thead th.campaign-th-center {
  text-align: center;
}
table.campaign-results-table thead th.campaign-th-select {
  text-align: center;
}
table.campaign-results-table thead th.campaign-th-star {
  text-align: center;
}

/* Gutters: same padding thead + tbody so labels line up with cell content */
table.campaign-results-table thead th:nth-child(1),
table.campaign-results-table tbody td:nth-child(1) {
  padding-right: 14px;
  text-align: center;
  vertical-align: middle;
}
table.campaign-results-table thead th:nth-child(2),
table.campaign-results-table tbody td:nth-child(2) {
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
  vertical-align: middle;
}
table.campaign-results-table thead th:nth-child(3),
table.campaign-results-table tbody td:nth-child(3) {
  padding-left: 12px;
  vertical-align: middle;
}
table.campaign-results-table tbody td:nth-child(3) {
  vertical-align: top;
}

/* Claimed: extra width (colgroup) + matching thead/tbody right gutter so sort glyphs sit beside "CLAIMED"
   and checkmarks center in the same box as the title (not the full cell). */
table.campaign-results-table thead th:nth-child(5),
table.campaign-results-table tbody td:nth-child(5) {
  padding-right: 1.5rem;
}

/* Sort arrows out of flow so LABEL + hidden glyphs don't shift text-align / centering vs tbody */
table.campaign-results-table thead th[data-sort] {
  position: relative;
}
table.campaign-results-table thead th[data-sort] .sort-arrow {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.12s ease;
  font-size: 0.65rem;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

/* Star: narrow column — flex keeps label + arrow side by side without overlap */
table.campaign-results-table thead th[data-sort="starred"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}
table.campaign-results-table thead th[data-sort="starred"] .sort-arrow {
  position: static;
  transform: none;
  flex-shrink: 0;
}

/* Claimed: table-cell + padding gutter (above); arrow absolute in that gutter — title centers with tbody icons */
table.campaign-results-table thead th[data-sort="claimed"] .sort-arrow {
  right: 0.5rem;
}
table.campaign-results-table thead th[data-sort]:hover .sort-arrow {
  opacity: 0.45;
}
table.campaign-results-table thead th[data-sort].sort-column-active {
  color: rgb(23 23 23);
  font-weight: 600;
}
table.campaign-results-table thead th[data-sort].sort-column-active .sort-arrow {
  opacity: 1;
}

/* Email column header help icon — overflow:visible so its tooltip can escape the th */
table.campaign-results-table thead th.campaign-th-email {
  overflow: visible;
}
.email-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  cursor: help;
  vertical-align: middle;
  color: rgb(163 163 163);
  outline: none;
}
.email-help:hover,
.email-help:focus {
  color: rgb(82 82 82);
}
.email-help-icon {
  width: 14px;
  height: 14px;
  display: block;
}
.email-help-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: none;
  width: 320px;
  max-width: 90vw;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgb(229 229 229);
  border-radius: 8px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.15), 0 2px 6px -2px rgba(0, 0, 0, 0.08);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.45;
  color: rgb(64 64 64);
  white-space: normal;
}
.email-help:hover .email-help-tooltip,
.email-help:focus .email-help-tooltip,
.email-help:focus-within .email-help-tooltip {
  display: block;
}
.email-help-title {
  display: block;
  font-weight: 600;
  font-size: 11px;
  color: rgb(23 23 23);
  margin-bottom: 6px;
}
.email-help-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
}
.email-help-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.4;
}
.email-help-desc {
  flex: 1;
  color: rgb(82 82 82);
}

/* Pulse to draw attention to the Check Deliverability button when unverified emails exist */
@keyframes verify-pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0);    }
}
.verify-attention {
  animation: verify-pulse-ring 1.8s ease-out infinite;
  border-radius: 6px;
}

/* Checkbox styling */
.monk-checkbox {
  accent-color: #a6653c;
}

/* Transition for sidebar */
#sidebar {
  transition: transform 200ms ease-in-out;
}

/* Google Places Autocomplete dropdown */
.pac-container {
  font-family: 'Inter', system-ui, sans-serif;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
  z-index: 9999;
}
.pac-item {
  padding: 8px 12px;
  font-size: 13px;
  color: #404040;
  cursor: pointer;
  border-top: 1px solid #f5f5f5;
}
.pac-item:first-child {
  border-top: none;
}
.pac-item:hover,
.pac-item-selected {
  background-color: #fdf6f0;
}
.pac-item-query {
  font-size: 13px;
  color: #171717;
}
.pac-icon {
  display: none;
}
.pac-logo::after {
  display: none;
}

/* Print: hide sidebar */
@media print {
  #sidebar,
  #sidebar-overlay,
  .no-print {
    display: none !important;
  }
  main {
    margin-left: 0 !important;
  }
}