/* styles-additions-v23.css — MB7.5: composer drawer + header tab hotfix
 *
 * Loaded AFTER v22.css. This is a small patch layer addressing three issues
 * found during iPad testing on the deployed MB7:
 *
 *   1. Drawer-over-modal layout broken at narrow viewports (<1100px)
 *      → drawer now takes the full viewport so it visually replaces the
 *        modal while open, with backdrop dimming everything underneath
 *   2. Header nav tabs (Dashboard / Companies / Contacts / Activities /
 *      Email Outreach) overflow on narrow viewports
 *      → flex-wrap kicks in below 900px so tabs wrap to a second row
 *   3. The right column wrap from MB7 mod 04 was too broad — that's fixed
 *      structurally in email-composer-modal.js (no CSS here for it)
 *
 * Cache buster: v=180
 */


/* =============================================================
 * 1. Composer drawer — full-viewport at narrow widths
 * =============================================================
 *
 * MB7's v22.css set the drawer to min(94vw, 420px). On a 1024px viewport,
 * that meant 420px of drawer overlapping a 960px-wide centered modal — they
 * overlapped by ~388px and the modal content got squeezed.
 *
 * Fix: at narrow viewports, the drawer takes the FULL viewport when open.
 * The backdrop continues to dim everything underneath. Effectively the
 * drawer replaces the modal temporarily — tap close to return to the form.
 *
 * Above 1100px, the right column is permanently in-line (two-column layout).
 * Drawer behavior doesn't apply.
 */

@media (max-width: 1099px) {
  .ec-col-right {
    /* Override v22.css min(94vw, 420px) */
    width: 100vw;
    max-width: 100vw;
    /* Preserve all other position: fixed properties from v22.css */
  }

  /* Backdrop fully opaque (almost) so the modal underneath doesn't bleed
   * through and create the "split panel" illusion */
  .ec-drawer-backdrop.is-open {
    background: rgba(0, 0, 0, 0.55);
  }

  /* Drawer's own close button stays anchored top-right */
  .ec-drawer-close {
    /* v22.css already styles this; just ensure it's tappable */
    z-index: 1;
  }
}


/* =============================================================
 * 2. Header nav tabs — wrap at narrow viewports
 * =============================================================
 *
 * #app-mode-nav is the top-level nav (Dashboard / Email Outreach toggle in
 * the May-6 baseline; expanded by MB5/MB6 to include Companies / Contacts /
 * Activities). At narrow viewports the row overflows horizontally and
 * tabs get cut off the right side without an obvious affordance to reach
 * them.
 *
 * Fix: enable flex-wrap below 900px. Tabs wrap to a second (or third) row.
 * Discoverable, no hidden content. Adds at most ~40px of vertical when wrapping.
 */

@media (max-width: 899px) {
  #app-mode-nav {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* At very narrow viewports (phones), the nav can sit closer to the edge */
@media (max-width: 600px) {
  #app-mode-nav {
    /* Override the v13.css inline-style top:16px left:32px by reducing
     * the inset. We can't override inline styles via class, but the
     * left: 32px isn't critical — we use padding on the body instead. */
    gap: 4px;
  }
  .app-mode-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
}


/* =============================================================
 * 3. Composer footer-area styling for the relocated sections
 * =============================================================
 *
 * After MB7.5 mod 01, attachments + compliance footer + error + planned
 * action mount sit BELOW the two-column area in normal form flow. At wide
 * viewports they span the full modal width (above the send bar). At narrow
 * viewports they sit naturally after the form.
 *
 * Most styling carries over from v15/v21/v22. This just ensures the spacing
 * between the column area and the footer area looks intentional.
 */

.ec-form-footer-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px dashed var(--border-default, #e5e5e5);
}

@media (min-width: 1100px) {
  .ec-form-footer-area {
    margin-top: var(--space-3, 12px);
  }
}