/* ============================================================================
   button-consistency.css — GLOBAL BUTTON NORMALIZE  (loaded DEAD LAST)
   ----------------------------------------------------------------------------
   Single source of truth for button SHAPE + EDGE across the whole app and
   every design mode (default, editorial, mobile). Added 2026-07-20 per Ben:
   "remove the harsh black edges, make all buttons a consistent radius and
    padding." Chosen standard: 8px corners, soft grey borders.

   WHY THIS FILE EXISTS: the audit found ~13 competing button systems
   (Bootstrap .btn-*, .btn-opt-*, .ui-btn, .cm-*, .imt-*, .gbp-*, .hg-*,
   .acw-*, .tm-*, .ce-*, editorial-final's 2px pin, etc.) with border-radius
   ranging 2px→9999px and a handful of near-black (var(--ink)) borders. Rather
   than edit all of those (incl. the actively-reworked editorial-final.css),
   this one sheet loads LAST and normalises shape + edge in one place.

   Uses !important deliberately — its entire job is to out-cascade those
   systems (many of which already use !important + inline styles).

   EXEMPT (keep their own shape): filter/toggle pills, segmented controls,
   icon-only round/close buttons, badges, button-groups.
   ============================================================================ */

:root {
  --r-btn: 8px;                                   /* the one button radius   */
  --btn-border-soft: var(--border-standard, #e9e6da);
}

/* ── 1. RADIUS — every rectangular button → 8px ──────────────────────────
   Broad element + class net. Pills / icon-circles / segmented are pulled
   back to their own shape in section 2 (which is listed AFTER this, so it
   wins on equal specificity). */
.btn,
button.btn,
.btn-primary, .btn-secondary, .btn-accent, .btn-info, .btn-light,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark,
.btn-outline-danger, .btn-outline-success,
.btn-danger, .btn-success, .btn-warning, .btn-dark,
.btn-sm, .btn-lg,
.btn-primary-opt, .btn-secondary-opt, .btn-danger-opt,
.btn-opt-primary, .btn-opt-secondary, .btn-opt-tertiary, .btn-opt-danger,
.btn-opt-save,
.ui-btn, .ui-btn--sm, .ui-btn--lg,
.action-btn,
.nx-modal-btn-primary, .nx-modal-btn-secondary, .nx-modal-btn-danger,
.payments-btn, .payments-btn--primary, .payments-send-action,
.payments-flag-action, .payments-date-edit-btn, .payments-provider-link-btn,
.cm-btn, .cm-btn-sm, .cm-btn-danger, .cm-btn-ghost,
.cm-cost-btn, .cm-cost-btn--sm, .cm-extend-btn, .cm-modal-btn, .cm-delete-btn,
.sc-link-btn, .ccp-merge-btn, .ccp-dismiss-btn,
.cm-dp__btn, .cm-dd__btn,
.imt-btn, .imt-btn-primary, .imt-btn-danger, .imt-suggest-refresh,
.imt-drive-reconnect-btn,
.tab-btn, .lo-tab-btn, .preset-btn, .apply-btn, .btn-map, .results-back-btn,
.share-copy-btn, .share-btn-regenerate, .share-btn-revoke,
.share-expiry-btn, .share-btn-generate,
.hg-btn, .hg-btn-sm, .hg-btn-primary, .hg-pack-action-btn,
.gbp-btn, .gbp-btn-sm,
.acw-btn, .acw-btn-primary, .acw-btn-ink,
.tm-btn, .tm-btn-primary, .tm-btn-danger, .tm-btn-success, .tm-btn-stop,
.ce-action-btn, .ce-extend-btn, .ce-verify-btn, .ce-launch-btn,
.ce-drive-back-btn,
.lc-action-btn, .br-task-btn, .br-modal-btn, .ld-btn, .pcf-btn, .gmb-btn,
.m-btn,
.cb-add-btn, .cb-sync-btn, .cb-add-profile-btn,
.cmov-action-btn, .cmov-header-bit, .dgst-action-btn, .payment-alert-action,
.cmov-ws-save, .cmov-ws-cancel, .am-drill-action,
.itm-btn, .itm-btn-primary, .itm-btn-ghost,
.sync-btn, .wh-btn, .cs-btn-primary,
.adm-btn, .adm-btn--primary, .adm-btn--accent, .adm-btn--danger,
.adm-btn--ghost, .adm-btn--sm {
  border-radius: var(--r-btn) !important;
}

/* Mobile-v3 default buttons live under a data-attr scope. */
html[data-mobile-version="v3"] .mv3-page .btn { border-radius: var(--r-btn) !important; }

/* ── 2. EXEMPTIONS — keep pills / toggles / segmented in their own shape ──
   Explicit class list only (no broad [class*=pill] — that would round
   unrelated wrapper divs). These are toggle/filter chips, not rect buttons. */
.imt-source-pill, .imt-filter-pill, .imt-suggest-chip,
.cmov-ws-pill, .cm-pill-btn,
.gbp-segmented button,
.rounded-pill, .btn.rounded-pill {
  border-radius: 999px !important;
}
/* Bootstrap button-groups: flat inner edges, rounded outer corners. */
.btn-group > .btn { border-radius: 0 !important; }
.btn-group > .btn:first-child { border-radius: var(--r-btn) 0 0 var(--r-btn) !important; }
.btn-group > .btn:last-child  { border-radius: 0 var(--r-btn) var(--r-btn) 0 !important; }

/* Icon-only / close buttons keep their own square-or-circle footprint. */
.btn-close, .hg-close-btn, .tm-btn-icon, .tm-btn-icon-sq, .adm-iconbtn,
.imt-override-clear, .ce-reorder-btn, .btn-icon, .ui-btn--icon,
.itm-btn-close { border-radius: var(--r-btn) !important; }  /* soften squares to 8px too, but not to pills */

/* ── 3. EDGE — remove the harsh near-black borders ───────────────────────
   3a. OUTLINE / GHOST / light-background buttons that used var(--ink) /
       var(--ink-strong) / var(--border-strong) / #000 as a resting border
       → soft warm grey. */
.btn-outline-primary, .btn-outline-dark,
.acw-btn,
.cb-add-btn, .cb-sync-btn, .cb-add-profile-btn,
.itm-btn, .itm-btn-ghost, .itm-btn-close,
.sync-btn, .wh-btn,
.cmov-action-btn, .dgst-action-btn, .payment-alert-action,
.cm-extend-btn, .cmov-ws-save, .cmov-ws-cancel, .am-drill-action,
a.payments-btn, .payments-btn {
  border-color: var(--btn-border-soft) !important;
}
/* Editorial-mode + wizard outline overrides that pinned a strong border. */
[data-design-mode="editorial"] .btn-outline-secondary,
.add-client-modal .btn-outline-secondary,
[data-design-mode="editorial"] .btn:hover {
  border-color: var(--btn-border-soft) !important;
}

/* 3b. FILLED dark / ink buttons whose border was the same near-black as the
      fill → make the border transparent so there's no separate hard edge
      line (the fill still reads as the button; nothing looks harsh). */
.btn-primary, .btn-dark,
.acw-btn-ink, .acw-places-search-row button,
.itm-btn-primary, .hg-btn-primary {
  border-color: transparent !important;
}

/* ── 4. PADDING — gentle consistency on standard text buttons ────────────
   Radius + edge are the headline fix; padding is normalised lightly and
   ONLY on desktop so mobile 44px tap targets (mobile-overhaul.css) survive.
   Icon-only + pill buttons are excluded (they set their own compact box). */
@media (min-width: 768px) {
  .btn, .btn-opt-primary, .btn-opt-secondary, .btn-opt-danger,
  .btn-primary-opt, .btn-secondary-opt, .btn-danger-opt,
  .payments-btn, .cm-btn, .cm-modal-btn, .imt-btn, .gbp-btn, .hg-btn,
  .tm-btn, .acw-btn, .ce-action-btn, .ui-btn {
    padding: 8px 14px !important;
    line-height: 1.2 !important;
  }
  .btn-sm, .btn-opt-tertiary, .cm-btn-sm, .imt-suggest-refresh,
  .hg-btn-sm, .gbp-btn-sm, .cm-cost-btn--sm, .ui-btn--sm {
    padding: 5px 10px !important;
  }
  .btn-lg, .ui-btn--lg { padding: 11px 20px !important; }
}

/* ── 5. EXTENDED COVERAGE ─────────────────────────────────────────────────
   Additional real rectangular button classes found in the full audit that
   weren't in section 1. Same 8px radius. (Containers like *-btns / *-group /
   *-buttons and pure text links are deliberately excluded.) */
.am-btn-primary, .opt-btn, .opt-btn-primary,
.sl-btn-primary, .sl-save-btn,
.cb-btn-primary, .cb-action-btn, .cb-tag-add-btn,
.gbp-btn-primary,
.gmb-action-btn, .gmb-tab-btn, .geo-tab-btn, .week-tab-btn, .view-toggle-btn,
.integration-action-btn,
.dgst-btn, .dgst-btn-primary, .dgst-btn-ghost, .dgst-action-btn--primary,
.ce-a-actions-btn, .ce-b-panel-btn, .ce-type-filter-btn,
.ce-chat-quick-btn, .agent-quick-btn,
.filter-apply-btn, .filter-preset-btn, .lc-filter-btn,
.ga4-apply-btn, .ga4-back-btn, .ga4-compare-btn, .ga4-preset-btn,
.gsc-preset-btn, .gsc-compare-btn,
.drp-btn, .drp-btn-apply, .drp-btn-cancel,
.range-btn, .pipeline-range-btn,
.inbox-view-btn, .wr-add-note-btn, .troubleshoot-this-btn, .dbg-btn,
.btn-ack, .btn-save-row, .payment-day-edit-btn, .tm-btn-block,
.ui-btn--primary, .ui-btn--secondary, .ui-btn--ghost, .ui-btn--danger,
.cm-modal-btn--cancel, .cm-modal-btn--confirm,
.cm-cost-btn--accent, .cm-cost-btn--ghost, .cm-extend-btn--accent,
.hg-btn-ghost, .imt-btn-ghost, .itm-btn-danger,
.fc-button, .fc-button-primary, .fc-today-button {
  border-radius: var(--r-btn) !important;
}

/* Icon-only buttons in the extended set: soften square corners to 8px, but
   never force them to pills (they keep their compact square/round box). */
.notification-bell-btn, .sidebar-collapse-btn, .sl-icon-btn,
.payments-btn-icon, .adm-iconbtn--accent, .adm-iconbtn--danger,
.btn-icon-sm, .btn-icon-danger, .btn-icon-warning {
  border-radius: var(--r-btn) !important;
}

/* Extended harsh-border softening: any of the above using an ink/strong
   resting border → soft grey (safe: filled variants set their own bg). */
.dgst-btn, .dgst-btn-primary, .gmb-action-btn, .integration-action-btn,
.cb-action-btn, .opt-btn, .inbox-view-btn, .drp-btn {
  border-color: var(--btn-border-soft) !important;
}

/* ── 6. Dashboard KPI drill-down arrow (↗) hover contrast ────────────────
   In editorial mode two overlay rules conflict on hover: one sets the arrow
   text white (var(--paper)) while another keeps a light background, so the
   arrow becomes an invisible white-on-light glyph. Force a high-contrast,
   on-brand hover — accent fill + dark arrow — which also reads as "clickable".
   Higher specificity + last-loaded, so it wins over editorial-overlay.
   (Ben report 2026-07-20.) */
html[data-design-mode="editorial"] body .dash-v2 .dv2-kpi:hover .dv2-kpi__arrow,
.dash-v2 .dv2-kpi:hover .dv2-kpi__arrow {
  background: var(--accent-btn, #f5c518) !important;
  color: var(--accent-ink, #1a1700) !important;
  border-color: var(--accent-btn, #f5c518) !important;
}
html[data-design-mode="editorial"] body .dash-v2 .dv2-kpi:hover .dv2-kpi__arrow i,
.dash-v2 .dv2-kpi:hover .dv2-kpi__arrow i {
  color: var(--accent-ink, #1a1700) !important;
}

/* ── 7. Modal overlay + expander polish (Ben report 2026-07-20) ───────────
   7a. When a Bootstrap modal is open the dark backdrop (z-index ~1050) should
   cover the WHOLE page. The sticky topbar + global-search sit at z-index
   1100/1101 (bumped so they clear dashboard chart stacking contexts), so they
   stayed fully bright above the backdrop while everything else dimmed — a
   messy half-lit look. Drop them below the backdrop while any modal is open so
   the overlay is uniform. */
body.modal-open .topbar,
body.modal-open #globalSearchResults,
html[data-design-mode="editorial"] body.modal-open .topbar,
html[data-design-mode="editorial"] body.modal-open #globalSearchResults {
  z-index: 1000 !important;   /* below the 1050 backdrop */
}

/* 7b. <details> expanders inside modals (e.g. the Bulk-Import "Field Reference")
   snapped open/closed instantly, and the abrupt height change made the modal
   jump and shove the footer buttons. Give the revealed content a smooth
   slide+grow so the modal expands gracefully instead of jumping. */
.modal details[open] > *:not(summary) {
  animation: modalDetailsReveal 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
@keyframes modalDetailsReveal {
  from { opacity: 0; max-height: 0; transform: translateY(-4px); }
  to   { opacity: 1; max-height: 60vh; transform: translateY(0); }
}
.modal details > summary {
  transition: color 0.15s ease;
  list-style: none;                 /* tidy default marker; keep our own */
}
.modal details > summary::-webkit-details-marker { display: none; }
.modal details > summary::before {
  content: '\25B8';                 /* ▸ */
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.2s ease;
  font-size: 0.8em;
  color: var(--ink-faint, #8a8d96);
}
.modal details[open] > summary::before { transform: rotate(90deg); }