/* -- Account cards ------------------------------------ */
/* -- Accounts (Instantly-style) ----------------------- */
.acct-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 0 20px; flex-wrap: wrap;
}
.acct-search {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--k-border); border-radius: var(--k-radius-sm);
  padding: 8px 16px; background: var(--k-surface); min-width: 180px; max-width: 240px;
  transition: border-color var(--k-dur-fast) var(--k-ease);
}
.acct-search:focus-within { border-color: var(--k-primary); }
.acct-search .material-symbols-outlined { font-size: 18px; color: var(--k-text-tertiary); }
.acct-search input {
  flex: 1; border: none; background: none; outline: none;
  font: var(--k-text-body); color: var(--k-text); min-width: 80px;
}
.acct-search input::placeholder { color: var(--k-text-tertiary); }
.acct-toolbar-right { display: flex; align-items: center; gap: 10px; }
.acct-status-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border: 1px solid var(--k-border); border-radius: var(--k-radius-sm);
  background: var(--k-surface); font: var(--k-text-body); color: var(--k-text);
  cursor: pointer; transition: all var(--k-dur-fast) var(--k-ease);
}
.acct-status-btn:hover { border-color: var(--k-primary); }
.acct-status-btn .material-symbols-outlined { font-size: 18px; }
.acct-dropdown-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  background: var(--k-surface); border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md); box-shadow: var(--k-shadow-lg);
  min-width: 160px; overflow: hidden;
}
.acct-dropdown-item {
  padding: 10px 16px; font: var(--k-text-body); cursor: pointer;
  transition: background var(--k-dur-fast) var(--k-ease);
}
.acct-dropdown-item:hover { background: var(--k-primary-light); }
.acct-dropdown-item.active { color: var(--k-primary); font-weight: 600; }
.acct-icon-btn {
  width: 36px; height: 36px; border: 1.5px solid var(--k-border);
  border-radius: var(--k-radius-sm); background: var(--k-surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--k-dur-fast) var(--k-ease);
}
.acct-icon-btn:hover { border-color: var(--k-primary); }
.acct-icon-btn .material-symbols-outlined { font-size: 20px; color: var(--k-text-secondary); }
.acct-bolt-btn {
  background: var(--k-primary); border-color: var(--k-primary); border-radius: 10px;
}
.acct-bolt-btn .material-symbols-outlined { color: #fff; }
.acct-bolt-btn:hover { background: var(--k-primary-hover); border-color: var(--k-primary-hover); }
.acct-add-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 22px; border: none; border-radius: var(--k-radius-md);
  background: var(--k-primary); color: #fff;
  font: var(--k-text-label); font-weight: 600;
  cursor: pointer; transition: all var(--k-dur-fast) var(--k-ease);
}
.acct-add-btn:hover { background: var(--k-primary-hover); box-shadow: var(--k-shadow-primary); }

/* Column header */
.acct-col-header {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 24px 8px 16px;
  font-size: 11px; font-weight: 600;
  color: var(--k-text-secondary); text-transform: uppercase;
  letter-spacing: 0.44px;
}
.acct-col-header .acct-cb { margin-right: 8px; }
.acct-col-header .material-symbols-outlined { font-size: 16px; }
.acct-col-email { flex: 2; }
.acct-col-sent { flex: 1; }
.acct-col-bounces { flex: 0.9; }
.acct-col-health { flex: 1; }
.acct-col-smtp { flex: 1.4; }
.acct-col-actions { width: 80px; flex-shrink: 0; }

/* Sent today mini bar */
.acct-sent-cell { display: flex; flex-direction: column; gap: 3px; }
.acct-sent-bar-wrap { width: 48px; height: 3px; background: #e5e7eb; border-radius: 2px; overflow: hidden; }
.acct-sent-bar-fill { height: 100%; background: var(--k-primary); border-radius: 2px; transition: width 0.3s; }
.acct-sent-bar-fill.near-limit { background: var(--k-warning); }

/* Bounces column */
.acct-bounce-cell { display: flex; align-items: center; }
.acct-bounce-ok   { color: #6b7280; }
.acct-bounce-med  { color: var(--k-amber-dark); font-weight: 600; }
.acct-bounce-warn { color: var(--k-error-mid); font-weight: 600; }
.acct-bounce-paused {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--k-error-mid); font-size: 12px; font-weight: 600;
}
.acct-bounce-paused .material-symbols-outlined { font-size: 14px; }

/* SMTP column */
.acct-smtp-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-smtp-host { font-size: 12px; color: var(--k-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.acct-smtp-ok   { font-size: 11px; color: var(--k-success-mid); }
.acct-smtp-err  { display: inline-flex; align-items: center; gap: 2px; color: var(--k-error-mid); font-size: 11px; }
.acct-smtp-err .material-symbols-outlined { font-size: 13px; }

/* Account rows — card-style (Instantly.ai spec) */
.acct-list { display: flex; flex-direction: column; gap: 12px; }
.acct-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px 14px 16px;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md);
  cursor: pointer;
  min-height: 72px;
  box-shadow: var(--k-shadow-md);
  transition: all var(--k-dur-normal) var(--k-ease);
}
.acct-row:hover {
  border-color: var(--k-primary);
  box-shadow: var(--k-shadow-lg);
}
.acct-row .acct-cb { margin-right: 8px; flex-shrink: 0; }
.acct-cb {
  width: 18px; height: 18px;
  accent-color: var(--k-primary);
  cursor: pointer;
}
.acct-email-text {
  font: var(--k-text-body); font-weight: 600; color: var(--k-text);
}
.acct-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
  font: var(--k-text-small); color: var(--k-text-tertiary);
}
.acct-tag .material-symbols-outlined { font-size: 14px; }
.acct-cell-value { font: var(--k-text-body); color: var(--k-text); font-variant-numeric: tabular-nums; }

/* acct-cell-val alias — tabular nums for alignment */
.acct-cell-val { font: var(--k-text-body); color: var(--k-text); font-variant-numeric: tabular-nums; }

/* Three-dot menu — Instantly spec: circular */
.acct-menu-wrap { position: relative; width: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.acct-dots-btn {
  width: 36px; height: 36px; border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  transition: background var(--k-dur-fast) var(--k-ease);
}
.acct-dots-btn:hover { background: var(--k-surface-sunken); }
.acct-dots-btn .material-symbols-outlined { font-size: 20px; color: var(--k-text-secondary); }
.acct-context-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 200;
  background: var(--k-surface); border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md); box-shadow: var(--k-shadow-lg);
  min-width: 180px; overflow: hidden;
}
.acct-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font: var(--k-text-body); cursor: pointer;
  transition: background var(--k-dur-fast) var(--k-ease);
}
.acct-menu-item:hover { background: var(--k-primary-light); }
.acct-menu-item .material-symbols-outlined { font-size: 18px; color: var(--k-text-secondary); }
.acct-menu-item.danger { color: var(--k-error); }
.acct-menu-item.danger .material-symbols-outlined { color: var(--k-error); }

/* Status badges — Instantly spec: dot + label */
.acct-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--k-radius-xs);
  font-size: 13px; font-weight: 500;
}
.acct-badge-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.acct-badge-active  { background: rgba(0,180,0,.12);   color: #0a6e0a; }
.acct-badge-active  .acct-badge-dot { background: #15b335; }
.acct-badge-warming { background: rgba(37,99,235,.12);  color: var(--k-primary-hover); }
.acct-badge-warming .acct-badge-dot { background: var(--k-primary); }
.acct-badge-paused  { background: rgba(202,138,4,.14);  color: #7a5200; }
.acct-badge-paused  .acct-badge-dot { background: var(--k-amber-dark); }
.acct-badge-error   { background: rgba(220,38,38,.12);  color: var(--k-error); }
.acct-badge-error   .acct-badge-dot { background: var(--k-error); }
.acct-badge-sending-error { background: rgba(245,158,11,.1); color: var(--k-amber-dark); }
.acct-badge-sending-error .acct-badge-dot { background: var(--k-warning); }
.acct-badge-neutral { background: var(--k-surface-sunken); color: var(--k-text-secondary); }
.acct-badge-neutral .acct-badge-dot { background: var(--k-text-tertiary); }

/* Tags row — Instantly spec: no pill bg, just icon + gray text */
.acct-tags-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.acct-tag-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 13px; color: rgba(139,137,137,0.64);
}
.acct-tag-pill .material-symbols-outlined { font-size: 14px; }

/* Email row inside cell — Instantly: email + badge on SAME LINE, tags below */
.acct-email-row { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Checkbox wrapper */
.acct-cb-wrap { display: flex; align-items: center; flex-shrink: 0; }

/* Dropdown wrap (position:relative wrapper for filter) */
.acct-dropdown-wrap { position: relative; }

/* Bulk action bar */
.acct-bulk-bar {
  display: none; align-items: center; gap: 8px;
  padding: 10px 20px; margin-bottom: 12px;
  background: var(--k-primary); border-radius: var(--k-radius-md);
  box-shadow: var(--k-shadow-md);
}
.acct-bulk-bar.visible { display: flex; }
.acct-bulk-count {
  font: var(--k-text-label); color: #fff; font-weight: 700; margin-right: 4px;
}
.acct-bulk-btn {
  padding: 6px 14px; border: 1.5px solid rgba(255,255,255,.5);
  border-radius: var(--k-radius-sm); background: transparent; color: #fff;
  font: var(--k-text-small); font-weight: 600; cursor: pointer;
  transition: background var(--k-dur-fast) var(--k-ease);
}
.acct-bulk-btn:hover { background: rgba(255,255,255,.15); }
.acct-bulk-btn.danger { border-color: rgba(255,100,100,.6); color: #ffaaaa; }
.acct-bulk-btn.danger:hover { background: rgba(220,38,38,.2); }
.acct-bulk-clear {
  margin-left: auto; width: 28px; height: 28px; border: none; background: transparent;
  color: #fff; font-size: 20px; cursor: pointer; border-radius: var(--k-radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--k-dur-fast) var(--k-ease);
  font-family: inherit;
}
.acct-bulk-clear:hover { background: rgba(255,255,255,.2); }

/* Health score column header */
.acct-col-health-hdr { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
.acct-sort-arrow { font-size: 14px !important; vertical-align: middle; margin-left: 2px; opacity: 0.5; transition: opacity var(--k-dur-fast); }
.acct-sort-arrow.active { opacity: 1; }
.acct-info-btn {
  width: 20px; height: 20px; border: none; background: none; padding: 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.acct-info-btn .material-symbols-outlined { font-size: 16px; color: var(--k-text-tertiary); }

/* Tooltip */
.acct-tooltip {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #222; color: #fff; font: var(--k-text-xs); border-radius: var(--k-radius-sm);
  padding: 5px 10px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--k-dur-fast) var(--k-ease); z-index: 300;
}
.acct-tooltip.show { opacity: 1; }

/* Health value text */
.acct-health-val  { font: var(--k-text-body); font-weight: 700; font-variant-numeric: tabular-nums; }
.acct-health-good { color: #1a7f1a; }
.acct-health-med  { color: #8a6200; }
.acct-health-bad  { color: var(--k-error); }

/* Mini health bar (inline in row) */
.acct-health-mini {
  height: 4px; width: 60px; border-radius: 2px; background: var(--k-border);
  overflow: hidden; margin-top: 4px;
}
.acct-health-fill { height: 100%; border-radius: 2px; transition: width .3s ease; }
.acct-health-fill-good { background: #1a7f1a; }
.acct-health-fill-med  { background: var(--k-amber-dark); }
.acct-health-fill-bad  { background: var(--k-error); }

/* Row actions */
.acct-row-actions {
  display: flex; align-items: center; gap: 4px;
  width: 80px; flex-shrink: 0; justify-content: flex-end;
}
.acct-view-btn {
  display: none;
}

/* Selected row */
.acct-row.selected {
  border-color: var(--k-primary);
  background: var(--k-primary-light);
}

/* Status dot (in dropdown) */
.acct-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.dot-active  { background: #1a7f1a; }
.dot-paused  { background: var(--k-amber-dark); }
.dot-error   { background: var(--k-error); }

/* Footer */
.acct-footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px 4px; }
.acct-footer-count { font: var(--k-text-small); color: var(--k-text-tertiary); }
.acct-load-more-btn {
  padding: 8px 20px; border: 1.5px solid var(--k-border); border-radius: var(--k-radius-md);
  background: var(--k-surface); font: var(--k-text-label); color: var(--k-text);
  cursor: pointer; transition: all var(--k-dur-fast) var(--k-ease);
}
.acct-load-more-btn:hover { border-color: var(--k-primary); color: var(--k-primary); }

/* Detail slide-out panel — Instantly-style tabbed design */
.acct-detail-panel {
  position: fixed;
  top: var(--k-topbar-h, 76px); right: 0;
  width: 50vw; min-width: 480px;
  height: calc(100vh - var(--k-topbar-h, 76px));
  background: var(--k-surface);
  border-left: 1px solid var(--k-border);
  box-shadow: var(--k-shadow-lg);
  transform: translateX(100%);
  transition: transform .25s var(--k-ease);
  z-index: 50; overflow-y: auto;
  display: flex; flex-direction: column;
}
.acct-detail-panel.open { transform: translateX(0); }