/* Watchtower — Emails / CRM.
   Created by the UI audit 2026-09-22 (plan 4.B.5). This tab was the only one in the app
   with no stylesheet at all: everything was inline attributes in tabs/emails.js plus six
   rules in css/mobile.css, two of which matched on an inline-style SUBSTRING
   (`#top-emails div[style*="1fr 2fr"]`) and broke silently the moment that template
   literal was reformatted (content-a D26). */

#crm-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  padding: 20px;
  align-items: start;
}

#email-calendar-scroll {
  position: sticky;
  top: 64px;
  align-self: start;
  max-height: calc(100vh - 84px);
  max-height: calc(100dvh - 84px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

/* Reschedule on touch (content-a D15): the drag source is HTML5 DnD, which iOS Safari
   does not implement. A compact native date picker beside Edit is the phone path. */
.email-quick-date {
  background: var(--cream-a06);
  border: 1px solid var(--cream-a12);
  border-radius: var(--radius-8);
  color: var(--text-secondary);
  font-family: inherit;
  padding: 0 8px;
  min-height: 40px;
  color-scheme: dark;
  cursor: pointer;
  max-width: 142px;
}

@media (max-width: 900px) {
  /* One column, and the calendar is behind the 📅 toggle (it forces a 7-col grid and
     crowds the phone). Was `#top-emails div[style*="1fr 2fr"]` in mobile.css. */
  #crm-grid { grid-template-columns: 1fr; padding: 16px 14px; gap: 16px; }
  #email-calendar-scroll { display: none; }
  #crm-grid.cal-open #email-calendar-scroll {
    display: block;
    position: static;
    max-height: none;
    margin-bottom: 4px;
  }
  /* The month header's sticky offset was written for the scroll container; with that
     container static it stuck to the page viewport and stacked under the app bar
     (content-a R10). */
  #crm-grid.cal-open #email-calendar-scroll [style*="position:sticky"] { position: static !important; }
}