/* Mail Admin Console — styles matched to the Claude Design handoff */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #F6F7F9;
  font-family: 'Work Sans', sans-serif;
  color: #1A1D24;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #D8DBE0; border-radius: 8px; }
a { color: #4F46E5; }
a:hover { color: #4338CA; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

button { font-family: 'Work Sans', sans-serif; }
input, select, textarea { font-family: 'Work Sans', sans-serif; }

/* ---------- layout ---------- */
.app-shell { width: 100%; height: 100vh; overflow: hidden; background: #F6F7F9; display: flex; flex-direction: column; }
.layout { display: flex; width: 100%; height: 100vh; overflow: hidden; }
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.content { flex: 1; overflow-y: auto; padding: 28px; }

/* ---------- login ---------- */
.login-wrap {
  width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 20% 20%, #EEF0FF 0%, #F6F7F9 55%);
}
.login-card {
  width: 400px; background: #FFFFFF; border: 1px solid #E3E6EB; border-radius: 14px;
  padding: 36px; box-shadow: 0 20px 50px rgba(20,20,40,0.06);
}
.logo-mark {
  width: 44px; height: 44px; border-radius: 10px; background: #4F46E5; display: flex;
  align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px; margin-bottom: 18px;
}
.login-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.login-sub { font-size: 13px; color: #6B7280; margin-bottom: 24px; }
.login-error { color: #DC2626; font-size: 13px; margin-bottom: 10px; }
.demo-box { margin-top: 22px; padding-top: 18px; border-top: 1px solid #EEF0F3; }
.demo-label { font-size: 12px; color: #6B7280; margin-bottom: 8px; }
.demo-list { display: flex; flex-direction: column; gap: 6px; }
.demo-btn {
  text-align: left; background: #F6F7F9; border: 1px solid #EEF0F3; border-radius: 8px;
  padding: 8px 10px; font-size: 12px; cursor: pointer;
}

/* ---------- sidebar ---------- */
.sidebar {
  width: 240px; flex: 0 0 240px; background: #FFFFFF; border-right: 1px solid #E3E6EB;
  display: flex; flex-direction: column; padding: 20px 0;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px; padding: 0 20px 20px 20px;
  border-bottom: 1px solid #EEF0F3; margin-bottom: 12px;
}
.sidebar-brand .logo-sm {
  width: 34px; height: 34px; border-radius: 8px; background: #4F46E5; display: flex;
  align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 15px;
}
.sidebar-brand .brand-name { font-size: 14px; font-weight: 700; }
.sidebar-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.nav-btn {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 10px;
  background: transparent; color: #4B5160; border: none; border-radius: 8px;
  padding: 10px 12px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.nav-btn .dot { width: 6px; height: 6px; border-radius: 50%; background: #D8DBE0; display: inline-block; }
.nav-btn.active { background: #EEF0FF; color: #4F46E5; font-weight: 700; }
.nav-btn.active .dot { background: #4F46E5; }
.sidebar-foot { padding: 14px 20px 0 20px; border-top: 1px solid #EEF0F3; margin-top: 12px; }
.sidebar-foot .u-name { font-size: 13px; font-weight: 600; }
.sidebar-foot .u-role { font-size: 12px; color: #6B7280; margin-bottom: 10px; }
.logout-btn {
  width: 100%; background: #F6F7F9; border: 1px solid #E3E6EB; border-radius: 8px;
  padding: 8px; font-size: 12px; font-weight: 600; cursor: pointer; color: #DC2626;
}

/* ---------- topbar ---------- */
.topbar {
  height: 60px; flex: 0 0 60px; border-bottom: 1px solid #E3E6EB; background: #FFFFFF;
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
}
.topbar .route-title { font-size: 15px; font-weight: 700; }
.topbar .flow-hint { font-size: 12px; color: #6B7280; }

/* ---------- generic ---------- */
.card { background: #FFFFFF; border: 1px solid #E3E6EB; border-radius: 10px; }
.card.pad { padding: 22px; }
.section-title { font-size: 18px; font-weight: 700; }
.section-sub { font-size: 13px; color: #6B7280; }
.field-label { font-size: 13px; font-weight: 600; color: #4B5160; display: block; margin-bottom: 6px; }
.input, .select, .textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #D8DBE0; border-radius: 8px;
  padding: 10px 12px; font-size: 14px;
}
.textarea { resize: vertical; }
.btn-primary {
  background: #4F46E5; color: #fff; border: none; border-radius: 8px;
  padding: 10px 18px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.btn-secondary {
  background: #FFFFFF; color: #1A1D24; border: 1px solid #D8DBE0; border-radius: 8px;
  padding: 10px 18px; font-weight: 600; font-size: 13px; cursor: pointer;
}
.btn-link { background: none; border: none; color: #4F46E5; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-link.danger { color: #DC2626; }
.btn-link.muted { color: #6B7280; font-size: 12px; }
button:disabled { opacity: 0.6; cursor: default; }

/* ---------- tables ---------- */
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; padding: 10px 14px; font-size: 12px; color: #6B7280;
  text-transform: uppercase; border-bottom: 1px solid #E3E6EB; font-weight: 600;
}
.tbl th.center { text-align: center; padding: 10px 10px; text-transform: none; }
.tbl th.right { text-align: right; }
.tbl td { padding: 14px; font-size: 14px; border-bottom: 1px solid #EEF0F3; }
.tbl td.center { text-align: center; }
.tbl td.right { text-align: right; }
.tbl td .sub { font-size: 12px; color: #6B7280; font-weight: 400; }
.tbl td.muted { color: #4B5160; }
.tbl td.time { font-size: 13px; color: #6B7280; }
.tbl td.strong { font-weight: 600; }

.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill.green { background: #ECFDF3; color: #16A34A; }
.pill.red { background: #FEF2F2; color: #DC2626; }
.pill.amber { background: #FFF7ED; color: #D97706; }
.pill.gray { background: #F3F4F6; color: #4B5160; }
.pill.bold { font-weight: 700; padding: 5px 12px; }

/* ---------- dashboard ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #FFFFFF; border: 1px solid #E3E6EB; border-radius: 10px; padding: 18px; }
.stat-card .stat-label { font-size: 12px; color: #6B7280; margin-bottom: 6px; }
.stat-card .stat-value { font-size: 26px; font-weight: 800; }
.stat-card .stat-value.green { color: #16A34A; }
.stat-card .stat-value.indigo { color: #4F46E5; }
.stat-card .stat-value.small { font-size: 16px; font-weight: 700; }
.flow-card { background: #FFFFFF; border: 1px solid #E3E6EB; border-radius: 10px; padding: 22px; margin-bottom: 16px; }
.flow-title { font-size: 13px; font-weight: 700; color: #4B5160; margin-bottom: 16px; }
.flow-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flow-step { border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 600; }
.flow-step.indigo { background: #EEF0FF; color: #4F46E5; }
.flow-step.green { background: #ECFDF3; color: #16A34A; }
.flow-step.amber { background: #FFF7ED; color: #D97706; }
.flow-step.gray { background: #F3F4F6; color: #1A1D24; }
.flow-arrow { color: #9AA0AC; }

/* ---------- upload ---------- */
.dropzone {
  display: block; border: 2px dashed #D8DBE0; border-radius: 12px; padding: 32px;
  text-align: center; background: #FFFFFF; cursor: pointer; margin-bottom: 24px;
}
.dropzone .dz-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.dropzone .dz-sub { font-size: 12px; color: #6B7280; }
.dropzone input[type=file] { display: none; }
.dropzone.small { border-radius: 10px; padding: 26px; margin-bottom: 16px; }
.dropzone.small .dz-title { font-size: 13px; }
.attach-zone {
  display: block; border: 1px dashed #D8DBE0; border-radius: 8px; padding: 12px;
  text-align: center; cursor: pointer; margin-bottom: 8px; font-size: 12px; color: #6B7280;
}
.attach-zone input[type=file] { display: none; }

/* ---------- resume ---------- */
.resume-card {
  background: #FFFFFF; border: 1px solid #E3E6EB; border-radius: 10px; padding: 18px;
  margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.resume-file { font-size: 13px; font-weight: 700; }
.resume-parsing { font-size: 12px; color: #D97706; margin-top: 4px; }
.resume-line { font-size: 13px; color: #4B5160; margin-top: 6px; }
.resume-meta { font-size: 12px; color: #6B7280; margin-top: 4px; }
.skill-chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.skill-chip { background: #EEF0FF; color: #4F46E5; border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 600; }
.added-mark { font-size: 12px; color: #16A34A; font-weight: 600; }

/* ---------- composer ---------- */
.composer-grid { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }
.recip-list { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.recip-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; }
.recip-item:hover { background: #F6F7F9; }
.recip-item .r-name { font-size: 13px; font-weight: 600; }
.recip-item .r-email { font-size: 11px; color: #6B7280; }
.mini-btn {
  flex: 1; background: #F6F7F9; border: 1px solid #E3E6EB; border-radius: 6px;
  padding: 6px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.var-btn {
  background: #EEF0FF; color: #4F46E5; border: none; border-radius: 6px;
  padding: 4px 8px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.tmpl-chip {
  background: #F6F7F9; border: 1px solid #E3E6EB; border-radius: 8px;
  padding: 8px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.attach-chip {
  background: #F6F7F9; border: 1px solid #E3E6EB; border-radius: 6px; padding: 4px 10px;
  font-size: 12px; display: inline-flex; align-items: center; gap: 8px;
}
.attach-chip button { background: none; border: none; color: #DC2626; cursor: pointer; font-size: 12px; padding: 0; }
.composer-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid #EEF0F3; padding-top: 16px;
}

/* ---------- filters ---------- */
.filter-row { display: flex; gap: 8px; margin-bottom: 14px; }
.filter-btn {
  background: #FFFFFF; color: #1A1D24; border: 1px solid #D8DBE0; border-radius: 8px;
  padding: 8px 16px; font-weight: 600; font-size: 12px; cursor: pointer;
}
.filter-btn.active { background: #4F46E5; color: #fff; border-color: #4F46E5; }

/* ---------- modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20,20,30,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal-box {
  background: #FFFFFF; border-radius: 12px; width: 440px; max-width: 92vw;
  max-height: 86vh; overflow-y: auto; padding: 24px;
}
.modal-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.progress-track { background: #F6F7F9; border-radius: 8px; height: 10px; overflow: hidden; margin-bottom: 8px; }
.progress-bar { height: 100%; background: #4F46E5; transition: width 0.2s; }
.reply-box { background: #F6F7F9; border-radius: 8px; padding: 14px; font-size: 13px; color: #1A1D24; margin-bottom: 20px; }

/* ---------- banner ---------- */
.banner {
  position: fixed; bottom: 24px; right: 24px; color: #fff; padding: 12px 20px;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15); z-index: 2000;
}
.banner.success { background: #16A34A; }
.banner.error { background: #DC2626; }

/* ---------- smtp grid ---------- */
.smtp-grid {
  background: #FFFFFF; border: 1px solid #E3E6EB; border-radius: 10px; padding: 22px;
  margin-bottom: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.smtp-actions { grid-column: 1 / 3; display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.verified-note { color: #16A34A; font-size: 13px; font-weight: 600; }
.sim-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6B7280; margin-left: auto; }

/* ---------- template list ---------- */
.tmpl-row {
  background: #FFFFFF; border: 1px solid #E3E6EB; border-radius: 10px; padding: 16px 18px;
  display: flex; justify-content: space-between; align-items: center;
}
.tmpl-row .t-name { font-size: 14px; font-weight: 700; }
.tmpl-row .t-subject { font-size: 12px; color: #6B7280; margin-top: 2px; }