/* Shared styles for MCM staff views */
.mcm-app { font-family: Arial, Helvetica, sans-serif; }
.mcm-login-required { padding: 16px; background: #fffbe6; border: 1px solid #ffe58f; border-radius: 6px; }
.mcm-toolbar { display:flex; gap:8px; align-items:center; margin:8px 0 12px; flex-wrap:wrap; }
.mcm-toolbar input[type="search"] { padding:6px 8px; border:1px solid #ccc; border-radius:4px; min-width:240px; }
.mcm-search-input { width:75%; padding:10px 12px; border:1px solid #ddd; border-radius:6px; font-size:14px; font-family: Arial, Helvetica, sans-serif; }
.mcm-btn-primary { padding:11px 24px; background:#2d3748; color:#fff; border:none; border-radius:8px; cursor:pointer; font-size:15px; font-weight:500; white-space:nowrap; box-shadow:0 2px 4px rgba(0,0,0,0.1); transition:all 0.2s ease; width:auto; }
.mcm-btn-primary:hover { background:#1a202c; box-shadow:0 4px 8px rgba(0,0,0,0.15); transform:translateY(-1px); }
.mcm-btn-primary:active { background:#4a5568; box-shadow:0 1px 2px rgba(0,0,0,0.1); transform:translateY(0); }
.mcm-btn-edit { padding:11px 24px; background:White; color:#4a5568; border:1px solid #cbd5e0; border-radius:8px; cursor:pointer; font-size:15px; font-weight:500; white-space:nowrap; box-shadow:none; transition:all 0.2s ease; width:auto; }
.mcm-btn-edit:hover { background:#f7fafc; border-color:#a0aec0; box-shadow:0 2px 4px rgba(0,0,0,0.05); transform:translateY(-1px); }
.mcm-btn-edit:active { background:#edf2f7; border-color:#a0aec0; transform:translateY(0); }
.mcm-btn-save { padding:11px 24px; background:#9CF1FF; color:#000; border:none; border-radius:8px; cursor:pointer; font-size:15px; font-weight:500; white-space:nowrap; box-shadow:0 2px 4px rgba(156,241,255,0.3); transition:all 0.2s ease; }
.mcm-btn-save:hover { background:#7AD4E8; box-shadow:0 4px 8px rgba(156,241,255,0.4); transform:translateY(-1px); }
.mcm-btn-save:active { background:#5BB8CC; box-shadow:0 1px 2px rgba(156,241,255,0.2); transform:translateY(0); }
.mcm-btn-cancel { padding:11px 24px; background:#e5e7eb; color:#000; border:none; border-radius:8px; cursor:pointer; font-size:15px; font-weight:500; white-space:nowrap; box-shadow:0 2px 4px rgba(0,0,0,0.15); transition:all 0.2s ease; }
.mcm-btn-cancel:hover { background:#d1d5db; box-shadow:0 4px 8px rgba(0,0,0,0.2); transform:translateY(-1px); }
.mcm-btn-cancel:active { background:#9ca3af; box-shadow:0 1px 2px rgba(0,0,0,0.1); transform:translateY(0); }
.mcm-btn-secondary { padding:11px 24px; background:#fff; color:#2d3748; border:1px solid #d1d5db; border-radius:8px; cursor:pointer; font-size:15px; font-weight:500; white-space:nowrap; box-shadow:0 2px 4px rgba(0,0,0,0.05); transition:all 0.2s ease; }
.mcm-btn-secondary:hover { background:#f9fafb; border-color:#9ca3af; box-shadow:0 4px 8px rgba(0,0,0,0.1); transform:translateY(-1px); }
.mcm-btn-secondary:active { background:#e5e7eb; border-color:#9ca3af; transform:translateY(0); }
.mcm-btn-danger { padding:11px 24px; background:#dc2626; color:#fff; border:none; border-radius:8px; cursor:pointer; font-size:15px; font-weight:500; white-space:nowrap; box-shadow:0 2px 4px rgba(220,38,38,0.3); transition:all 0.2s ease; }
.mcm-btn-danger:hover { background:#b91c1c; box-shadow:0 4px 8px rgba(220,38,38,0.4); transform:translateY(-1px); }
.mcm-btn-danger:active { background:#991b1b; box-shadow:0 1px 2px rgba(220,38,38,0.2); transform:translateY(0); }
/* The theme's default button:hover forces white text (invisible on our light buttons). Re-pin
   readable text on hover/focus/active — fixes the job-modal header + all popup buttons at once. */
.mcm-btn-secondary:hover, .mcm-btn-secondary:focus, .mcm-btn-secondary:active { color:#2d3748; }
.mcm-btn-edit:hover, .mcm-btn-edit:focus, .mcm-btn-edit:active { color:#4a5568; }
.mcm-btn-save:hover, .mcm-btn-save:focus, .mcm-btn-save:active { color:#000; }
.mcm-btn-cancel:hover, .mcm-btn-cancel:focus, .mcm-btn-cancel:active { color:#000; }

/* …and the same for BACKGROUND on :focus, which the rules above never pinned. The theme's
   default button:focus paints a bright green, and :focus is exactly the state a TAP leaves
   behind on a phone — so every dialog/popup button turned green after being pressed and
   stayed that way. Re-pin each button's resting background.
   :not(:hover):not(:active) keeps the existing hover/active rules winning when they apply
   (equal specificity would otherwise let these later rules override them on desktop). */
.mcm-btn-primary:focus:not(:hover):not(:active)   { background:#2d3748; }
.mcm-btn-edit:focus:not(:hover):not(:active)      { background:#fff; }
.mcm-btn-save:focus:not(:hover):not(:active)      { background:#9CF1FF; }
.mcm-btn-cancel:focus:not(:hover):not(:active)    { background:#e5e7eb; }
.mcm-btn-secondary:focus:not(:hover):not(:active) { background:#fff; }
.mcm-btn-danger:focus:not(:hover):not(:active)    { background:#dc2626; }
/* Keyboard focus still needs to be visible — use a neutral ring rather than a colour change,
   so the button never shifts hue. :focus-visible skips it for plain mouse/touch presses. */
.mcm-btn-primary:focus-visible, .mcm-btn-edit:focus-visible, .mcm-btn-save:focus-visible,
.mcm-btn-cancel:focus-visible, .mcm-btn-secondary:focus-visible, .mcm-btn-danger:focus-visible {
	outline:2px solid #1265c4; outline-offset:2px;
}
/* Compact modifier for inline buttons (e.g. Delete Invoice/Payment in the detail grid). */
.mcm-btn-sm { padding:6px 12px; font-size:13px; box-shadow:none; }

/* Selection mode for bulk actions */
.selection-mode #tbl th:first-child, .selection-mode #tbl td:first-child { width:40px !important; text-align:center; }
.selection-mode #tbl tr:hover { background:#f0f9ff; }
.selection-mode #tbl tr.selected { background:#dbeafe; }
/* Jobs table selection mode */
.selection-mode #mcmJobsTable th:first-child, .selection-mode #mcmJobsTable td:first-child { width:40px !important; text-align:center; }
.selection-mode #mcmJobsTable tr:hover { background:#f0f9ff; }
.selection-mode #mcmJobsTable tr.selected { background:#dbeafe; }
.checkbox-cell { cursor:pointer; }
.checkbox-cell input[type="checkbox"] { width:18px; height:18px; cursor:pointer; }
.mcm-status-bubble { display:inline-block; padding:4px 12px; border-radius:12px; font-size:13px; font-weight:500; }
.mcm-status-bubble.active { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.mcm-status-bubble.inactive { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.mcm-status-bubble.green { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.mcm-status-bubble.red { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.mcm-status-bubble.blue { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }
.mcm-status-bubble.gray { background:#f3f4f6; color:#1f2937; border:1px solid #d1d5db; }
.mcm-status-bubble.lead { background:#f3e8ff; color:#6b21a8; border:1px solid #c084fc; }
.mcm-section-header { background:#eaf4ff !important; }
.mcm-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:14px; }
.mcm-table th, .mcm-table td { border:1px solid #eaf4ff; padding:6px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mcm-table th { background:#eaf4ff; font-weight:600; }
.mcm-table th:first-child { border-top-left-radius:8px; }
.mcm-table th:last-child { border-top-right-radius:8px; }
.mcm-table th.sortable { cursor:pointer; user-select:none; position:relative; padding-right:22px; transition:background 0.2s ease; }
.mcm-table th.sortable:hover { background:#d4e9ff; }
.mcm-table th.sortable::after { content:'⇅'; position:absolute; right:6px; top:50%; transform:translateY(-50%); opacity:0.3; font-size:12px; }
.mcm-table th.sortable.sort-asc::after { content:'▲'; opacity:0.8; color:#2563eb; }
.mcm-table th.sortable.sort-desc::after { content:'▼'; opacity:0.8; color:#2563eb; }

/* ── Customer Job History + Job Archive tables (view-customers.js renderJobs) ──
   Plain & borderless (no colored column headers / row dividers) per user pref;
   wrapping Location/Description + stacked completion notes. Centered by default;
   .left opts a column (Job #, Description) back to left-aligned. The "Job Archive"
   band IS colored and is the collapse toggle. */
.mcm-jobhist { width:100%; border-collapse:collapse; table-layout:fixed; font-size:14px; }
.mcm-jobhist th, .mcm-jobhist td { padding:7px 8px; text-align:center; vertical-align:top; }
.mcm-jobhist th { font-weight:600; }
.mcm-jobhist th.left, .mcm-jobhist td.left { text-align:left; }
.mcm-jobhist td.wrap  { white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
.mcm-jobhist td.notes { white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.mcm-jobhist-title { display:flex; align-items:center; gap:8px; margin:20px 0 6px; padding:8px 12px; background:#eaf4ff; border-radius:6px; font-weight:600; font-size:14px; cursor:pointer; user-select:none; }
.mcm-jobhist-title .mcm-arch-caret { font-size:12px; color:#1e40af; }
.mcm-jobhist-title .mcm-arch-count { color:#6b7280; font-weight:500; }
.mcm-jobhist-empty { padding:8px 4px; color:#6b7280; font-size:13px; }

/* ── Shared list pager (.pbtn) ───────────────────────────────────────────
   Canonical home for the pager EVERY list view + the activity feed use. Was
   copy-pasted inline into jobs/estimates/invoices/products/phone/customers
   templates (+ a dark variant in admin.css). Centralized here (mcm.css is
   global) so it styles consistently everywhere — including the job modal's
   feed pager opened from calendar, whose template had no copy → unstyled. */
.mcm-pager { display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; margin-top:10px; }
.pbtn { padding:4px 10px; border:1px solid #ccc; border-radius:4px; background:#fff; cursor:pointer; user-select:none; }
.pbtn:hover:not(.disabled):not(.active) { background:#f0f0f0; }
.pbtn.disabled { opacity:.5; cursor:default; }
.pbtn.active { background:#eee; font-weight:600; }

/* ── Activity Feed module (window.MCM_ActivityFeed) ─────────────────────── */
.mcm-af { font-size:14px; }
.mcm-af-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.mcm-af-count { font-weight:600; color:#374151; }
/* Filters: dropdowns + Reset on one row; search full-width below. */
.mcm-af-filters { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.mcm-af-filters-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.mcm-af-filters select { padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:13px; background:#fff; }
/* Reset sits right after the dropdowns (not pushed to the far right). */
.mcm-af-search { width:100%; box-sizing:border-box; }

/* Table: full width; grey header + thin light row rule to match the job detail tab
   (.section > header #f7f7f7 / #e5e5e5). Horizontal lines only. Date/User/Action carry a
   bit more width (set in COLUMNS) so Details isn't over-wide. */
.mcm-af .mcm-table { table-layout:auto; width:100%; border-collapse:collapse; }
.mcm-af .mcm-table th { background:#f7f7f7; color:#374151; }
.mcm-af .mcm-table th, .mcm-af .mcm-table td { border:none; border-bottom:1px solid #e5e5e5; }
.mcm-af .mcm-table td { white-space:normal; overflow:visible; text-overflow:clip; vertical-align:middle; padding:8px 10px; }
/* Date · User · Action centered (H+V); Details left-aligned with a little gap from Action
   (it leans on wrap + the "more" toggle, so it doesn't need the extra real estate). */
.mcm-af .mcm-table th:nth-child(-n+3), .mcm-af .mcm-table td:nth-child(-n+3) { text-align:center; }
.mcm-af .mcm-table td:nth-child(4) { text-align:left; padding-left:18px; }
/* Date cell — monospace "log" vibe, lighter. */
.mcm-af .mcm-table td:nth-child(1) { white-space:nowrap; color:#6b7280; font-size:14px; font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; letter-spacing:-.2px; }
/* User pill — tech-style colored bubble (rounded, full name). */
.mcm-af-user-badge { display:inline-block; padding:3px 9px; border-radius:12px; background:#9ca3af; color:#fff; font-size:12px; font-weight:600; line-height:1.35; max-width:100%; word-break:break-word; }
/* Action badge — soft color, squared; inline-flex keeps the emoji + label vertically even. */
.mcm-af-action { display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:5px; font-size:12px; font-weight:600; line-height:1.25; color:#374151; }
/* Source/type badge (customer feed, job/estimate/invoice only) — bright/saturated (deliberately
   NOT the pastel action-badge palette) and CENTERED above the action badge. The wrapper centers
   the whole stack; width:fit-content + margin auto centers this block badge. */
.mcm-af-actionwrap { text-align:center; }
.mcm-af-type { display:block; width:fit-content; margin:0 auto 5px; padding:2px 10px; border-radius:5px; font-size:12px; font-weight:700; letter-spacing:.02em; color:#fff; }
.mcm-af-type-job { background:#2563eb; }       /* bright blue */
.mcm-af-type-estimate { background:#d97706; }  /* bright amber */
.mcm-af-type-invoice { background:#059669; }   /* bright emerald */
.mcm-af-details { line-height:1.5; }
.mcm-af-diff { font-size:13px; }
/* Free-text bodies (email, SMS, phone notes, merge audit detail) — preserve the source line
   breaks (htmlToText turns block boundaries into \n) and wrap long unbroken strings/URLs. */
.mcm-af-body { white-space:pre-wrap; overflow-wrap:break-word; }
.mcm-af-link { color:#0073aa; text-decoration:none; }
.mcm-af-link:hover { text-decoration:underline; }
.mcm-af-toggle { color:#0073aa; text-decoration:none; font-size:12px; white-space:nowrap; }
.mcm-af-toggle:hover { text-decoration:underline; }
.mcm-af .muted { color:#888; }
/* MCM.Table emits mcm-sortable / mcm-sort-asc / mcm-sort-desc on <th>. */
.mcm-table th.mcm-sortable { cursor:pointer; user-select:none; position:relative; padding-right:22px; }
.mcm-table th.mcm-sortable::after { content:'⇅'; position:absolute; right:6px; top:50%; transform:translateY(-50%); opacity:0.3; font-size:12px; }
.mcm-table th.mcm-sortable.mcm-sort-asc::after { content:'▲'; opacity:0.8; color:#2563eb; }
.mcm-table th.mcm-sortable.mcm-sort-desc::after { content:'▼'; opacity:0.8; color:#2563eb; }

.mcm-modal-mask { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:9999; }
.mcm-modal { background:#fff; width:860px; max-width:95%; max-height:90%; overflow:auto; border-radius:6px; padding:20px; position:relative; box-shadow:0 4px 18px rgba(0,0,0,.3); }
.mcm-modal h3 { margin:0 0 8px; border-bottom:1px solid #eee; padding-bottom:6px; }
.mcm-close {position:fixed;top:calc(6px + var(--mcm-toolbar));right:32px;font-size:28px;line-height:1;cursor:pointer;color:#666;padding:6px 12px;background:#f5f5f5;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,0.1);z-index:10001;transition:all 0.2s ease}
.mcm-close hover {background:#e5e5e5;color:#000;box-shadow:0 3px 6px rgba(0,0,0,0.15);transform:translateY(-1px)}
.mcm-pill { display:inline-block; padding:2px 8px; border-radius:12px; border:1px solid #ddd; font-size:12px; background:#f5f5f5; }
.mcm-badge { display:inline-block; padding:2px 6px; border-radius:6px; background:#eef5ff; border:1px solid #cfe1ff; font-size:12px; }
.mcm-btn { padding:6px 10px; border:1px solid #888; border-radius:4px; background:#f5f5f5; cursor:pointer; }
.mcm-btn.primary { background:#f7f7f7; color:#fff; border-color:#ccc; }
.mcm-flex { display:flex; gap:8px; align-items:center; }
.mcm-right { margin-left:auto; }
/* === MCM inline-edit look === */
/* No background highlight on edit fields */
.mcm-toast {
  /* Bottom-of-viewport so the page's top nav / WP admin bar never covers it. */
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  padding:10px 18px;border-radius:6px;font-size:14px;z-index:99999;
  box-shadow:0 4px 14px rgba(0,0,0,.28); color:#fff;
  height:auto !important; max-height:none; width:auto; max-width:90vw;
  display:block; flex:none;
}
.mcm-toast.ok    { background:#28a745; }
.mcm-toast.error { background:#c0392b; }
/* Undo variant: message + action button inline, lives a bit longer (10s) via JS. */
.mcm-toast-undo { display:flex !important; align-items:center; gap:14px; }
.mcm-toast-undo-btn {
  background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.6);
  border-radius:4px; padding:4px 12px; font-size:13px; font-weight:700; cursor:pointer;
  text-transform:uppercase; letter-spacing:.03em;
}
.mcm-toast-undo-btn:hover { background:rgba(255,255,255,.32); }

/* MCM.showDialog — promise-based dialog (S1). Layering: above the detail-modal
   stack (.mcm-modal-mask 9999, .inv-send-overlay 10000, .mcm-close 10001),
   below toasts (99999) so toasts stay visible over an open dialog. */
.mcm-dialog-mask { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:20000; }
.mcm-dialog { background:#fff; width:480px; max-width:92vw; max-height:80vh; overflow:auto; border-radius:8px; padding:20px 24px; box-shadow:0 6px 24px rgba(0,0,0,.3); }
.mcm-dialog-title { font-size:17px; font-weight:700; margin-bottom:10px; color:#1a202c; }
.mcm-dialog-body { font-size:14px; line-height:1.55; color:#2d3748; white-space:pre-line; }
.mcm-dialog-buttons { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* Phone: stack dialog buttons full-width. A side-by-side row can't fit multi-choice dialogs on a
   narrow screen (e.g. the Estimate-Won popup's "Create new job" / "Link existing job" — ~283px of
   content at 92vw), so they squish or overflow. DOM order is preserved, so the primary action
   stays on top. Also roomier tap targets for gloved field use. */
@media (max-width: 560px) {
	.mcm-dialog { padding:16px; }
	.mcm-dialog-buttons { flex-direction:column; align-items:stretch; gap:8px; margin-top:14px; }
	.mcm-dialog-buttons button { width:100%; padding:12px 14px; font-size:15px; }
}

/* "QuickBooks out of sync" badge (S2) — amber pill matching the mobile banner palette;
   rendered next to Invoice Status / Current Status in the detail modals, tooltip via title. */
.mcm-qbo-sync-badge { display:inline-block; margin-left:8px; padding:3px 10px; border-radius:12px; font-size:12px; font-weight:600; background:#fef3c7; border:1px solid #f59e0b; color:#92400e; white-space:nowrap; vertical-align:middle; cursor:default; }

/* Calendar specifics */
.mcm-cal-header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; background:#fff; padding:8px 0; border-bottom:1px solid #ddd; }
.mcm-cal-grid { display:flex; flex-direction:column; border:1px solid #ddd; border-radius:4px; overflow:hidden; height:calc(100vh - 160px); min-height:520px; }
.mcm-cal-scale { display:flex; height:40px; background:#f8f9fa; }
.mcm-cal-people { width:160px; min-width:160px; border-right:1px solid #ddd; display:flex; align-items:center; justify-content:center; font-weight:600; }
.mcm-cal-hours { display:flex; width:100%; }
.mcm-cal-hour { width:calc(100%/12); display:flex; align-items:center; justify-content:center; border-right:1px solid #eee; font-weight:600; font-size:12px; }
.mcm-cal-rows { display:flex; flex-direction:column; overflow-y:auto; flex:1; }
.mcm-cal-row { display:flex; height:84px; border-bottom:1px solid #eee; }
.mcm-cal-name { width:160px; min-width:160px; padding:0 10px; display:flex; align-items:center; border-right:1px solid #eee; border-left:4px solid #ccc; font-weight:600; background:#f8f9fa; }
.mcm-cal-slots { flex:1; display:flex; position:relative; }
.mcm-cal-slot { width:calc(100%/12); border-right:1px solid #f3f3f3; background:#fff; }
.mcm-cal-slot:nth-child(odd){ background:#fafafa; }
.mcm-cal-event { position:absolute; top:5px; bottom:5px; color:#fff; border-radius:4px; padding:6px 10px; overflow:hidden; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,0.2); display:flex; flex-direction:column; justify-content:center; }
.mcm-cal-evt-time { font-size:12px; line-height:1.2; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mcm-cal-evt-title { font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mcm-cal-evt-loc { font-size:11px; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============================================================================
   ADDRESS AUTOCOMPLETE STYLES
   ============================================================================ */

.mcm-address-autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  max-height: 300px;
  overflow-y: auto;
  z-index: 10000;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  display: none;
  margin-top: -1px;
  border-radius: 0 0 4px 4px;
}

.mcm-address-autocomplete-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  transition: background-color 0.15s ease;
}

.mcm-address-autocomplete-item:last-child {
  border-bottom: none;
}

.mcm-address-autocomplete-item:hover {
  background-color: #f5f5f5;
}

.mcm-address-autocomplete-item:active {
  background-color: #e8e8e8;
}

/* ============================================================================
   DATETIME PICKER STYLES (matches address autocomplete pattern)
   ============================================================================ */

.mcm-dtp-wrapper { width: 100%; }
.mcm-dtp-row { display: flex; gap: 6px; align-items: center; }

.mcm-dtp-time-wrapper { flex: 1; position: relative; min-width: 0; }

.mcm-dtp-dropdown {
  position: fixed;
  background: white;
  border: 1px solid #ddd;
  max-height: 300px;
  overflow-y: auto;
  z-index: 100000;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 0 0 4px 4px;
}

.mcm-dtp-option {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  transition: background-color 0.15s ease;
}

.mcm-dtp-option:last-child {
  border-bottom: none;
}

.mcm-dtp-option:hover,
.mcm-dtp-option.highlighted {
  background-color: #f5f5f5;
}

.mcm-dtp-option:active {
  background-color: #e8e8e8;
}

.mcm-dtp-option.selected {
  background: #d1e7ff;
  font-weight: 600;
}

.mcm-dtp-divider {
  height: 3px;
  background: #333;
  margin: 4px 0;
}

.mcm-dtp-no-match {
  padding: 8px 10px;
  color: #999;
  font-size: 13px;
  font-style: italic;
}

/* Fix for address autocomplete dropdown being clipped by sections */
.section {
  overflow: visible !important;
}

.section .rows {
  overflow: visible !important;
}

.grid2col {
  overflow: visible !important;
}

/* ============================================================================
   FILE HANDLING STYLES
   ============================================================================ */

/* Files tab header with upload button */
.files-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e5e5;
}

.files-head h4 {
	font-weight:575;
	padding:10px 12px;
	font-family: Arial;
}

/* File upload button */
.file-upload-btn { padding:11px 24px; background:#2d3748; color:#fff; border:none; border-radius:8px; cursor:pointer; font-size:15px; font-weight:500; white-space:nowrap; box-shadow:0 2px 4px rgba(0,0,0,0.1); transition:all 0.2s ease; width:auto; }
.file-upload-btn:hover { background:#1a202c; box-shadow:0 4px 8px rgba(0,0,0,0.15); transform:translateY(-1px); }
.file-upload-btn:active { background:#4a5568; box-shadow:0 1px 2px rgba(0,0,0,0.1); transform:translateY(0); }
.file-upload-btn:disabled { background: #ccc; cursor: not-allowed; }

/* Hidden file input */
input[type="file"].file-input-hidden {
  display: none;
}

/* File list container */
.files-section {
  margin-bottom: 24px;
}

.files-section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Thumbnail file grid */
.file-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.file-card {
  position: relative;
  width: 150px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.file-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.file-card-thumb {
  position: relative;
  width: 150px;
  height: 150px;
  background: #f0f2f5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.file-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Hover overlay with action buttons */
.file-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.file-card:hover .file-card-overlay {
  opacity: 1;
}

.file-card-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.file-card-btn:hover {
  background: #007bff;
  color: #fff;
  transform: scale(1.1);
}

.file-card-btn.delete:hover {
  background: #dc3545;
  color: #fff;
}

.file-card-name {
  padding: 6px 8px 2px;
  font-weight: 600;
  font-size: 12px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-card-meta {
  padding: 0 8px 6px;
  font-size: 10px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Archive-card category glyph — external/SharePoint files have no inline thumbnail, so we show
   a 🖼️/📄/📊/🎬 by category instead. */
.file-card-icon--glyph {
  font-size: 44px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ─── Photo carousel / lightbox — MCM_Files.openLightbox ──────────────────────────────
   Shared by all four desktop file surfaces (customer Files tab, archive sections, job
   modal, invoice modal). z-index clears the record modals (100000) and the dispatch
   calendar popover (100001). Archive photos stream from SharePoint — ~1s on first view,
   then browser-cached for 7 days — hence the spinner and the neighbour preloading. */
body.mcm-lightbox-open { overflow: hidden; }

.mcm-lightbox {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 100002;
  background: rgba(17, 22, 30, 0.93);
  align-items: center;
  justify-content: center;
  user-select: none;
}

.mcm-lightbox.is-open { display: flex; }

/* ⚠ The bar and the nav buttons MUST out-stack .mcm-lightbox-stage. The stage is positioned and
   fills the overlay (100%/100%), and among positioned siblings with no z-index the LAST one in DOM
   order wins — the stage comes after the bar and after the prev button, so it was painting on top
   of both. Clicking "‹" hit the stage instead of the button and fell through to the
   close-on-backdrop branch, i.e. the pager closed the viewer instead of paging. */
.mcm-lightbox-bar {
  position: absolute;
  z-index: 2;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #e8edf4;
  font-size: 13px;
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.mcm-lightbox-name {
  flex: 1;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mcm-lightbox-count {
  flex: 0 0 auto;
  color: #aab6c6;
  font-variant-numeric: tabular-nums;
}

.mcm-lightbox-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.mcm-lightbox-btn:hover,
.mcm-lightbox-btn:focus,
.mcm-lightbox-btn:active { background: #2f3e52; color: #fff; transform: none; box-shadow: none; }
.mcm-lightbox-btn:focus:not(:hover):not(:active) { background: rgba(255, 255, 255, 0.12); }
.mcm-lightbox-btn:focus-visible { outline: 2px solid #1265c4; outline-offset: 2px; }

.mcm-lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 56px 72px;
  box-sizing: border-box;
}

.mcm-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  background: #11161e;
}

.mcm-lightbox.is-loading .mcm-lightbox-img,
.mcm-lightbox.is-error   .mcm-lightbox-img { visibility: hidden; }

.mcm-lightbox-spinner {
  display: none;
  position: absolute;
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mcm-lightbox-spin 0.8s linear infinite;
}

.mcm-lightbox.is-loading .mcm-lightbox-spinner { display: block; }

@keyframes mcm-lightbox-spin { to { transform: rotate(360deg); } }

.mcm-lightbox-failed {
  display: none;
  position: absolute;
  color: #dfe5ee;
  font-size: 14px;
}

.mcm-lightbox.is-error .mcm-lightbox-failed { display: block; }

/* ⚠ Centred with auto margins, NOT `top:50% + translateY(-50%)`. The theme's default
   button:active carries its own transform, which overrode ours: on mousedown the arrow lost its
   centring and JUMPED out from under the cursor, so mouseup landed on the backdrop and closed the
   viewer. Never reintroduce a transform-based position here. */
.mcm-lightbox-nav {
  position: absolute;
  z-index: 2;               /* see the stacking note on .mcm-lightbox-bar */
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 48px;
  height: 64px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

/* Pin EVERY state. The theme paints an unwanted green on :focus/:active — see the .mcm-btn-*
   block at the top of this file — and :focus is the state a tap leaves behind. `transform:none`
   keeps a theme rule from moving the button mid-click. */
.mcm-lightbox-nav:hover,
.mcm-lightbox-nav:focus,
.mcm-lightbox-nav:active { background: #2f3e52; color: #fff; transform: none; box-shadow: none; }
.mcm-lightbox-nav:focus:not(:hover):not(:active) { background: rgba(255, 255, 255, 0.10); }
.mcm-lightbox-nav:focus-visible { outline: 2px solid #1265c4; outline-offset: 2px; }
.mcm-lightbox-prev { left: 14px; }
.mcm-lightbox-next { right: 14px; }

/* One photo — nothing to page to. */
.mcm-lightbox.is-single .mcm-lightbox-nav,
.mcm-lightbox.is-single .mcm-lightbox-count { display: none; }

@media (max-width: 700px) {
  .mcm-lightbox-stage { padding: 52px 12px; }
  .mcm-lightbox-nav { width: 38px; height: 52px; font-size: 26px; }
  .mcm-lightbox-prev { left: 4px; }
  .mcm-lightbox-next { right: 4px; }
}

/* Files tab: Photos / Documents type toggle */
.files-typebar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.files-typebtn {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  background: #eef0f3;
  border: 1px solid #dce0e6;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.files-typebtn:hover { background: #e2e6ec; }

.files-typebtn.active {
  background: #2f3e52;
  border-color: #2f3e52;
  color: #fff;
}

/* Archived files sub-section (sits below the live files, sepia-tinted = historical) */
.files-archive-section { margin-top: 10px; }

.files-archive-head {
  font-size: 13px;
  font-weight: 600;
  color: #6a5b3e;
  background: #fbf6ea;
  border: 1px solid #efe4cb;
  border-radius: 6px;
  padding: 7px 10px;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.files-archive-head:hover { background: #f6efdd; }

.files-archive-head .toggle-icon {
  font-size: 10px;
  transition: transform 0.2s;
}

.files-archive-head.collapsed .toggle-icon { transform: rotate(-90deg); }

.files-archive-count { color: #a08e63; font-weight: 400; }

/* Job files group (for customer view) */
.job-files-group {
  margin-bottom: 16px;
}

.job-files-header {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.job-files-header:hover {
  background: #e5e5e5;
}

.job-files-header .toggle-icon {
  font-size: 10px;
  transition: transform 0.2s;
}

.job-files-header.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.job-files-list {
  margin-left: 20px;
}

/* Empty state */
.files-empty {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-style: italic;
}

/* Upload progress indicator */
.upload-progress {
  padding: 12px;
  background: #e7f3ff;
  border: 1px solid #b3d9ff;
  border-radius: 4px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.upload-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #007bff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.upload-progress-text {
  font-size: 14px;
  color: #0056b3;
}

/* ============================================================================
   ACTIVITY SECTION STYLES
   ============================================================================ */

/* Activity tab header with Add Note button */
.activity-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e5e5;
}

/* Activity items container */
#activity-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Individual activity item */
.activity-item {
  background: #f8f9fa;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 16px;
  transition: box-shadow 0.2s;
}

.activity-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Activity header (context + meta) */
.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #dee2e6;
}

.activity-context {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.activity-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: #6c757d;
}

.activity-creator {
  font-weight: 500;
}

.activity-date {
  font-style: italic;
}

/* Activity body (HTML content from Monday.com) */
.activity-body {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

/* Style Monday.com HTML content */
.activity-body p {
  margin: 8px 0;
}

.activity-body ul, 
.activity-body ol {
  margin: 8px 0;
  padding-left: 24px;
}

.activity-body li {
  margin: 4px 0;
}

.activity-body strong {
  font-weight: 700;
}

.activity-body em {
  font-style: italic;
}

.activity-body u {
  text-decoration: underline;
}

.activity-body del {
  text-decoration: line-through;
}

.activity-body h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 12px 0 8px;
}

.activity-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
  font-size: 13px;
}

.activity-body table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.activity-body a {
  color: #1f5fbf;
  text-decoration: none;
}

.activity-body a:hover {
  text-decoration: underline;
}

/* User mentions styling */
.activity-body .user_mention_editor {
  background: #e7f3ff;
  padding: 2px 6px;
  border-radius: 3px;
  color: #0056b3;
  font-weight: 500;
}

/* Activity item content - better list formatting */
.activity-body ul,
.activity-body ol {
  margin: 8px 0;
  padding-left: 24px;
}

.activity-body ul li {
  list-style-type: disc;
  margin: 4px 0;
}

.activity-body ol li {
  list-style-type: decimal;
  margin: 4px 0;
}

.activity-body pre {
  background: #f5f5f5;
  padding: 8px;
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

.activity-delete {
	cursor: pointer;
	margin-left: 8px;
	opacity: 0.6;
	font-size: 16px;
	transition: opacity 0.2s;
}

.activity-delete:hover {
	opacity: 1;
}

/* Activity sections (customer notes vs job activity) */
.activity-section {
  margin-bottom: 24px;
}

.activity-section-header {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #dee2e6;
}

/* Job activity group (collapsible) */
.job-activity-group {
  margin-bottom: 12px;
}

.job-activity-header {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.job-activity-header:hover {
  background: #e5e5e5;
}

.job-activity-header .toggle-icon {
  font-size: 10px;
  transition: transform 0.2s;
}

.job-activity-header.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.job-activity-list {
  margin-left: 20px;
}

/* ============================================================================
   EQUIPMENT SECTION STYLES - SHARED ACROSS CUSTOMERS & JOBS
   ============================================================================ */

/* Equipment header with search and actions */
.eq-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px;
	border: 1px solid #e5e5e5;
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	background: #f7f7f7;
}

.eq-search {
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 6px;
	min-width: 260px;
}

/* Equipment grid header */
.eq-grid-header {
	display: grid;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid #e5e5e5;
	background: #f2f2f2;
	font-weight: 600;
}

/* Equipment row */
.eq-row {
	display: grid;
	gap: 12px;
	padding: 12px;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-top: none;
	align-items: center;
}

/* Equipment details section */
.eq-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 12px;
	border: 1px solid #e5e5e5;
	border-top: none;
	border-bottom: 1px solid #e5e5e5;
}

.eq-kv {
	margin: 2px 0;
}

.eq-empty {
	padding: 20px;
	text-align: center;
	color: #666;
}

/* Equipment input fields */
.eq-input {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	font-size: 14px;
	box-sizing: border-box;
}

.eq-input:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

textarea.eq-input {
	resize: vertical;
	min-height: 60px;
	font-family: inherit;
}

select.eq-input {
	cursor: pointer;
}

/* Equipment edit actions */
.eq-edit-actions {
	display: none;
	gap: 8px;
	margin-top: 8px;
	padding: 8px 12px;
	background: #f8f9fa;
	border-top: 1px solid #e5e5e5;
}

.eq-edit-actions .btn {
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #f7f7f7;
	cursor: pointer;
	font-size: 14px;
}

.eq-edit-actions .primary {
	background: #007bff;
	color: #fff;
	border-color: #007bff;
}

.eq-edit-actions .btn:hover {
	background: #e6e6e6;
}

.eq-edit-actions .primary:hover {
	background: #0056b3;
}

/* Equipment rows in edit mode - no yellow highlight */
[data-equipment-index].eq-editing {
	background: #fafafa !important;
}

[data-equipment-index].eq-editing .eq-details {
	background: #fafafa !important;
}

/* Equipment chips for job history */
.eq-chip {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 6px;
	border: 1px solid #f3e7b3;
	background: #fff9db;
}

.eq-chip-blue {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 6px;
	border: 1px solid #bcd1f6;
	background: #e9f1ff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.eq-grid-header,
	.eq-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.eq-details {
		grid-template-columns: 1fr;
	}
}

/* ============================================================================
   AUTH FORMS - Forgot Password & Reset Password
   ============================================================================ */

.mcm-auth-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 400px;
	padding: 40px 20px;
	font-family: Arial, Helvetica, sans-serif;
}

.mcm-auth-box {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	padding: 40px;
	width: 100%;
	max-width: 420px;
}

.mcm-auth-title {
	font-size: 24px;
	font-weight: 700;
	color: #1e3a5f;
	margin: 0 0 8px 0;
	text-align: center;
}

.mcm-auth-subtitle {
	font-size: 14px;
	color: #666;
	text-align: center;
	margin: 0 0 30px 0;
	line-height: 1.5;
}

.mcm-auth-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mcm-form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mcm-form-group label {
	font-size: 14px;
	font-weight: 600;
	color: #333;
}

.mcm-form-group input {
	padding: 12px 14px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 15px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.mcm-form-group input:focus {
	outline: none;
	border-color: #1e3a5f;
	box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.mcm-form-group input.readonly,
.mcm-form-group input[readonly] {
	background: #f5f5f5;
	color: #666;
	cursor: not-allowed;
}

.mcm-field-hint {
	font-size: 12px;
	color: #888;
}

.mcm-auth-btn {
	padding: 14px 24px;
	background: #c41e3a;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
	margin-top: 10px;
}

.mcm-auth-btn:hover {
	background: #a31830;
}

.mcm-auth-btn:active {
	transform: scale(0.98);
}

.mcm-auth-btn:disabled {
	background: #ccc;
	cursor: not-allowed;
}

.mcm-form-message {
	padding: 12px 14px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.4;
}

.mcm-form-message.success {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.mcm-form-message.error {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.mcm-auth-link {
	text-align: center;
	margin-top: 20px;
	font-size: 14px;
}

.mcm-auth-link a {
	color: #1e3a5f;
	text-decoration: none;
	font-weight: 500;
}

.mcm-auth-link a:hover {
	text-decoration: underline;
}

.mcm-auth-message {
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
	text-align: center;
}

.mcm-auth-message p {
	margin: 0;
	font-size: 15px;
	color: #555;
}

.mcm-auth-message a {
	color: #1e3a5f;
	font-weight: 500;
}

/* Responsive auth forms */
@media (max-width: 480px) {
	.mcm-auth-box {
		padding: 30px 20px;
	}

	.mcm-auth-title {
		font-size: 20px;
	}
}

/* ============================================================================
   HOVER MAPS - Leaflet map tooltips on address hover
   ============================================================================ */

.mcm-address-cell {
	cursor: pointer;
	position: relative;
}

.mcm-address-cell:hover {
	background-color: rgba(18, 101, 196, 0.08);
}

.mcm-map-tooltip {
	pointer-events: none;
	animation: mcm-map-fadein 0.15s ease-out;
}

@keyframes mcm-map-fadein {
	from { opacity: 0; transform: translateY(-5px); }
	to { opacity: 1; transform: translateY(0); }
}

.mcm-map-container {
	width: 300px;
	height: 200px;
	border: 2px solid #ccc;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	background: #f0f0f0;
}

.mcm-no-map-message {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 12px 16px;
	font-size: 13px;
	color: #666;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ============================================
   Square Payment Button - Tech Mobile
   ============================================ */
.tech-square-pay-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px 24px;
	background: linear-gradient(135deg, #006aff 0%, #0052cc 100%);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 106, 255, 0.3);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tech-square-pay-btn:active {
	transform: scale(0.98);
	box-shadow: 0 2px 8px rgba(0, 106, 255, 0.2);
}

.tech-square-pay-btn .square-icon {
	font-size: 22px;
	font-weight: bold;
}

.tech-square-note {
	text-align: center;
	margin-top: 12px;
	font-size: 13px;
	color: #666;
}

.tech-square-error {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	margin-bottom: 16px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	color: #dc2626;
	font-size: 13px;
}

.tech-square-error .error-icon {
	flex-shrink: 0;
}

.tech-square-paid {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
	color: #16a34a;
	font-size: 16px;
	font-weight: 600;
}

/* ==========================================================================
   Send-modal styles (Email / Text Invoice, Job Message ▾, QUO admin config)
   Originally lived inline in templates/invoices.php; moved here so the same
   modal CSS is available on every plugin page (admin, jobs, invoices, etc.).
   ========================================================================== */
.inv-send-overlay {
	position: fixed; inset: 0; z-index: 10000;
	background: rgba(0,0,0,0.5);
	display: flex; align-items: flex-start; justify-content: center;
	padding: 40px 20px;
	overflow-y: auto;
}
.inv-send-modal {
	background: #fff; border-radius: 10px; width: min(720px, 100%);
	box-shadow: 0 12px 40px rgba(0,0,0,0.25);
	display: flex; flex-direction: column;
}
.inv-send-modal-text { width: min(540px, 100%); }
.inv-send-modal .mcm-modal-header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 18px 22px; border-bottom: 1px solid #e5e7eb;
}
.inv-send-modal .mcm-modal-header h2 { margin: 0; font-size: 18px; font-weight: 600; color: #1a202c; }
.inv-send-modal .mcm-modal-close {
	border: none; background: transparent; font-size: 24px; line-height: 1; color: #718096; cursor: pointer; padding: 4px 8px;
}
.inv-send-modal .mcm-modal-close:hover { color: #e53e3e; }
.inv-send-modal .mcm-modal-body { padding: 20px 22px; }
.inv-send-modal .mcm-modal-footer {
	display: flex; justify-content: flex-end; gap: 10px;
	padding: 14px 22px; border-top: 1px solid #e5e7eb;
	background: #f9fafb; border-radius: 0 0 10px 10px;
}
.inv-send-row {
	display: grid; grid-template-columns: 88px 1fr auto; gap: 10px; align-items: center;
	margin-bottom: 14px;
}
.inv-send-row > label { font-size: 13px; font-weight: 500; color: #4a5568; }
.inv-send-row.inv-send-row-stack { grid-template-columns: 1fr; gap: 6px; }
.inv-send-row.inv-send-row-stack > label { margin-bottom: 4px; }
.inv-send-input { padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; }
.inv-send-input:focus { outline: none; border-color: #4299e1; box-shadow: 0 0 0 3px rgba(66,153,225,0.15); }
.inv-send-inline-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #4a5568; white-space: nowrap; }

.inv-send-chip-input {
	border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 8px; background: #fff;
	display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 38px;
}
.inv-send-chips { display: contents; }
.inv-send-chip {
	background: #ebf8ff; border: 1px solid #bee3f8; color: #1e4e8c;
	padding: 3px 6px 3px 10px; border-radius: 12px;
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 13px;
}
.inv-send-chip-x {
	border: none; background: transparent; color: #2a69ac; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.inv-send-chip-x:hover { color: #c53030; }
.inv-send-chip-input > input {
	border: none; outline: none; flex: 1; min-width: 120px; font-size: 13px; padding: 4px;
}

.inv-send-other-wrap { position: relative; margin-top: 6px; grid-column: 2 / -1; }
.inv-send-other-list {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
	background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	max-height: 240px; overflow-y: auto;
}
.inv-send-other-row {
	padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px;
	font-size: 13px;
}
.inv-send-other-row:hover { background: #f7fafc; }
.inv-send-other-row.disabled { color: #a0aec0; cursor: not-allowed; }
.inv-send-other-row.disabled:hover { background: transparent; }
.inv-send-other-email { color: #718096; }

.inv-send-body-header { display: flex; justify-content: space-between; align-items: center; }
.inv-send-body-editor {
	border: 1px solid #e2e8f0; border-radius: 6px; min-height: 220px;
	background: #fff;
}
.inv-send-body-editor .ql-toolbar.ql-snow { border: none; border-bottom: 1px solid #e2e8f0; border-radius: 6px 6px 0 0; }
.inv-send-body-editor .ql-container.ql-snow { border: none; min-height: 180px; }
.inv-send-fallback-textarea {
	width: 100%; min-height: 160px;
	padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 6px;
	font-size: 14px; line-height: 1.5; resize: vertical;
}
.inv-send-note { color: #718096; font-size: 12px; margin-top: 4px; font-style: italic; }

.inv-send-attach-picker {
	border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc;
	max-height: 200px; overflow-y: auto; padding: 4px 0;
}
.inv-send-pick-row {
	padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px;
}
.inv-send-pick-row:hover { background: #edf2f7; }
.inv-send-pick-empty { padding: 12px; color: #a0aec0; font-style: italic; font-size: 13px; }
.inv-send-attached-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.inv-send-attached-chip {
	background: #f0fff4; border: 1px solid #c6f6d5; color: #22543d;
	padding: 4px 6px 4px 10px; border-radius: 12px;
	display: inline-flex; align-items: center; gap: 4px; font-size: 13px;
}
.inv-send-attached-chip.inv-send-attached-auto { background: #ebf8ff; border-color: #bee3f8; color: #1e4e8c; }

/* ============================================================
   Reminders panel — Phase 4a (read-only render)
   Job-detail modal lives on Jobs/Calendar/Customers pages, which
   only enqueue mcm.css (not admin.css). Styles must live here.
   Mirrors Service Fusion screenshot: green Sent pill, channel
   chips, muted countdown. Toggle in header is visual only in 4a.
   ============================================================ */
.mcm-reminders-section .rows.mcm-reminders-list {
	padding: 0;
}

.mcm-reminder-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 1px solid #e5e7eb;
	gap: 12px;
}
.mcm-reminder-row:last-child { border-bottom: none; }

.mcm-reminder-main {
	flex: 1;
	min-width: 0;
}

.mcm-reminder-display-name {
	font-size: 14px;
	color: #2d3748;
	margin-bottom: 4px;
}

.mcm-reminder-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: 12px;
}

.mcm-reminder-channels {
	display: inline-flex;
	gap: 4px;
}

.mcm-reminder-chip {
	background: #f7fafc;
	border: 1px solid #e2e8f0;
	color: #4a5568;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 11px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Phase 4d: Email/Text chips on reminder rows are clickable — clicking opens
   the Message modal. Call chips stay plain (no send modal exists). */
.mcm-reminder-chip-clickable {
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.mcm-reminder-chip-clickable:hover {
	background: #e6f0fa;
	border-color: #93c5fd;
	color: #1e40af;
}

.mcm-reminder-target,
.mcm-reminder-countdown {
	color: #718096;
	font-size: 12px;
}

.mcm-reminder-state { flex: 0 0 auto; }

.mcm-pill-sent {
	background: #10b981;
	color: #fff;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Toggle in section header — Phase 4c wired the click handler (was inert in 4a/4b). */
.mcm-reminders-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 12px;
	background: #edf2f7;
	color: #4a5568;
	cursor: pointer;
	user-select: none;
}
.mcm-reminders-toggle.mcm-reminders-toggle-on  { background: #c6f6d5; color: #22543d; }
.mcm-reminders-toggle.mcm-reminders-toggle-off { background: #fed7d7; color: #742a2a; }

/* ============================================================
   Reminders panel — Phase 4c (presets-only UI)
   Single-line row layout. Four-state pill model. Section-header
   "+ Add New" + "Insert From Presets ▾" dropdown. Per-row
   pencil + Mark Sent / Unmark / Delete buttons.
   ============================================================ */

/* Single-line layout override of the Phase 4a stacked .mcm-reminder-row. */
.mcm-reminder-row {
	flex-direction: row;
	flex-wrap: wrap;
}
.mcm-reminder-display-name {
	margin-bottom: 0;
	flex: 0 1 auto;
	min-width: 180px;
}
.mcm-reminder-target {
	white-space: nowrap;
}

/* Phase 4c.1: left cluster groups name + chips + target + pill so the row
   reads as one unit — single inline row. The right cluster carries countdown +
   action buttons. Template name leads at the far left (preset rows). */
.mcm-reminder-left {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: wrap;
}
/* Template (Communications) name — the leftmost column, tells the user which
   template this preset reminder maps to. min-width gives a loose column feel so
   the descriptions line up. Custom rows omit it (description leads instead). */
.mcm-reminder-template-name {
	font-weight: 600;
	font-size: 13px;
	color: #1f2937;
	min-width: 150px;
	flex: 0 0 auto;
}
/* Description drops to a calmer secondary weight now the template leads. */
.mcm-reminder-display-name {
	color: #4a5568;
	font-size: 13px;
}

/* Right cluster: countdown + action buttons. Pushes right via margin-left:auto
   so it floats to the row end regardless of label length. */
.mcm-reminder-right {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex: 0 0 auto;
	flex-shrink: 0;
}

/* Four pill states. Sent already exists (Phase 4a). */
.mcm-pill-due {
	background: #dc2626;
	color: #fff;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.mcm-pill-disabled {
	background: #7f1d1d;
	color: rgba(255,255,255,0.85);
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.mcm-pill-pending {
	background: #6b46c1;
	color: #fff;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
/* Dormant — preset asleep while the job is Paused/Canceled (revives on reactivation). */
.mcm-pill-dormant {
	background: #475569;
	color: rgba(255,255,255,0.9);
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
/* Deferred — no start date yet; materialises when the job is scheduled. */
.mcm-pill-deferred {
	background: #b45309;
	color: #fff;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
/* Inert rows read as muted but stay legible/actionable. */
.mcm-reminder-row--dormant,
.mcm-reminder-row--deferred { opacity: 0.72; }

/* Per-row action buttons (pencil / Mark Sent / Unmark / 🗑). */
.mcm-reminder-actions {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.mcm-reminder-actions button {
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
	font-size: 13px;
	padding: 2px 8px;
	border-radius: 4px;
	color: #4a5568;
	transition: background 0.12s, border-color 0.12s;
}
.mcm-reminder-actions button:hover {
	background: #f1f5f9;
	border-color: #cbd5e0;
}
.mcm-reminder-edit,
.mcm-reminder-delete {
	font-size: 14px; /* icon-only buttons read a touch larger */
	line-height: 1;
}
.mcm-reminder-delete:hover {
	color: #dc2626;
	background: #fef2f2;
	border-color: #fecaca;
}

/* Phase 4d: Mark Sent / Unmark as an invisible button wrapping a CSS-rendered
   pretty green checkbox (20px). Replaces the 4c.1 Unicode ☐/☑ chars per user
   feedback — those rendered small/ugly across browsers. .mcm-reminder-actions
   button still gives us the base reset; we override to drop the visible chrome
   and let the .mcm-checkbox-icon span carry the whole visual. */
.mcm-reminder-mark-sent,
.mcm-reminder-unmark {
	background: transparent;
	border: none;
	padding: 4px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mcm-reminder-mark-sent:hover,
.mcm-reminder-unmark:hover {
	background: transparent; /* override .mcm-reminder-actions button:hover */
	border-color: transparent;
}

/* Larger, pretty checkbox icon. CSS-only — no font/SVG dependency. */
.mcm-checkbox-icon {
	width: 20px;
	height: 20px;
	border: 2px solid #cbd5e0;
	border-radius: 4px;
	background: #fff;
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	transition: border-color 0.15s, background 0.15s;
}
.mcm-reminder-mark-sent:hover .mcm-checkbox-icon {
	border-color: #10b981;
}
/* Checked: green fill + white checkmark via ::after rotated borders. */
.mcm-checkbox-icon--checked {
	background: #10b981;
	border-color: #10b981;
}
.mcm-checkbox-icon--checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.mcm-reminder-unmark:hover .mcm-checkbox-icon--checked {
	background: #059669;
	border-color: #059669;
}

/* Auto-marked Sent: visual-only wrapper that matches Mark Sent / Unmark
   button geometry so the row balances. No cursor, no hover — the server's
   auto-mark-done write-back from the send log would re-flip an unmark. */
.mcm-reminder-auto-marked {
	padding: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: default;
}

/* Phase 4c.1: read-only template preview in the reminder modal. */
#rm-message[readonly] {
	background: #f7fafc;
	color: #4a5568;
	cursor: default;
}

/* Section header — three controls (presets toggle, + Add New, on/off). */
.mcm-reminders-header-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* "Insert From Presets ▾" toggle + dropdown. */
.mcm-preset-toggle-wrap {
	position: relative;
}
.mcm-preset-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 280px;
	max-width: 420px;
	max-height: 320px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	z-index: 1000;
	margin-top: 2px;
}
.mcm-preset-option {
	padding: 8px 12px;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	transition: background-color 0.12s ease;
}
.mcm-preset-option:last-child { border-bottom: none; }
.mcm-preset-option:hover { background-color: #f5f5f5; }
.mcm-preset-option.mcm-preset-loading { cursor: default; }
.mcm-preset-option.mcm-preset-loading:hover { background: transparent; }
.mcm-preset-name { font-weight: 600; color: #2d3748; }
.mcm-preset-timing { font-size: 11px; color: #718096; margin-left: auto; }

/* ============================================================
   Phase 5 — Bell badge for jobs with a reminder due within 24h.
   Renders on calendar block, jobs list row, AND job-detail
   modal header. Driven off /file/jobs `reminders_due_soon`
   (server filters to ≤24h pending only — past-due Disabled
   state never triggers it). Modal-header variant is also
   client-recomputed by updateModalHeaderBell() so Mark Sent /
   Unmark inside the modal flip the bell without waiting for
   the next /file/jobs poll.
   Lives in mcm.css (NOT admin.css) — bell surfaces on Jobs
   list + Calendar, neither enqueues admin.css.
   ============================================================ */
.mcm-bell-badge {
	display: inline-block;
	line-height: 1;
	user-select: none;
}

/* Calendar block variant: absolute top-right corner of the block.
   pointer-events:none so the click falls through to the block. */
.mcm-bell-badge-cal {
	position: absolute;
	top: 2px;
	right: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #D3D3D3;          /* soft amber */
	border: 1px solid rgba(0,0,0,0.08);
	font-size: 12px;
	line-height: 1;
	opacity: 0.95;
	pointer-events: none;
	z-index: 2;
}

/* Jobs list variant: inline next to Job#. */
.mcm-bell-badge-list {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #D3D3D3;
	font-size: 14px;
	line-height: 1;
	vertical-align: middle;
	margin-left: 4px;
}

/* Job-detail modal header variant: inline next to <h2>Job # …</h2>. */
.mcm-bell-badge-header {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: #D3D3D3;
	font-size: 18px;
	line-height: 1;
	vertical-align: middle;
	margin-left: 6px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Contacts (shared by view-customers Account Info + job/estimate/invoice modals).
   Rendered by assets/js/modules/contacts-module.js. One row per contact:
   First | Last | Phone | Type (smaller) | Email | + New ; extra phones/emails nest below.
   ────────────────────────────────────────────────────────────────────────── */
.mcm-contact { padding: 4px 0; }
.mcm-contact + .mcm-contact { border-top: 1px solid #e0e0e0; padding-top: 16px; margin-top: 16px; }
.mcm-contact-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; margin: 0 0 10px 0; }
.mcm-contact-del { cursor: pointer; color: #dc3545; font-size: 18px; }
.mcm-contact-main { display: grid; grid-template-columns: 1fr 1fr 0.7fr 1fr 1.3fr auto; gap: 12px; align-items: end; }
.mcm-contact-cell { min-width: 0; }
.mcm-contact-cell--type { /* "Type" sits closer to phone and is a touch narrower */ }
.mcm-contact-cell--new { display: flex; flex-direction: column; justify-content: flex-end; }
.mcm-contact-label { font-size: 12px; color: #666; margin-bottom: 4px; }
.mcm-contact-value { font-size: 14px; word-break: break-word; }
/* explicit dark text on white so inputs are readable in every host context (modal/section) */
.mcm-contact-input { width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; box-sizing: border-box; color: #1f2937; background: #fff; }
.mcm-contact-input--type { /* free-text phone-type label */ }
/* nested extra phones/emails — clearly tied to the contact above; widths roughly mirror the
   main row's Type / Phone / Email columns (NOT full-width) */
.mcm-contact-extras { margin: 8px 0 0 16px; border-left: 2px solid #e8eef6; padding-left: 12px; }
.mcm-contact-extras:empty { display: none; }
.mcm-contact-extra { display: flex; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
.mcm-contact-extra-label { font-size: 11px; color: #888; flex: 0 0 60px; }
.mcm-contact-extra-value { font-size: 14px; }
.mcm-contact-extra .mcm-contact-input { flex: 0 1 auto; max-width: 100%; }
.mcm-contact-extra .mcm-contact-input[data-xf="number"] { width: 200px; }
.mcm-contact-extra .mcm-contact-input[data-xf="email"] { width: 280px; }
.mcm-contact-extra .mcm-contact-input--type { width: 110px; }
.mcm-contact-extra-del { cursor: pointer; color: #dc3545; font-size: 15px; flex: 0 0 auto; }
/* + New control */
.mcm-contact-newwrap { position: relative; }
.mcm-contact-newbtn { padding: 6px 10px; background: #2d3748; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.mcm-contact-newbtn:hover { background: #1f2733; }
.mcm-contact-newmenu { position: absolute; right: 0; top: 100%; margin-top: 4px; background: #fff; border: 1px solid #d1d5db; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); z-index: 30; min-width: 120px; overflow: hidden; }
.mcm-contact-newmenu[hidden] { display: none; }
.mcm-contact-newmenu button { display: block; width: 100%; text-align: left; padding: 8px 12px; background: none; border: none; cursor: pointer; font-size: 13px; }
.mcm-contact-newmenu button:hover { background: #f3f4f6; }
.mcm-contact-note { margin-top: 16px; padding: 12px; background: #f8f9fa; border-radius: 6px; font-size: 13px; color: #666; }

@media (max-width: 720px) {
	.mcm-contact-main { grid-template-columns: 1fr 1fr; }
	.mcm-contact-cell--new { grid-column: 1 / -1; align-items: flex-start; }
	.mcm-contact-extra { flex-wrap: wrap; }
	.mcm-contact-extra-label { min-width: 0; }
}

/* ===== Dispatch calendar: job click popover (SS1) ===== */
.mcm-cal-popover {
	width: 320px; max-width: 92vw; background: #fff; border: 1px solid #e2e8f0;
	border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.18); z-index: 100001;
	font-size: 14px; color: #1f2937; overflow: hidden;
}
.mcm-cal-pop-header {
	display: flex; align-items: center; gap: 10px; padding: 12px 14px;
	border-bottom: 1px solid #eef2f7;
}
.mcm-cal-pop-jobid { font-weight: 700; color: #111827; }
.mcm-cal-pop-jobid a { color: #1265c4; text-decoration: none; }
.mcm-cal-pop-jobid a:hover { text-decoration: underline; }
.mcm-cal-pop-close {
	margin-left: auto; background: none; border: none; font-size: 20px; line-height: 1;
	color: #9ca3af; cursor: pointer; padding: 0 2px;
}
.mcm-cal-pop-close:hover, .mcm-cal-pop-close:focus, .mcm-cal-pop-close:active { color: #374151; background: none; outline: none; }
.mcm-cal-pop-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.mcm-cal-pop-line { line-height: 1.35; word-break: break-word; }
.mcm-cal-pop-person { font-weight: 600; }
.mcm-cal-pop-sub { color: #4b5563; margin-top: -4px; }
.mcm-cal-pop-desc { color: #374151; }
.mcm-cal-pop-link { color: #1265c4; text-decoration: none; }
.mcm-cal-pop-link:hover { text-decoration: underline; }
.mcm-cal-pop-more { color: #1265c4; text-decoration: none; font-weight: 600; }
.mcm-cal-pop-more:hover { text-decoration: underline; }
.mcm-cal-pop-statusrow { display: flex; gap: 8px; margin-top: 6px; align-items: center; }
.mcm-cal-pop-status-select {
	flex: 1; padding: 7px 8px; border: 1px solid #cbd5e1; border-radius: 6px;
	font-size: 13px; background: #fff; color: #1f2937; cursor: pointer;
}
.mcm-cal-pop-update {
	padding: 7px 14px; background: #2f7fd1; color: #fff; border: none; border-radius: 6px;
	font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
/* Override all 3 states so the theme's default button-green never shows through. */
.mcm-cal-pop-update:hover, .mcm-cal-pop-update:focus, .mcm-cal-pop-update:active { background: #1f6fc0; color: #fff; outline: none; }
.mcm-cal-pop-update:disabled { opacity: 0.6; cursor: default; }
/* "Visit" tag in the site-visit popover header — same card as a job, just labelled, so the
   two read as one system rather than two different popups. */
.mcm-cal-pop-visittag {
	font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: #475569; background: #e2e8f0; border-radius: 4px; padding: 1px 5px; margin-left: 4px;
}

/* ===== Dispatch calendar: compact detail window (MCM.jobDetailCompact) ===== */
/* z-index 9500 sits above the calendar but BELOW the shared message/dispatch
   overlays (10000) so they open on top of this window. */
.mcm-compact-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,0.45);
	display: flex; align-items: flex-start; justify-content: center; z-index: 9500;
	/* top padding clears the site nav header so the window sits below it */
	padding: 70px 16px 20px;
}
.mcm-compact-window {
	display: flex; width: 1080px; max-width: 96vw; max-height: calc(100vh - 90px);
	background: #fff; border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.mcm-cmpct-side {
	flex: 0 0 190px; display: flex; flex-direction: column; gap: 8px; padding: 14px;
	background: #f4f7fb; border-right: 1px solid #e2e8f0; border-radius: 10px 0 0 10px;
}
.mcm-cmpct-sbtn { width: 100%; text-align: left; display: block; text-decoration: none; }
.mcm-cmpct-side .mcm-dropdown-wrap { display: block; width: 100%; }
.mcm-cmpct-side .mcm-dropdown-wrap .mcm-btn-secondary { width: 100%; text-align: left; }
.mcm-cmpct-side .mcm-dropdown-menu { right: auto; left: 0; }
/* Side-menu icon rail: the window carries .mcm-cmpct-rail by default (icons only, always
   visible — dummy-proof); the header toggle removes it to expand to full labels. */
.mcm-cmpct-ico { font-size: 16px; }
.mcm-cmpct-side .mcm-cmpct-lbl { margin-left: 8px; }
.mcm-cmpct-rail .mcm-cmpct-side { flex-basis: 58px; padding: 14px 8px; align-items: center; }
.mcm-cmpct-rail .mcm-cmpct-lbl { display: none; }
.mcm-cmpct-rail .mcm-cmpct-sbtn,
.mcm-cmpct-rail .mcm-cmpct-side .mcm-dropdown-wrap .mcm-btn-secondary { text-align: center; padding-left: 6px; padding-right: 6px; }
.mcm-cmpct-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; max-height: calc(100vh - 90px); }
.mcm-cmpct-header {
	display: flex; align-items: center; gap: 12px; padding: 14px 18px;
	border-bottom: 1px solid #eef2f7; flex: 0 0 auto;
}
.mcm-cmpct-menu-toggle { background: none; border: none; font-size: 20px; cursor: pointer; color: #4b5563; padding: 0 4px; }
.mcm-cmpct-menu-toggle:hover, .mcm-cmpct-menu-toggle:focus, .mcm-cmpct-menu-toggle:active { color: #111827; background: none; outline: none; }
.mcm-cmpct-title { font-size: 18px; font-weight: 700; color: #111827; }
.mcm-cmpct-techline { color: #4b5563; font-size: 14px; }
.mcm-cmpct-close { margin-left: auto; background: none; border: none; font-size: 24px; line-height: 1; color: #9ca3af; cursor: pointer; padding: 0 4px; }
.mcm-cmpct-close:hover, .mcm-cmpct-close:focus, .mcm-cmpct-close:active { color: #374151; background: none; outline: none; }
.mcm-cmpct-scroll { overflow-y: auto; padding: 8px 18px 18px; flex: 1 1 auto; }
.mcm-cmpct-scroll .kv { grid-template-columns: 130px 1fr; }
.mcm-cmpct-mapsection { display: flex; flex-direction: column; }
.mcm-cmpct-map { width: 100%; height: 320px; }
.mcm-cmpct-nomap { display: flex; align-items: center; justify-content: center; height: 320px; color: #9ca3af; font-size: 14px; }
/* Row-2 right column (under the map): Job Info + Tech Notes + Site Visits + Completion Notes
   stacked FLUSH — no gaps — into one continuous bordered block. */
.mcm-cmpct-col > .section { margin: 0; border-radius: 0; }
.mcm-cmpct-col > .section:not(:first-child) { border-top: none; }
.mcm-cmpct-col > .section:first-child { border-top-left-radius: 6px; border-top-right-radius: 6px; }
.mcm-cmpct-col > .section:last-child { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
/* Payment tri-state bubbles (Section 4) */
.mcm-pay-bubble { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.mcm-pay-full { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.mcm-pay-partial { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.mcm-pay-unpaid { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.mcm-pay-none { background: #f3f4f6; color: #4b5563; border: 1px solid #d1d5db; }
@media (max-width: 860px) {
	.mcm-compact-window { flex-direction: column; }
	.mcm-cmpct-side {
		flex-basis: auto; flex-direction: row; flex-wrap: wrap;
		border-right: none; border-bottom: 1px solid #e2e8f0; border-radius: 10px 10px 0 0;
	}
	.mcm-cmpct-sbtn, .mcm-cmpct-side .mcm-dropdown-wrap { width: auto; }
}

/* ── Options dropdown (global) — the "Options ▾" menu on the Jobs & Customers list views.
   A small, self-contained component so it works on every page without depending on the
   jobs-page inline dropdown CSS. Toggled by MCM.toggleOptionsMenu(menuId, event). ── */
.mcm-optwrap { position: relative; display: inline-block; }
.mcm-optmenu {
	position: absolute; top: calc(100% + 4px); right: 0; min-width: 168px;
	background: #fff; border: 1px solid #d7dde4; border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0,0,0,.14); z-index: 9000; display: none; overflow: hidden;
}
.mcm-optmenu.show { display: block; }
.mcm-optitem { padding: 9px 14px; font-size: 14px; line-height: 1.2; cursor: pointer; white-space: nowrap; color: #1a202c; }
.mcm-optitem:hover { background: #f2f4f7; }
.mcm-optitem.danger { color: #b42318; }
/* ── Missed clock-out fix dialog ──────────────────────────────────────────
   Lives in the shared sheet because MCM.Clock raises it from the desktop nav
   dropdown AND the mobile Time Clock screen. Sized for a thumb either way. */
.mcm-clockfix-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 100000;
  padding: 16px;
}
.mcm-clockfix {
  background: #fff;
  border-radius: 12px;
  padding: 22px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  box-sizing: border-box;
}
.mcm-clockfix-head {
  font-size: 19px;
  font-weight: 700;
  color: #1e3a5f;
  margin-bottom: 6px;
}
.mcm-clockfix-lede {
  margin: 0 0 16px;
  font-size: 15px;
  color: #444;
  line-height: 1.45;
}
.mcm-clockfix-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #777;
  margin-bottom: 6px;
}
.mcm-clockfix input.mcm-clockfix-input {
  width: 100%;
  padding: 12px 10px;
  font-size: 16px;   /* 16px stops iOS zooming the page on focus */
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  background: #fff;
  color: #222;
  font-family: inherit;
  box-sizing: border-box;
}
.mcm-clockfix-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: #888;
  line-height: 1.45;
}
.mcm-clockfix-btns {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
/* All three states pinned so the theme's default button green cannot appear. */
.mcm-clockfix-send,
.mcm-clockfix-send:hover,
.mcm-clockfix-send:focus {
  flex: 1;
  padding: 13px 16px;
  background: #1265c4;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.mcm-clockfix-send:active { background: #0d4f9e; color: #fff; }
.mcm-clockfix-send[disabled] { opacity: 0.6; cursor: default; }
.mcm-clockfix-cancel,
.mcm-clockfix-cancel:hover,
.mcm-clockfix-cancel:focus {
  padding: 13px 16px;
  background: #fff;
  color: #666;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
}
.mcm-clockfix-cancel:active { background: #f4f5f7; color: #444; }

/* The flag itself is now an action, so it should look like one. */
[data-clock-fix] { cursor: pointer; }