/* =========================================================================
   VIYA UI refinements
   Loaded after style.css. Kept in its own file so template updates and these
   changes never collide, and so the whole layer can be dropped by removing
   one <link>.

   Palette follows the existing sidebar styling:
     brand   #45234c   text  #344054   muted #667085
     border  #e8edf3   wash  #f8fafc
   ========================================================================= */

:root {
  --viya-brand: #45234c;
  --viya-text: #344054;
  --viya-muted: #667085;
  --viya-border: #e8edf3;
  --viya-border-soft: #f1f4f8;
  --viya-wash: #f8fafc;
  --viya-tint: rgba(69, 35, 76, 0.045);
  --viya-tint-strong: rgba(69, 35, 76, 0.08);
  --viya-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --viya-speed: 0.2s;
}

/* =========================================================================
   1. Sidebar motion
   The collapse used to jump because the sidebar, the header rail and the
   page wrapper all resized with no transition. Animating width and offset
   together keeps them locked while they move.
   ========================================================================= */

.sidebar,
.header .header-left,
.page-wrapper {
  transition:
    width var(--viya-speed) var(--viya-ease),
    margin-left var(--viya-speed) var(--viya-ease),
    left var(--viya-speed) var(--viya-ease);
}

/* The logo swap during collapse was an instant pop. */
.sidebar-logo .logo,
.sidebar-logo .logo-small {
  transition: opacity 0.16s var(--viya-ease);
}

/* Label text fades rather than being clipped mid-collapse. */
.mini-sidebar:not(.expand-menu) .sidebar-menu ul li a > span,
.mini-sidebar:not(.expand-menu) .sidebar-menu .submenu-hdr {
  opacity: 0;
  transition: opacity 0.12s var(--viya-ease);
}

.sidebar-menu ul li a > span,
.sidebar-menu .submenu-hdr {
  transition: opacity 0.18s var(--viya-ease) 0.04s;
}

/* Chevron follows the open state instead of snapping. */
.sidebar-menu .menu-arrow {
  transition: transform var(--viya-speed) var(--viya-ease);
}

.sidebar-menu a.subdrop .menu-arrow {
  transform: rotate(90deg);
}

/* The main sidebar is styled by viya-sidebar.css. The rules left in this
   section still apply to the horizontal and two-column layout variants,
   which continue to use the template's .sidebar-menu markup. */

/* =========================================================================
   2. Tables
   Applied to .table so every existing screen benefits without touching the
   220-odd table markup blocks. Bootstrap variables are set rather than
   overridden so striping, hover and dark mode keep working.
   ========================================================================= */

.table {
  --bs-table-hover-bg: var(--viya-tint);
  --bs-table-striped-bg: #fbfcfd;
  border-color: var(--viya-border-soft);
  color: var(--viya-text);
}

/* Header: quiet, uppercase, and clearly not a data row. */
.table:not(.table-borderless) > thead > tr > th,
.table:not(.table-borderless) > thead > tr > td {
  padding: 11px 14px;
  background: var(--viya-wash);
  border-bottom: 1px solid var(--viya-border);
  color: var(--viya-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.table:not(.table-borderless) > tbody > tr > td,
.table:not(.table-borderless) > tbody > tr > th {
  padding: 11px 14px;
  border-bottom: 1px solid var(--viya-border-soft);
  font-size: 13.5px;
  vertical-align: middle;
}

/* No hanging rule under the final row inside a card. */
.card .table:not(.table-borderless) > tbody > tr:last-child > td,
.card .table:not(.table-borderless) > tbody > tr:last-child > th {
  border-bottom: 0;
}

.table > tbody > tr {
  transition: background-color 0.14s var(--viya-ease);
}

.table-hover > tbody > tr:hover > *,
.table:not(.table-borderless) > tbody > tr:hover > * {
  background-color: var(--viya-tint);
}

/* ---------- placeholder rows ----------
   A row whose single cell spans the table is a message ("No appointments."),
   not data. It was picking up the hover tint above, so pointing at it lit up
   a full-width grey slab as though it were a selectable record. The
   :only-child keeps this off genuine spanning cells such as totals rows. */
.table > tbody > tr:has(> td[colspan]:only-child):hover > * {
  background-color: transparent;
}

.table > tbody > tr > td[colspan]:only-child {
  padding-top: 18px;
  padding-bottom: 18px;
  color: var(--viya-muted);
  font-size: 13px;
  text-align: center;
}

/* Breathing room at the edges so content is not flush with the border. */
.table:not(.table-borderless) > :not(caption) > * > *:first-child {
  padding-left: 16px;
}

.table:not(.table-borderless) > :not(caption) > * > *:last-child {
  padding-right: 16px;
}

/* Compact variant stays compact. */
.table-sm:not(.table-borderless) > :not(caption) > * > * {
  padding: 7px 10px;
  font-size: 13px;
}

/* Numeric columns line up when marked. */
.table .text-end,
.table .text-right {
  font-variant-numeric: tabular-nums;
}

/* Action buttons should never wrap onto a second line. */
.table td .btn-group,
.table td .btn-group-sm {
  white-space: nowrap;
}

/* Status pills read better with a little more weight. */
.table .badge {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Scroll container: rounded, bordered, with a usable scrollbar. */
.table-responsive {
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(69, 35, 76, 0.22) transparent;
}

.table-responsive::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
  background: transparent;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(69, 35, 76, 0.2);
  border-radius: 999px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: rgba(69, 35, 76, 0.34);
}

/* Opt-in: add table-sticky-head to a .table-responsive that has a height. */
.table-sticky-head {
  max-height: 60vh;
  overflow-y: auto;
}

.table-sticky-head > .table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -1px 0 var(--viya-border);
}

/* Selected rows, where a checkbox column exists. */
.table > tbody > tr.selected > *,
.table > tbody > tr.active > * {
  background-color: var(--viya-tint-strong);
}

/* DataTables chrome, softened to match. */
div.dataTables_wrapper div.dataTables_length select,
div.dataTables_wrapper div.dataTables_filter input {
  border: 1px solid var(--viya-border);
  border-radius: 8px;
  padding: 5px 10px;
}

/* ---------- the pager row ----------
   style.css faked this row with floats plus `margin-top: -50px` on the count,
   then hid the count outright — so a list told you nothing about how many
   records it held or where in them you were. Same three slots, laid out
   instead of nudged: rows-per-page and the count on the left, keys on the
   right. `flow-root` contains the floats without changing how the wrapper
   behaves as a block. */

div.dataTables_wrapper {
  display: flow-root;
}

div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_paginate {
  margin-top: 0;
  padding: 14px 2px 2px;
  line-height: 32px;
}

div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_info {
  float: left;
}

div.dataTables_wrapper div.dataTables_paginate {
  float: right;
}

div.dataTables_wrapper div.dataTables_info {
  display: block;
  padding-left: 14px;
  color: var(--viya-muted);
  font-size: 12.5px;
}

div.dataTables_wrapper div.dataTables_length label {
  margin-bottom: 0;
  color: var(--viya-muted);
  font-size: 12.5px;
}

/* A rule between the last row and the pager. The card rule above drops the
   final row's border, which is right when the card ends there and wrong when
   a pager follows it. */
.card div.dataTables_wrapper table.dataTable > tbody > tr:last-child > td,
.card div.dataTables_wrapper table.dataTable > tbody > tr:last-child > th {
  border-bottom: 1px solid var(--viya-border-soft);
}

@media (max-width: 575.98px) {
  div.dataTables_wrapper div.dataTables_length,
  div.dataTables_wrapper div.dataTables_info,
  div.dataTables_wrapper div.dataTables_paginate {
    float: none;
    padding-left: 2px;
    text-align: center;
  }

  div.dataTables_wrapper div.dataTables_paginate {
    padding-top: 8px;
  }
}

/* Tables that opted out of paging keep their footer empty. style.css hides
   them with `.no-pagination .pagination`, which the weightier DataTables
   selectors below would otherwise beat — so say it again, louder. The row
   count and the rule above it go with it: there is no pager for them to
   caption. */
.no-pagination div.dataTables_wrapper .dataTables_paginate,
.no-pagination div.dataTables_wrapper .dataTables_paginate .pagination,
.no-pagination div.dataTables_wrapper div.dataTables_info {
  display: none;
}

.card .no-pagination div.dataTables_wrapper table.dataTable > tbody > tr:last-child > td,
.card .no-pagination div.dataTables_wrapper table.dataTable > tbody > tr:last-child > th {
  border-bottom: 0;
}

/* ---------- pagination ----------
   Separate rounded keys rather than one joined bar: the current page has to
   be findable at a glance, and a bordered strip makes every key look equally
   important.

   Every rule is listed twice. The bare `.pagination` form covers hand-written
   pagers; the `div.dataTables_wrapper` form repeats it at greater weight
   because style.css pins the DataTables pager with
   `.dataTables_paginate .pagination li a`, which outranks a plain
   `.pagination .page-link` and would otherwise win. */

.pagination,
div.dataTables_wrapper .dataTables_paginate .pagination {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0;
}

/* The `li` is a second button in disguise. DataTables gives it class
   `paginate_button`, which style.css styles as its own 24px pill — border,
   50px radius, and a solid #45234c on hover — sitting behind the `a` that is
   the key you actually see. Because the key's hover fill is translucent, that
   pill read straight through it as a dark blob with the label lost inside.
   Strip the `li` back to a plain list item and let the `a` be the button. */
.pagination .page-item,
div.dataTables_wrapper .dataTables_paginate .pagination li.page-item {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Kept apart from the reset above on purpose: a `:hover` selector outranks
   its plain twin, so folding these two declarations into that block would let
   hover win the `margin: 0` as well and knock the arrows 4px sideways every
   time the pointer crossed a key. */
div.dataTables_wrapper .dataTables_paginate .pagination li.page-item:hover {
  background: transparent;
  border-color: transparent;
}

.pagination .page-link,
div.dataTables_wrapper .dataTables_paginate .pagination li a.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* 32px square minimum, growing sideways once the page number hits three
     digits — the old fixed 25px clipped anything past "99". */
  min-width: 32px;
  width: auto;
  height: 32px;
  padding: 0 9px;
  border: 1px solid transparent;
  /* style.css sets 85px !important, so this has to shout back. */
  border-radius: 9px !important;
  background: var(--viya-wash);
  color: var(--viya-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition:
    background-color var(--viya-speed) var(--viya-ease),
    border-color var(--viya-speed) var(--viya-ease),
    color var(--viya-speed) var(--viya-ease),
    box-shadow var(--viya-speed) var(--viya-ease);
}

.pagination .page-item:not(.disabled) .page-link:hover,
div.dataTables_wrapper .dataTables_paginate .pagination li:not(.disabled) a.page-link:hover {
  background: var(--viya-tint-strong);
  border-color: rgba(69, 35, 76, 0.18);
  color: var(--viya-brand);
}

.pagination .page-item.active .page-link,
div.dataTables_wrapper .dataTables_paginate .pagination li.active a.page-link,
div.dataTables_wrapper .dataTables_paginate .pagination li.active a.page-link:hover {
  width: auto;
  height: 32px;
  background: var(--viya-brand);
  border-color: var(--viya-brand);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(69, 35, 76, 0.32);
}

/* Focus is for keyboards. Bootstrap's default halo fires on mouse clicks too
   and left a stuck ring on the last key you pressed. */
.pagination .page-link:focus,
div.dataTables_wrapper .dataTables_paginate .pagination li a.page-link:focus {
  box-shadow: none;
}

.pagination .page-link:focus-visible,
div.dataTables_wrapper .dataTables_paginate .pagination li a.page-link:focus-visible {
  outline: 2px solid var(--viya-brand);
  outline-offset: 2px;
}

/* Disabled keys and the gap marker are labels, not keys: nothing to press,
   nothing to hover. */
.pagination .page-item.disabled .page-link,
div.dataTables_wrapper .dataTables_paginate .pagination li.disabled a.page-link {
  background: transparent;
  border-color: transparent;
  color: #b7c0cd;
  box-shadow: none;
  cursor: default;
  opacity: 1;
}

/* ...except the arrows, which keep their key whatever state they are in.
   style.css stripped a disabled arrow back to a bare 20px glyph, so the pager
   lost its left bookend on page one and every key shifted as you paged. */
.pagination .page-item.previous,
.pagination .page-item.next,
div.dataTables_wrapper .dataTables_paginate .pagination li.previous,
div.dataTables_wrapper .dataTables_paginate .pagination li.next,
div.dataTables_wrapper .dataTables_paginate .pagination li.previous.disabled,
div.dataTables_wrapper .dataTables_paginate .pagination li.next.disabled {
  width: auto;
}

.pagination .page-item.previous.disabled .page-link,
.pagination .page-item.next.disabled .page-link,
div.dataTables_wrapper .dataTables_paginate .pagination li.previous.disabled a.page-link,
div.dataTables_wrapper .dataTables_paginate .pagination li.next.disabled a.page-link {
  width: auto;
  min-width: 32px;
  border: 1px solid transparent;
  background: var(--viya-wash);
  color: #c3cbd7;
  cursor: not-allowed;
}

/* A little air between the arrows and the numbers, so the two jobs read as
   two groups. `.page-item` is carried here only to outweigh the `margin: 0`
   in the li reset above. */
div.dataTables_wrapper .dataTables_paginate .pagination li.page-item.previous {
  margin-right: 4px;
}

div.dataTables_wrapper .dataTables_paginate .pagination li.page-item.next {
  margin-left: 4px;
}

.pagination .page-ellipsis,
.pagination .page-item.disabled .page-ellipsis,
div.dataTables_wrapper .dataTables_paginate .pagination li[id$="_ellipsis"] a.page-link {
  min-width: 18px;
  padding: 0 2px;
  background: transparent;
  border-color: transparent;
  color: var(--viya-muted);
  box-shadow: none;
}

/* =========================================================================
   3. Content shell
   The frame every list page shares: title block, toolbar, card, row actions.
   Class-scoped and additive, so it rides on top of the template rather than
   replacing it.
   ========================================================================= */

/* ---------- spacing ----------
   The shell was built on a 24px step, and it stacked: 24px round the content,
   24px under the page header, 24px between cards, then 16/20px inside every
   card on top of that. On a list page it pushed the first row of data ~180px
   down the screen. One 16px step throughout, which buys back roughly a row
   and a half without the page feeling cramped. */

.page-wrapper .content {
  padding: 16px;
  padding-bottom: 0;
}

.page-wrapper .content.settings-content {
  padding-bottom: 16px;
}

@media (max-width: 991.96px) {
  .page-wrapper .content {
    padding: 12px;
    padding-bottom: 0;
  }
}

.page-header {
  margin-bottom: 16px;
}

.card {
  margin-bottom: 16px;
}

.card .card-header {
  padding: 12px 16px;
}

.card .card-body {
  padding: 16px;
}

/* The title and its caption were the same weight and nearly the same size,
   so the pair read as two headings rather than a heading and its caption. */
.page-header .page-title h4 {
  margin-bottom: 2px;
  color: var(--viya-text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-header .page-title h6 {
  margin-bottom: 0;
  color: var(--viya-muted);
  font-size: 13px;
  font-weight: 400;
}

/* Toolbar icons: one shape, one hover, whatever the icon inside is. */
.table-top-head li a {
  border-radius: 8px;
  border-color: var(--viya-border);
  color: var(--viya-muted);
  transition:
    background-color var(--viya-speed) var(--viya-ease),
    border-color var(--viya-speed) var(--viya-ease),
    color var(--viya-speed) var(--viya-ease);
}

.table-top-head li a:hover {
  border-color: var(--viya-brand);
  background: var(--viya-tint);
  color: var(--viya-brand);
}

.card {
  border-radius: 12px;
  border-color: var(--viya-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.card > .card-header {
  border-bottom-color: var(--viya-border-soft);
}

/* ---------- row actions ---------- */

/* The template pins these buttons with `table tbody td.action-table-data a`,
   so the selectors below carry the same depth — a bare class loses to it and
   the rules silently do nothing. Direct children only: some tables put a
   checkbox in this container too. */
/* Spacing is left to the me-2 the markup already carries: Bootstrap's spacing
   utilities are !important, so a gap here would only ever add to them. */
table tbody td.action-table-data .edit-delete-action > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--viya-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--viya-muted);
  transition:
    background-color var(--viya-speed) var(--viya-ease),
    border-color var(--viya-speed) var(--viya-ease),
    color var(--viya-speed) var(--viya-ease);
}

/* The icons are coloured individually by the template; let them follow the
   button so hover reaches them. */
table tbody td.action-table-data .edit-delete-action > a > * {
  color: inherit;
}

table tbody td.action-table-data .edit-delete-action > a:hover {
  border-color: var(--viya-brand);
  background: var(--viya-tint);
  color: var(--viya-brand);
}

table tbody td.action-table-data .edit-delete-action > a:focus-visible {
  outline: 2px solid var(--viya-brand);
  outline-offset: 2px;
}

/* Deleting is the one action worth colouring, so it reads before the click. */
table tbody td.action-table-data .edit-delete-action > a:has(.feather-trash-2):hover,
table tbody td.action-table-data .edit-delete-action > a:has(.ti-trash):hover {
  border-color: #fda29b;
  background: #fef3f2;
  color: #b42318;
}

/* ---------- list-row pieces ---------- */

.viya-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--viya-border);
  background: var(--viya-wash);
  object-fit: cover;
}

/* `.table tbody .userimgname img` squares the corners off and adds its own
   margin. Same weight as that rule, and this sheet loads second. */
.table tbody img.viya-avatar {
  margin-right: 0;
  border-radius: 50%;
}

/* A status is a label, not a control. Note this is deliberately not
   .status-toggle: that class is the template's checkbox switch and is in
   use across the settings pages. */
.viya-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  text-transform: capitalize;
  white-space: nowrap;
}

.viya-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.viya-status--on {
  background: #ecfdf3;
  color: #067647;
}

.viya-status--off {
  background: #f2f4f7;
  color: var(--viya-muted);
}

/* ---------- active filters ----------
   A filter bar that only has an Apply button tells you nothing about what is
   currently narrowing the list. These chips name each one and carry their own
   remove link. */

.viya-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--viya-border-soft);
}

.viya-chips__label {
  margin-right: 2px;
  color: var(--viya-muted);
  font-size: 12px;
  font-weight: 600;
}

.viya-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border-radius: 999px;
  background: var(--viya-tint);
  color: var(--viya-brand);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.viya-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: inherit;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color var(--viya-speed) var(--viya-ease),
    color var(--viya-speed) var(--viya-ease);
}

.viya-chip__remove:hover {
  background: #fef3f2;
  color: #b42318;
}

.viya-chip__remove:focus-visible {
  outline: 2px solid var(--viya-brand);
  outline-offset: 1px;
}

.viya-chips__clear {
  margin-left: 4px;
  color: var(--viya-muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.viya-chips__clear:hover {
  color: var(--viya-brand);
}

/* The rows-per-page select was sized for one character and clipped "10". */
div.dataTables_wrapper div.dataTables_length select {
  width: auto;
  min-width: 68px;
  padding-right: 26px;
}

/* =========================================================================
   4. Dark mode
   The template supports two dark switches; cover both.
   ========================================================================= */

[data-theme="dark"],
[data-layout-mode="dark_mode"] {
  --viya-text: #d8dfee;
  --viya-muted: #94a3b8;
  --viya-border: #1f2937;
  --viya-border-soft: #182231;
  --viya-wash: #131a24;
  --viya-tint: rgba(255, 255, 255, 0.04);
  --viya-tint-strong: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .table,
[data-layout-mode="dark_mode"] .table {
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .table-responsive,
[data-layout-mode="dark_mode"] .table-responsive {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb,
[data-layout-mode="dark_mode"] .table-responsive::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] table .edit-delete-action > a,
[data-layout-mode="dark_mode"] table .edit-delete-action > a {
  background: transparent;
}

[data-theme="dark"] .viya-status--on,
[data-layout-mode="dark_mode"] .viya-status--on {
  background: rgba(6, 118, 71, 0.16);
  color: #6ee7b7;
}

[data-theme="dark"] .viya-status--off,
[data-layout-mode="dark_mode"] .viya-status--off {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .card,
[data-layout-mode="dark_mode"] .card {
  box-shadow: none;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link,
[data-layout-mode="dark_mode"] .pagination .page-item.disabled .page-link,
[data-theme="dark"] div.dataTables_wrapper .dataTables_paginate .pagination li.disabled a.page-link,
[data-layout-mode="dark_mode"] div.dataTables_wrapper .dataTables_paginate .pagination li.disabled a.page-link {
  color: #475569;
}

[data-theme="dark"] div.dataTables_wrapper .dataTables_paginate .pagination li.previous.disabled a.page-link,
[data-layout-mode="dark_mode"] div.dataTables_wrapper .dataTables_paginate .pagination li.previous.disabled a.page-link,
[data-theme="dark"] div.dataTables_wrapper .dataTables_paginate .pagination li.next.disabled a.page-link,
[data-layout-mode="dark_mode"] div.dataTables_wrapper .dataTables_paginate .pagination li.next.disabled a.page-link {
  background: var(--viya-wash);
  color: #475569;
}

/* =========================================================================
   5. Small screens and reduced motion
   ========================================================================= */

@media (max-width: 767.98px) {
  .table > :not(caption) > * > * {
    padding: 9px 11px;
  }

  .table > :not(caption) > * > *:first-child {
    padding-left: 12px;
  }

  .table > :not(caption) > * > *:last-child {
    padding-right: 12px;
  }
}

@media print {
  .table > thead > tr > th,
  .table > thead > tr > td {
    background: transparent !important;
    color: inherit;
    font-size: inherit;
    letter-spacing: 0;
    text-transform: none;
  }

  .table > tbody > tr:hover > * {
    background: transparent !important;
  }

  .table-responsive {
    border-radius: 0;
    overflow: visible !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .header .header-left,
  .page-wrapper,
  .sidebar-menu .menu-arrow,
  .sidebar-menu ul li a,
  .table > tbody > tr {
    transition: none !important;
  }
}