/* Inbox — minimal page-specific styles. Most chrome is inherited from
   ../styles.css + manage-shared.css. Color tokens follow the packages.html
   palette: cream bg / white cards / orange accent. */

.inbox-page { max-width: 1200px; margin: 0 auto; padding: 24px 20px 48px; }
.inbox-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:8px; }
.inbox-head h1 { margin:0; font-size:28px; font-weight:700; color:#2c1f10; }
.inbox-head .inbox-sub { color:#6b4a1f; font-size:14px; margin-top:4px; }

.inbox-section { margin-top:32px; }
.inbox-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.inbox-section-eyebrow { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#8a5a1a; }
.inbox-section-help { font-size:12px; color:#7a6a56; }

/* Forms grid */
.inbox-forms-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.inbox-form-card {
  background:#fff;
  border:1px solid #e6d9c2;
  border-radius:12px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.inbox-form-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.inbox-form-card-title { font-size:15px; font-weight:700; color:#2c1f10; line-height:1.3; }
.inbox-form-card-line { font-size:11px; color:#a58459; text-transform:uppercase; letter-spacing:.6px; margin-top:2px; }
.inbox-form-card-meta { font-size:13px; color:#7a6a56; }
.inbox-form-card-meta strong { color:#2c1f10; font-weight:600; }
.inbox-form-card-actions { display:flex; gap:8px; }

/* Filters bar */
.inbox-filters {
  background:#fff;
  border:1px solid #e6d9c2;
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-end;
  margin-bottom:14px;
}
.inbox-filter-group { display:flex; flex-direction:column; gap:4px; min-width:140px; }
.inbox-filter-group label { font-size:11px; font-weight:600; color:#7a6a56; text-transform:uppercase; letter-spacing:.6px; }
/* ─── Form controls — universal scope ──────────────────────────────────
   Every <input> and <select> rendered ANYWHERE inside the inbox surface
   (page, drawer, modal) inherits this treatment. Don't add inline
   `style="..."` attributes to dropdowns — the page-scope rule below
   keeps every chevron consistent automatically.

   Add a new dropdown? Just `<select>` — no class needed, the chevron
   is on. Add a one-off layout tweak? Use a new class like .inbox-X-select
   that extends, not overrides background-image. */

.inbox-page input,
.inbox-page select,
.inbox-drawer-content input,
.inbox-drawer-content select,
.inbox-modal-content input,
.inbox-modal-content select {
  font-family:inherit;
  font-size:13px;
  padding:8px 10px;
  border:1px solid #e6d9c2;
  border-radius:8px;
  background:#fff;
  color:#2c1f10;
  height:36px;
  box-sizing:border-box;
  line-height:1.2;
}

/* Custom select chevron — replaces the platform-default arrow whose
   position varies between Chrome/Safari/Firefox and looked off-axis
   inside the cream BOS pill. SVG matches the gold accent. Applies to
   EVERY select in the inbox surface (page, drawer, modal). */
.inbox-page select,
.inbox-drawer-content select,
.inbox-modal-content select {
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a58459' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px;
}

.inbox-filter-group select, .inbox-filter-group input { min-width:140px; }
.inbox-filter-search { flex:1 1 220px; }
.inbox-filter-search input { width:100%; min-width:200px; }
.inbox-filter-actions { display:flex; gap:8px; align-items:flex-end; }

/* Submissions list */
.inbox-list { background:#fff; border:1px solid #e6d9c2; border-radius:12px; overflow:hidden; }
.inbox-row {
  display:grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr) auto auto;
  gap:14px;
  padding:14px 18px;
  align-items:center;
  border-top:1px solid #f2e6d1;
  cursor:pointer;
  transition:background .12s ease;
}
.inbox-row:first-child { border-top:none; }
.inbox-row:hover { background:#faf6ee; }
.inbox-row-name { font-size:14px; font-weight:600; color:#2c1f10; }
.inbox-row-email { font-size:12px; color:#7a6a56; margin-top:2px; }
.inbox-row-meta { font-size:12px; color:#7a6a56; }
.inbox-row-meta-form { color:#2c1f10; font-weight:600; font-size:13px; }
.inbox-row-when { font-size:12px; color:#a58459; white-space:nowrap; }
.inbox-status {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  padding:4px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.inbox-status.new       { background:#fff3df; color:#8a5a1a; }
.inbox-status.contacted { background:#dfeeff; color:#1a4f8a; }
.inbox-status.resolved  { background:#dffcec; color:#0f6e3a; }

.inbox-empty { text-align:center; padding:48px 20px; color:#7a6a56; font-size:13px; }
.inbox-loading { text-align:center; padding:48px 20px; color:#7a6a56; font-size:13px; }

/* Detail drawer (right-aligned panel) */
.inbox-drawer-overlay,
.inbox-modal-overlay {
  position:fixed; inset:0;
  background:rgba(40, 28, 14, 0.42);
  z-index:1200;
  display:flex;
  justify-content:flex-end;
  animation:inbox-fade-in .14s ease-out;
}
.inbox-modal-overlay { justify-content:center; align-items:flex-start; padding:80px 20px 20px; }
.inbox-drawer-overlay.hidden,
.inbox-modal-overlay.hidden { display:none; }
@keyframes inbox-fade-in { from { opacity:0 } to { opacity:1 } }

.inbox-drawer-content {
  background:#fdfaf3;
  width:min(620px, 100%);
  max-width:100vw;
  height:100%;
  overflow-y:auto;
  box-shadow:-8px 0 24px rgba(0,0,0,.18);
  animation:inbox-slide-in .18s ease-out;
}
.inbox-modal-content {
  background:#fdfaf3;
  width:min(540px, 100%);
  max-height:calc(100vh - 100px);
  overflow-y:auto;
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.18);
}
@keyframes inbox-slide-in { from { transform:translateX(20px); opacity:.6 } to { transform:translateX(0); opacity:1 } }

.inbox-drawer-head, .inbox-modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid #e6d9c2;
  position:sticky; top:0; background:#fdfaf3; z-index:1;
}
.inbox-drawer-title, .inbox-modal-title { font-size:18px; font-weight:700; color:#2c1f10; margin:0; }
.inbox-close-btn {
  background:none; border:none; cursor:pointer; padding:4px 8px;
  font-size:20px; color:#7a6a56; line-height:1;
}
.inbox-close-btn:hover { color:#2c1f10; }

.inbox-drawer-body, .inbox-modal-body { padding:20px 22px 30px; }

.inbox-card {
  background:#fff;
  border:1px solid #e6d9c2;
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:14px;
}
.inbox-card-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:#a58459; margin-bottom:8px; }
.inbox-dl { display:grid; grid-template-columns:120px 1fr; gap:6px 14px; font-size:13px; color:#2c1f10; }
.inbox-dl dt { color:#7a6a56; font-weight:600; }
.inbox-dl dd { margin:0; word-break:break-word; }

.inbox-message { font-size:13px; color:#2c1f10; line-height:1.5; white-space:pre-wrap; }

.inbox-activity { display:flex; flex-direction:column; gap:8px; }
.inbox-activity-row { font-size:12px; color:#2c1f10; padding:6px 0; border-top:1px solid #f2e6d1; }
.inbox-activity-row:first-child { border-top:none; padding-top:0; }
.inbox-activity-when { color:#a58459; font-size:11px; }

/* Subscribers modal */
.inbox-sub-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
  border-top:1px solid #f2e6d1;
  font-size:13px;
}
.inbox-sub-row:first-child { border-top:none; }
.inbox-sub-name { color:#2c1f10; font-weight:600; }
.inbox-sub-email { color:#7a6a56; font-size:12px; }
.inbox-sub-channels { display:flex; gap:6px; align-items:center; font-size:11px; color:#7a6a56; }
.inbox-sub-channel-pill { background:#f3ece0; padding:2px 8px; border-radius:999px; }
.inbox-sub-add { display:flex; flex-direction:column; gap:8px; padding:14px 0 0; border-top:1px solid #e6d9c2; margin-top:10px; }
.inbox-sub-add-row { display:flex; gap:8px; flex-wrap:wrap; }
.inbox-sub-add input { flex:1 1 160px; min-width:140px; padding:8px 10px; border:1px solid #e6d9c2; border-radius:8px; font-family:inherit; font-size:13px; }

/* Mobile */
@media (max-width: 720px) {
  .inbox-row { grid-template-columns: 1fr auto; gap:8px; }
  .inbox-row-meta, .inbox-row-when { grid-column: 1 / -1; }
  .inbox-dl { grid-template-columns: 1fr; gap:2px 0; }
  .inbox-dl dt { margin-top:8px; }
}