/* ============================================================
   styles-additions-v16.css — Mega-batch 1 feature styles

   Additive to all prior styles. Loads AFTER components-base.css
   (so it can compose primitives) and AFTER all other styles-additions
   layers. Holds MB1-specific feature styling that doesn't generalize
   to a primitive.

   Sections:
     1. Missing-email banner (mod 03 — email composer)
     2. Standalone page chrome (.std-page-*)
     3. Search + filter bar (used by all 3 standalone pages)
     4. Dashboard summary table widget
     5. Global compose dropdown
     6. App-mode nav extensions (5 tabs instead of 2)
   ============================================================ */

/* ============================================================
   1. MISSING-EMAIL BANNER (mod 03)

   Shown at top of email composer modal when recipient has emails: [].
   Replaces the previous bottom-of-form warning that required scrolling.
   ============================================================ */

.ec-missing-email-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2_5);
  padding: var(--space-2_5) var(--space-3);
  margin: 0 0 var(--space-3);
  background: var(--color-rose-50);
  border: 1px solid var(--color-rose-200);
  border-left: 3px solid var(--color-rose-600);
  border-radius: var(--radius-sm);
  color: var(--color-rose-900);
  font-size: var(--text-13);
}

.ec-missing-email-banner[hidden] { display: none; }

.ec-missing-email-icon {
  font-size: var(--text-16);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.ec-missing-email-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.ec-missing-email-content strong {
  font-weight: 600;
}

.ec-missing-email-add {
  align-self: flex-start;
  margin-top: var(--space-1);
  background: transparent;
  border: 1px solid var(--color-rose-600);
  color: var(--color-rose-800);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing-out);
}

.ec-missing-email-add:hover {
  background: var(--color-rose-100);
}

/* ============================================================
   2. STANDALONE PAGE CHROME

   Companies / Contacts / Activities pages. Pattern matches Email
   Outreach (which already has its own page-header in styles-additions-v13).
   These three new pages use the .page-header primitive from
   components-base.css plus this feature-specific extra.
   ============================================================ */

.std-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-7, 28px) var(--space-8) var(--space-16);
}

@media (max-width: 720px) {
  .std-page { padding: var(--space-5) var(--space-4) var(--space-12); }
}

/* By default, hide the standalone page roots; app-mode classes show them */
#companies-root,
#contacts-root,
#activities-root {
  display: none;
}

body.app-mode-companies #companies-root,
body.app-mode-contacts #contacts-root,
body.app-mode-activities #activities-root {
  display: block;
}

/* When in a standalone page mode, hide the dashboard root */
body.app-mode-companies #dashboard-root,
body.app-mode-contacts #dashboard-root,
body.app-mode-activities #dashboard-root {
  display: none;
}

body.app-mode-companies #email-outreach-root,
body.app-mode-contacts #email-outreach-root,
body.app-mode-activities #email-outreach-root {
  display: none;
}

/* ============================================================
   3. SEARCH + FILTER BAR

   Reusable across the three standalone pages and the email outreach
   section. Compose with .pill .pill-stream-* for filter chips.
   ============================================================ */

.std-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.std-search {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}

.std-search input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  transition: border-color var(--motion-fast) var(--easing-out);
}

.std-search input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.std-filters {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  flex-wrap: wrap;
}

.std-filter-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
  margin-right: var(--space-1);
}

/* Filter chip = pill, but with toggleable active state */
.std-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2_5);
  border-radius: var(--radius-pill);
  background: var(--bg-elev-2);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--motion-fast) var(--easing-out),
              color var(--motion-fast) var(--easing-out),
              border-color var(--motion-fast) var(--easing-out);
}

.std-filter-chip:hover {
  background: rgba(28, 28, 26, 0.08);
  color: var(--text-primary);
}

.std-filter-chip.is-active {
  background: var(--text-primary);
  color: var(--bg-page);
  border-color: var(--text-primary);
}

.std-sort-select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
}

/* Empty state inside a standalone page */
.std-page-empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--text-secondary);
  font-style: italic;
  background: var(--bg-elev-2);
  border-radius: var(--radius-md);
}

.std-page-empty-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--text-primary);
  font-style: normal;
  margin-bottom: var(--space-2);
}

/* Result count under the page header */
.std-result-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

/* ============================================================
   4. DASHBOARD SUMMARY TABLE

   The configurable widget that replaces 4 dashboard widgets.
   Segmented control for entity selection + per-entity sort dropdown
   + table of top-10 with "see all →" link.
   ============================================================ */

.dst-widget {
  background: var(--bg-elev-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.dst-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.dst-segmented {
  display: inline-flex;
  background: var(--bg-elev-2);
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 2px;
}

.dst-seg-btn {
  background: transparent;
  border: 0;
  padding: var(--space-1_5) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing-out),
              color var(--motion-fast) var(--easing-out);
}

.dst-seg-btn:hover { color: var(--text-primary); }

.dst-seg-btn.is-active {
  background: var(--bg-elev-1);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

.dst-sort {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
}

.dst-sort-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
}

.dst-table-wrap {
  overflow-x: auto;
}

.dst-see-all {
  display: block;
  text-align: right;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
  text-decoration: none;
}

.dst-see-all:hover { color: var(--text-primary); }

/* ============================================================
   5. GLOBAL COMPOSE DROPDOWN

   The "+ New" button on the masthead that replaced the three
   individual buttons. Renders a dropdown with Email / Touch / Quote
   options. Preserves legacy IDs for app.js compatibility.
   ============================================================ */

.gc-wrap {
  position: relative;
  display: inline-block;
}

.gc-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--text-primary);
  color: var(--bg-page);
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--motion-fast) var(--easing-out);
}

.gc-trigger:hover { opacity: 0.85; }

.gc-trigger-caret {
  font-size: var(--text-xs);
  margin-left: var(--space-1);
  opacity: 0.7;
}

.gc-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 200px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
  overflow: hidden;
  display: none;
}

.gc-menu.is-open { display: block; }

.gc-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2_5) var(--space-3);
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing-out);
}

.gc-menu-item:hover { background: var(--bg-elev-2); }

.gc-menu-icon {
  font-size: var(--text-16);
  width: 24px;
  text-align: center;
}

.gc-menu-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-1) 0;
}

/* ============================================================
   6. APP-MODE NAV — 5 tabs instead of 2

   Pre-MB1, app-mode-nav had 2 buttons (Dashboard / Email Outreach).
   With 5 buttons, it needs more horizontal space. The existing
   inline style in index.html uses `position: absolute; top: 16px;
   left: 32px` — keep that but allow the nav to flow horizontally.
   ============================================================ */

#app-mode-nav {
  display: inline-flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  max-width: calc(100vw - 280px);  /* leave room for masthead-meta on the right */
}

@media (max-width: 720px) {
  #app-mode-nav {
    position: static !important;
    display: flex;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

/* The button styling already exists in styles-additions-v13.css as
   .app-mode-btn / .app-mode-btn-active. We do NOT override those here
   — just ensuring the container can host 5 buttons without breaking. */