/* Fixed layout so column widths come from the colgroup, not from whichever
   values happen to be on the current page — otherwise paging reflows every
   column and the horizontal scrollbar appears and disappears. */
.mc-table.mc-grid { table-layout: fixed; }
.mc-table.mc-grid .mc-table-head tr th { padding: 7px 10px; font-size: 11.5px; line-height: 1.3; white-space: normal; overflow-wrap: break-word; vertical-align: middle; }
/* Cells stay on one line and ellipsize, so every row is the same height.
   Opt a column out with wrap: true when its text genuinely needs to flow. */
.mc-table.mc-grid .mc-table-body tr td { padding: 4px 10px; font-size: 12.5px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* overflow-wrap so long unbroken tokens (e.g. a 16-digit SIM ID) wrap inside
   the fixed column width instead of overflowing horizontally into the next
   column's cell and rendering on top of its text. */
.mc-table.mc-grid .mc-table-body tr td.mc-grid-wrap { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
/* The td-level unclip above still left the inner .mc-grid-cell wrapper's fixed
   26px/overflow:hidden in place, so wrapped multi-line content (e.g. one line
   per gateway) was still cut off. A wrap column needs both freed together. */
.mc-table.mc-grid .mc-table-body tr td.mc-grid-wrap .mc-grid-cell { white-space: normal; overflow: visible; max-height: none; overflow-wrap: break-word; }
/* .mc-table-foot had no rules at all, so it fell back to the browser's
   near-zero default td padding — much shorter than the 34px body rows above
   it, which made the footer/total row look crushed against the last row. */
.mc-table.mc-grid .mc-table-foot tr td { padding: 4px 10px; font-size: 12.5px; line-height: 1.45; height: 34px; font-weight: 700; border-top: 2px solid var(--lightBorder); }
.mc-table.mc-grid .mc-table-body tr td .mc-table-action { gap: 4px; }
.mc-table.mc-grid .mc-table-body tr td .mc-table-action button { padding: 3px; height: auto; font-size: 15px; }
.mc-table.mc-grid .mc-table-body tr td .mc-table-badge { padding: 1px 8px; font-size: 11px; }
/* Every row the same height regardless of what a cell contains: the wrapper
   clips content that would otherwise stack onto a second line. */
.mc-table.mc-grid .mc-table-body tr td { height: 34px; }
.mc-table.mc-grid .mc-table-body tr td .mc-grid-cell { display: block; max-height: 26px; overflow: hidden; white-space: inherit; text-overflow: inherit; }
.mc-table.mc-grid .mc-table-body tr td .mc-grid-cell > .mc-table-action { max-height: 26px; }
/* Action cells host a notification badge pinned to the corner of a button via
   negative offsets — the generic 26px clip above would cut it off. */
.mc-table.mc-grid .mc-table-body tr td.mc-grid-actions-cell,
.mc-table.mc-grid .mc-table-body tr td.mc-grid-actions-cell .mc-grid-cell { overflow: visible; max-height: none; }
/* A select control is a fixed 34px (fields/SelectField.css .h-sm) — taller than
   both the 26px .mc-grid-cell clip and the 26px content box a 34px row with 4px
   vertical padding leaves, so it rendered with its bottom edge cut off. Unclip
   the wrapper and give the control real breathing room above and below; td
   height is a minimum in table layout, so these rows grow past 34px to fit
   rather than clipping again. Matched structurally rather than via an opt-in
   class so every select-in-a-grid is covered — the send-day column exists on
   more than one report page. */
.mc-table.mc-grid .mc-table-body tr td:has(.mc-select-field) { overflow: visible; padding-top: 7px; padding-bottom: 7px; }
.mc-table.mc-grid .mc-table-body tr td:has(.mc-select-field) .mc-grid-cell { overflow: visible; max-height: none; }
.mc-table.mc-grid .mc-table-body tr td img { max-height: 22px; width: auto; vertical-align: middle; }
.mc-table.mc-grid .mc-table-body tr td .material-icons { font-size: 17px; line-height: 1; vertical-align: middle; }
/* Ligature icons must not be ellipsized — that renders the raw word. */
.mc-table.mc-grid .mc-table-body tr td.mc-grid-expander,
.mc-table.mc-grid .mc-table-body tr td.mc-grid-pick,
.mc-table.mc-grid .mc-table-head tr th.mc-grid-pick,
.mc-table.mc-grid .mc-table-head tr th.mc-grid-expander { text-overflow: clip; overflow: visible; padding-left: 2px; padding-right: 2px; text-align: center; }
.mc-table.mc-grid .mc-grid-expander .material-icons { font-size: 19px; }
/* Own the spacing on both sides: pages drop the grid straight under a filter row,
   so without a top margin the search box sits flush against the filters above and
   the table header below. :empty keeps a search-less grid from inheriting either. */
.mc-grid-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 12px; flex-wrap: wrap; }
.mc-grid-bar:empty { display: none; }
.mc-grid-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mc-grid-search { position: relative; display: inline-flex; align-items: center; min-width: 240px; }
.mc-grid-search i { position: absolute; left: 10px; font-size: 18px; opacity: .55; pointer-events: none; }
.mc-grid-search input { width: 100%; height: 34px; padding: 0 12px 0 34px; font-size: 13px; border: 1px solid var(--lightBorder); border-radius: 4px; background: transparent; color: inherit; }
.mc-grid-search input:focus { outline: none; border-color: var(--primaryHEX); }
.mc-table th.mc-grid-sortable { cursor: pointer; user-select: none; }
.mc-table th.mc-grid-sortable .mc-grid-caret { margin-left: 4px; font-size: 11px; opacity: .5; }
.mc-table th.mc-grid-sortable .mc-grid-caret.on { opacity: 1; }
.mc-table .mc-grid-pick { text-align: center; padding-left: 2px; padding-right: 2px; }
.mc-table .mc-grid-pick input { cursor: pointer; }
.mc-table .mc-grid-expander { text-align: center; cursor: pointer; user-select: none; padding-left: 2px; padding-right: 2px; }
.mc-table .mc-grid-expanded > td { background: var(--thinGray); }

/* Loading overlay (`loading` prop): the loader sits in the middle of the table
   itself rather than off in the page toolbar, so it reads as "this table is
   fetching". Wraps only the scroll container — the search bar above and the
   pagination below stay usable and uncovered. */
.mc-grid-body { position: relative; }

.mc-grid-loading {
    position: absolute;
    inset: 0;
    /* .mc-table-head.sticky sits at z-index 1; the veil has to clear it. */
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The veil is a pseudo-element so it can be translucent while the colour stays
   a theme token — a var() can't be given an alpha channel at the point of use. */
.mc-grid-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cardBG);
    opacity: .7;
}

/* Default margins offset the 50px box; the ring is already centred inside it,
   so zeroing them lands it dead centre. position keeps it over the veil. */
.mc-grid-loading .loadingio-spinner-spinner-b072pzndem5 {
    position: relative;
    margin: 0;
}