/**
 * MMTable frontend — branded styling for DataTables-powered tables.
 * Navy/amber/teal palette. Flat, no gradients.
 */

.mmt-frontend-wrap {
	margin: 1.5em 0;
	font-family: Inter, Aptos, "Segoe UI", Arial, sans-serif;
	color: #14385f;
}
/* DataTables owns scrolling for interactive tables (scrollX/scrollY region):
   header pins, the horizontal scrollbar stays in view, pagination sits outside.
   Only merged (static) tables fall back to wrapper horizontal scroll. */
.mmt-frontend-wrap.mmt-has-merges { overflow-x: auto; }

/* ===== TABLE ===== */

.mmt-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	font-family: var(--mmt-font, inherit);
	background: #ffffff;
	border: 1px solid #d8e2ed;
	border-radius: 6px;
}
.mmt-table caption {
	caption-side: bottom;
	padding: 10px 12px;
	font-size: 12px;
	color: #4f6378;
	font-style: italic;
	text-align: left;
}
.mmt-table th,
.mmt-table td {
	padding: 11px 14px;
	border-bottom: 1px solid #e2e8f0;
	text-align: left;
	vertical-align: top;
}
.mmt-table thead th {
	background: #14385f;
	color: #ffffff;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	border-bottom: 2px solid #0e2746;
	white-space: nowrap;
}
.mmt-table tbody tr:last-child td { border-bottom: 0; }
.mmt-table.mmt-striped tbody tr:nth-child(even) td { background: #f4f7fb; }
.mmt-table.mmt-hover tbody tr:hover td { background: #fef9ee; }

/* Compact density */
.mmt-table.mmt-compact th,
.mmt-table.mmt-compact td { padding: 7px 10px; font-size: 13px; }

/* Spacious density */
.mmt-table.mmt-spacious th,
.mmt-table.mmt-spacious td { padding: 15px 18px; }

/* Uppercase headers off (uppercase is the default) */
.mmt-table.mmt-head-noupper thead th { text-transform: none; letter-spacing: 0; }

/* ===== DATATABLES CHROME — branded overrides ===== */

/* The wrapper DataTables adds around the table */
.dataTables_wrapper {
	font-family: inherit;
}

/* Top controls row (length-change + search) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
	margin: 0 0 12px;
	font-size: 13px;
	color: #4f6378;
}
.dataTables_wrapper .dataTables_filter { text-align: right; }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
	border: 1px solid #cbd5e1;
	border-radius: 5px;
	padding: 6px 10px;
	font-size: 13px;
	color: #14385f;
	background: #ffffff;
	font-family: inherit;
	min-height: 32px;
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
	border-color: #14385f;
	box-shadow: 0 0 0 3px rgba(247, 190, 75, 0.25);
	outline: none;
}
.dataTables_wrapper .dataTables_filter input {
	min-width: 200px;
	margin-left: 8px;
}

/* Sort indicator on header — clean amber arrows */
.mmt-table thead th.dt-orderable-asc,
.mmt-table thead th.dt-orderable-desc,
.mmt-table thead th.dt-ordering-asc,
.mmt-table thead th.dt-ordering-desc {
	cursor: pointer;
	position: relative;
	padding-right: 22px;
}
.mmt-table thead th.dt-orderable-asc::after,
.mmt-table thead th.dt-orderable-desc::after,
.mmt-table thead th.dt-ordering-asc::after,
.mmt-table thead th.dt-ordering-desc::after {
	content: '';
	position: absolute;
	right: 8px;
	top: 50%;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 5px solid rgba(255, 255, 255, 0.4);
	transform: translateY( -2px );
}
.mmt-table thead th.dt-ordering-asc::after {
	border-bottom-color: #f7be4b;
}
.mmt-table thead th.dt-ordering-desc::after {
	border-bottom: 0;
	border-top: 5px solid #f7be4b;
	transform: translateY( -1px );
}

/* Bottom controls row (info + pagination) */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
	margin-top: 12px;
	font-size: 12.5px;
	color: #4f6378;
}
.dataTables_wrapper .dataTables_info {
	float: left;
	padding-top: 4px;
}
.dataTables_wrapper .dataTables_paginate {
	float: right;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
	display: inline-block;
	padding: 5px 11px;
	margin-left: 2px;
	border: 1px solid #d8e2ed;
	border-radius: 4px;
	background: #ffffff;
	color: #14385f !important;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.12s, border-color 0.12s, color 0.12s;
	text-decoration: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: #f4f7fb;
	border-color: #14385f;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: #14385f;
	border-color: #14385f;
	color: #ffffff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
	color: #cbd5e1 !important;
	background: #ffffff;
	border-color: #e2e8f0;
	cursor: not-allowed;
}

/* Clearfix for the bottom row */
.dataTables_wrapper::after {
	content: '';
	display: table;
	clear: both;
}

/* DataTables 2.x uses dt-* class prefixes — provide parity */
.dataTables_wrapper .dt-info,
.dataTables_wrapper .dt-search,
.dataTables_wrapper .dt-length,
.dataTables_wrapper .dt-paging { font-family: inherit; color: #4f6378; }
.dataTables_wrapper .dt-paging-button {
	padding: 5px 11px;
	margin-left: 2px;
	border: 1px solid #d8e2ed;
	border-radius: 4px;
	background: #ffffff;
	color: #14385f;
	font-weight: 600;
	cursor: pointer;
}
.dataTables_wrapper .dt-paging-button:hover { background: #f4f7fb; border-color: #14385f; }
.dataTables_wrapper .dt-paging-button.current {
	background: #14385f; border-color: #14385f; color: #ffffff;
}

/* ===== HEADER COLUMN ===== */
.mmt-table tbody th[scope="row"] {
	background: #f4f7fb;
	color: #14385f;
	font-weight: 700;
	text-align: left;
}

/* ===== STICKY HEADER ROW — relative to page scroll, no container cap ===== */
.mmt-table.mmt-sticky-header thead th {
	position: sticky;
	top: 0;
	z-index: 5;
	background: #14385f; /* fallback so transparency from default theme doesn't reveal underlying cells */
}
/* WP admin bar offsets so the sticky header doesn't hide behind it for logged-in users */
.admin-bar .mmt-table.mmt-sticky-header thead th { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .mmt-table.mmt-sticky-header thead th { top: 46px; }
}

/* ===== STICKY FIRST COLUMN — needs horizontal scroll container (the .mmt-frontend-wrap) ===== */
.mmt-table.mmt-sticky-col tbody td:first-child,
.mmt-table.mmt-sticky-col tbody th:first-child {
	position: sticky;
	left: 0;
	z-index: 3;
	background: #ffffff;
}
.mmt-table.mmt-sticky-col.mmt-striped tbody tr:nth-child(even) td:first-child,
.mmt-table.mmt-sticky-col.mmt-striped tbody tr:nth-child(even) th:first-child {
	background: #f4f7fb;
}
.mmt-table.mmt-sticky-col thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 6;
}

/* ===== SINGLE-TABLE SCROLL REGION (sticky header, footer & first column) =====
   The frontend JS wraps each interactive table in .mmt-scroll. Because it stays
   a single <table>, the header, body rows and totals row share one set of column
   widths and can never drift out of alignment. Pinning is opt-in: the header,
   totals footer and first column each become sticky only when their setting is
   on (.mmt-sticky-header / .mmt-sticky-footer / .mmt-sticky-col). */
.mmt-scroll {
	position: relative;
	border: 1px solid var(--mmt-border, #d8e2ed);
	border-radius: var(--mmt-radius, 6px);
}
/* Outer border toggle off — remove the container's frame (and any table frame)
   entirely, instead of leaving the default light border showing. */
.mmt-frontend-wrap.mmt-wrap-noborder .mmt-scroll,
.mmt-frontend-wrap.mmt-wrap-noborder .mmt-table { border: 0; }
/* The wrapper only becomes a scroll *container* when the table is genuinely wider
   than the space available (JS adds .mmt-scroll-x). That matters because an
   overflow container captures sticky positioning: while it is a container the
   header pins to it (in-region); while it is not, the header can pin to the page
   on whole-page scroll. So narrow tables get page-scroll sticky; wide tables get
   in-region sticky plus horizontal scroll. Either way it's one aligned table. */
.mmt-scroll.mmt-scroll-x { overflow: auto; }
/* Cap the height only when scrolling in-region (wide) AND something is pinned, so
   there's a bounded region to pin against. Narrow tables stay full height and the
   page scrolls. */
.mmt-scroll.mmt-scroll-x.mmt-scroll-cap { max-height: 70vh; }
.mmt-scroll > .mmt-table {
	width: auto;        /* grow past the container when content needs it (-> horizontal scroll) */
	min-width: 100%;    /* but fill the container when content is narrow */
	margin: 0;
	border: 0;          /* the container owns the outer border + radius now */
	border-radius: 0;
}
.mmt-scroll > .mmt-table > caption { caption-side: bottom; }

/* Sticky header — only when "Sticky header" is on. */
.mmt-scroll .mmt-table.mmt-sticky-header thead th {
	position: sticky;
	z-index: 5;
	background: #14385f; /* opaque so body rows don't show through while scrolling */
}
/* Narrow (page-scroll) tables: header pins to the viewport, honouring the
   configured sticky offset and the WP admin bar. */
.mmt-scroll:not(.mmt-scroll-x) .mmt-table.mmt-sticky-header thead th { top: var(--mmt-sticky-offset, 0px); }
.admin-bar .mmt-scroll:not(.mmt-scroll-x) .mmt-table.mmt-sticky-header thead th { top: calc( var(--mmt-sticky-offset, 0px) + 32px ); }
@media screen and (max-width: 782px) {
	.admin-bar .mmt-scroll:not(.mmt-scroll-x) .mmt-table.mmt-sticky-header thead th { top: calc( var(--mmt-sticky-offset, 0px) + 46px ); }
}
/* Wide (in-region) tables: header pins to the top of the scroll region. */
.mmt-scroll.mmt-scroll-x .mmt-table.mmt-sticky-header thead th { top: 0; }
/* Sticky first-column corner sits above the pinned header. */
.mmt-scroll .mmt-table.mmt-sticky-col.mmt-sticky-header thead th:first-child { z-index: 7; }

/* Sticky totals footer — only when "Sticky footer" is on. */
.mmt-scroll .mmt-table.mmt-sticky-footer tbody tr.mmt-foot-injected td {
	position: sticky;
	bottom: 0;
	z-index: 4;
}
.mmt-scroll .mmt-table.mmt-sticky-footer.mmt-sticky-col tbody tr.mmt-foot-injected td:first-child { z-index: 6; }

/* ===== SEARCH HIGHLIGHT ===== */
.mmt-table mark.mmt-highlight {
	background: #fef3c7;
	color: #14385f;
	padding: 1px 2px;
	border-radius: 2px;
}

/* ===== GROUP ROW ===== */
.mmt-table tr.mmt-group-row td {
	background: #fef3c7;
	color: #14385f;
	font-weight: 700;
	padding: 10px 14px;
	border-top: 1px solid #f7be4b;
	border-bottom: 2px solid #f7be4b;
}

/* Explicit no-stripe override when the toggle is off — defeats themes that
   apply nth-child striping to all tables */
.mmt-table:not(.mmt-striped) tbody tr td,
.mmt-table:not(.mmt-striped) tbody tr th {
	background: var(--mmt-bg, #ffffff);
}

/* DataTables scroll container — keep search/pagination clear of the
   horizontal scroll bar */
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dt-scroll {
	margin-top: 8px;
	margin-bottom: 8px;
}

/* ===== Page-level sticky header =====
   DataTables' header lives in .dt-scroll-head, a sibling of the scrolling
   body — so its scroll context is the page. Pinning it to top:0 keeps the
   table header at the viewport top as the whole page scrolls past the table,
   in addition to the in-region pinning above the body. */
.mmt-frontend-wrap.mmt-stick-head .dt-scroll-head,
.mmt-frontend-wrap.mmt-stick-head .dataTables_scrollHead {
	position: sticky !important; /* beat DataTables' inline position:relative on .dt-scroll-head */
	top: var(--mmt-sticky-offset, 0px);
	z-index: 20;
	background: #14385f;
}
.admin-bar .mmt-frontend-wrap.mmt-stick-head .dt-scroll-head,
.admin-bar .mmt-frontend-wrap.mmt-stick-head .dataTables_scrollHead {
	top: calc(var(--mmt-sticky-offset, 0px) + 32px);
}
@media screen and (max-width: 782px) {
	.admin-bar .mmt-frontend-wrap.mmt-stick-head .dt-scroll-head,
	.admin-bar .mmt-frontend-wrap.mmt-stick-head .dataTables_scrollHead {
		top: calc(var(--mmt-sticky-offset, 0px) + 46px);
	}
}

/* 'First row is header' off: a structural (empty) header is still emitted so
   DataTables has its column count; collapse it out of sight. */
.mmt-table.mmt-noheader thead th { height: 0 !important; padding: 0 !important; border: 0 !important; font-size: 0 !important; line-height: 0 !important; }
.mmt-table.mmt-noheader thead th::after { display: none !important; }

/* ===== Typed cells (image, color) ===== */
.mmt-table .mmt-img-cell { max-height: 60px; max-width: 160px; border-radius: 4px; vertical-align: middle; }
.mmt-table .mmt-color-cell { display: inline-flex; align-items: center; gap: 8px; }
.mmt-table .mmt-color-dot { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); }

/* DataTables wraps the header label in a flex .dt-column-header that holds height;
   hide it too so the empty (header-off) row truly collapses. */
.mmt-table.mmt-noheader thead th .dt-column-header { display: none !important; }
.mmt-table.mmt-noheader thead th, .mmt-table.mmt-noheader thead tr { height: 0 !important; }

/* ===== Frontend tools toolbar (export / print / copy) ===== */
.mmt-frontend-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}
.mmt-frontend-tools .mmt-tool {
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: #14385f;
	background: #ffffff;
	border: 1px solid #d8e2ed;
	border-radius: 5px;
	padding: 6px 12px;
	cursor: pointer;
	line-height: 1.2;
	transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.mmt-frontend-tools .mmt-tool:hover {
	background: #14385f;
	border-color: #14385f;
	color: #ffffff;
}
.mmt-frontend-tools .mmt-tool:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(247, 190, 75, 0.4);
	border-color: #14385f;
}
@media print {
	.mmt-frontend-tools { display: none !important; }
}

/* Export dropdown (shown when more than one export type is enabled) */
.mmt-tool-dd { position: relative; display: inline-block; }
.mmt-tool-dd-trigger .mmt-dd-caret { font-size: 10px; margin-left: 2px; }
.mmt-tool-dd-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	min-width: 140px;
	background: #ffffff;
	border: 1px solid #d8e2ed;
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(20, 56, 95, 0.16);
	padding: 4px;
}
.mmt-tool-dd-menu[hidden] { display: none; }
.mmt-tool-dd-menu .mmt-dd-item {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #14385f;
	background: transparent;
	border: 0;
	border-radius: 4px;
	padding: 8px 12px;
	text-align: left;
	cursor: pointer;
}
.mmt-tool-dd-menu .mmt-dd-item:hover { background: #14385f; color: #ffffff; }

/* ===== One-row top controls: search (left) | length + tools (right) ===== */
/* Center every cell on the row, and give all three control types the same
   height so their top edges line up (not just their centers). */
.mmt-frontend-wrap .dt-layout-row { display: flex; align-items: center; }
.mmt-frontend-wrap .dt-layout-cell { display: flex; align-items: center; }
.mmt-frontend-wrap .dt-layout-end {
	justify-content: flex-end;
	gap: 14px;
	flex-wrap: wrap;
}
.mmt-frontend-wrap .dt-search,
.mmt-frontend-wrap .dt-length { margin: 0; display: flex; align-items: center; gap: 6px; }
.mmt-frontend-wrap .dt-length label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
/* Uniform control height so search, length select and tool buttons align */
.mmt-frontend-wrap .dt-search input,
.mmt-frontend-wrap .dt-length select,
.mmt-frontend-wrap .mmt-frontend-tools .mmt-tool {
	height: 38px;
	box-sizing: border-box;
	margin: 0;
	vertical-align: middle;
}
/* When relocated into the top row, drop the toolbar's own spacing */
.mmt-frontend-tools.mmt-tools-inrow { margin: 0; }
/* Standalone toolbar (merged/static tables with no DataTables row): right-align */
.mmt-frontend-wrap > .mmt-frontend-tools { justify-content: flex-end; }

/* Link & Button cell types */
.mmt-table .mmt-cell-link { color: #14385f; text-decoration: underline; }
.mmt-table .mmt-cell-btn { display: inline-block; padding: 4px 12px; background: #14385f; color: #fff; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 13px; }
.mmt-table .mmt-cell-btn:hover { background: #0e2746; }

/* Footer totals row */
.mmt-table tfoot th,
.mmt-table tfoot td {
	font-weight: 600;
	background: #f4f7fb;
	border-top: 2px solid #d8e2ed;
	color: #14385f;
	white-space: nowrap;
}
.mmt-table tfoot .mmt-foot-label {
	font-weight: 600;
	font-size: 0.82em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #4f6378;
	margin-right: 3px;
}
.mmt-table tfoot .mmt-foot-val { font-variant-numeric: tabular-nums; }

/* ===== Sticky header (DataTables scroll mode) — robust =====
   In scrollX/scrollY mode the visible header is a separate table inside
   .dt-scroll-head (DT2) / .dataTables_scrollHead (DT1), a sibling of the
   scrolling body. Pin that wrapper to the page so the header stays in view as
   the page scrolls. Defensive: high specificity + !important to beat DT inline
   styles, and no overflow clip on the wrap. */
.mmt-frontend-wrap.mmt-stick-head { overflow: visible !important; }
.mmt-frontend-wrap.mmt-stick-head .dataTables_wrapper .dt-scroll-head,
.mmt-frontend-wrap.mmt-stick-head .dataTables_wrapper .dataTables_scrollHead,
.mmt-frontend-wrap.mmt-stick-head .dt-scroll-head,
.mmt-frontend-wrap.mmt-stick-head .dataTables_scrollHead {
	position: sticky !important;
	top: var(--mmt-sticky-offset, 0px) !important;
	z-index: 30 !important;
	background: #14385f;
}
.admin-bar .mmt-frontend-wrap.mmt-stick-head .dt-scroll-head,
.admin-bar .mmt-frontend-wrap.mmt-stick-head .dataTables_scrollHead {
	top: calc(var(--mmt-sticky-offset, 0px) + 32px) !important;
}
@media screen and (max-width: 782px) {
	.admin-bar .mmt-frontend-wrap.mmt-stick-head .dt-scroll-head,
	.admin-bar .mmt-frontend-wrap.mmt-stick-head .dataTables_scrollHead {
		top: calc(var(--mmt-sticky-offset, 0px) + 46px) !important;
	}
}

/* ===== Totals row (injected as last tbody row) =====
   The <tfoot> is kept only as a hidden config carrier for the JS; DataTables
   never builds a separate footer scroll wrapper, so the totals row scrolls with
   the columns naturally. */
.mmt-table tfoot.mmt-foot-config { display: none !important; }
.mmt-table tbody tr.mmt-foot-injected td {
	background: #f4f7fb !important;
	color: #14385f;
	font-weight: 600;
	border-top: 2px solid #c5cede;
	/* Pinning is opt-in: see .mmt-sticky-footer rule above. The totals row is the
	   last tbody row of the single table, so it always shares the column widths. */
}
/* Sticky first column + totals row: keep the corner cell above both. */
.mmt-table.mmt-sticky-col tbody tr.mmt-foot-injected td:first-child {
	z-index: 7;
}
.mmt-table tbody tr.mmt-foot-injected:hover td { background: #f4f7fb !important; }
.mmt-table tbody tr.mmt-foot-injected .mmt-foot-label {
	font-weight: 600;
	font-size: 0.82em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #4f6378;
	margin-right: 3px;
}
.mmt-table tbody tr.mmt-foot-injected .mmt-foot-val { font-variant-numeric: tabular-nums; }

/* Table style / color schemes (opt-in via .mmt-styled) */
.mmt-table.mmt-styled{background:var(--mmt-bg,#fff);color:var(--mmt-text,inherit);border-color:var(--mmt-border,#d8e2ed);border-radius:var(--mmt-radius,6px)}
.mmt-table.mmt-styled td{border-bottom-color:var(--mmt-div,#e2e8f0)}
.mmt-table.mmt-styled thead th{border-bottom-width:var(--mmt-hu-w,2px);border-bottom-style:solid;border-bottom-color:var(--mmt-hu,#0e2746)}
.mmt-table.mmt-div-none tbody td,.mmt-table.mmt-div-none tbody th{border-top:0 !important;border-bottom:0 !important}
.mmt-table.mmt-styled.mmt-div-grid td,.mmt-table.mmt-styled.mmt-div-grid thead th{border:1px solid var(--mmt-div,#e2e8f0)}
.mmt-table.mmt-styled.mmt-noborder{border:0}
.mmt-table.mmt-styled.mmt-shadow-sm{box-shadow:0 1px 2px rgba(16,24,40,.06)}
.mmt-table.mmt-styled.mmt-shadow-md{box-shadow:0 4px 14px rgba(16,24,40,.10)}
/* Fixed column widths (colgroup) -- one table-wide layout so unset columns fill */
.mmt-table.mmt-fixed{table-layout:fixed;width:100%}
.mmt-scroll > .mmt-table.mmt-fixed{width:100%;min-width:0}
.mmt-table.mmt-fixed td,.mmt-table.mmt-fixed th{overflow-wrap:break-word;word-wrap:break-word}
.mmt-table.mmt-styled.mmt-striped tbody tr:nth-child(even) td{background:var(--mmt-stripe,#f4f7fb)}
.mmt-table.mmt-styled.mmt-hover tbody tr:hover td{background:var(--mmt-hover,#fef9ee)}

/* ---- Cell components (Pro display modes) ---- */
.mmt-table .mmt-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.82em;font-weight:600;line-height:1.55;letter-spacing:.01em;white-space:nowrap}
.mmt-table .mmt-progress{position:relative;display:inline-flex;align-items:center;min-width:90px;width:100%;max-width:160px;height:18px;background:#eef2f7;border-radius:4px;overflow:hidden;vertical-align:middle}
.mmt-table .mmt-progress-fill{position:absolute;left:0;top:0;bottom:0;background:#3b82c4;border-radius:4px}
.mmt-table .mmt-progress-val{position:relative;z-index:1;width:100%;text-align:center;font-size:.78em;font-weight:600;color:#1f2d3d;text-shadow:0 0 2px rgba(255,255,255,.7)}
.mmt-table .mmt-rating{display:inline-flex;gap:1px;color:#d6dce5;line-height:1;font-size:1.02em;letter-spacing:1px}
.mmt-table .mmt-rating .mmt-star.is-on{color:#f0ad22}
.mmt-table td.mmt-col-hl,.mmt-table th.mmt-col-hl{background:var(--mmt-hl,#fff5e0) !important;font-weight:600}
.mmt-table thead th.mmt-col-hl{background:var(--mmt-hl-head,#fbe6bf) !important;font-weight:700}
.mmt-table tbody tr:hover td.mmt-col-hl{background:var(--mmt-hl,#fdeccb) !important}
/* Pop: featured column as a raised card (comparison tables).
   Side shadow is a GRADIENT on ::before (full cell height, no vertical bleed)
   so stacked cells form one seamless strip -- no per-row shadow banding.
   Top/bottom caps are single ::after elements (navy header up, white below). */
.mmt-table td.mmt-col-pop,.mmt-table th.mmt-col-pop{position:relative;z-index:2;background:#fff !important;font-weight:600;border-left:1px solid rgba(16,24,40,.14) !important;border-right:1px solid rgba(16,24,40,.14) !important}
.mmt-table td.mmt-col-pop::before,.mmt-table th.mmt-col-pop::before{content:"";position:absolute;top:0;bottom:0;left:-16px;right:-16px;z-index:-1;pointer-events:none;background:linear-gradient(to right,rgba(16,24,40,0),rgba(16,24,40,.18)),linear-gradient(to left,rgba(16,24,40,0),rgba(16,24,40,.18));background-repeat:no-repeat;background-position:left center,right center;background-size:16px 100%,16px 100%}
/* navy header cap fills above the table (no white gap) */
.mmt-table thead th.mmt-col-pop{background:var(--mmt-pop-head,#0e2746) !important;color:#fff !important;font-weight:700;border-top:0 !important}
.mmt-table thead th.mmt-col-pop::before{top:-15px;bottom:0;left:-1px;right:-1px;background:var(--mmt-pop-head,#0e2746);border-radius:8px 8px 0 0;box-shadow:0 -7px 16px -6px rgba(16,24,40,.30),-16px -3px 22px -12px rgba(16,24,40,.26),16px -3px 22px -12px rgba(16,24,40,.26)}
.mmt-table tbody tr:hover td.mmt-col-pop{background:#fff !important}
.mmt-table tbody tr:last-child td.mmt-col-pop{border-bottom:0 !important}
/* white body extends below the table */
.mmt-table tbody tr:last-child td.mmt-col-pop::after,.mmt-table tfoot th.mmt-col-pop::after,.mmt-table tfoot td.mmt-col-pop::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-15px;height:16px;z-index:-1;background:#fff;border-radius:0 0 8px 8px;box-shadow:0 7px 16px -6px rgba(16,24,40,.26),-16px 3px 22px -12px rgba(16,24,40,.22),16px 3px 22px -12px rgba(16,24,40,.22)}
.mmt-table tfoot th.mmt-col-pop,.mmt-table tfoot td.mmt-col-pop{background:#fff !important;font-weight:700}

/* Dark scheme: match the DataTables chrome (search / length / info / paging) to a dark table */
.mmt-frontend-wrap.mmt-dark{color:#cbd5e1}
.mmt-frontend-wrap.mmt-dark .dt-search,.mmt-frontend-wrap.mmt-dark .dt-length,.mmt-frontend-wrap.mmt-dark .dt-info,
.mmt-frontend-wrap.mmt-dark .dataTables_filter,.mmt-frontend-wrap.mmt-dark .dataTables_length,.mmt-frontend-wrap.mmt-dark .dataTables_info{color:#94a3b8}
.mmt-frontend-wrap.mmt-dark .dt-search input,.mmt-frontend-wrap.mmt-dark .dt-length select,.mmt-frontend-wrap.mmt-dark .dt-input,
.mmt-frontend-wrap.mmt-dark .dataTables_filter input,.mmt-frontend-wrap.mmt-dark .dataTables_length select{background:#1e293b;color:#e2e8f0;border:1px solid #334155}
.mmt-frontend-wrap.mmt-dark .dt-search input::placeholder,.mmt-frontend-wrap.mmt-dark .dataTables_filter input::placeholder{color:#64748b}
.mmt-frontend-wrap.mmt-dark .dt-paging .dt-paging-button,.mmt-frontend-wrap.mmt-dark .paginate_button{color:#cbd5e1 !important;border-color:transparent !important;background:transparent !important}
.mmt-frontend-wrap.mmt-dark .dt-paging .dt-paging-button:hover,.mmt-frontend-wrap.mmt-dark .paginate_button:hover{background:#1e293b !important;color:#fff !important;border-color:#334155 !important}
.mmt-frontend-wrap.mmt-dark .dt-paging .dt-paging-button.current,.mmt-frontend-wrap.mmt-dark .paginate_button.current{background:#334155 !important;color:#fff !important;border-color:#475569 !important}
.mmt-frontend-wrap.mmt-dark .dt-paging .dt-paging-button.disabled,.mmt-frontend-wrap.mmt-dark .paginate_button.disabled{color:#475569 !important}
.mmt-frontend-wrap.mmt-dark .mmt-tool,.mmt-frontend-wrap.mmt-dark .mmt-dd-item{background:#1e293b;color:#e2e8f0;border-color:#334155}
.mmt-frontend-wrap.mmt-dark .mmt-tool:hover{background:#334155;color:#fff}

/* ---- Mobile: stack the controls, tighten cells, allow horizontal scroll ---- */
@media screen and (max-width: 600px) {
	.mmt-frontend-wrap .dt-layout-row { flex-wrap: wrap; gap: 8px; }
	.mmt-frontend-wrap .dt-layout-cell { flex: 1 1 100%; justify-content: flex-start; }
	.mmt-frontend-wrap .dt-layout-end { justify-content: flex-start; gap: 8px; }
	.mmt-frontend-wrap .dt-search { width: 100%; }
	.mmt-frontend-wrap .dt-search label,
	.mmt-frontend-wrap .dataTables_filter label { width: 100%; display: flex; gap: 6px; align-items: center; }
	.mmt-frontend-wrap .dt-search input,
	.mmt-frontend-wrap .dataTables_filter input { flex: 1; width: 100%; min-width: 0; margin-left: 0; }
	.mmt-frontend-wrap .dataTables_filter { text-align: left; }
	.mmt-frontend-wrap .dt-paging { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 4px; }
	.mmt-frontend-wrap .dt-layout-row:last-child { justify-content: center; text-align: center; }
	.mmt-table th, .mmt-table td { padding: 8px 10px; font-size: 13px; }
	.mmt-frontend-tools { flex-wrap: wrap; }
}

/* ===== Keyboard focus visibility + reduced motion (a11y) ===== */
/* Real outlines (not box-shadow) so the focus ring survives Windows
   high-contrast / forced-colors mode, where box-shadows are dropped. */
.mmt-table .mmt-cell-link:focus-visible { outline: 2px solid #14385f; outline-offset: 2px; border-radius: 2px; }
.mmt-table .mmt-cell-btn:focus-visible { outline: 2px solid #f7be4b; outline-offset: 2px; }
.mmt-tool-dd-menu .mmt-dd-item:focus-visible { outline: 2px solid #14385f; outline-offset: -2px; }
.mmt-table thead th:focus-visible { outline: 2px solid #f7be4b; outline-offset: -2px; }
.mmt-frontend-wrap.mmt-dark .mmt-table .mmt-cell-link:focus-visible,
.mmt-frontend-wrap.mmt-dark .mmt-tool-dd-menu .mmt-dd-item:focus-visible { outline-color: #f7be4b; }
@media (prefers-reduced-motion: reduce) {
	.mmt-frontend-wrap *, .mmt-frontend-wrap *::before, .mmt-frontend-wrap *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
	}
}