/* v2 polish for the Gmail-style email inbox. Scoped to
   body[data-theme="v2"] #page-email-inbox. The v1 styling lives in
   assets/css/email-inbox.css and is built around a set of --ei-*
   custom properties. The cleanest v2 strategy is to override those
   properties under v2 so the entire palette retones automatically,
   then patch a few hard-coded gradients and radii. */

body[data-theme="v2"] #page-email-inbox {
  /* Re-bind the page-local palette to v2 tokens. */
  --ei-bg:          var(--bg-deep);
  --ei-bg-elev:     var(--panel-solid);
  --ei-edge:        var(--line);
  --ei-edge2:       var(--line-strong);
  --ei-text:        var(--text-strong);
  --ei-muted:       var(--text-secondary);
  --ei-dim:         var(--muted);
  --ei-soft:        var(--text);
  --ei-accent:      var(--blue);
  --ei-accent2:     var(--blue-2);
  --ei-accent-deep: #3982cf;
  /* Label/category tones stay — they're identity colours, not surface tones. */
}

/* ──────────────────────────────────────────────────────────────
   Page chrome
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] #page-email-inbox .ei-shell {
  border: var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

body[data-theme="v2"] #page-email-inbox .ei-folder {
  background: var(--panel);
  border-right: var(--border-subtle);
  padding: var(--space-4) var(--space-3);
}

body[data-theme="v2"] #page-email-inbox .ei-list {
  background: var(--bg-soft);
  border-right: var(--border-subtle);
}

body[data-theme="v2"] #page-email-inbox .ei-read {
  background: var(--bg-deep);
}

/* ──────────────────────────────────────────────────────────────
   Compose button — pick up the v2 primary gradient
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] #page-email-inbox .ei-compose-btn {
  background: linear-gradient(135deg, #4a9eff, #6cb8ff 55%, #93dcff);
  color: #04122a;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--weight-strong);
  letter-spacing: .01em;
  box-shadow: var(--shadow-pop);
  margin-bottom: var(--space-5);
}

body[data-theme="v2"] #page-email-inbox .ei-compose-btn:hover {
  filter: brightness(1.04);
}

/* ──────────────────────────────────────────────────────────────
   Folder rows
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] #page-email-inbox .ei-section {
  margin-bottom: var(--space-5);
}

body[data-theme="v2"] #page-email-inbox .ei-section-h {
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--weight-strong);
  padding: 0 var(--space-2);
  margin-bottom: var(--space-2);
}

body[data-theme="v2"] #page-email-inbox .ei-folder-row,
body[data-theme="v2"] #page-email-inbox .ei-label-row {
  border-radius: var(--radius-xs);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"] #page-email-inbox .ei-folder-row:hover,
body[data-theme="v2"] #page-email-inbox .ei-label-row:hover {
  background: var(--panel-2);
  color: var(--text);
}

body[data-theme="v2"] #page-email-inbox .ei-folder-row.active {
  background: linear-gradient(90deg, rgba(108, 184, 255, .14), rgba(108, 184, 255, .04));
  color: var(--text-strong);
  font-weight: var(--weight-strong);
}

body[data-theme="v2"] #page-email-inbox .ei-label-row.active {
  background: var(--panel-3);
  color: var(--text-strong);
}

body[data-theme="v2"] #page-email-inbox .ei-count {
  background: rgba(108, 184, 255, .16);
  border: 1px solid rgba(108, 184, 255, .22);
  color: var(--blue-2);
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  padding: var(--space-1) var(--space-2);
}

body[data-theme="v2"] #page-email-inbox .ei-folder-row.has-unread .ei-count {
  background: rgba(245, 199, 115, .16);
  border-color: rgba(245, 199, 115, .30);
  color: var(--warning-soft);
}

/* ──────────────────────────────────────────────────────────────
   List header + search
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] #page-email-inbox .ei-list-head {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-subtle);
  gap: var(--space-3);
}

body[data-theme="v2"] #page-email-inbox .ei-list-head h2 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  letter-spacing: -.005em;
}

body[data-theme="v2"] #page-email-inbox .ei-search {
  background: var(--panel-2);
  border: var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
}

body[data-theme="v2"] #page-email-inbox .ei-search input {
  color: var(--text);
  font-size: var(--text-sm);
}

body[data-theme="v2"] #page-email-inbox .ei-search input::placeholder {
  color: var(--muted);
}

body[data-theme="v2"] #page-email-inbox .ei-iconbtn {
  background: var(--panel);
  border: var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"] #page-email-inbox .ei-iconbtn:hover {
  background: var(--panel-3);
  color: var(--text);
}

/* ──────────────────────────────────────────────────────────────
   Chips (filter pills above the thread list)
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] #page-email-inbox .ei-chip {
  background: var(--panel-2);
  border: var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

body[data-theme="v2"] #page-email-inbox .ei-chip.active {
  background: rgba(108, 184, 255, .16);
  border-color: rgba(108, 184, 255, .32);
  color: var(--blue-2);
}

/* ──────────────────────────────────────────────────────────────
   Threads
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] #page-email-inbox .ei-thread {
  border-bottom: 1px solid var(--line);
  padding: var(--space-3) var(--space-4);
  gap: var(--space-2);
  transition: background var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"] #page-email-inbox .ei-thread:hover {
  background: var(--panel);
}

body[data-theme="v2"] #page-email-inbox .ei-thread.unread {
  background: rgba(108, 184, 255, .04);
}

body[data-theme="v2"] #page-email-inbox .ei-thread.unread::before {
  background: var(--blue);
}

body[data-theme="v2"] #page-email-inbox .ei-thread.selected {
  background: rgba(108, 184, 255, .10);
}

/* ──────────────────────────────────────────────────────────────
   Filter row (compose recipient picker, composer form rows)
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] #page-email-inbox .ei-filter-row {
  background: var(--panel);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  gap: var(--space-3);
}

body[data-theme="v2"] #page-email-inbox .ei-filter-row .lhs {
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  color: var(--text);
}

body[data-theme="v2"] #page-email-inbox .ei-filter-row input,
body[data-theme="v2"] #page-email-inbox .ei-filter-row select {
  background: var(--bg-soft);
  border: var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
}

/* ──────────────────────────────────────────────────────────────
   Composer overlay
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] #page-email-inbox .ei-composer-overlay {
  background: rgba(2, 6, 16, .72);
  backdrop-filter: blur(8px);
}

/* ──────────────────────────────────────────────────────────────
   Empty state
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] #page-email-inbox .ei-empty {
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-8) var(--space-4);
}