/* Email Inbox (2026-06-03) — cool-only palette, light/dark aware. Reuses
   dashboard theme tokens (--bg-card, --text-*, --accent, --border). */

.email-root { display: flex; flex-direction: column; gap: 14px; }
.email-loading { color: var(--text-muted, #8a93a3); font-size: 14px; padding: 24px 0; }

/* Toolbar */
.email-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.email-acc-chip {
  padding: 7px 13px; border-radius: 10px; font-size: 13px; cursor: pointer;
  background: var(--bg-card, rgba(255,255,255,0.04)); border: 1px solid var(--border, rgba(22, 58, 107,0.18));
  color: var(--text-secondary, #c7ccd4); transition: all .15s; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.email-acc-chip:hover { border-color: var(--accent, #163a6b); }
.email-acc-chip.is-active { background: var(--accent, #163a6b); color: #fff; border-color: var(--accent, #163a6b); }

.email-btn {
  padding: 8px 15px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: linear-gradient(135deg, var(--accent, #163a6b), #2f7bb0); color: #fff; border: none;
  transition: transform .12s, box-shadow .12s;
}
.email-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(22, 58, 107,0.3); }
.email-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.email-btn--ghost {
  background: var(--bg-card, rgba(255,255,255,0.04)); color: var(--text-secondary, #c7ccd4);
  border: 1px solid var(--border, rgba(22, 58, 107,0.18));
}
.email-btn--ghost:hover { border-color: var(--accent, #163a6b); box-shadow: none; }
.email-btn--ghost.is-active { background: var(--accent, #163a6b); color: #fff; }

/* Category chips */
.email-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.email-cat {
  padding: 5px 11px; border-radius: 999px; font-size: 12px; cursor: pointer;
  background: transparent; border: 1px solid var(--border, rgba(22, 58, 107,0.18));
  color: var(--text-muted, #8a93a3); transition: all .14s;
}
.email-cat:hover { color: var(--text-primary, #e8ebf0); border-color: var(--accent, #163a6b); }
.email-cat.is-active { background: rgba(22, 58, 107,0.14); color: var(--accent, #2e5aa0); border-color: var(--accent, #163a6b); }

/* Layout: list + detail */
.email-grid { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 14px; align-items: start; }
@media (max-width: 880px) { .email-grid { grid-template-columns: 1fr; } }

.email-list { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; }
.email-row {
  padding: 11px 13px; border-radius: 12px; cursor: pointer;
  background: var(--bg-card, rgba(255,255,255,0.03)); border: 1px solid var(--border, rgba(20,30,48,0.10));
  transition: border-color .14s, background .14s;
}
.email-row:hover { border-color: var(--accent, #163a6b); }
.email-row.is-selected { border-color: var(--accent, #163a6b); background: rgba(22, 58, 107,0.08); }
.email-row.is-unread { border-left: 3px solid var(--accent, #163a6b); }
.email-row__top { display: flex; justify-content: space-between; gap: 8px; }
.email-row__from { font-weight: 700; font-size: 13px; color: var(--text-primary, #e8ebf0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-row__date { font-size: 11px; color: var(--text-muted, #8a93a3); flex-shrink: 0; }
.email-row__subj { font-size: 13px; color: var(--text-secondary, #c7ccd4); margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-row__meta { display: flex; gap: 6px; }
.email-badge {
  font-size: 10.5px; padding: 2px 7px; border-radius: 6px;
  background: rgba(22, 58, 107,0.12); color: var(--accent, #2e5aa0);
}
.email-badge--draft { background: rgba(124,200,176,0.14); color: #4caf7d; }

/* Detail */
.email-detail {
  background: var(--bg-card, rgba(255,255,255,0.03)); border: 1px solid var(--border, rgba(20,30,48,0.10));
  border-radius: 14px; padding: 16px 18px; min-height: 320px;
}
.email-detail__subj { font-size: 17px; font-weight: 700; color: var(--text-primary, #e8ebf0); }
.email-detail__from { font-size: 12px; color: var(--text-muted, #8a93a3); margin: 4px 0 8px; }
.email-detail__badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.email-ex-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.email-ex { font-size: 11.5px; color: var(--text-secondary, #c7ccd4); background: rgba(22, 58, 107,0.07); padding: 2px 8px; border-radius: 6px; }
.email-ex b { color: var(--text-muted, #8a93a3); font-weight: 600; }
.email-detail__body {
  margin: 14px 0; padding: 14px 0; border-top: 1px solid var(--border, rgba(20,30,48,0.10));
  border-bottom: 1px solid var(--border, rgba(20,30,48,0.10)); font-size: 14px; line-height: 1.6;
  color: var(--text-secondary, #c7ccd4); max-height: 40vh; overflow-y: auto;
}
.email-detail__body pre { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; margin: 0; }

.email-reply__label { font-size: 12px; font-weight: 600; color: var(--text-muted, #8a93a3); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.email-reply__text {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 10px; resize: vertical;
  background: var(--bg-input, rgba(255,255,255,0.05)); border: 1px solid var(--border, rgba(22, 58, 107,0.2));
  color: var(--text-primary, #e8ebf0); font-family: inherit; font-size: 13.5px; line-height: 1.5; outline: none;
}
.email-reply__text:focus { border-color: var(--accent, #163a6b); }
.email-reply__actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* Split-screen */
.email-split { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow-x: auto; }
.email-split__col { background: rgba(22, 58, 107,0.03); border: 1px solid var(--border, rgba(20,30,48,0.10)); border-radius: 12px; padding: 10px; }
.email-split__head { font-size: 12px; font-weight: 700; color: var(--text-primary, #e8ebf0); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Empty */
.email-empty { padding: 28px 20px; text-align: center; color: var(--text-muted, #8a93a3); }
.email-empty h3 { color: var(--text-primary, #e8ebf0); margin: 0 0 8px; font-size: 16px; }
.email-empty p { font-size: 13px; line-height: 1.6; max-width: 420px; margin: 0 auto 14px; }