/* Base. Carried over from styles.min.css/styles.min2.css at their EFFECTIVE
   values (min2 loaded last and won): radius 4px, .sm padding 8px 10px. */
.mc-btn { font-size: 13px; font-weight: 600; text-transform: uppercase; white-space: nowrap; text-align: center; padding: 14px 22px; letter-spacing: .5px; border-radius: 4px; border: 1px solid transparent; color: var(--lightColor); box-shadow: var(--btnBoxShadow); transition: all linear .2s; }
.mc-btn:hover { opacity: .85; color: var(--lightColor); text-decoration: none; }
/* Was missing entirely — keyboard users had no focus indicator at all. */
.mc-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Also missing — disabled buttons looked fully enabled while inert. */
.mc-btn:disabled, .mc-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.mc-btn span { vertical-align: middle; }
.mc-btn i { font-size: 20px; vertical-align: middle; }
/* The icon gap only exists when there IS a label. The old rule applied it
   unconditionally, so icon-only buttons sat 6px off-centre — which is why a
   .multi-btn wrapper class existed purely to cancel it. */
.mc-btn.has-label i { margin-right: 6px; }
.mc-btn.sm { font-size: 11px; padding: 8px 10px; }
/* Deterministic size scale for the new API: one height per size, everywhere. */
.mc-btn.mc-btn--xs, .mc-btn.mc-btn--sm, .mc-btn.mc-btn--md, .mc-btn.mc-btn--lg { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding-top: 0; padding-bottom: 0; }
.mc-btn.mc-btn--xs { height: 26px; padding-left: 10px; padding-right: 10px; font-size: 11px; }
.mc-btn.mc-btn--sm { height: 34px; padding-left: 14px; padding-right: 14px; font-size: 11px; }
.mc-btn.mc-btn--md { height: 40px; padding-left: 18px; padding-right: 18px; font-size: 12px; }
.mc-btn.mc-btn--lg { height: 46px; padding-left: 22px; padding-right: 22px; font-size: 13px; }
/* flex gap handles icon spacing, so the has-label margin hack isn't needed */
.mc-btn.mc-btn--xs i, .mc-btn.mc-btn--sm i, .mc-btn.mc-btn--md i, .mc-btn.mc-btn--lg i { margin-right: 0; font-size: 16px; }
.mc-btn.mc-btn--lg i { font-size: 18px; }
.mc-btn.sm i { font-size: 16px; }
.mc-btn.chip.mc-btn--xs { border-radius: 13px; letter-spacing: .3px; text-transform: none; }

.mc-btn.h-sm { height: 40px; }
.mc-btn.h-md { height: 45px; }
.mc-btn.h-lg { height: 50px; }
.mc-btn.h-xl { height: 55px; }
.mc-btn.fw { width: 100%; }

/* Tones — solid */
.mc-btn.primary { background-color: var(--primaryHEX); }
.mc-btn.red, .mc-btn.danger { background-color: var(--btn-danger-bg); }
.mc-btn.green { background-color: var(--btn-success-bg); }
.mc-btn.blue { background-color: var(--focus-ring); }
.mc-btn.gray { background-color: #818181; }
.mc-btn.orange { background-color: #fb6f0d; }
.mc-btn.purple { background-color: #be0ee1; }
.mc-btn.yellow { background-color: #edb213; }

/* Secondary — new. Cancel/Close/No previously rendered identical to Save. */
.mc-btn.secondary { background-color: transparent; color: var(--headingColor); border-color: var(--lightBorder); box-shadow: none; }
.mc-btn.secondary:hover { background-color: var(--thinGray); color: var(--headingColor); opacity: 1; }

/* Opt-in soft fill for a `variant="secondary"` button that still needs to
   read as a distinct, meaningful action sitting next to a plain Cancel — e.g.
   "Download Sample" next to Cancel/Save, which today are visually identical.
   Reuses the same info tone already used for view/download icon buttons
   (Users.jsx's row actions), so "download" keeps one color across the app
   rather than inventing a new one-off hex. Compound selector (3 classes)
   beats plain .secondary regardless of source order in this file. */
.mc-btn.secondary.tone-info { background-color: var(--tone-info-bg); color: var(--tone-info-fg); border-color: transparent; }
.mc-btn.secondary.tone-info:hover { opacity: .85; color: var(--tone-info-fg); }

/* Green, for a secondary button confirming something just worked, e.g. Users'
   "Copied!" state on Copy Link. Reuses --tone-success-*. */
.mc-btn.secondary.tone-success { background-color: var(--tone-success-bg); color: var(--tone-success-fg); border-color: transparent; }
.mc-btn.secondary.tone-success:hover { opacity: .85; color: var(--tone-success-fg); }

/* Same idea, amber: "Reset All" (EditFloorplan/EditFloorplanMasterMap) sits
   next to Save (primary) and discards in-progress changes — cautionary, not
   destructive, so it gets the warning tone rather than danger's red. Reuses
   --tone-warning-* (already used for the password icon button). */
.mc-btn.secondary.tone-warning { background-color: var(--tone-warning-bg); color: var(--tone-warning-fg); border-color: transparent; }
.mc-btn.secondary.tone-warning:hover { opacity: .85; color: var(--tone-warning-fg); }

/* Same idea, red: every "Cancel" button app-wide, previously identical to
   Save/Back — a plain outline gave it no visual weight at all next to the
   primary action. Reuses --tone-danger-* (already the row-action delete
   colour), not .mc-btn.danger's bold solid fill — that's reserved for actual
   destructive actions (Delete), and using the same solid red for "cancel"
   would read as equally severe when it isn't. */
.mc-btn.secondary.tone-danger { background-color: var(--tone-danger-bg); color: var(--tone-danger-fg); border-color: transparent; }
.mc-btn.secondary.tone-danger:hover { opacity: .85; color: var(--tone-danger-fg); }

/* Every "No" button in a Yes/No confirm modal, app-wide — paired with a solid
   red danger "Yes", the plain transparent secondary outline gave "No" no
   visual weight at all. Solid neutral gray (not a tone-* semantic color,
   since declining isn't itself warning/danger/info) gives it equal presence
   without implying the same severity as the destructive Yes. */
.mc-btn.secondary.gray { background-color: #818181; color: var(--lightColor); border-color: transparent; }
.mc-btn.secondary.gray:hover { opacity: .85; color: var(--lightColor); }

/* Ghost / chip — the report-name token inserters. They used mc-table-badge,
   which defines no .primary or .sm, so they rendered as bare 13px text. */
.mc-btn.ghost { background-color: transparent; color: var(--primaryHEX); border-color: transparent; box-shadow: none; }
.mc-btn.ghost:hover { background-color: var(--thinGray); opacity: 1; }
.mc-btn.chip { background-color: var(--thinGray); color: var(--headingColor); border-color: var(--lightBorder); box-shadow: none; }
.mc-btn.chip:hover { background-color: var(--lightBorder); opacity: 1; }
.mc-btn.link { background: none; border: none; box-shadow: none; padding: 0; color: var(--focus-ring); text-transform: none; letter-spacing: 0; text-decoration: underline; }

/* Icon-only action buttons (table rows). Today's CSS has six classes for four
   colours — .edit and .chat are both #1a9f53, .delete and .block both #f11133 —
   and purple .view is merged into blue info. */
.mc-icon-btn { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; padding: 6px; border-radius: 6px; border: none; color: var(--lightColor); background-color: var(--lightGray); transition: all linear .2s; }
.mc-icon-btn i { font-size: 17px; line-height: 1; }
.mc-icon-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mc-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.mc-icon-btn.action { color: var(--tone-success-fg); background-color: var(--tone-success-bg); }
.mc-icon-btn.danger { color: var(--tone-danger-fg); background-color: var(--tone-danger-bg); }
.mc-icon-btn.info { color: var(--tone-info-fg); background-color: var(--tone-info-bg); }
.mc-icon-btn.warning { color: var(--tone-warning-fg); background-color: var(--tone-warning-bg); }
.mc-icon-btn.accent { color: var(--tone-accent-fg); background-color: var(--tone-accent-bg); }
/* Count badge pinned to an icon button's top-right corner.
   The host shrink-wraps so the badge anchors to the edge of the ICON: a
   block-level row (.mc-table-action) would put its right edge at the far side
   of the table cell, parking the badge in empty space. Keep the host tight
   around the button and nothing else — anything it also contains is positioned
   against an icon-width box.
   Absolute, not the older in-flow `position: relative` + negative offsets:
   in flow the badge still reserves its own width and pushes the cell around.
   height == min-width with padding inside the border box keeps a single digit
   perfectly circular; a 2+ digit count grows into a pill rather than an oval.
   The ring is the card colour so the badge reads as a separate chip where it
   overlaps the icon. */
.mc-icon-badge-host { position: relative; display: inline-flex; }
.mc-icon-badge {
    position: absolute; top: -5px; right: -5px; z-index: 2;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    height: 15px; min-width: 15px; padding: 0 3px;
    border-radius: 999px; border: 1.5px solid var(--cardBG);
    background-color: var(--badge-count-bg); color: var(--badge-count-fg);
    font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: 0;
}

/* Legacy tone aliases for call sites still passing className rather than
   variant="icon". Tokens handle light/dark, so no theme selectors needed. */
.mc-table-action a.view, .mc-table-action button.view,
.mc-table-action a.download, .mc-table-action button.download { color: var(--tone-info-fg); background-color: var(--tone-info-bg); }
.mc-table-action a.edit, .mc-table-action button.edit,
.mc-table-action a.chat, .mc-table-action button.chat { color: var(--tone-success-fg); background-color: var(--tone-success-bg); }
.mc-table-action a.delete, .mc-table-action button.delete,
.mc-table-action a.block, .mc-table-action button.block { color: var(--tone-danger-fg); background-color: var(--tone-danger-bg); }
.mc-table-action { display: flex; gap: 6px; }
.mc-table-action a, .mc-table-action button { font-size: 16px; padding: 6px; border-radius: 6px; color: var(--lightColor); background-color: var(--lightGray); }

/* The rule above assumes every button in .mc-table-action is one of the
   coloured icon circles (edit/disable/etc.) and paints it white-on-grey to
   match. DotsMenu's popover renders inline inside the same .mc-table-action
   box (react-bootstrap doesn't portal it), so its CSV/PDF rows inherited that
   white-on-grey too and, sitting on the popover's own plain white background,
   the text disappeared entirely. Needs a class+type selector to out-specify
   `.mc-table-action button` (0,1,1) above regardless of source order. */
.mc-table-action button.mc-dropdown-menu,
.mc-table-action button.mc-dropdown-bar-menu { color: var(--textColor); background-color: transparent; }
.mc-table-action button.mc-dropdown-menu:hover,
.mc-table-action button.mc-dropdown-bar-menu:hover { background-color: var(--hoverBG); }

/* Auth screens keep their own base — different width, padding and weight, and
   it shares no selector with .mc-btn. */
.mc-auth-btn { width: 100%; text-align: center; text-transform: uppercase; font-size: 14px; font-weight: 600; letter-spacing: 2px; border-radius: 8px; margin-bottom: 8px; border: none; color: var(--lightColor); background-color: var(--primaryHEX); transition: all linear .2s; }
.mc-auth-btn:hover { opacity: .85; }
.mc-auth-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mc-auth-btn:disabled { opacity: .45; cursor: not-allowed; }
.mc-auth-btn { display: flex; align-items: center; justify-content: center; }
.mc-auth-btn.h-sm { height: 42px; } .mc-auth-btn.h-md { height: 45px; }
.mc-auth-btn.h-lg { height: 48px; } .mc-auth-btn.h-xl { height: 50px; }
/* the shared size scale, applied to the auth base as well */
.mc-auth-btn.mc-btn--xs { height: 34px; }
.mc-auth-btn.mc-btn--sm { height: 42px; }
.mc-auth-btn.mc-btn--md { height: 45px; }
.mc-auth-btn.mc-btn--lg { height: 48px; }

/* Live contextual overrides carried across. Four more existed in the
   stylesheets (.mc-product-upload-organize, .mc-review-reply,
   .mc-activity-card-body, .mc-user-activity-body) but match zero files. */
.table-btnbar .mc-btn { padding: 8px 10px; font-size: 11px; }
.mc-card-header .inner-cont > button.mc-btn { padding: 6px; font-size: 10px; }
.mc-table-body button.mc-btn, .p-datatable tbody button.mc-btn { padding: 8px 10px; font-size: 11px; }
.mc-table a.mc-btn, .p-datatable-table a.mc-btn { padding: 7px 10px; font-size: 10px; }
.mc-sidebar-logout .mc-btn { margin: 0 auto; }

/* In-button busy state, so a pending action stops relying on a hand-positioned
   sibling Spinner.
   flex: 0 0 auto is load-bearing, not decoration: a sized button is inline-flex
   (see .mc-btn--sm above), so this span is a flex item and defaulted to
   flex-shrink: 1. In a fullWidth button the width comes from the column rather
   than the content, so once the label + gap no longer fit, the spinner was the
   only shrinkable item — it collapsed horizontally into a vertical sliver that
   read as a line instead of a circle. It reproduced on zoom change because zoom
   alters how many CSS pixels the column spans. box-sizing keeps the 2px borders
   inside the 1em box so width and height stay equal and it stays round. */
.mc-btn-spinner { display: inline-block; flex: 0 0 auto; box-sizing: border-box; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: middle; animation: mc-btn-spin .6s linear infinite; }
.mc-btn.has-label .mc-btn-spinner { margin-right: 6px; }
.mc-auth-btn .mc-btn-spinner { margin-right: 8px; }
@keyframes mc-btn-spin { to { transform: rotate(360deg); } }