:root { --mk-tb-r: 10px; --mk-tb-h: var(--mk-field-h, 38px); }
.btnstyle-pill { --mk-tb-r: 999px; }
.btnstyle-square { --mk-tb-r: 0; }
/* every button of the bar: geometry -- not while the bar sits in the phone "more actions"
   menu (.mka-card, layouts/partials/mobile_actions.html): there each is a tile with the
   icon above the label, and a 38px height cut the label off */
:is(.box-tools, .action-btn-bar) > a[class][class][class][class][class][class][class][class]:not(.mka-card), :is(.box-tools, .action-btn-bar) > button[class][class][class][class][class][class][class][class]:not(.mka-card), .mk-tb[class][class][class][class][class][class][class][class]:not(.mka-card), .dt-buttons > .buttons-colvis[class][class][class][class][class][class][class][class], .dt-buttons > .dt-tools-toggle[class][class][class][class][class][class][class][class] {
    height: var(--mk-tb-h) !important; min-height: 0 !important; box-sizing: border-box !important;
    padding: 0 14px !important; gap: 8px !important; border-radius: var(--mk-tb-r) !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    vertical-align: middle !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important;
    color: #fff !important; border: 0 !important; text-decoration: none !important;
    margin: 0 !important;                /* the AI button brought 8px of its own */
}
/* one space between icon and label: the label carries no margin of its own (the
   mobile-actions .mka-label brought 6px, so some buttons had 8px and others 14px) */
:is(.box-tools, .action-btn-bar) > :is(a, button)[class][class][class][class][class][class][class][class] > :is(span, .mka-label) { margin: 0 !important; padding: 0 !important; }
/* the table's own toolbar row (search · page size · settings · export, and on section
   pages the action buttons too) sits 12px above the table on every list page — it was
   4px, and the action bars that float over that row were 12px: two different gaps */
.dataTables_wrapper > .row + .dt-scroll, .dataTables_wrapper > .row + .dataTables_scroll,
.dataTables_wrapper > .row + table { margin-top: 8px !important; }
/* an action bar the page drew OUTSIDE its table's card is moved in by the script:
   onto the table's own toolbar row (as the section pages do), or to the top of the
   card when the table has no toolbar */
.mk-tb-row { display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 8px; }
.mk-tb-row > .mk-tb-moved { order: 100; margin-left: auto !important; display: flex !important; gap: 6px;
                            position: static !important; float: none !important; }
.mk-tb-top { display: flex !important; justify-content: flex-end; gap: 6px; margin: 0 0 12px !important;
             position: static !important; float: none !important; }
/* every card the same: no coloured line on top (AdminLTE's .box-primary/-info/…
   border-top), the rounded white card with a hairline the other list pages use */
.content .box { border: 0 !important; border-radius: 12px !important;
                box-shadow: 0 0 0 1px #e5e7eb, 0 1px 2px rgba(15, 23, 42, .05) !important; }
/* a filter card sitting in a bar (Wallet people lists): its closed header is a
   button of the bar — same height and curve, keeping the filter card's white look */
:is(.box-tools, .action-btn-bar) > .compact-filter-card[class][class][class][class][class][class][class][class] { margin: 0 !important; align-self: center !important;
    border-radius: var(--mk-tb-r) !important; }
:is(.box-tools, .action-btn-bar) > .compact-filter-card[class][class][class][class][class][class][class][class] > .box-header {
    height: var(--mk-tb-h) !important; min-height: var(--mk-tb-h) !important; box-sizing: border-box !important;
    display: flex !important; align-items: center !important; gap: 8px; padding: 0 14px !important;
    border-radius: var(--mk-tb-r) !important; }
/* a section hub's row (Manufacturing): its tabs, then the action buttons at the far
   right, on the table's right edge — an older rule gave the buttons order 3, which put
   them before the tabs, at the left */
.mfg-toolbar-row > .mfg-actions-inline[class][class][class][class] { order: 100 !important; margin-left: 8px !important; }
.mfg-toolbar-row > .mfg-actions-inline.mfg-push[class][class][class][class] { margin-left: auto !important; }
/* action buttons that do not fit beside the table's own controls: a line of their own
   ABOVE that row, at the right (the script decides) */
.mfg-toolbar-row > .mk-tb-above[class][class][class][class], .mk-tb-row > .mk-tb-above[class][class][class][class] {
    order: -1 !important; flex: 0 0 100% !important; display: flex !important; justify-content: flex-end !important;
    margin: 0 0 8px !important; }
/* a table whose toolbar has no row of its own (Manager Report's small tables: dom
   'Bt…') had its settings/export buttons floating to the LEFT of the table: they sit
   on a line above it, like everywhere else */
.dataTables_wrapper > .dt-buttons[class][class] { float: none !important; display: flex !important;
    align-items: center; gap: 4px; margin: 0 0 12px !important; }
/* the table's own controls (common.js: search · page size · settings · export): one
   38px square each, the same curve, 6px apart. They were 32x38 with three different
   curves, and the export menu's closed items (0px wide) sat between settings and
   export, so that gap was 0px on one page and 24px on another. */
.dt-search-export[class][class][class][class][class][class] { display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 6px !important; }
.dt-search-export[class][class][class][class][class][class] > .dataTables_filter, .dt-search-export[class][class][class][class][class][class] > .dataTables_length,
.dt-search-export[class][class][class][class][class][class] > .dt-buttons { margin: 0 !important; float: none !important; }
.dt-buttons[class][class][class][class][class][class] { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.dt-buttons:not(.tools-open) > .dt-button:not(.buttons-colvis)[class][class][class][class][class][class] { display: none !important; }
.dataTables_filter[class][class][class][class][class][class] > label, .dataTables_length select[class][class][class][class][class][class],
.dt-buttons > .buttons-colvis[class][class][class][class][class][class], .dt-buttons > .dt-tools-toggle[class][class][class][class][class][class] {
    height: 38px !important; min-width: 38px !important; min-height: 0 !important; margin: 0 !important;
    box-sizing: border-box !important; border-radius: var(--mk-tb-r) !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.dt-buttons > .buttons-colvis[class][class][class][class][class][class], .dt-buttons > .dt-tools-toggle[class][class][class][class][class][class] { width: 38px !important; padding: 0 !important; }
.dataTables_length select[class][class][class][class][class][class] { padding: 0 8px !important; text-align: center; text-align-last: center; }
/* …the search box's magnifier tile (drawn by label::before) and the export menu's
   items when it is open: the same 38px and curve */
.dataTables_filter[class][class][class][class][class][class] > label::before { width: 38px !important; height: 38px !important; min-width: 38px !important;
    border-radius: var(--mk-tb-r) !important; background-position: center !important; }
.dt-buttons.tools-open > .dt-button:not(.buttons-colvis)[class][class][class][class][class][class] { height: 38px !important; min-height: 0 !important;
    padding: 0 12px !important; margin: 0 !important; border-radius: var(--mk-tb-r) !important;
    display: inline-flex !important; align-items: center !important; box-sizing: border-box !important; }
/* the same space between every two buttons of a bar */
:is(.box-tools, .action-btn-bar)[class][class][class][class][class][class][class][class] { gap: 6px !important; }
/* …and its icon: one size, one space to the label */
:is(.box-tools, .action-btn-bar) > a[class][class][class][class][class][class][class][class] > :is(i, svg, img), :is(.box-tools, .action-btn-bar) > button[class][class][class][class][class][class][class][class] > :is(i, svg, img), .mk-tb[class][class][class][class][class][class][class][class] > :is(i, svg, img),
.dt-buttons > .buttons-colvis[class][class][class][class][class][class][class][class] :is(i, svg), .dt-buttons > .dt-tools-toggle[class][class][class][class][class][class][class][class] :is(i, svg) {
    font-size: 16px !important; width: 16px !important; height: 16px !important; flex: 0 0 16px !important;
    margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
    color: #fff !important;
}
/* colours — the tag the script gives, and the usual markups before it runs */
.mk-tb-misc[class][class][class][class][class][class][class][class], :is(.box-tools, .action-btn-bar) > .mk-tb-misc[class][class][class][class][class][class][class][class][class] { background: linear-gradient(135deg, #94a3b8, #475569) !important; }
.mk-tb-ai[class][class][class][class][class][class][class][class], :is(.box-tools, .action-btn-bar) > .btn-ai-action[class][class][class][class][class][class][class][class], :is(.box-tools, .action-btn-bar) > .mkbtn-ai[class][class][class][class][class][class][class][class], :is(.box-tools, .action-btn-bar) > :has(> i.fa-magic)[class][class][class][class][class][class][class][class]
    { background: linear-gradient(135deg, #a855f7, #7c3aed) !important; }
.mk-tb-import[class][class][class][class][class][class][class][class], :is(.box-tools, .action-btn-bar) > .btn-import-action[class][class][class][class][class][class][class][class], :is(.box-tools, .action-btn-bar) > .mkbtn-import[class][class][class][class][class][class][class][class]
    { background: linear-gradient(135deg, #fb923c, #ea580c) !important; }
.mk-tb-help[class][class][class][class][class][class][class][class], :is(.box-tools, .action-btn-bar) > .btn-howto-action[class][class][class][class][class][class][class][class]
    { background: linear-gradient(135deg, #38bdf8, #0284c7) !important; }
.mk-tb-add[class][class][class][class][class][class][class][class], :is(.box-tools, .action-btn-bar) > .mkbtn-add[class][class][class][class][class][class][class][class], :is(.box-tools, .action-btn-bar) > .btn-add-action:has(> :is(i.fa-plus, svg))[class][class][class][class][class][class][class][class]
    { background: linear-gradient(135deg, #22c55e, #15803d) !important; }
.mk-tb-pos[class][class][class][class][class][class][class][class], :is(.box-tools, .action-btn-bar) > .mkbtn-pos[class][class][class][class][class][class][class][class], :is(.box-tools, .action-btn-bar) > .btn-pos-action[class][class][class][class][class][class][class][class]
    { background: linear-gradient(135deg, #818cf8, #4338ca) !important; }
.mk-tb-print[class][class][class][class][class][class][class][class] { background: linear-gradient(135deg, #2dd4bf, #0f766e) !important; }
.dt-buttons .dt-tools-toggle[class][class][class][class][class][class][class][class] { background: linear-gradient(135deg, #fbbf24, #d97706) !important; }
.dt-buttons .buttons-colvis[class][class][class][class][class][class][class][class]  { background: linear-gradient(135deg, #94a3b8, #475569) !important; }
/* a red button stays red */
:is(.box-tools, .action-btn-bar) > :is(.btn-danger, .mkbtn-delete, .mkbtn-reject)[class][class][class][class][class][class][class][class] { background: #e11d48 !important; }
/* the bar sits on the table's toolbar row (the script then pins it 12px above the
   table); fixed order: AI · (others) · Import · How to use · Add · POS */
.box-header > .box-tools { top: 0; }
:is(.box-tools, .action-btn-bar) > .mk-tb-ai, :is(.box-tools, .action-btn-bar) > .btn-ai-action { order: 1 !important; }
:is(.box-tools, .action-btn-bar) > .mk-tb-import, :is(.box-tools, .action-btn-bar) > .btn-import-action { order: 3 !important; }
:is(.box-tools, .action-btn-bar) > .mk-tb-help, :is(.box-tools, .action-btn-bar) > .btn-howto-action { order: 4 !important; }
:is(.box-tools, .action-btn-bar) > .mk-tb-add, :is(.box-tools, .action-btn-bar) > .mk-tb-pos { order: 5 !important; }