/* ============================================================
   MISTEAMS — list tables

   The Products screen (Views/Pos/Products.cshtml) was rebuilt as a
   white card with a tracked, uppercase header row, no zebra banding
   and room between rows. Everything liked it; nothing else had it.
   Those rules live under .mis-prod-table, so the other sixty-odd
   grids in the app kept the Bootstrap 3 default they were born with:
   a full grid of borders, alternating grey bands and 5px of padding.

   This file promotes that treatment to the default. It is written as
   a restyle of markup that is already on the page --
   `table table-hover table-bordered table-condensed table-striped`,
   the string 54 views share -- so no view has to be edited for its
   list to change. table-bordered, table-striped and table-condensed
   are all NEUTRALISED rather than honoured: they were copied from
   view to view, not chosen per screen, and the look they ask for is
   the one being replaced.

   It also styles the DataTables furniture around the table -- the
   length menu, the search box, the record count and the pager --
   which until now was only styled inside .mis-dt-bar, again on that
   one screen.

   LOADED LAST, from _LayoutAdmin.cshtml, after mis-crud.css. Source
   order is what settles the ties with mis-app.css, so keep it there.
   The public site renders under _LayoutBlog.cshtml and never sees it.

   ACCENT: the reference this was drawn from pages in blue. This app
   is green (--mis-accent, Site.css) and the customizer lets a tenant
   change it, so the active page, the sort arrow and the focus ring
   all read the token instead of naming a colour.

   OPT-OUTS
     .mis-table-dense   genuinely dense grids -- tills, reports --
                        that want the old compact rhythm back.
     .mis-table-plain   leave a table alone entirely (layout tables,
                        invoice bodies, anything that is not a list).
   ============================================================ */

:root {
    --mis-th-bg:     #FBFCFD;   /* the one tinted band on a list */
    /* --mis-muted, not the #94A3B8 the Products screen used. At 11px
       uppercase, #94A3B8 on the band above measures about 2.6:1 --
       under the 4.5:1 a column label has to clear to be read, and the
       smaller and more tracked the type, the more it needs it. This
       is 4.9:1 and still recedes behind the data. */
    --mis-th-ink:    var(--mis-muted, #6b7280);
    --mis-row-line:  #F1F5F9;
    --mis-row-hover: #F8FAFC;
    --mis-ctl-line:  #E2E8F0;
    --mis-ctl-ink:   #64748B;
}

/* ------------------------------------------------------------
   1. The table

   Hairlines between rows and nothing else. A boxed cell tells you
   where a cell ends, which nobody was asking; a row rule tells you
   where a record ends, which is how a list gets read.
   ------------------------------------------------------------ */

.body-content .table:not(.mis-table-plain) {
    background: transparent;
    border-collapse: collapse;
    margin-bottom: 0;
}

/* UPPERCASE, TRACKED, SMALL. A column heading labels what is under
   it; it is not a line to read. Setting it apart in case and size
   stops it competing with the first row of data. */
.body-content .table:not(.mis-table-plain) > thead > tr > th {
    background: var(--mis-th-bg);
    border-bottom: 1px solid #E8ECF1;
    border-top: 0;
    color: var(--mis-th-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    padding: 13px 14px;
    text-transform: uppercase;
    vertical-align: middle;
}
/* NO `white-space: nowrap` here. It is the obvious way to keep a
   heading on one line and it is wrong for this app: the Khmer labels
   run long -- "ជូនដំណឹងពេលស្តុកនៅ" for one column -- so nowrap does not
   tidy the header, it widens the table until the page scrolls
   sideways. A heading that wraps onto two lines costs one row of
   height, once, at the top. */
/* Units, currency hints and counts sitting inside a heading are not
   part of the label and should not be shouted with it. */
.body-content .table:not(.mis-table-plain) > thead > tr > th small {
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
}
/* The band is one piece: round it only where it meets the card. */
.body-content .table:not(.mis-table-plain) > thead > tr > th:first-child { border-radius: 8px 0 0 0; }
.body-content .table:not(.mis-table-plain) > thead > tr > th:last-child  { border-radius: 0 8px 0 0; }

.body-content .table:not(.mis-table-plain) > tbody > tr > td {
    border-top: 1px solid var(--mis-row-line);
    color: var(--mis-ink, #111827);
    font-size: 13.5px;
    /* 14px, not 12. A row is the unit being scanned, and the
       reference gets its calm from row height rather than from type
       size -- this lands a plain row at about 48px. */
    padding: 14px 14px;
    vertical-align: middle;
}
/* The first row already sits under the header rule; a second rule on
   top of it draws a double line. */
.body-content .table:not(.mis-table-plain) > tbody > tr:first-child > td { border-top: 0; }

.body-content .table:not(.mis-table-plain) > tfoot > tr > th,
.body-content .table:not(.mis-table-plain) > tfoot > tr > td {
    border-top: 1px solid #E8ECF1;
    color: var(--mis-ink, #111827);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 14px;
}

/* ---- the three classes being overruled -------------------------- */

/* table-bordered: every border but the row rule goes. */
.body-content .table-bordered:not(.mis-table-plain),
.body-content .table-bordered:not(.mis-table-plain) > thead > tr > th,
.body-content .table-bordered:not(.mis-table-plain) > thead > tr > td,
.body-content .table-bordered:not(.mis-table-plain) > tbody > tr > th,
.body-content .table-bordered:not(.mis-table-plain) > tbody > tr > td,
.body-content .table-bordered:not(.mis-table-plain) > tfoot > tr > th,
.body-content .table-bordered:not(.mis-table-plain) > tfoot > tr > td {
    border-left: 0;
    border-right: 0;
}
.body-content .table-bordered:not(.mis-table-plain) { border-bottom: 0; border-top: 0; }

/* table-striped: zebra banding is the most dated thing a Bootstrap
   table wears, and it fights the hover highlight for the same job --
   on a striped table you cannot tell the row under the pointer from
   the row that is merely odd-numbered. */
.body-content .table-striped:not(.mis-table-plain) > tbody > tr:nth-of-type(odd),
.body-content .table-striped:not(.mis-table-plain) > tbody > tr:nth-of-type(even) {
    background-color: transparent;
}

/* table-condensed: 5px of padding, which is where the cramped look
   came from. .mis-table-dense below is the deliberate version. */
.body-content .table-condensed:not(.mis-table-plain) > thead > tr > th,
.body-content .table-condensed:not(.mis-table-plain) > tbody > tr > td,
.body-content .table-condensed:not(.mis-table-plain) > tfoot > tr > td {
    padding: 14px 14px;
}

/* ---- hover, and selection --------------------------------------- */

/* A tint, not the accent. The accent across a whole row reads as
   "selected"; this row is only the one under the pointer. */
.body-content .table-hover:not(.mis-table-plain) > tbody > tr:hover,
.body-content .table-hover:not(.mis-table-plain) > tbody > tr:hover > td {
    background-color: var(--mis-row-hover);
}
/* Selection, where a screen has it, is what gets the accent. */
.body-content .table:not(.mis-table-plain) > tbody > tr.selected > td,
.body-content .table:not(.mis-table-plain) > tbody > tr.is-selected > td {
    background-color: var(--mis-accent-tint, #E8F6EF);
}

/* ---- deliberate density ----------------------------------------- */

.body-content .table.mis-table-dense > thead > tr > th,
.body-content .table.mis-table-dense > tbody > tr > td,
.body-content .table.mis-table-dense > tfoot > tr > td {
    font-size: 12.5px;
    padding: 6px 9px;
}

/* ------------------------------------------------------------
   2. Sorting

   The DataTables Bootstrap skin sets the arrow in Glyphicons
   Halflings and pins it to `bottom: 8px`, a measurement taken
   against a 5px-padded row; at this row height it floats near the
   baseline. Redrawn as a chevron from two borders: no icon font to
   load, centred whatever the row height, and it takes the accent
   when the column is the one the table is actually ordered by.
   ------------------------------------------------------------ */

.body-content table.dataTable thead > tr > th.sorting,
.body-content table.dataTable thead > tr > th.sorting_asc,
.body-content table.dataTable thead > tr > th.sorting_desc {
    cursor: pointer;
    padding-right: 30px;
    position: relative;
}
.body-content table.dataTable thead > tr > th.sorting:after,
.body-content table.dataTable thead > tr > th.sorting_asc:after,
.body-content table.dataTable thead > tr > th.sorting_desc:after {
    border-bottom: 1.6px solid currentColor;
    border-right: 1.6px solid currentColor;
    bottom: auto;
    content: "";
    font-family: inherit;
    height: 6px;
    /* Faint. Every sortable column carries one of these, so at any
       weight that reads as an icon the header becomes a row of
       arrows instead of a row of labels. It is an affordance, found
       on hover; the column actually being sorted by is the one that
       gets full strength, below. */
    opacity: .18;
    position: absolute;
    right: 12px;
    top: 50%;
    width: 6px;
}
/* Pointing down: either the column is not the sort, or it is sorted
   with the largest at the bottom. */
.body-content table.dataTable thead > tr > th.sorting:after {
    transform: translateY(-70%) rotate(45deg);
}
.body-content table.dataTable thead > tr > th.sorting_desc:after {
    color: var(--mis-accent);
    opacity: 1;
    transform: translateY(-70%) rotate(45deg);
}
.body-content table.dataTable thead > tr > th.sorting_asc:after {
    color: var(--mis-accent);
    opacity: 1;
    transform: translateY(-25%) rotate(-135deg);
}
.body-content table.dataTable thead > tr > th.sorting:hover { color: #64748B; }
.body-content table.dataTable thead > tr > th.sorting:hover:after { opacity: .55; }

/* ------------------------------------------------------------
   3. The furniture DataTables draws around the table

   Its Bootstrap skin lays the length menu and the search on one
   Bootstrap row above the table, and the count and the pager on
   another below it. Both rows are controls: they should read
   quieter than the data they are filtering.
   ------------------------------------------------------------ */

.body-content .dataTables_wrapper { padding: 0; position: relative; }

/* THE GUTTERS COME OFF, and this is a bug fix rather than a
   preference.

   DataTables builds its own Bootstrap grid: three `.row` elements,
   one for the length menu and the search, one for the table, one for
   the count and the pager. A `.row` carries `margin: 0 -15px`,
   which is correct when it sits in a padded column and pulls its
   children out to the column edge.

   Forty-one views wrap their table in `<div style="overflow-x:auto">`,
   and DataTables builds that wrapper INSIDE the scroll box. There
   the -15px is not absorbed by anything: the content measures 30px
   wider than the box, so a horizontal scrollbar is drawn under a
   table that fits perfectly -- and because `overflow-x: auto` makes
   the computed `overflow-y` auto as well, that scrollbar steals
   height and a vertical one appears beside it. Worse, the left -15px
   puts "Show" fifteen pixels to the LEFT of the scroll origin, where
   no amount of scrolling reaches it: the label renders as "ow" and
   "Showing 1 to 1 of 1 entries" as "owing 1 to 1 of 1 entries".

   Zeroing the gutters here is the whole fix. The padding has to come
   off the columns in the same breath or the toolbar ends up inset by
   15px on both sides instead. The views keep their scroll box, which
   is still what saves a genuinely wide table on a narrow screen --
   it just stops firing on tables that were never too wide.

   Views/Pos/Products.cshtml solved this for itself by deleting its
   wrapper; the other forty did not, so it is solved here for all of
   them. */
.body-content .dataTables_wrapper > .row {
    margin-left: 0;
    margin-right: 0;
}
.body-content .dataTables_wrapper > .row > [class^="col-"],
.body-content .dataTables_wrapper > .row > [class*=" col-"] {
    padding-left: 0;
    padding-right: 0;
}

.body-content .dataTables_wrapper > .row:first-child {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.body-content .dataTables_wrapper > .row:last-child {
    align-items: center;
    border-top: 1px solid var(--mis-row-line);
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    padding-top: 14px;
}

/* "Show [ 8 ] entries" and "Search: [      ]" -- the words around
   the controls are instructions, not headings. */
.body-content .dataTables_wrapper .dataTables_length label,
.body-content .dataTables_wrapper .dataTables_filter label {
    align-items: center;
    color: var(--mis-ctl-ink);
    display: inline-flex;
    font-size: 13px;
    font-weight: 400;
    gap: 8px;
    margin: 0;
}
.body-content .dataTables_wrapper .dataTables_filter { text-align: right; }

.body-content .dataTables_wrapper .dataTables_length select,
.body-content .dataTables_wrapper .dataTables_filter input {
    background: #FFFFFF;
    border: 1px solid var(--mis-ctl-line);
    border-radius: 8px;
    box-shadow: none;
    color: var(--mis-ink, #111827);
    display: inline-block;
    font-size: 13px;
    /* The same token every other control on the page reads, so a
       filter bar holding a DataTables search, a plain select and a
       Chosen box sits on one baseline. See mis-ui.css. */
    height: var(--mis-ctl-h, 38px);
    margin: 0;
    padding: 0 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: auto;
}
.body-content .dataTables_wrapper .dataTables_filter input { min-width: 230px; }
.body-content .dataTables_wrapper .dataTables_length select { padding-right: 26px; }
.body-content .dataTables_wrapper .dataTables_length select:focus,
.body-content .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--mis-accent);
    box-shadow: 0 0 0 3px rgba(var(--mis-accent-rgb, 30, 158, 90), .12);
    outline: 0;
}

/* "Showing 1 to 8 of 16 entries" -- a status line, so it whispers. */
.body-content .dataTables_wrapper .dataTables_info {
    color: var(--mis-ctl-ink);
    font-size: 13px;
    padding: 0;
}
.body-content .dataTables_wrapper .dataTables_info b,
.body-content .dataTables_wrapper .dataTables_info strong {
    color: var(--mis-ink, #111827);
    font-weight: 600;
}

/* ---- the pager -------------------------------------------------- */

/* Bootstrap 3 pagination is a joined strip of bordered boxes with
   one rounded end. The reference pages as separate squares with the
   current one filled, which survives wrapping on a narrow screen --
   a joined strip does not. */
.body-content .dataTables_wrapper .dataTables_paginate { margin: 0; text-align: right; }
.body-content .dataTables_wrapper .pagination {
    border-radius: 0;
    display: inline-flex;
    gap: 4px;
    margin: 0;
}
.body-content .dataTables_wrapper .pagination > li > a,
.body-content .dataTables_wrapper .pagination > li > span,
.body-content .dataTables_wrapper .pagination > li:first-child > a,
.body-content .dataTables_wrapper .pagination > li:first-child > span,
.body-content .dataTables_wrapper .pagination > li:last-child > a,
.body-content .dataTables_wrapper .pagination > li:last-child > span {
    background: #FFFFFF;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--mis-ctl-ink);
    /* BLOCK, and it has to be. Bootstrap floats these, and dropping
       the float without saying what to do instead leaves them inline
       -- where vertical padding paints but does not contribute to the
       line box, so each link bled 6px below its own row. Inside the
       `overflow-x: auto` box those 41 views wrap their table in, 6px
       of overflow is enough to draw a vertical scrollbar, and that
       scrollbar then eats 15px off the right-hand edge of the table. */
    display: block;
    float: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    margin: 0;
    min-width: 34px;
    padding: 10px 8px;
    text-align: center;
    transition: background-color .15s ease, color .15s ease;
}
.body-content .dataTables_wrapper .pagination > li > a:hover,
.body-content .dataTables_wrapper .pagination > li > a:focus {
    background: var(--mis-row-hover);
    border-color: transparent;
    color: var(--mis-ink, #111827);
}
.body-content .dataTables_wrapper .pagination > li.active > a,
.body-content .dataTables_wrapper .pagination > li.active > span,
.body-content .dataTables_wrapper .pagination > li.active > a:hover,
.body-content .dataTables_wrapper .pagination > li.active > a:focus,
.body-content .dataTables_wrapper .pagination > li.active > span:hover,
.body-content .dataTables_wrapper .pagination > li.active > span:focus {
    background: var(--mis-accent);
    border-color: var(--mis-accent);
    color: #FFFFFF;
}
/* Disabled reads as inert, not merely dimmed -- the same rule the
   buttons follow in mis-app.css. */
.body-content .dataTables_wrapper .pagination > li.disabled > a,
.body-content .dataTables_wrapper .pagination > li.disabled > span,
.body-content .dataTables_wrapper .pagination > li.disabled > a:hover,
.body-content .dataTables_wrapper .pagination > li.disabled > span:hover {
    background: #FFFFFF;
    border-color: transparent;
    color: #CBD5E1;
    cursor: default;
}

/* ---- empty, and loading ----------------------------------------- */

.body-content .dataTables_empty {
    color: #94A3B8 !important;
    font-size: 13px;
    padding: 36px 14px !important;
    text-align: center;
}
.body-content .dataTables_wrapper .dataTables_processing {
    background: #FFFFFF;
    border: 1px solid #EEF1F6;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
    color: var(--mis-ctl-ink);
    font-size: 13px;
    margin-top: -26px;
    padding: 12px 0;
}

/* ------------------------------------------------------------
   4. What sits inside the cells

   Opt-in classes for the things a list row keeps needing and has
   had to hand-roll every time: a select box, a status that is not
   carried by colour alone, and figures that line up.
   ------------------------------------------------------------ */

/* ---- the select column ---- */

/* The browser default is a 13px box that lands off-centre in a 44px
   row. accent-color paints the tick in the app green without a
   sprite or a wrapping label. */
.body-content .table input[type="checkbox"],
.body-content .table input[type="radio"] {
    accent-color: var(--mis-accent);
    cursor: pointer;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    width: 16px;
}
.body-content .table > thead > tr > th.mis-col-check,
.body-content .table > tbody > tr > td.mis-col-check {
    padding-left: 16px;
    padding-right: 6px;
    width: 42px;
}

/* ---- status: a dot AND a word, never colour alone ---- */

.mis-status {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    white-space: nowrap;
}
.mis-status .mis-dot {
    background: #94A3B8;
    border-radius: 50%;
    flex: none;
    height: 8px;
    width: 8px;
}
.mis-status.is-ok     .mis-dot { background: var(--mis-ok, #10b981); }
.mis-status.is-warn   .mis-dot { background: var(--mis-warn, #f59e0b); }
.mis-status.is-danger .mis-dot { background: var(--mis-danger, #ef4444); }
.mis-status.is-info   .mis-dot { background: var(--mis-info, #0ea5e9); }
.mis-status.is-muted  .mis-dot { background: #94A3B8; }

/* ---- figures ---- */

/* Money and counts are compared down a column, so they are set
   right, in lining figures, at a fixed width per digit. */
.body-content .table .text-right,
.body-content .table .mis-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.body-content .table .mis-num-strong { font-weight: 600; }

/* ---- the identifier column ---- */

.body-content .table .mis-cell-id {
    color: #94A3B8;
    font-variant-numeric: tabular-nums;
}
.body-content .table .mis-cell-title { color: #0F172A; font-weight: 600; }
.body-content .table .mis-cell-sub {
    color: #94A3B8;
    display: block;
    font-size: 11.5px;
    font-weight: 400;
}

/* ---- the actions column ---- */

/* Buttons in a row are chrome. They keep their meaning -- danger
   still clears -- but at xs size they sit flat rather than carrying
   the lift the page primary action has. */
.body-content .table > thead > tr > th.mis-col-actions,
.body-content .table > tbody > tr > td.mis-col-actions {
    text-align: right;
    white-space: nowrap;
}
.body-content .table .btn-xs + .btn-xs,
.body-content .table .btn-sm + .btn-sm { margin-left: 4px; }
.body-content .table .btn-xs,
.body-content .table .btn-sm { box-shadow: none; }
.body-content .table .btn-xs:hover,
.body-content .table .btn-sm:hover { transform: none; }

/* ------------------------------------------------------------
   4b. The screens that already had an answer

   Four tables in the app defined their own header before this file
   existed, at a specificity this file now outranks. Three of them --
   the POS dashboard, the promotion staging table and the price
   preview -- are lists, and joining the house style is the point of
   the exercise, so they are left to be restyled.

   These two are not lists, and they are the exceptions rather than
   the rule:

     .mis-till-basket   an order being rung up, with a green header
     .mis-till-totals   figures in a stack
     .mis-prod-view     label/value pairs in a modal

   Those three carry .mis-table-plain in their views, which the
   :not() on every selector above already excludes. What is left
   below is the one case that WANTS the new look and only needs the
   density back.
   ------------------------------------------------------------ */

/* Eleven columns. At 14px of side padding the catalogue no longer
   fits its card and the page scrolls sideways; the body rows are
   already held at 8px by a rule in mis-app.css, so this is the
   header catching up with them rather than an exception to the
   house style. */
.body-content .table.mis-prod-table > thead > tr > th { padding: 12px 8px; }

/* ============================================================
   4c. Row controls, and the rainbow

   The table was never the loud part. Counted across the views and
   the DataTables render callbacks there are about two hundred
   `btn-xs` buttons in table rows, nearly all of them solid
   btn-danger, btn-warning, btn-info or btn-success -- so a list of
   twenty records draws sixty saturated chips down its right-hand
   side. That, not the borders, is what a list screen reads as first.

   They are not deleted and they are not greyed out. A row control is
   chrome: white, a hairline, ink text, with the meaning carried by
   the icon. Hover is where the colour arrives, in the soft version
   of itself, so a destructive click still announces itself before it
   happens and nothing has to be re-learned.

   Scoped to `.table` on purpose. The same button outside a row is a
   real action -- "Save Setting", "Add Product" -- and keeps the
   weight mis-app.css gives it.
   ============================================================ */

.body-content .table .btn-xs,
.body-content .table .btn-sm.btn-icon {
    background: #FFFFFF;
    border: 1px solid #E3E8EF;
    border-radius: 7px;
    box-shadow: none;
    color: #475569;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 4px 9px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.body-content .table .btn-xs:hover,
.body-content .table .btn-xs:focus {
    box-shadow: none;
    transform: none;
}
/* The glyph keeps the colour the button used to be, so the row is
   still scannable by hue -- at the size of an icon rather than the
   size of a chip. */
.body-content .table .btn-xs .glyphicon,
.body-content .table .btn-xs .fa { margin-right: 2px; }

.body-content .table .btn-xs.btn-info     .glyphicon,
.body-content .table .btn-xs.btn-info     .fa { color: var(--mis-info-d, #0284c7); }
.body-content .table .btn-xs.btn-warning  .glyphicon,
.body-content .table .btn-xs.btn-warning  .fa { color: var(--mis-warn-d, #d97706); }
.body-content .table .btn-xs.btn-danger   .glyphicon,
.body-content .table .btn-xs.btn-danger   .fa { color: var(--mis-danger-d, #dc2626); }
.body-content .table .btn-xs.btn-success  .glyphicon,
.body-content .table .btn-xs.btn-success  .fa { color: var(--mis-ok-d, #059669); }
.body-content .table .btn-xs.btn-primary  .glyphicon,
.body-content .table .btn-xs.btn-primary  .fa { color: var(--mis-accent); }

/* The variant, as a background only while the pointer is on it. */
.body-content .table .btn-xs.btn-info,
.body-content .table .btn-xs.btn-warning,
.body-content .table .btn-xs.btn-danger,
.body-content .table .btn-xs.btn-success,
.body-content .table .btn-xs.btn-primary {
    background: #FFFFFF;
    color: #475569;
}
.body-content .table .btn-xs.btn-info:hover,
.body-content .table .btn-xs.btn-info:focus {
    background: #E0F2FE; border-color: #BAE6FD; color: #075985;
}
.body-content .table .btn-xs.btn-warning:hover,
.body-content .table .btn-xs.btn-warning:focus {
    background: #FEF3C7; border-color: #FDE68A; color: #92400E;
}
.body-content .table .btn-xs.btn-danger:hover,
.body-content .table .btn-xs.btn-danger:focus {
    background: #FEE2E2; border-color: #FECACA; color: #991B1B;
}
.body-content .table .btn-xs.btn-success:hover,
.body-content .table .btn-xs.btn-success:focus {
    background: #D1FAE5; border-color: #A7F3D0; color: #065F46;
}
.body-content .table .btn-xs.btn-primary:hover,
.body-content .table .btn-xs.btn-primary:focus {
    background: var(--mis-accent-tint, #E8F6EF);
    border-color: rgba(var(--mis-accent-rgb, 30, 158, 90), .3);
    color: var(--mis-accent-press, #126239);
}
/* On hover the icon joins the text rather than staying the one
   saturated thing inside a soft chip. */
.body-content .table .btn-xs:hover .glyphicon,
.body-content .table .btn-xs:hover .fa { color: inherit; }

/* A row control that is refused reads as inert. mis-app.css already
   says this with !important; repeated here only to drop the border,
   which that rule does not reach. */
.body-content .table .btn-xs[disabled],
.body-content .table .btn-xs.disabled {
    background: #F8FAFC !important;
    border-color: #EEF2F6 !important;
    color: #B6C0CD !important;
}
.body-content .table .btn-xs[disabled] .glyphicon,
.body-content .table .btn-xs.disabled .glyphicon { color: #CBD5E1 !important; }

/* Buttons sitting side by side in a cell need air, not a shared
   edge -- they are separate decisions. */
.body-content .table td > .btn-xs + .btn-xs { margin-left: 4px; }

/* ---- the Actions menu ---- */

/* Where a screen has collapsed its row controls into one menu
   (.mis-row-menu, styled in mis-app.css) the toggle should match the
   ghost buttons above rather than sit a shade apart from them. */
.body-content .table .mis-row-menu .dropdown-toggle {
    background: #FFFFFF;
    border: 1px solid #E3E8EF;
    border-radius: 7px;
    color: #475569;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 9px;
}
.body-content .table .mis-row-menu.open .dropdown-toggle,
.body-content .table .mis-row-menu .dropdown-toggle:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #0F172A;
}

/* ============================================================
   4d. Badges, app-wide

   The one rule in this file that is not about a table. Bootstrap 3
   .label is a saturated block of colour with white text, and the
   status column of a list is exactly where they collect -- next to
   the ghost buttons above, a solid green YES would become the
   loudest thing on the screen by default.

   Soft pill instead: the hue tinted down to a background, the word
   in the dark end of the same hue. Same information, and it now
   reads at the weight of a status rather than a warning. .label-*
   keeps its meaning, so no view changes.
   ============================================================ */

.body-content .label {
    border-radius: 999px;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.5;
    padding: 2px 9px;
    text-shadow: none;
}
.body-content .label-default { background: #EEF2F6; color: #52606D; }
.body-content .label-primary { background: var(--mis-accent-tint, #E8F6EF); color: var(--mis-accent-press, #126239); }
.body-content .label-success { background: #D1FAE5; color: #065F46; }
.body-content .label-info    { background: #E0F2FE; color: #075985; }
.body-content .label-warning { background: #FEF3C7; color: #92400E; }
.body-content .label-danger  { background: #FEE2E2; color: #991B1B; }

/* ------------------------------------------------------------
   5. Narrow screens

   A list with nine columns does not become a phone layout by
   wrapping; it becomes unreadable. It scrolls sideways instead, and
   the toolbar above it does not go with it -- see the note in
   Views/Pos/Products.cshtml about the horizontal scrollbar a .row
   inside an overflow box produces.
   ------------------------------------------------------------ */

@media (max-width: 767px) {
    .body-content .dataTables_wrapper > .row:first-child,
    .body-content .dataTables_wrapper > .row:last-child {
        gap: 10px;
        justify-content: space-between;
    }
    .body-content .dataTables_wrapper .dataTables_filter,
    .body-content .dataTables_wrapper .dataTables_paginate,
    .body-content .dataTables_wrapper .dataTables_info { text-align: left; }
    .body-content .dataTables_wrapper .dataTables_filter label { display: flex; width: 100%; }
    .body-content .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }

    .body-content .table:not(.mis-table-plain) > thead > tr > th,
    .body-content .table:not(.mis-table-plain) > tbody > tr > td { padding: 10px 10px; }
}

/* ------------------------------------------------------------
   6. Print

   On paper there is no hover, no pager and no tint, and ink costs
   something -- so the grid comes back and the rows close up.
   Reports render through this same shell
   (AdminFormats/RenderReport).
   ------------------------------------------------------------ */

@media print {
    .body-content .dataTables_wrapper > .row:first-child,
    .body-content .dataTables_wrapper > .row:last-child { display: none; }

    .body-content .table:not(.mis-table-plain) > thead > tr > th {
        background: #FFFFFF !important;
        border: 1px solid #999 !important;
        color: #000;
        padding: 5px 7px;
    }
    .body-content .table:not(.mis-table-plain) > tbody > tr > td {
        border: 1px solid #999 !important;
        padding: 5px 7px;
    }
    .body-content table.dataTable thead > tr > th:after { display: none; }
}