/* RESPONSIVE-V3 (2026-10-12): pop-ups always sit above the menu and top bar, fit any screen,
   and forms stack on phones. Loaded last on every CRM page.
   ":not(#_a):not(#_b)" raises specificity so these rules also win over page rules written against a pop-up's id. */

/* V2-FINISH (2026-10-14): small design touches from the app brief */
/* One help box per page: when a page has the "How to..." guide, the older "How it works" strip is not shown */
body.um-v2 main.page-content:has(.howto-panel) [id^="pex_"],
body.um-v2 main.page-content:has(.howto-panel) [id^="pageExplainer_"] { display: none !important; }
/* Keyboard users can always see where they are */
body.um-v2 a:focus-visible, body.um-v2 button:focus-visible, body.um-v2 [role="button"]:focus-visible,
body.um-v2 input:focus-visible, body.um-v2 select:focus-visible, body.um-v2 textarea:focus-visible,
body.um-v2 [role="switch"]:focus-visible { outline: 2px solid #7C3AED !important; outline-offset: 2px !important; }
/* Automations: When / Wait / Do steps and the on-off switch */
.v2-step-k { font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; margin-right: 4px; opacity: .85; }
.v2-step-wait { background: #F1F0F6; color: #4A4857; padding: .2rem .6rem; border-radius: 99px; font-size: .78rem; }
.v2-rule-switch { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.v2-rule-switch .v2-sw-lbl { font-size: 12px; font-weight: 600; color: #4A4857; }
.v2-rule-switch .switch__track { width: 36px; height: 22px; flex: 0 0 auto; border-radius: 999px; background: #D9D6E3; display: flex; align-items: center; padding: 2px; transition: background .15s; box-sizing: border-box; }
.v2-rule-switch .switch__track::after { content: ""; width: 18px; height: 18px; border-radius: 999px; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.v2-rule-switch[aria-checked="true"] .switch__track { background: #E11D74; }
.v2-rule-switch[aria-checked="true"] .switch__track::after { transform: translateX(14px); }
.v2-rule-switch[aria-checked="true"] .v2-sw-lbl { color: #0F0E17; }
/* Anything marked hidden stays hidden, even buttons */
.btn[hidden], button[hidden] { display: none !important; }

/* 1. Layers: menu 300, top bar 500, page lifted to 1250 while it holds an open pop-up, pop-ups 1300, toasts 1400 */
.modal-overlay:not(#_a):not(#_b) { z-index: 1300 !important; position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; max-width: none !important; margin: 0 !important; transform: none !important; }
.toast-container:not(#_a), #toastContainer:not(#_a) { z-index: 1400 !important; }
.page-content:has(.modal-overlay.open, .modal-overlay.active),
.main-wrap:has(.modal-overlay.open, .modal-overlay.active) { z-index: 1250 !important; }
body.um-modal-in-page .page-content, body.um-modal-in-page .main-wrap { z-index: 1250 !important; }

/* Floating helper buttons get out of the way while a pop-up is open */
body.um-modal-open #um-export-btn, body.um-modal-open #um-help-anchor, body.um-modal-open #themeFab,
body.um-modal-open #helpBtn, body.um-modal-open #reportIssueBtn, body.um-modal-open .pc-fab,
body:has(.modal-overlay.open) #um-export-btn, body:has(.modal-overlay.open) #um-help-anchor, body:has(.modal-overlay.open) #themeFab,
body:has(.modal-overlay.open) #helpBtn, body:has(.modal-overlay.open) #reportIssueBtn, body:has(.modal-overlay.open) .pc-fab { display: none !important; }

/* 2. Pop-ups never taller than the screen; the body scrolls, header and footer stay put */
.modal-overlay:not(#_a):not(#_b) .modal {
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}
.modal-overlay:not(#_a):not(#_b) .modal > .modal-header,
.modal-overlay:not(#_a):not(#_b) .modal > .modal-footer,
.modal-overlay:not(#_a):not(#_b) .modal > form > .modal-footer { flex: 0 0 auto !important; }
.modal-overlay:not(#_a):not(#_b) .modal > form { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; }
.modal-overlay:not(#_a):not(#_b) .modal > .modal-body,
.modal-overlay:not(#_a):not(#_b) .modal > form > .modal-body { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
.modal-overlay:not(#_a):not(#_b) .modal-footer { flex-wrap: wrap !important; gap: 8px !important; }

/* 3. Long words, links and emails wrap instead of pushing things off screen */
.modal, .card { overflow-wrap: break-word; } /* break-word, not anywhere: "anywhere" squashed table columns */
.page-content img, .modal img, .page-content video { max-width: 100%; height: auto; }

/* 4. Tablets and small laptops */
@media (max-width: 1024px) {
  .modal-overlay:not(#_a):not(#_b) .modal { width: calc(100vw - 48px) !important; }
}

/* 5. Phones: full-width sheet from the bottom, one column forms, bigger tap targets, no iOS zoom on inputs */
@media (max-width: 640px) {
  .modal-overlay:not(#_a):not(#_b) { padding: 0 !important; align-items: flex-end !important; justify-content: center !important; }
  .modal-overlay:not(#_a):not(#_b) .modal {
    width: 100% !important; max-width: 100% !important;
    max-height: calc(100vh - 12px) !important; max-height: calc(100dvh - 12px) !important;
    border-radius: 16px 16px 0 0 !important; margin: 0 !important;
    transform: none !important;
  }
  .modal-overlay:not(#_a):not(#_b) .modal-body { padding-left: 16px !important; padding-right: 16px !important; }
  .modal-overlay:not(#_a):not(#_b) .modal-header { padding: 14px 16px !important; gap: 8px; }
  .modal-overlay:not(#_a):not(#_b) .modal-title { font-size: 17px !important; line-height: 1.3 !important; }
  .modal-overlay:not(#_a):not(#_b) .modal-footer { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important; }
  .modal-overlay:not(#_a):not(#_b) .modal-footer > .btn,
  .modal-overlay:not(#_a):not(#_b) .modal-footer > button { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; min-height: 44px !important; justify-content: center !important; margin: 0 !important; }
  .modal-overlay:not(#_a):not(#_b) .form-grid-2,
  .modal-overlay:not(#_a):not(#_b) .form-grid-3,
  .modal-overlay:not(#_a):not(#_b) .grid-2,
  .modal-overlay:not(#_a):not(#_b) .grid-3 { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .modal-overlay:not(#_a):not(#_b) .form-row { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  .modal-overlay:not(#_a):not(#_b) .form-row > * { width: 100% !important; max-width: 100% !important; margin-right: 0 !important; }
  .modal input:not([type=checkbox]):not([type=radio]):not([type=range]), .modal select, .modal textarea,
  .page-content input:not([type=checkbox]):not([type=radio]):not([type=range]), .page-content select, .page-content textarea { font-size: 16px !important; }
  .page-content .btn, .modal .btn { min-height: 40px; }
  /* Bulk action bar (Deals, Quotes and others): full width so it never runs off the edge */
  #um-bulk-bar:not(#_a) { left: 8px !important; right: 8px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    transform: translateY(140%) !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; padding: 10px 12px !important; }
  #um-bulk-bar.show:not(#_a) { transform: translateY(0) !important; }
  #um-bulk-bar:not(#_a) button { min-height: 40px; }
}