/* ============================================================================
   P8 BODY KIT  (assets/css/p8-body.css)
   ----------------------------------------------------------------------------
   A `.p8d`-scoped re-implementation of the Bootstrap class names that legacy
   page BODIES use (grid, forms, tables, utilities, buttons, cards, badges,
   modals), themed with P8 design tokens. Loaded only on migrated legacy pages
   (when $p8_body_kit is set) so the native dashboards stay lean.

   Goal: legacy body markup renders correctly with NO Bootstrap CSS and NO
   Bootstrap JS. Pairs with assets/js/p8-body.js (modal + DataTables + sticky).
   Builds on tokens + base components already in p8-dashboard.css.
   ============================================================================ */

/* ── GRID (flexbox, Bootstrap-compatible) ─────────────────────────────────── */
.p8d .container,
.p8d .container-fluid {
  width: 100%;
}

.p8d .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -8px;
  margin-left: -8px;
}

.p8d .row>[class*="col"] {
  padding-right: 8px;
  padding-left: 8px;
}

/* g-2 gutter: add vertical spacing between wrapped columns (horizontal already 8px) */
.p8d .row.g-2 {
  margin-top: -8px;
}

.p8d .row.g-2>[class*="col"] {
  padding-top: 8px;
}

.p8d .row.g-3 {
  margin-top: -12px;
}

.p8d .row.g-3>[class*="col"] {
  padding-top: 12px;
}

.p8d .row.g-4 {
  margin-top: -16px;
}

.p8d .row.g-4>[class*="col"] {
  padding-top: 16px;
}

.p8d .col {
  flex: 1 0 0%;
}

.p8d .col-auto {
  flex: 0 0 auto;
  width: auto;
}

.p8d .col-1 {
  flex: 0 0 auto;
  width: 8.3333%;
}

.p8d .col-2 {
  flex: 0 0 auto;
  width: 16.6667%;
}

.p8d .col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.p8d .col-4 {
  flex: 0 0 auto;
  width: 33.3333%;
}

.p8d .col-5 {
  flex: 0 0 auto;
  width: 41.6667%;
}

.p8d .col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.p8d .col-7 {
  flex: 0 0 auto;
  width: 58.3333%;
}

.p8d .col-8 {
  flex: 0 0 auto;
  width: 66.6667%;
}

.p8d .col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.p8d .col-10 {
  flex: 0 0 auto;
  width: 83.3333%;
}

.p8d .col-11 {
  flex: 0 0 auto;
  width: 91.6667%;
}

.p8d .col-12 {
  flex: 0 0 auto;
  width: 100%;
}

/* Default (mobile) collapses md/lg/xl to full width; widths apply from ≥768px.
   `width: 100%` is what makes the column full width. Without it the width is
   `auto`, the flex item takes the width of its own text, and the columns of a
   row overlap each other on a narrow screen. */
.p8d [class*="col-sm-"],
.p8d [class*="col-md-"],
.p8d [class*="col-lg-"],
.p8d [class*="col-xl-"] {
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 576px) {
  .p8d .col-sm-1 {
    width: 8.3333%
  }

  .p8d .col-sm-2 {
    width: 16.6667%
  }

  .p8d .col-sm-3 {
    width: 25%
  }

  .p8d .col-sm-4 {
    width: 33.3333%
  }

  .p8d .col-sm-5 {
    width: 41.6667%
  }

  .p8d .col-sm-6 {
    width: 50%
  }

  .p8d .col-sm-7 {
    width: 58.3333%
  }

  .p8d .col-sm-8 {
    width: 66.6667%
  }

  .p8d .col-sm-9 {
    width: 75%
  }

  .p8d .col-sm-10 {
    width: 83.3333%
  }

  .p8d .col-sm-11 {
    width: 91.6667%
  }

  .p8d .col-sm-12 {
    width: 100%
  }

  /* `col-sm-auto` takes the width of its own content. Without this rule it
     falls to the `width: 100%` of the base column rule and pushes the item
     beside it onto the next line. */
  .p8d .col-sm-auto {
    width: auto
  }
}

@media (min-width: 768px) {
  .p8d .col-md-1 {
    width: 8.3333%
  }

  .p8d .col-md-2 {
    width: 16.6667%
  }

  .p8d .col-md-3 {
    width: 25%
  }

  .p8d .col-md-4 {
    width: 33.3333%
  }

  .p8d .col-md-5 {
    width: 41.6667%
  }

  .p8d .col-md-6 {
    width: 50%
  }

  .p8d .col-md-7 {
    width: 58.3333%
  }

  .p8d .col-md-8 {
    width: 66.6667%
  }

  .p8d .col-md-9 {
    width: 75%
  }

  .p8d .col-md-10 {
    width: 83.3333%
  }

  .p8d .col-md-11 {
    width: 91.6667%
  }

  .p8d .col-md-12 {
    width: 100%
  }

  /* `col-md-auto` takes the width of its own content. Without this rule it
     falls to the `width: 100%` of the base column rule and pushes the item
     beside it onto the next line. */
  .p8d .col-md-auto {
    width: auto
  }
}

@media (min-width: 992px) {
  .p8d .col-lg-1 {
    width: 8.3333%
  }

  .p8d .col-lg-2 {
    width: 16.6667%
  }

  .p8d .col-lg-3 {
    width: 25%
  }

  .p8d .col-lg-4 {
    width: 33.3333%
  }

  .p8d .col-lg-5 {
    width: 41.6667%
  }

  .p8d .col-lg-6 {
    width: 50%
  }

  .p8d .col-lg-7 {
    width: 58.3333%
  }

  .p8d .col-lg-8 {
    width: 66.6667%
  }

  .p8d .col-lg-9 {
    width: 75%
  }

  .p8d .col-lg-10 {
    width: 83.3333%
  }

  .p8d .col-lg-11 {
    width: 91.6667%
  }

  .p8d .col-lg-12 {
    width: 100%
  }

  /* `col-lg-auto` takes the width of its own content. Without this rule it
     falls to the `width: 100%` of the base column rule and pushes the item
     beside it onto the next line. */
  .p8d .col-lg-auto {
    width: auto
  }
}

@media (min-width: 1200px) {
  .p8d .col-xl-1 {
    width: 8.3333%
  }

  .p8d .col-xl-2 {
    width: 16.6667%
  }

  .p8d .col-xl-3 {
    width: 25%
  }

  .p8d .col-xl-4 {
    width: 33.3333%
  }

  .p8d .col-xl-5 {
    width: 41.6667%
  }

  .p8d .col-xl-6 {
    width: 50%
  }

  .p8d .col-xl-7 {
    width: 58.3333%
  }

  .p8d .col-xl-8 {
    width: 66.6667%
  }

  .p8d .col-xl-9 {
    width: 75%
  }

  .p8d .col-xl-10 {
    width: 83.3333%
  }

  .p8d .col-xl-11 {
    width: 91.6667%
  }

  .p8d .col-xl-12 {
    width: 100%
  }

  /* `col-xl-auto` takes the width of its own content. Without this rule it
     falls to the `width: 100%` of the base column rule and pushes the item
     beside it onto the next line. */
  .p8d .col-xl-auto {
    width: auto
  }
}

/* ── FORMS ────────────────────────────────────────────────────────────────── */
.p8d .form-label {
  display: inline-block;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
}

.p8d .form-control,
.p8d .form-select {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--fg-1);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  transition: border-color .12s, box-shadow .12s;
}

.p8d .form-select {
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23707579' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  -webkit-appearance: none;
  appearance: none;
}

.p8d .form-control:focus,
.p8d .form-select:focus {
  outline: 0;
  border-color: var(--praxis-brand);
  box-shadow: 0 0 0 .18rem rgba(38, 90, 204, 0.18);
}

.p8d .form-control:disabled,
.p8d .form-select:disabled,
.p8d .form-control[readonly] {
  background-color: var(--bg-sunken, #f1f2f2);
  color: var(--fg-2);
}

.p8d .form-control-sm,
.p8d .form-select-sm {
  padding: 3px auto;
  font-size: var(--fs-xs);
}

.p8d textarea.form-control {
  min-height: 64px;
}

/* Native date/time pickers don't inherit the form font in WebKit — match the
   rest of the input controls. */
.p8d input[type="date"],
.p8d input[type="time"],
.p8d input[type="datetime-local"],
.p8d input[type="month"],
.p8d input[type="week"] {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--fg-1);
}

/* WebKit renders the editable digits in a private shadow tree that does NOT
   reliably honour `inherit`, so the numbers fall back to the system font. Name
   the family explicitly on the datetime-edit wrapper and every sub-field so the
   date/time digits match the Inter body used by the other form controls. */
.p8d input[type="date"]::-webkit-datetime-edit,
.p8d input[type="time"]::-webkit-datetime-edit,
.p8d input[type="datetime-local"]::-webkit-datetime-edit,
.p8d input[type="month"]::-webkit-datetime-edit,
.p8d input[type="week"]::-webkit-datetime-edit,
.p8d input::-webkit-datetime-edit-fields-wrapper,
.p8d input::-webkit-datetime-edit-text,
.p8d input::-webkit-datetime-edit-year-field,
.p8d input::-webkit-datetime-edit-month-field,
.p8d input::-webkit-datetime-edit-day-field,
.p8d input::-webkit-datetime-edit-hour-field,
.p8d input::-webkit-datetime-edit-minute-field,
.p8d input::-webkit-datetime-edit-second-field,
.p8d input::-webkit-datetime-edit-meridiem-field {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: var(--fs-sm);
}

/* A bare <textarea> takes the monospace font of the browser. `.form-control`
   names `font-family: inherit`, but this variant did not, so a plaintext
   textarea did not match the plaintext input beside it. */
.p8d .form-control-plaintext {
  display: block;
  width: 100%;
  padding: 6px 0;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--fg-1);
  background: transparent;
  border: 1px solid transparent;
}

/* setTextAreaHeight() in assets/js/admin.js gives this textarea the height of
   its text. The vertical grip would fight that height, so allow the horizontal
   grip only. */
.p8d textarea.form-control-plaintext {
  overflow: hidden;
  resize: horizontal;
}

.p8d .form-text {
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

/* form-check / form-radio / form-switch now live in p8-dashboard.css as a
   first-class P8 component (loaded on every P8 page), so the kit no longer
   redefines them — single source of truth. */

.p8d .input-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.p8d .input-group>.form-control,
.p8d .input-group>.form-select {
  flex: 1 1 auto;
  width: 1%;
}

.p8d .input-group .form-control:not(:last-child),
.p8d .input-group .form-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.p8d .input-group .form-control:not(:first-child),
.p8d .input-group .form-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.p8d .input-group-text {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  background: var(--bg-sunken, #f1f2f2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}

.p8d .input-group> :first-child.input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.p8d .input-group> :last-child.input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.p8d .form-group {
  margin-bottom: 12px;
}

/* ── TABLE MODIFIERS (base .table is in p8-dashboard.css) ──────────────────── */
.p8d .table-sm th,
.p8d .table-sm td {
  padding: 0.4rem 0.4rem;
}

.p8d .table-bordered,
.p8d .table-bordered th,
.p8d .table-bordered td {
  border: 1px solid var(--border-1);
}

.p8d .table-borderless th,
.p8d .table-borderless td {
  border: 0;
}

.p8d .table-hover tbody tr:hover td {
  background: var(--bg-sunken, #f1f2f2);
}

.p8d .table-centered th,
.p8d .table-centered td {
  vertical-align: middle;
}

.p8d .table-striped tbody tr:nth-of-type(odd) td {
  background: rgba(0, 0, 0, 0.02);
}

.p8d .table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Automatic table layout sizes a column from the widest text in its header, so
   a column that holds a long label steals the room from a column that holds a
   long value. Add this class when the page names a width on every <th>, and
   the browser then honours those widths exactly. */
.p8d .table-fixed-cols {
  table-layout: fixed;
}

/* Fixed layout gives a cell no room to grow, so long header text spills over
   the column beside it. `.p8d .table th` in p8-dashboard.css holds the header
   on one line. Let it wrap in this table only. */
.p8d .table-fixed-cols th,
.p8d .table-fixed-cols td {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.p8d .table-action {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

.p8d .table-action a,
.p8d .table-action i {
  color: var(--fg-2);
}

.p8d .table>thead {
  background: var(--bg-sunken, #f6f6f7);
}

/* Sticky header clone injected by p8-body.js for .floatattop tables. */
.p8d #sticky-header-duplicate,
#sticky-header-duplicate {
  position: fixed;
  top: 50px;
  z-index: 90;
  overflow: hidden;
  background: var(--bg-surface, #fff);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

/* ── BUTTONS (base .btn + .btn-primary/-outline/-light/-danger/-warning/-success
   live in p8-dashboard.css; add the missing variants) ─────────────────────── */
.p8d .btn-secondary {
  background: var(--ct-secondary, #9ea6aa);
  color: #fff;
}

.p8d .btn-info {
  background: var(--ct-info, #38afd1);
  color: #fff;
}

.p8d .btn-default {
  background: #fff;
  border-color: var(--border-1);
  color: var(--fg-1);
}

.p8d .btn-dark {
  background: var(--ct-dark, #303037);
  color: #fff;
}

.p8d .btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--praxis-brand);
  text-decoration: none;
  padding-left: 4px;
  padding-right: 4px;
}

.p8d .btn-link:hover {
  text-decoration: underline;
}

.p8d .btn-outline-primary {
  background: transparent;
  border-color: var(--praxis-brand);
  color: var(--praxis-brand);
}

.p8d .btn-outline-secondary {
  background: transparent;
  border-color: var(--ct-secondary, #9ea6aa);
  color: var(--fg-2);
}

.p8d .btn-outline-danger {
  background: transparent;
  border-color: var(--ct-danger);
  color: var(--ct-danger);
}

.p8d .btn-outline-success {
  background: transparent;
  border-color: var(--ct-success);
  color: var(--ct-success);
}

.p8d .btn-outline-warning {
  background: transparent;
  border-color: var(--ct-warning);
  color: var(--ct-warning);
}

.p8d .btn-outline-dark {
  background: transparent;
  border-color: var(--fg-1);
  color: var(--fg-1);
}

.p8d .btn-block {
  display: flex;
  width: 100%;
}

.p8d .btn-rounded {
  border-radius: 100px;
}

.p8d .btn-close {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0;
  cursor: pointer;
  position: relative;
  opacity: .6;
}

.p8d .btn-close::before {
  content: "\F0156";
  font-family: "Material Design Icons";
  font-size: 18px;
  color: var(--fg-2);
}

.p8d .btn-close:hover {
  opacity: 1;
}

/* ── CARDS (base .card in p8-dashboard.css; add Bootstrap sub-parts) ───────── */
.p8d .card:has(> .card-body),
.p8d .card:has(> .card-header) {
  padding: 0;
}

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

.p8d .card-header {
  position: relative; /* anchor absolutely-positioned header controls (e.g. the
                         maintenance "Show Extra" toggle at top:12px right:10px) */
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-1);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  background: var(--bg-surface, #ffffff);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.p8d .card-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border-1);
  background: var(--bg-surface, #ffffff);
}

.p8d .card-text {
  font-size: var(--fs-sm);
  color: var(--fg-1);
}

/* ── BADGES ───────────────────────────────────────────────────────────────── */
.p8d .badge {
  display: inline-block;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: 4px;
  color: #fff;
  background: var(--ct-secondary, #9ea6aa);
  vertical-align: middle;
}

.p8d .badge.bg-primary,
.p8d .badge-primary {
  background: var(--praxis-brand);
}

.p8d .badge.bg-secondary,
.p8d .badge-secondary {
  background: var(--ct-secondary, #9ea6aa);
}

.p8d .badge.bg-success,
.p8d .badge-success {
  background: var(--ct-success);
  color: #212529;
}

.p8d .badge.bg-danger,
.p8d .badge-danger {
  background: var(--ct-danger);
}

.p8d .badge.bg-warning,
.p8d .badge-warning {
  background: var(--ct-warning);
  color: #212529;
}

.p8d .badge.bg-info,
.p8d .badge-info {
  background: var(--ct-info, #38afd1);
}

.p8d .badge.bg-light,
.p8d .badge-light {
  background: var(--bg-sunken, #f1f2f2);
  color: var(--fg-1);
}

.p8d .badge.bg-dark,
.p8d .badge-dark {
  background: var(--ct-dark, #303037);
}

/* Soft "-lighten" badge / background tints (legacy Hyper). Scoped to .p8d and
   placed after `.p8d .badge` so they win over its solid fill — used by the
   inventory category chips and the tag pills (bg-secondary-lighten). */
.p8d .badge-success-lighten,
.p8d .bg-success-lighten {
  background: rgba(var(--ct-success-rgb), 0.18);
  color: var(--ct-success);
}

.p8d .badge-warning-lighten,
.p8d .bg-warning-lighten {
  background: rgba(var(--ct-warning-rgb), 0.18);
  color: #9a6800;
}

.p8d .badge-danger-lighten,
.p8d .bg-danger-lighten {
  background: rgba(var(--ct-danger-rgb), 0.18);
  color: var(--ct-danger);
}

.p8d .badge-info-lighten,
.p8d .bg-info-lighten {
  background: rgba(var(--ct-info-rgb), 0.18);
  color: var(--ct-info);
}

.p8d .badge-secondary-lighten,
.p8d .bg-secondary-lighten {
  background: rgba(var(--ct-secondary-rgb), 0.18);
  color: var(--fg-1);
}

/* Bare checkboxes in list/table cells aren't wrapped in `.form-check`, so the
   absolute positioning of `.p8d .form-check-input` would yank them out of the
   row. Keep them in flow (they keep the kit's box/checkmark styling). */
.p8d .itemAction,
.p8d .item-hide-cb {
  position: static;
}

.p8d .rounded-pill {
  border-radius: 100px;
}

.p8d .border-0 {
  border: 0 !important;
}

.p8d .top-0 {
  top: 0;
}

.p8d .end-0 {
  right: 0;
}

/* ── MODALS (vanilla; toggled by p8-body.js) ──────────────────────────────── */
.p8d .modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  overflow-y: auto;
  padding: 40px 12px;
  background: rgba(0, 0, 0, 0.45);
}

.p8d .modal.show {
  display: block;
}

.p8d .modal-dialog {
  max-width: 560px;
  margin: 0 auto;
}

.p8d .modal-dialog.modal-sm {
  max-width: 360px;
}

.p8d .modal-dialog.modal-lg {
  max-width: 820px;
}

.p8d .modal-dialog.modal-xl {
  max-width: 1100px;
}

.p8d .modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.p8d .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-1);
}

.p8d .modal-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.p8d .modal-body {
  padding: 16px;
}

.p8d .modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--border-1);
}

body.p8d.modal-open {
  overflow: hidden;
}

/* ── DATATABLES THEME (vendor build is bs5 → emits Bootstrap markup; style it
   with P8 tokens since no Bootstrap CSS is loaded). Layout matches the legacy
   table: length top-left, search top-right, info bottom-left, paging bottom-right. */
.p8d .dataTables_wrapper {
  position: relative;
}

.p8d .dataTables_wrapper::after {
  content: "";
  display: block;
  clear: both;
}

.p8d .dataTables_length {
  float: left;
  margin-bottom: 10px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

.p8d .dataTables_filter {
  float: right;
  margin-bottom: 10px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

.p8d .dataTables_length select,
.p8d select.dt-input {
  margin: 0 6px;
  padding: 4px 26px 4px 9px;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--fg-1);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23707579' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 11px;
}

.p8d .dataTables_filter input,
.p8d input.dt-input {
  margin-left: 6px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--fg-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  min-width: 200px;
}

/* DataTables 2 names the search box `.dt-search` and the page-size box
   `.dt-length`, not the `.dataTables_*` names above. Their controls already
   carry `.form-control` and `.form-select`, so they need only a usable width. */
.p8d .dt-search input {
  min-width: 200px;
}

.p8d .dt-length select {
  min-width: 76px;
}

.p8d .dataTables_filter input:focus,
.p8d input.dt-input:focus,
.p8d .dataTables_length select:focus,
.p8d select.dt-input:focus {
  outline: 0;
  border-color: var(--praxis-brand);
  box-shadow: 0 0 0 .18rem rgba(38, 90, 204, 0.18);
}

.p8d table.dataTable {
  clear: both;
  width: 100% !important;
  margin: 6px 0 !important;
}

.p8d .dataTables_info {
  float: left;
  padding-top: 10px;
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

.p8d .dataTables_paginate {
  float: right;
  padding-top: 8px;
}

/* DataTables 2.x layout API (dt-layout-row / dt-layout-cell). The bs5 build tags
   cells with Bootstrap col-* classes (col-md-auto / col-md / col-12); our grid
   fallback would force them 100%-wide and stack them, so override to auto-width
   flex items and push the end cell to the right. */
.p8d .dt-layout-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.p8d .dt-layout-cell {
  width: auto !important;
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  padding: 0;
}

.p8d .dt-layout-cell.dt-layout-end {
  margin-left: auto;
  text-align: right;
}

.p8d .dt-layout-cell.dt-layout-full,
.p8d .dt-layout-cell.dt-layout-table {
  width: 100% !important;
  flex: 1 0 100%;
}

.p8d .dt-length,
.p8d .dt-search {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Bootstrap-style pagination emitted by the bs5 DataTables build */
.p8d .pagination {
  display: inline-flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 3px;
}

.p8d .pagination .page-item .page-link,
.p8d .pagination li>a,
.p8d .pagination li>span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  font-size: var(--fs-sm);
  color: var(--fg-1);
  text-decoration: none;
  cursor: pointer;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}

.p8d .pagination .page-item.active .page-link,
.p8d .pagination li.active>a,
.p8d .pagination li.active>span {
  background: var(--praxis-brand);
  border-color: var(--praxis-brand);
  color: #fff;
}

.p8d .pagination .page-item.disabled .page-link,
.p8d .pagination li.disabled>a,
.p8d .pagination li.disabled>span {
  color: var(--fg-3);
  cursor: default;
}

.p8d .pagination .page-link:hover {
  background: var(--bg-sunken, #f1f2f2);
}

/* DataTables' own (non-Bootstrap) paginate buttons — fallback */
.p8d .dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  margin-left: 3px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  cursor: pointer;
}

.p8d .dataTables_paginate .paginate_button.current {
  background: var(--praxis-brand);
  border-color: var(--praxis-brand);
  color: #fff;
}

.p8d .dataTables_paginate .paginate_button.disabled {
  color: var(--fg-3);
}

/* ── UTILITIES (Bootstrap-compatible, high-frequency) ─────────────────────── */
/* display */
.p8d .d-none {
  display: none !important;
}

.p8d .d-inline {
  display: inline !important;
}

.p8d .d-inline-block {
  display: inline-block !important;
}

.p8d .d-block {
  display: block !important;
}

.p8d .d-flex {
  display: flex !important;
}

.p8d .d-inline-flex {
  display: inline-flex !important;
}

.p8d .d-grid {
  display: grid !important;
}

@media (min-width: 768px) {
  .p8d .d-md-block {
    display: block !important
  }

  .p8d .d-md-none {
    display: none !important
  }

  .p8d .d-md-flex {
    display: flex !important
  }
}

/* flex helpers */
.p8d .flex-wrap {
  flex-wrap: wrap !important;
}

.p8d .flex-column {
  flex-direction: column !important;
}

.p8d .flex-grow-1 {
  flex-grow: 1 !important;
}

.p8d .flex-fill {
  flex: 1 1 auto !important;
}

.p8d .align-items-center {
  align-items: center !important;
}

.p8d .align-items-start {
  align-items: flex-start !important;
}

.p8d .align-items-end {
  align-items: flex-end !important;
}

.p8d .align-self-center {
  align-self: center !important;
}

.p8d .justify-content-center {
  justify-content: center !important;
}

.p8d .justify-content-between {
  justify-content: space-between !important;
}

.p8d .justify-content-end {
  justify-content: flex-end !important;
}

.p8d .justify-content-start {
  justify-content: flex-start !important;
}

.p8d .gap-1 {
  gap: .25rem !important;
}

.p8d .gap-2 {
  gap: .5rem !important;
}

.p8d .gap-3 {
  gap: 1rem !important;
}

/* float / position */
.p8d .float-end,
.p8d .float-right {
  float: right !important;
}

.p8d .float-start,
.p8d .float-left {
  float: left !important;
}

.p8d .float-none {
  float: none !important;
}

.p8d .position-relative {
  position: relative !important;
}

.p8d .position-absolute {
  position: absolute !important;
}

.p8d .w-25 {
  width: 25% !important;
}

.p8d .w-50 {
  width: 50% !important;
}

.p8d .w-75 {
  width: 75% !important;
}

.p8d .w-100 {
  width: 100% !important;
}

.p8d .h-100 {
  height: 100% !important;
}

.p8d .mw-100 {
  max-width: 100% !important;
}

/* text */
.p8d .text-center {
  text-align: center !important;
}

.p8d .text-start,
.p8d .text-left {
  text-align: left !important;
}

.p8d .text-end,
.p8d .text-right {
  text-align: right !important;
}

.p8d .text-nowrap {
  white-space: nowrap !important;
}

.p8d .text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p8d .text-uppercase {
  text-transform: uppercase !important;
}

.p8d .text-lowercase {
  text-transform: lowercase !important;
}

.p8d .text-capitalize {
  text-transform: capitalize !important;
}

.p8d .text-muted {
  color: var(--fg-3) !important;
}

.p8d .text-dark {
  color: var(--fg-1) !important;
}

.p8d .text-white {
  color: #fff !important;
}

.p8d .text-nowrap {
  white-space: nowrap !important;
}

.p8d .fw-bold,
.p8d .font-weight-bold {
  font-weight: var(--fw-bold) !important;
}

.p8d .fw-semibold {
  font-weight: var(--fw-semibold) !important;
}

.p8d .fw-medium {
  font-weight: var(--fw-medium) !important;
}

.p8d .fw-normal {
  font-weight: var(--fw-regular, 400) !important;
}

.p8d .fst-italic {
  font-style: italic !important;
}

.p8d .small,
.p8d small {
  font-size: var(--fs-xs);
}

/* Legacy Hyper pixel font-size utilities (font-NN / fs-NN) used across migrated bodies */
.p8d .font-11,
.p8d .fs-11 {
  font-size: 11px !important;
}

.p8d .font-12,
.p8d .fs-12 {
  font-size: 12px !important;
}

.p8d .font-13,
.p8d .fs-13 {
  font-size: 13px !important;
}

.p8d .font-14,
.p8d .fs-14 {
  font-size: 14px !important;
}

.p8d .font-15,
.p8d .fs-15 {
  font-size: 15px !important;
}

.p8d .font-16,
.p8d .fs-16 {
  font-size: 16px !important;
}

.p8d .font-18,
.p8d .fs-18 {
  font-size: 18px !important;
}

.p8d .font-20,
.p8d .fs-20 {
  font-size: 20px !important;
}

.p8d .font-22,
.p8d .fs-22 {
  font-size: 22px !important;
}

.p8d .font-24,
.p8d .fs-24 {
  font-size: 24px !important;
}

/* List utilities (Bootstrap-compatible) */
.p8d .list-unstyled {
  padding-left: 0;
  list-style: none;
}

/* List group (Bootstrap-compatible) */
.p8d .list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.p8d .list-group-item {
  position: relative;
  display: block;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  font-size: var(--fs-sm);
  color: var(--fg-1);
}

.p8d .list-group-item+.list-group-item {
  border-top-width: 0;
}

.p8d .list-group-flush>.list-group-item {
  border-width: 0 0 1px;
}

.p8d .list-group-flush>.list-group-item:last-child {
  border-bottom-width: 0;
}

/* Form column label */
.p8d .col-form-label {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

/* Spinner (used by inline "Saving…" feedback) */
.p8d .spinner-border {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: -0.125em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: p8-spin .75s linear infinite;
}

.p8d .spinner-border-sm {
  width: .85rem;
  height: .85rem;
}

@keyframes p8-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Avatar sizes + thumbnail/circle image helpers (legacy Hyper utilities) */
.p8d .rounded-circle {
  border-radius: 50% !important;
}

.p8d .img-thumbnail {
  padding: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  max-width: 100%;
  height: auto;
}

.p8d .avatar-sm {
  height: 3rem;
  width: 3rem;
}

.p8d .avatar-md {
  height: 4.5rem;
  width: 4.5rem;
}

.p8d .avatar-lg {
  height: 6rem;
  width: 6rem;
}

.p8d .avatar-xl {
  height: 7.5rem;
  width: 7.5rem;
}

/* Profile-header initials badge (bg-secondary is only a badge/btn colour, not a
   standalone fill, so the avatar needs its own circular background rule). */
.p8d .profile-avatar {
  height: 5rem;
  width: 5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--praxis-brand, #2c6ecb);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}

/* background helpers used in bodies */
.p8d .bg-light {
  background: var(--bg-sunken, #f1f2f2) !important;
}

.p8d .bg-white {
  background: #fff !important;
}

.p8d .rounded {
  border-radius: var(--radius-md) !important;
}

.p8d .border {
  border: 1px solid var(--border-1) !important;
}

.p8d .border-top {
  border-top: 1px solid var(--border-1) !important;
}

.p8d .border-bottom {
  border-bottom: 1px solid var(--border-1) !important;
}

.p8d .shadow-sm {
  box-shadow: var(--ct-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.06)) !important;
}

/* spacing scale: 0=.0 1=.25 2=.5 3=1 4=1.5 5=3 rem */
.p8d .m-0 {
  margin: 0 !important
}

.p8d .m-1 {
  margin: .25rem !important
}

.p8d .m-2 {
  margin: .5rem !important
}

.p8d .m-3 {
  margin: 1rem !important
}

.p8d .m-4 {
  margin: 1.5rem !important
}

.p8d .m-5 {
  margin: 3rem !important
}

.p8d .mt-0 {
  margin-top: 0 !important
}

.p8d .mt-1 {
  margin-top: .25rem !important
}

.p8d .mt-2 {
  margin-top: .5rem !important
}

.p8d .mt-3 {
  margin-top: 1rem !important
}

.p8d .mt-4 {
  margin-top: 1.5rem !important
}

.p8d .mt-5 {
  margin-top: 3rem !important
}

.p8d .mb-0 {
  margin-bottom: 0 !important
}

.p8d .mb-1 {
  margin-bottom: .25rem !important
}

.p8d .mb-2 {
  margin-bottom: .5rem !important
}

.p8d .mb-3 {
  margin-bottom: 1rem !important
}

.p8d .mb-4 {
  margin-bottom: 1.5rem !important
}

.p8d .mb-5 {
  margin-bottom: 3rem !important
}

.p8d .ms-0,
.p8d .ml-0 {
  margin-left: 0 !important
}

.p8d .ms-1,
.p8d .ml-1 {
  margin-left: .25rem !important
}

.p8d .ms-2,
.p8d .ml-2 {
  margin-left: .5rem !important
}

.p8d .ms-3,
.p8d .ml-3 {
  margin-left: 1rem !important
}

.p8d .ms-auto,
.p8d .ml-auto {
  margin-left: auto !important
}

.p8d .me-0,
.p8d .mr-0 {
  margin-right: 0 !important
}

.p8d .me-1,
.p8d .mr-1 {
  margin-right: .25rem !important
}

.p8d .me-2,
.p8d .mr-2 {
  margin-right: .5rem !important
}

.p8d .me-3,
.p8d .mr-3 {
  margin-right: 1rem !important
}

.p8d .me-auto,
.p8d .mr-auto {
  margin-right: auto !important
}

.p8d .mx-auto {
  margin-left: auto !important;
  margin-right: auto !important
}

.p8d .my-1 {
  margin-top: .25rem !important;
  margin-bottom: .25rem !important
}

.p8d .my-2 {
  margin-top: .5rem !important;
  margin-bottom: .5rem !important
}

.p8d .my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important
}

.p8d .p-0 {
  padding: 0 !important
}

.p8d .p-1 {
  padding: .25rem !important
}

.p8d .p-2 {
  padding: .5rem !important
}

.p8d .p-3 {
  padding: 1rem !important
}

.p8d .p-4 {
  padding: 1.5rem !important
}

.p8d .pt-0 {
  padding-top: 0 !important
}

.p8d .pt-1 {
  padding-top: .25rem !important
}

.p8d .pt-2 {
  padding-top: .5rem !important
}

.p8d .pt-3 {
  padding-top: 1rem !important
}

.p8d .pb-0 {
  padding-bottom: 0 !important
}

.p8d .pb-1 {
  padding-bottom: .25rem !important
}

.p8d .pb-2 {
  padding-bottom: .5rem !important
}

.p8d .pb-3 {
  padding-bottom: 1rem !important
}

.p8d .ps-0,
.p8d .pl-0 {
  padding-left: 0 !important
}

.p8d .ps-1,
.p8d .pl-1 {
  padding-left: .25rem !important
}

.p8d .ps-2,
.p8d .pl-2 {
  padding-left: .5rem !important
}

.p8d .ps-3,
.p8d .pl-3 {
  padding-left: 1rem !important
}

.p8d .pe-0,
.p8d .pr-0 {
  padding-right: 0 !important
}

.p8d .pe-1,
.p8d .pr-1 {
  padding-right: .25rem !important
}

.p8d .pe-2,
.p8d .pr-2 {
  padding-right: .5rem !important
}

.p8d .pe-3,
.p8d .pr-3 {
  padding-right: 1rem !important
}

.p8d .px-2 {
  padding-left: .5rem !important;
  padding-right: .5rem !important
}

.p8d .px-3 {
  padding-left: 1rem !important;
  padding-right: 1rem !important
}

.p8d .py-1 {
  padding-top: .25rem !important;
  padding-bottom: .25rem !important
}

.p8d .py-2 {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important
}

.p8d .py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important
}

/* ── SCROLL CONTAINER (migrated pages) ─────────────────────────────────────
   Native dashboards scroll inside <main>, but that breaks DataTables
   FixedHeader and the .floatattop sticky header (both listen to WINDOW scroll).
   On body-kit pages, scroll the document instead: the fixed topbar (top:0) and
   fixed sidebar (top:50px) stay put while content + window scroll, so the
   sticky headers fire. p8-body.css loads only on migrated pages, so dashboards
   keep their inner-scroll behaviour. */
html {
  height: auto;
}

body.p8d {
  height: auto;
  overflow: visible;
}

.p8d .layout {
  height: auto;
  min-height: calc(100vh - 50px);
}

.p8d .main {
  height: auto;
  overflow: visible;
}

/* DataTables FixedHeader floating clone is pinned below the 50px topbar in
   p8-dashboard.css (single source — loads on every P8 page). */

/* Full-width main for pre-login / sidebar-less pages */
.p8d .main.no-sidebar {
  margin-left: 0;
}

/* Bare / account pages (login, error) — centered card layout */
.p8d.p8-bare {
  background: var(--bg-app, #fafafa);
}

.p8d .account-pages {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.p8d .account-pages .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 12px;
}

.p8d .text-error {
  font-size: 3.5rem;
  font-weight: var(--fw-bold);
  color: var(--praxis-brand);
  line-height: 1;
}

.p8d .text-danger {
  color: var(--ct-danger) !important;
}

.p8d .text-success {
  color: var(--ct-success) !important;
}

.p8d .text-primary {
  color: var(--praxis-brand) !important;
}

/* Legacy Hyper helpers occasionally used in bodies */
.p8d .page-title-box {
  padding: 0 0 12px;
}

.p8d .page-title {
  font-size: var(--fs-xl, 1.25rem);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.p8d .header-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.p8d .no-print {}

/* Hide print-only elements during normal viewing */
.print_only {
  display: none !important;
}

/* Print rules are consolidated in p8-dashboard.css (loaded on every P8 page),
   so pages that open the shell directly without the body kit still print
   correctly. Do not add an @media print block here. */