/* ════════════════════════════════════════════════════════════════
   P8 DASHBOARD — lean shell stylesheet
   Self-contained. Loaded WITHOUT Hyper app.min.css.
   Pairs with assets/css/icons.min.css (MDI) only.
   Source: dev_doc/solaris_dashboard_p8.html + solaris_vessel_centaurus.html
   ════════════════════════════════════════════════════════════════ */

/* ── INTER (self-hosted, latin) ─────────────────────────────────── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/inter/inter-300.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter/inter-500.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/inter-600.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter/inter-700.woff2") format("woff2");
}

/* ── P8 DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  --praxis-brand: #265acc;
  --praxis-brand-deep: #1c44a0;
  --praxis-brand-soft: #e8eef9;
  --praxis-link: #265acc;
  --praxis-link-hover: #0080d9;
  --ct-success: #94d815;
  --ct-warning: #ffbc00;
  --ct-danger: #ed2600;
  --ct-info: #38afd1;
  --ct-primary: #265acc;
  --ct-secondary: #9ea6aa;
  --ct-purple: #6b5eae;
  /* RGB channels for token-driven soft tints (P8 badge convention).
     Status hues stay identical in dark mode, so no dark overrides needed. */
  --ct-success-rgb: 148, 216, 21;
  --ct-warning-rgb: 255, 188, 0;
  --ct-danger-rgb: 237, 38, 0;
  --ct-info-rgb: 56, 175, 209;
  --ct-primary-rgb: 38, 90, 204;
  --ct-secondary-rgb: 158, 166, 170;
  --ct-purple-rgb: 107, 94, 174;
  --ct-body-bg: #fafafa;
  --ct-body-color: #303037;
  --ct-bg-leftbar: #ffffff;
  --ct-bg-topbar: #fafafb;
  --ct-gray-100: #f1f1f1;
  --ct-gray-200: #f1f2f2;
  --ct-gray-300: #dee2e6;
  --ct-gray-400: #ced4da;
  --ct-gray-500: #adb5bd;
  --ct-gray-600: #9ea6aa;
  --ct-gray-700: #707579;
  --ct-gray-800: #343a40;
  --ct-gray-900: #303037;
  --fg-1: #101017;
  --fg-2: #505559;
  --fg-3: #707579;
  --bg-app: #fafafa;
  --bg-surface: #ffffff;
  --bg-sunken: #f5f5f5;
  --bg-rail: #ffffff;
  --bg-tint: #f6f6f7;
  --border-1: #dee2e6;
  --border-2: #ced4da;
  --border-soft: #edeff1;
  --ct-box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
  --radius-sm: 0.2rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.3rem;
  --radius-pill: 50rem;
  --fs-2xs: 0.625rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.75rem;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* Font stacks (consumed by badge + text utilities) */
  --ct-font-sans-serif: "Inter", Helvetica, Arial, sans-serif;
  --ct-font-monospace: "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* Bootstrap-5 spacer scale (consumed by spacing utilities) */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;
  /* Light / dark surface tokens used by badge bg-light / bg-dark */
  --ct-light: #f1f2f2;
  --ct-dark: #303037;
  --ct-light-rgb: 241, 242, 242;
  --ct-dark-rgb: 48, 48, 55;
  /* Progress component */
  --ct-progress-bg: #f1f2f2;
  --ct-progress-bar-color: #fff;
  /* Risk band colours */
  --risk-minimal: #94d815;
  --risk-low: #265acc;
  --risk-medium: #ffbc00;
  --risk-high: #f97316;
  --risk-critical: #ed2600;
}

/* Scope reset to the dashboard root so nothing else on the page is clobbered. */
.p8d *,
.p8d *::before,
.p8d *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body.p8d {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: 1.35;
  color: var(--fg-1);
  background: var(--ct-body-bg);
  -webkit-font-smoothing: antialiased;
  height: 100%;
}

/* App-shell: the window frames the dashboard; only .main scrolls (no page scroll). */
body.p8d {
  overflow: hidden;
}

.p8d a {
  color: var(--praxis-link);
  text-decoration: none;
}

.p8d a:hover {
  color: var(--praxis-link-hover);
}

/* Scoped to .p8d (specificity 0,1,1) so the heading margin beats the
   `.p8d *` reset (0,1,0) above — otherwise headings render with margin:0. */
.p8d h6,
.p8d .h6,
.p8d h5,
.p8d .h5,
.p8d h4,
.p8d .h4,
.p8d h3,
.p8d .h3,
.p8d h2,
.p8d .h2,
.p8d h1,
.p8d .h1 {
  margin: 0.75rem 0px;
  font-weight: 500;
  line-height: 1.35;
}

h1,
.h1 {
  font-size: calc(1.2rem + 0.5vw);
}

@media (min-width: 1200px) {

  h1,
  .h1 {
    font-size: 1.875rem;
  }
}

h2,
.h2 {
  font-size: calc(1rem + 0.3vw);
}

@media (min-width: 1200px) {

  h2,
  .h2 {
    font-size: 1.5rem;
  }
}

h3,
.h3 {
  font-size: 1.25rem;
}

h4,
.h4 {
  font-size: 1.15rem;
}

h5,
.h5 {
  font-size: 1rem;
}

h6,
.h6 {
  font-size: 0.9rem;
}

.text-danger {
  color: rgb(var(--ct-danger-rgb));
}

.text-primary {
  color: rgb(var(--ct-primary-rgb));
}

.text-secondary {
  color: rgb(var(--ct-secondary-rgb));
}

.text-success {
  color: rgb(var(--ct-success-rgb));
}

.text-info {
  color: rgb(var(--ct-info-rgb));
}

.text-warning {
  color: rgb(var(--ct-warning-rgb));
}

.text-purple {
  color: rgb(var(--ct-purple-rgb));
}


/* ── TOPBAR ─────────────────────────────────────────────────────── */
.p8d .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 100;
  background: var(--ct-bg-topbar);
  border-bottom: 1px solid var(--border-1);
  display: flex;
  align-items: center;
  padding: 0 20px 0 0;
  box-shadow: var(--ct-box-shadow);
}

.p8d .topbar-brand {
  width: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  height: 100%;
}

/* Logo-only brand to match the collapsed rail (text hidden). */
.p8d .topbar-brand>div:not(.brand-logo) {
  display: none;
}

.p8d .brand-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 22px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.p8d .brand-logo .p {
  color: #4a4a4d;
}

.p8d .brand-logo .inf {
  color: #ed1c24;
  font-size: 20px;
}

.p8d .brand-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.p8d .brand-sub {
  font-size: var(--fs-2xs);
  color: var(--fg-3);
}

.p8d .topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.p8d .topbar-user {
  font-size: var(--fs-sm);
  color: var(--fg-2);
  text-align: right;
}

.p8d .topbar-user strong {
  display: block;
  color: var(--fg-1);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
}

/* ── USER DROPDOWN (profile / theme / logout) ───────────────────── */
.p8d .user-menu {
  position: relative;
}

.p8d .user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-md);
  color: inherit;
}

.p8d .user-menu-btn:hover {
  background: var(--ct-gray-100);
}

.p8d .user-menu-avatar {
  font-size: 26px;
  color: var(--fg-2);
}

.p8d .user-menu-caret {
  font-size: 16px;
  color: var(--fg-3);
  transition: transform 0.15s ease;
}

.p8d .user-menu.open .user-menu-caret {
  transform: rotate(180deg);
}

.p8d .user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--ct-box-shadow);
  padding: 6px;
  z-index: 200;
  display: none;
}

.p8d .user-menu.open .user-menu-dropdown {
  display: block;
}

.p8d .user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--fg-1);
  text-align: left;
  text-decoration: none;
}

.p8d .user-menu-item:hover {
  background: var(--ct-gray-100);
  color: var(--praxis-brand);
}

.p8d .user-menu-item i {
  font-size: 18px;
  color: var(--fg-2);
}

.p8d .user-menu-item:hover i {
  color: var(--praxis-brand);
}

.p8d .user-menu-sep {
  height: 1px;
  background: var(--border-soft);
  margin: 4px 6px;
}

.p8d .notif-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg-2);
  font-size: 20px;
  padding: 4px;
  line-height: 1;
  text-decoration: none;
}

.p8d .notif-btn:hover {
  color: var(--praxis-brand);
}

.p8d .notif-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--ct-danger);
  color: #fff;
  font-size: 9px;
  font-weight: var(--fw-bold);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ct-bg-topbar);
}

.p8d .crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px 0 0;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

.p8d .crumb a {
  color: var(--praxis-link);
}

.p8d .crumb .sep {
  color: var(--fg-3);
}

/* ── SIDEBAR ────────────────────────────────────────────────────── */
.p8d .layout {
  display: flex;
  padding-top: 50px;
  height: 100vh;
}

.p8d .sidebar {
  width: 60px;
  flex-shrink: 0;
  background: var(--bg-rail);
  border-right: 1px solid var(--border-1);
  position: fixed;
  top: 50px;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 0;
  white-space: nowrap;
  z-index: 95;
  transition: width 0.16s ease, box-shadow 0.16s ease;
}

/* Collapsed icon rail expands to reveal labels on hover. */
.p8d .sidebar:hover {
  width: 220px;
  box-shadow: 6px 0 18px rgba(154, 161, 171, 0.25);
}

/* While collapsed, fully hide item labels (icons keep their own fixed size). */
.p8d .sidebar:not(:hover) .sidebar-item {
  font-size: 0;
  position: relative;
}

/* Collapsed rail: shrink the count badge to a dot indicator on the icon. */
.p8d .sidebar:not(:hover) .sidebar-badge {
  position: absolute;
  top: 5px;
  left: 32px;
  min-width: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  border-radius: 50%;
}

.p8d .sidebar-section {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 12px 16px 4px;
}

/* Collapsed: hide section labels, show a divider line instead. */
.p8d .sidebar:not(:hover) .sidebar-section {
  color: transparent;
  position: relative;
  padding-top: 10px;
  padding-bottom: 6px;
}

.p8d .sidebar:not(:hover) .sidebar-section::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  border-top: 1px solid var(--border-1);
}

.p8d .sidebar-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 16px 8px 19px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  cursor: pointer;
  border-left: 2px solid transparent;
  overflow: hidden;
  transition: background 0.12s, color 0.12s;
}

.p8d .sidebar-item:hover {
  background: var(--ct-gray-200);
  color: var(--fg-1);
}

.p8d .sidebar-item.active {
  background: var(--bg-tint);
  color: var(--praxis-brand);
  border-left-color: var(--praxis-brand);
  font-weight: var(--fw-medium);
}

.p8d .sidebar-item .mdi,
.p8d .sidebar-item [class^="uil-"],
.p8d .sidebar-item [class*=" uil-"] {
  font-size: 17px;
}

.p8d .sidebar-badge {
  margin-left: auto;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  background: var(--ct-danger);
  color: #fff;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  min-width: 20px;
  text-align: center;
}

.p8d .sidebar-badge.warn {
  background: var(--ct-warning);
  color: var(--fg-1);
}

/* ── COLLAPSIBLE NAV GROUPS (Fleet sidebar) ─────────────────────── */
.p8d .sidebar-grouphd {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 16px 8px 19px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  cursor: pointer;
  border-left: 2px solid transparent;
  overflow: hidden;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.p8d .sidebar-grouphd:hover {
  background: var(--ct-gray-200);
  color: var(--fg-1);
}

.p8d .sidebar-grouphd .mdi,
.p8d .sidebar-grouphd [class^="uil-"],
.p8d .sidebar-grouphd [class*=" uil-"] {
  font-size: 17px;
}

.p8d .sidebar-caret {
  margin-left: auto;
  font-size: 16px !important;
  color: var(--fg-3);
  transition: transform 0.15s ease;
}

.p8d .sidebar-group.open>.sidebar-grouphd .sidebar-caret {
  transform: rotate(180deg);
}

.p8d .sidebar-subnav {
  display: none;
}

.p8d .sidebar-group.open>.sidebar-subnav {
  display: block;
}

.p8d .sidebar-subitem {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 40px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  text-decoration: none;
  border-left: 2px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.12s, color 0.12s;
}

.p8d .sidebar-subitem .mdi {
  font-size: 15px;
  color: var(--fg-3);
}

.p8d .sidebar-subitem:hover {
  background: var(--ct-gray-200);
  color: var(--fg-1);
}

.p8d .sidebar-subitem.active {
  background: var(--bg-tint);
  color: var(--praxis-brand);
  border-left-color: var(--praxis-brand);
  font-weight: var(--fw-medium);
}

.p8d .sidebar-subitem.active .mdi {
  color: var(--praxis-brand);
}

.p8d .sidebar-hr {
  border-top: 1px solid var(--border-1);
  margin: 8px 12px;
}

/* Collapsed 60px rail: show only group icons (hide labels, caret, subnav). */
.p8d .sidebar:not(:hover) .sidebar-grouplbl {
  font-size: 0;
  width: 0;
  margin: 0;
}

.p8d .sidebar:not(:hover) .sidebar-caret {
  display: none;
}

.p8d .sidebar:not(:hover) .sidebar-subnav {
  display: none !important;
}

.p8d .sidebar:not(:hover) .sidebar-hr {
  margin-left: 14px;
  margin-right: 14px;
}

/* ── MAIN ───────────────────────────────────────────────────────── */
.p8d .main {
  margin-left: 60px;
  padding: 20px 22px 40px;
  flex: 1;
  min-width: 0; /* allow the flex content region to shrink to the viewport so wide
                   children scroll within their own overflow-x:auto wrapper instead
                   of stretching the page (keeps the page-header/actions in view) */
  height: calc(100vh - 50px);
  overflow-y: auto;
}

.p8d .page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
}

.p8d .page-title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  line-height: 1;
}

.p8d .page-title-sm {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  line-height: 1;
}

.p8d .page-subtitle {
  font-size: var(--fs-sm);
  color: var(--fg-2);
  margin-top: 3px;
}

.p8d .page-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Uniform control height for the top-right header cluster, so buttons and the
   edit-mode toggle line up to the same height on every migrated page. */
.p8d .page-header .page-header-actions>.btn,
.p8d .page-header .page-header-actions>.qt-edit-toggle,
.p8d .page-header .page-header-actions>.form-select,
.p8d .page-header .page-header-actions>.form-control,
.p8d .page-header .page-header-actions>.input-group>.form-control,
.p8d .page-header .page-header-actions>.input-group>.input-group-text {
  height: 32px;
}

.p8d .page-header .page-header-actions>.form-select,
.p8d .page-header .page-header-actions>.form-control,
.p8d .page-header .page-header-actions>.input-group>.form-control {
  padding-top: 0;
  padding-bottom: 0;
  /* Same text size as every other input. This beats .form-select-sm and
     .form-control-sm, so a header control cannot shrink to 12 px again. */
  font-size: var(--fs-sm);
}

/* ── BUTTONS ────────────────────────────────────────────────────── */
.p8d .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.5;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}

.p8d .btn:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

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

.p8d .btn-primary:hover {
  background: var(--praxis-brand-deep);
}

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

.p8d .btn-outline:hover {
  background: var(--bg-tint);
}

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

.p8d .btn-light:hover {
  background: var(--ct-gray-100);
}

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

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

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

.p8d .btn-sm {
  padding: 3px 10px;
  font-size: var(--fs-xs);
}

.p8d .btn .mdi {
  font-size: 15px;
  line-height: 1;
}

.action-icon {
  font-size: var(--fs-md);
  margin: 0px 2px;
  color: var(--praxis-link);
  cursor: pointer;
}

.p8d .log {
  font-size: 11px;
  color: var(--fg-3);
}

/* Record panels (status / action bar / history) — plain white card surface. */
.p8d .record-panel {
  background: var(--bg-surface) !important;
}

/* Legacy record status block (ported from P8.css) — emitted by showStatus():
   left column = current status (colour-coded) + who/when, right column = the
   status history with a divider. */
.p8d .status_container .card-body {
  display: flow-root;
  /* contain the floated columns */
}

.p8d .status_current {
  float: left;
  display: inline-block;
  width: 370px;
}

.p8d .status_text {
  font-size: 20px;
  color: var(--fg-3);
}

.p8d .status_text.New {
  color: #258ecd;
}

.p8d .status_text.Issued,
.p8d .status_text.Confirmed,
.p8d .status_text.Approved,
.p8d .status_text.Acknowledged {
  color: rgba(154, 162, 16, 1);
}

.p8d .status_text.Revised,
.p8d .status_text.Revise,
.p8d .status_text.Updated {
  color: rgba(219, 129, 8, 0.9);
}

.p8d .status_text.Cancelled,
.p8d .status_text.Canceled {
  color: rgba(218, 71, 140, 0.9);
}

.p8d .status_text.Signed,
.p8d .status_text.Prepared,
.p8d .status_text.Received,
.p8d .status_text.Closed {
  color: rgba(96, 27, 170, 0.9);
}

.p8d .status_text.Open,
.p8d .status_text.Urgent {
  color: var(--ct-danger);
}

.p8d .status_info {
  font-size: var(--fs-2xs);
  color: var(--fg-2);
}

.p8d .status_history {
  float: left;
  display: inline-block;
  height: 54px;
  width: 315px;
  padding-top: 1px;
  padding-left: 10px;
  border-left: 1px solid var(--border-1);
  overflow-y: auto;
  font-size: var(--fs-2xs);
  color: var(--fg-2);
}

/* Records view action bar — uniform button height/size regardless of source
   (showAction() emits full .btn; the nav buttons are .btn-sm). */
.p8d .record-action-bar .btn {
  height: 32px;
  font-size: var(--fs-sm);
}

.action-icon:hover {
  color: var(--praxis-link-hover);
}

/* ── FORM CHECK / RADIO / SWITCH ────────────────────────────────────
   Bootstrap-compatible toggle controls as a first-class P8 component.
   Self-contained (no kit dependency) so they work on native dashboards
   AND migrated pages. Markup:
     <div class="form-check form-switch">
       <input class="form-check-input" type="checkbox" role="switch" id="x">
       <label class="form-check-label" for="x">Label</label>
     </div>                                                              */
.p8d .form-check {
  position: relative;
  display: block;
  min-height: 1.2rem;
  padding-left: 22px;
  margin-bottom: 4px;
}

.p8d .form-check-input {
  position: absolute;
  left: 0;
  top: 2px;
  width: 15px;
  height: 15px;
  margin: 0;
  vertical-align: top;
  border: 1px solid var(--border-1);
  border-radius: 3px;
  background-color: var(--bg-surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .15s, background-position .15s, border-color .15s, box-shadow .15s;
}

.p8d .form-check-input[type="radio"] {
  border-radius: 50%;
}

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

.p8d .form-check-input:checked {
  background-color: var(--praxis-brand);
  border-color: var(--praxis-brand);
}

.p8d .form-check-input:checked[type="checkbox"] {
  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='%23fff' stroke-width='2.5' d='M3 8l3.5 3.5L13 4'/%3e%3c/svg%3e");
  background-size: 11px;
}

.p8d .form-check-input:checked[type="radio"] {
  box-shadow: inset 0 0 0 3px var(--bg-surface);
}

.p8d .form-check-input:disabled,
.p8d .form-check-input[disabled] {
  opacity: .5;
  cursor: default;
}

.p8d .form-check-label {
  font-size: var(--fs-sm);
  color: var(--fg-1);
  cursor: pointer;
}

.p8d .form-check-inline {
  display: inline-block;
  margin-right: 14px;
}

/* A `.form-check` that holds the control and no label — a select box in a
   table cell. `.form-check` keeps 22px of room for a label that is not there,
   which pushes the box off the centre of its cell. This keeps the wrapper the
   width of the box, so the cell aligns it. The wrapper is still needed: the
   input is `position: absolute`, and without a relative ancestor it lands on
   the top-left of the page. */
.p8d .form-check.form-check-bare {
  display: inline-block;
  padding-left: 15px;
  min-height: 15px;
  margin-bottom: 0;
  vertical-align: middle;
}

/* Switch: a pill-shaped checkbox with a sliding thumb (sizes in em so it
   tracks the surrounding font-size). Unchecked thumb is a soft grey dot;
   checked turns the track brand + slides a white thumb to the right. */
.p8d .form-switch {
  padding-left: 2.6em;
}

.p8d .form-switch .form-check-input {
  width: 2em;
  height: 1em;
  top: 1px;
  border-radius: 1em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280,0,0,.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  background-size: contain;
}

.p8d .form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280,0,0,.25%29'/%3e%3c/svg%3e");
}

.p8d .form-switch .form-check-input:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* ── LEGACY data-switch TOGGLE (Hyper-compatible) ───────────────────
   Styles showEditable(...,'switch',...) output, which is NOT Bootstrap
   markup but a hidden checkbox + label pill with on/off text labels:
     <input type="checkbox" class="switch-input" data-switch="success">
     <label data-on-label="Yes" data-off-label="No"></label>
   Ported from the Hyper theme, recoloured with P8 tokens (so it also
   tracks dark mode). data-switch=<variant> sets the checked colour.   */
.p8d input[data-switch] {
  display: none;
}

.p8d input[data-switch]+label {
  width: 44px;
  height: 22px;
  background-color: var(--bg-sunken, #f1f1f1);
  border-radius: 2rem;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  position: relative;
  vertical-align: middle;
  transition: all .1s ease-in-out;
}

.p8d input[data-switch]+label:before {
  color: var(--fg-2);
  content: attr(data-off-label);
  display: block;
  font-family: inherit;
  font-weight: var(--fw-medium);
  font-size: .7rem;
  line-height: 22px;
  position: absolute;
  right: 3px;
  margin: 0 .2rem;
  top: 0;
  text-align: center;
  min-width: 1.66667rem;
  overflow: hidden;
  transition: all .1s ease-in-out;
}

.p8d input[data-switch]+label:after {
  content: "";
  position: absolute;
  left: 4px;
  background-color: var(--ct-secondary, #adb5bd);
  border-radius: 2rem;
  height: 12px;
  width: 12px;
  top: 5px;
  transition: all .1s ease-in-out;
}

.p8d input[data-switch]:checked+label {
  background-color: var(--praxis-brand);
}

.p8d input[data-switch]:checked+label:before {
  color: #fff;
  content: attr(data-on-label);
  right: auto;
  left: 0;
}

.p8d input[data-switch]:checked+label:after {
  left: 29px;
  background-color: #fff;
}

.p8d input[data-switch]:disabled+label {
  opacity: .5;
  cursor: default;
}

.p8d input[data-switch=primary]:checked+label {
  background-color: var(--praxis-brand);
}

.p8d input[data-switch=secondary]:checked+label {
  background-color: var(--ct-secondary);
}

.p8d input[data-switch=success]:checked+label {
  background-color: var(--ct-success);
}

.p8d input[data-switch=info]:checked+label {
  background-color: var(--ct-info);
}

.p8d input[data-switch=warning]:checked+label {
  background-color: var(--ct-warning);
}

.p8d input[data-switch=danger]:checked+label {
  background-color: var(--ct-danger);
}

/* Dark mode: the bright lime success track is harsh on a dark canvas —
   deepen it (the thumb stays white) for viewing comfort. */
[data-theme="dark"] .p8d input[data-switch=success]:checked+label {
  background-color: #5e8c12;
}

[data-theme="dark"] .p8d input[data-switch=warning]:checked+label {
  background-color: #b8870a;
}

/* ── ROLES-MATRIX PERMISSION-SELECT TINT (theme-aware) ──────────────
   Applied as a class by Users.php changeSelectBGColor() so it can be
   themed. view=blue, edit=green, delete=red. Pastels on light; muted,
   legible translucent fills on dark. */
.p8d select.role-view {
  background-color: #e6f7ff;
}

.p8d select.role-edit {
  background-color: #ccffcc;
}

.p8d select.role-delete {
  background-color: #ffcccc;
}

[data-theme="dark"] .p8d select.role-view {
  background-color: rgba(var(--ct-info-rgb), 0.22);
  color: var(--fg-1);
}

[data-theme="dark"] .p8d select.role-edit {
  background-color: rgba(var(--ct-success-rgb), 0.20);
  color: var(--fg-1);
}

[data-theme="dark"] .p8d select.role-delete {
  background-color: rgba(var(--ct-danger-rgb), 0.24);
  color: var(--fg-1);
}

/* ── EDIT-MODE TOGGLE (a switch rendered as a header link) ──────────
   A `.form-switch` wrapped in an <a> that reloads the page with the edit
   flag flipped — used by list pages with inline-edit (e.g. QualificationTitle).
   The checkbox is presentational (disabled); the link does the toggling. */
.p8d .qt-edit-toggle {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0;
  min-height: 0;
  padding: 5px 12px 5px 46px;
  color: var(--fg-2);
  font-size: var(--fs-sm);
  text-decoration: none;
  cursor: pointer;
}

.p8d .qt-edit-toggle .form-check-input {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.p8d .qt-edit-toggle .form-check-label {
  cursor: pointer;
}

.p8d .qt-edit-toggle.is-on {
  color: var(--praxis-brand);
  border-color: var(--praxis-brand);
}

/* ── SETTINGS LINK LIST (navigation hub rows inside a card) ─────────
   Used by hub pages (e.g. Settings.php): a vertical list of icon + label
   rows with a trailing chevron, hairline-separated, brand on hover. */
/* Item catalogue list: a hidden master shows only when the table has
   show-hidden. The rule beats the inline display that the group toggle sets. */
.p8d .im-list:not(.show-hidden) tr.item-hidden-row {
  display: none !important;
}

.p8d .im-list tr.item-hidden-row td {
  opacity: 0.55;
}

/* A long system name shows an ellipsis; the title holds the full name. */
.p8d .im-list td.im-system {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Settings hub: the cards flow into columns top to bottom, so every gap
   between two cards is the same 12px. A flex row leaves a hole under a
   short card, because each line is as tall as its tallest card. */
.p8d .settings-columns {
  column-count: 1;
  column-gap: 12px;
}

.p8d .settings-columns > .card {
  break-inside: avoid;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .p8d .settings-columns { column-count: 2; }
}

@media (min-width: 1200px) {
  .p8d .settings-columns { column-count: 4; }
}

.p8d .settings-list {
  display: flex;
  flex-direction: column;
}

.p8d .settings-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-1);
  color: var(--fg-1);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background .12s, color .12s;
}

.p8d .settings-link:first-child {
  border-top: none;
}

.p8d .settings-link:hover {
  background: var(--bg-sunken);
  color: var(--praxis-brand);
}

.p8d .settings-link>i:first-child {
  font-size: 18px;
  width: 20px;
  text-align: center;
  color: var(--fg-3);
}

.p8d .settings-link:hover>i:first-child {
  color: var(--praxis-brand);
}

.p8d .settings-link .settings-link-label {
  flex: 1;
}

.p8d .settings-link .settings-link-chevron {
  font-size: 16px;
  color: var(--fg-3);
}

/* ── SELECT2-STYLE TAG MULTI-SELECT ─────────────────────────────────
   P8 replacement for Hyper's Select2 (which the lean shell drops).
   p8-body.js enhances `select.select2-multiple` into this tag widget,
   keeping the native <select multiple> hidden + in sync (so updatethis
   and form submit keep working). Matches the p8-design Select2 card. */
.p8d .s2 {
  position: relative;
  /* A table cell with .text-center must not centre the tags or the list. */
  text-align: left;
}

.p8d select.select2-multiple.s2-enhanced {
  display: none !important;
}

.p8d .s2-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: text;
}

.p8d .s2.is-open .s2-multi {
  border-color: var(--praxis-brand);
  box-shadow: 0 0 0 .18rem rgba(38, 90, 204, 0.18);
}

.p8d .s2-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.p8d .s2-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  background: var(--praxis-brand-soft);
  color: var(--praxis-brand);
  border: 1px solid rgba(38, 90, 204, 0.22);
  border-radius: 3px;
}

.p8d .s2-tag .x {
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  opacity: .65;
}

.p8d .s2-tag .x:hover {
  opacity: 1;
}

.p8d .s2-multi input {
  flex: 1;
  min-width: 50px;
  border: 0;
  outline: 0;
  font-size: var(--fs-sm);
  font-family: inherit;
  background: transparent;
  padding: 2px;
  color: var(--fg-1);
}

.p8d .s2-drop {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin-top: 3px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.p8d .s2-results {
  max-height: 200px;
  overflow: auto;
  padding-bottom: 4px;
}

.p8d .s2-group {
  padding: 5px 10px 2px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.p8d .s2-opt {
  padding: 5px 10px;
  cursor: pointer;
  color: var(--fg-1);
  font-size: var(--fs-sm);
}

.p8d .s2-opt:hover {
  background: var(--praxis-brand-soft);
}

.p8d .s2-opt.is-sel {
  background: var(--praxis-brand);
  color: #fff;
}

.p8d .s2-empty {
  padding: 6px 10px;
  color: var(--fg-3);
  font-size: var(--fs-sm);
}

/* Dark mode: lift the tag text/border off the translucent brand fill. */
[data-theme="dark"] .p8d .s2-tag {
  color: #8db0f2;
  border-color: rgba(141, 176, 242, 0.32);
}

/* ── CARDS ──────────────────────────────────────────────────────── */
.p8d .card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--ct-box-shadow);
  padding: 14px 16px;
}

.p8d .card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.p8d .card-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin-bottom: 4px;
}

.p8d .card-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ── SECTION HEADERS ────────────────────────────────────────────── */
.p8d .section-header {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--praxis-link);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.p8d .section-header .mdi {
  font-size: 18px;
}

.p8d .section-header-right {
  margin-left: auto;
}

.p8d .section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 10px;
}

.p8d .section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0px;
}

.p8d .section-divider hr {
  flex: 1;
  border: none;
  border-top: 1px solid var(--border-1);
  margin: 14px 0px;
}

/* ── TABS (view-tabs = fleet, tabs = vessel) ────────────────────── */
.p8d .view-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 14px;
}

.p8d .view-tab {
  padding: 8px 16px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
}

.p8d .view-tab:hover {
  color: var(--fg-1);
}

.p8d .view-tab.active {
  color: var(--praxis-brand);
  border-bottom-color: var(--praxis-brand);
  font-weight: var(--fw-medium);
}

.p8d .tabs {
  display: flex;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.p8d .tab {
  padding: 9px 14px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.p8d .tab:hover {
  color: var(--fg-1);
}

.p8d .tab.active {
  color: var(--praxis-brand);
  border-bottom-color: var(--praxis-brand);
}

.p8d .tab .tab-badge {
  font-size: 9px;
  background: var(--ct-danger);
  color: #fff;
  padding: 1px 5px;
  border-radius: 9px;
  font-weight: var(--fw-bold);
}

.p8d .tab .tab-badge.warn {
  background: var(--ct-warning);
  color: var(--fg-1);
}

.p8d .tab-panel {
  display: none;
}

.p8d .tab-panel.active {
  display: block;
}

/* ── TABLES (generic) ───────────────────────────────────────────── */
.p8d .table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  background: var(--bg-surface);
}

.p8d .table th {
  border: 1px solid var(--border-1);
  padding: 8px 12px;
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  font-size: var(--fs-sm);
  text-align: left;
  background: var(--bg-surface);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.p8d .table td {
  border: 1px solid var(--border-1);
  padding: 7px 12px;
  color: var(--fg-1);
  font-weight: var(--fw-light);
  vertical-align: middle;
}

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

/* ── Vertical dot timeline (work history and similar) ───────────────────────
   A dot per entry, joined by a vertical line, with the entry body to the right. */
.p8d .p8-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.p8d .p8-timeline-item {
  position: relative;
  padding: 0 0 1.1rem 1.5rem;
}
.p8d .p8-timeline-item:last-child {
  padding-bottom: 0;
}
.p8d .p8-timeline-item::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.55rem;
  bottom: 0;
  width: 2px;
  background: var(--border-1);
}
.p8d .p8-timeline-item:last-child::before {
  display: none;
}
.p8d .p8-timeline-dot {
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--praxis-brand);
  box-shadow: 0 0 0 3px var(--bg-surface, #fff);
}
.p8d .p8-timeline-dot.is-muted {
  background: var(--ct-secondary, #9ea6aa);
}
.p8d .p8-timeline-title {
  margin: 0 0 0.15rem;
  font-weight: var(--fw-semibold);
}

.p8d .table .link {
  color: var(--praxis-link);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.p8d .table .link:hover {
  color: var(--praxis-link-hover);
}

.p8d .table .muted {
  color: var(--fg-3);
}

/* ── ALERT (messages / confirms — Hyper default soft) ───────────── */
.p8d .alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}

.p8d .alert>.mdi {
  margin-right: 0.4rem;
  line-height: 1;
  font-size: 18px;
  vertical-align: -2px;
}

.p8d .alert-heading {
  margin: 0 0 2px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: inherit;
}

.p8d .alert p {
  margin-bottom: 0.25lh;
}

.p8d .alert-link {
  font-weight: 600;
  color: inherit;
}

.p8d .alert-primary {
  color: #005a99;
  background-color: #cceaff;
  border-color: #b3e0ff;
}

.p8d .alert-secondary {
  color: #5f6466;
  background-color: #ecedee;
  border-color: #e2e4e6;
}

.p8d .alert-success {
  color: #59820d;
  background-color: #eaf7d0;
  border-color: #dff3b9;
}

.p8d .alert-info {
  color: #22697d;
  background-color: #d7eff6;
  border-color: #c4e7f1;
}

.p8d .alert-warning {
  color: #997100;
  background-color: #fff2cc;
  border-color: #ffebb3;
}

.p8d .alert-danger {
  color: #8e1700;
  background-color: #fbd4cc;
  border-color: #fabeb3;
}

.p8d .alert-light {
  color: #919191;
  background-color: #fcfcfc;
  border-color: #fbfbfb;
}

.p8d .alert-dark {
  color: #1d1d21;
  background-color: #d6d6d7;
  border-color: #c1c1c3;
}

[data-theme="dark"] .p8d .alert-primary {
  color: #7fb0ff;
  background-color: rgba(var(--ct-primary-rgb), .15);
  border-color: rgba(var(--ct-primary-rgb), .30);
}

[data-theme="dark"] .p8d .alert-secondary {
  color: var(--fg-2);
  background-color: rgba(var(--ct-secondary-rgb), .15);
  border-color: rgba(var(--ct-secondary-rgb), .30);
}

[data-theme="dark"] .p8d .alert-success {
  color: #a9e23f;
  background-color: rgba(var(--ct-success-rgb), .15);
  border-color: rgba(var(--ct-success-rgb), .30);
}

[data-theme="dark"] .p8d .alert-info {
  color: #5fc4e0;
  background-color: rgba(var(--ct-info-rgb), .15);
  border-color: rgba(var(--ct-info-rgb), .30);
}

[data-theme="dark"] .p8d .alert-warning {
  color: #ffcb33;
  background-color: rgba(var(--ct-warning-rgb), .15);
  border-color: rgba(var(--ct-warning-rgb), .30);
}

[data-theme="dark"] .p8d .alert-danger {
  color: #ff7a5c;
  background-color: rgba(var(--ct-danger-rgb), .15);
  border-color: rgba(var(--ct-danger-rgb), .30);
}

[data-theme="dark"] .p8d .alert-light {
  color: var(--fg-1);
  background-color: var(--bg-surface);
  border-color: var(--border-1);
}

[data-theme="dark"] .p8d .alert-dark {
  color: var(--fg-1);
  background-color: rgba(255, 255, 255, .06);
  border-color: var(--border-2);
}

/* ── ALERT TABLE (fleet) ────────────────────────────────────────── */
.p8d .alert-table {
  width: 100%;
  border-collapse: collapse;
}

.p8d .alert-table th {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-1);
  text-align: left;
  background: var(--bg-surface);
}

.p8d .alert-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
  vertical-align: middle;
}

.p8d .alert-table tr:last-child td {
  border-bottom: none;
}

.p8d .alert-table tr:hover td {
  background: var(--bg-sunken);
}

.p8d .alert-table tr.row-critical {
  background: rgba(237, 38, 0, 0.04);
}

.p8d .alert-table tr.row-warn {
  background: rgba(255, 188, 0, 0.04);
}

.p8d .vessel-tag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--praxis-brand);
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
}

.p8d .alert-msg {
  color: var(--fg-1);
}

.p8d .alert-time {
  font-size: 11px;
  color: var(--fg-3);
  white-space: nowrap;
}

/* Fleet Map note (positions are last-reported, not live) */
.p8d .map-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  background: rgba(var(--ct-info-rgb), 0.08);
  border: 1px solid rgba(var(--ct-info-rgb), 0.25);
  border-radius: var(--radius-md);
}

.p8d .map-note .mdi {
  color: var(--ct-info);
  font-size: 17px;
  flex-shrink: 0;
}

/* Own stacking context at z-index 0 contains Leaflet's high internal z-indices
   (panes/controls up to ~800) below the fixed topbar (100) and sidebar (95),
   without touching Leaflet's internal pane ordering. */
.p8d #fleet-map {
  position: relative;
  z-index: 0;
}

/* "+N more — View All" footer row on the overview alert queue */
.p8d .alert-table tr.alert-more-row td {
  text-align: left;
  padding: 8px;
}

.p8d .alert-table tr.alert-more-row a {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--praxis-brand);
}

/* clickable vessel tag (alerts link to the vessel dashboard) */
.p8d a.vessel-tag {
  text-decoration: none;
}

.p8d a.vessel-tag:hover {
  text-decoration: underline;
}

/* responsible-to-the-user alert: left accent + star marker */
.p8d .alert-table tr.alert-responsible td:first-child {
  box-shadow: inset 3px 0 0 var(--praxis-brand);
}

.p8d .alert-star {
  color: var(--ct-warning);
  font-size: 12px;
  vertical-align: middle;
}

/* Alerts page filter bar */
.p8d .alert-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.p8d .alert-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  color: var(--fg-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.p8d .alert-filter:hover {
  background: var(--ct-gray-200);
  color: var(--fg-1);
}

.p8d .alert-filter.active {
  background: var(--bg-tint);
  border-color: var(--praxis-brand);
  color: var(--praxis-brand);
}

.p8d .alert-filter .cnt {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  background: var(--ct-gray-200);
  color: var(--fg-2);
  border-radius: var(--radius-pill);
  padding: 0 6px;
  min-width: 18px;
  text-align: center;
}

.p8d .alert-filter.active .cnt {
  background: var(--praxis-brand);
  color: #fff;
}

/* ── CHIPS ──────────────────────────────────────────────────────── */
.p8d .chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.p8d .chip-critical {
  background: rgba(var(--ct-danger-rgb), 0.1);
  color: var(--ct-danger);
}

.p8d .chip-warning {
  background: rgba(var(--ct-warning-rgb), 0.12);
  color: #9a6800;
}

.p8d .chip-info {
  background: rgba(var(--ct-primary-rgb), 0.1);
  color: var(--praxis-brand);
}

.p8d .chip-success {
  background: rgba(var(--ct-success-rgb), 0.12);
  color: #4a7200;
}

.p8d .chip-active {
  background: rgba(var(--ct-success-rgb), 0.12);
  color: #4a7200;
}

.p8d .chip-up {
  background: rgba(var(--ct-success-rgb), 0.18);
  color: #4a7200;
}

.p8d .chip-open {
  background: rgba(var(--ct-danger-rgb), 0.12);
  color: var(--ct-danger);
}

.p8d .chip-expiring {
  background: rgba(var(--ct-warning-rgb), 0.2);
  color: #8e6a00;
}

.p8d .chip-expired {
  background: rgba(var(--ct-danger-rgb), 0.18);
  color: var(--ct-danger);
}

.p8d .chip-new {
  background: rgba(var(--ct-info-rgb), 0.15);
  color: #1a6b9c;
}

.p8d .chip-issued {
  background: rgba(var(--ct-success-rgb), 0.18);
  color: #5e6206;
}

.p8d .chip-progress {
  background: rgba(var(--ct-primary-rgb), 0.12);
  color: var(--praxis-brand);
}

/* Workflow-state chips — colours mirror P8.css .status_text.* (the
   documented status-colour source) so document states read the same
   wherever ShowStatusLabel() renders them. */
.p8d .chip-revised {
  background: rgba(219, 129, 8, 0.15);
  color: #a05b04;
}

.p8d .chip-cancelled {
  background: rgba(218, 71, 140, 0.15);
  color: #a5305f;
}

.p8d .chip-signed {
  background: rgba(96, 27, 170, 0.15);
  color: #5b1aa0;
}

.p8d .chip-neutral {
  background: rgba(var(--ct-secondary-rgb), 0.18);
  color: var(--fg-2);
}

/* Certificate-register search box — self-contained so it renders identically
   with or without the p8-body kit (VesselDashboard loads no kit, Certificate.php
   does). Mirrors the look of the kit's .input-group + .form-control search used
   on Equipment.php. Colours come from tokens so light/dark both track. */
.p8d .cert-search-group {
  display: inline-flex;
  align-items: stretch;
  width: 200px;
}
.p8d .cert-search-group .cert-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 31px;
  padding: 0 10px;
  font-size: var(--fs-xs);
  color: var(--fg-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  outline: none;
}
.p8d .cert-search-group .cert-search::placeholder { color: var(--fg-3); }
.p8d .cert-search-group .cert-search:focus { border-color: var(--praxis-brand); }
.p8d .cert-search-group .cert-search-icon {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: var(--fg-3);
  background: var(--bg-sunken);
  border: 1px solid var(--border-1);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Category group-header band inside the certificate register — self-contained
   so it keeps its colour with or without the p8-body kit (mirrors the kit's
   .bg-secondary-lighten, which VesselDashboard does not load). */
.p8d .cert-cat-row > td {
  background: rgba(var(--ct-secondary-rgb), 0.18);
  color: var(--fg-1);
}

/* Sortable certificate-register column headers. */
.p8d th.cert-sort {
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.p8d th.cert-sort .cert-sort-ico {
  font-size: 13px;
  opacity: 0.45;
  vertical-align: middle;
}
.p8d th.cert-sort:hover .cert-sort-ico {
  opacity: 0.9;
}

/* Tag pill — dark-grey rounded label for user-entered multi-value tags. */
.p8d .tag-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 100px;
  background: var(--ct-gray-700, #707579);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.p8d .tag-item .remove-tag {
  cursor: pointer;
  opacity: 0.8;
}

.p8d .tag-item .remove-tag:hover {
  opacity: 1;
}

.p8d .tag-item.active-filter {
  background: var(--praxis-brand);
  color: #fff;
}

/* ── KPI STRIP (fleet) ──────────────────────────────────────────── */
.p8d .kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.p8d .kpi-tile {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--ct-box-shadow);
  padding: 12px 14px;
  transition: border-color 0.15s;
}

/* Trend arrow pinned to the tile's top-right corner. */
.p8d .kpi-trend {
  position: absolute;
  top: 10px;
  right: 12px;
}

/* Hover affordance only when the tile is (or is wrapped in) a link. */
.p8d a.kpi-tile,
.p8d a > .kpi-tile,
.p8d .kpi-tile.kpi-tile-link {
  cursor: pointer;
}
.p8d a.kpi-tile:hover,
.p8d a:hover > .kpi-tile,
.p8d .kpi-tile.kpi-tile-link:hover {
  border-color: var(--praxis-brand);
}

.p8d .kpi-tile.alert-tile {
  border-left: 3px solid var(--ct-danger);
}

.p8d .kpi-tile.warn-tile {
  border-left: 3px solid var(--ct-warning);
}

.p8d .kpi-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 6px;
}

.p8d .kpi-value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-light);
  line-height: 1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.p8d .kpi-value.danger {
  color: var(--ct-danger);
}

.p8d .kpi-value.warning {
  color: var(--ct-warning);
  font-weight: var(--fw-regular);
}

.p8d .kpi-value.success {
  color: var(--ct-success);
}

.p8d .kpi-value.brand {
  color: var(--praxis-brand);
}

.p8d .kpi-sub {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 4px;
}

.p8d .kpi-sub .trend-up {
  color: var(--ct-danger);
}

.p8d .kpi-sub .trend-ok {
  color: var(--ct-success);
}

/* ── TREND ARROWS (risk / cert / defect monitoring) ─────────────────
   up = worse → red, down = better → green, flat = no change → muted. */
.p8d .trend {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  vertical-align: middle;
}

.p8d .trend i {
  font-size: 14px;
  line-height: 1;
}

.p8d .trend-up {
  color: var(--ct-danger);
}

.p8d .trend-down {
  color: var(--ct-success);
}

.p8d .trend-flat {
  color: var(--fg-3);
}

/* Trend arrows clustered at a card-head's top-right (before the icon). */
.p8d .card-trend {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Keep DataTables' floating header below the fixed P8 topbar. Single source for
   both native and body-kit pages (dashboard.css loads on every P8 page). */
table.dataTable.fixedHeader-floating,
.dtfh-floatingparent {
  top: 50px !important;
  z-index: 96;
}

/* ── DAILY LOG — responsive masonry of section cards ────────────────
   Each log section is a self-contained card; CSS columns pack them to
   fit the available width (no horizontal scroll) and collapse to a
   single column on narrow / mobile screens. */
.p8d .dl-grid {
  columns: 280px;
  column-gap: 12px;
}

.p8d .dl-card {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}

.p8d .dl-card-hd {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}

.p8d .dl-rows {
  margin: 0;
}

.p8d .dl-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: var(--fs-xs);
  padding: 3px 0;
  border-bottom: 1px dotted var(--border-soft);
}

.p8d .dl-row:last-child {
  border-bottom: 0;
}

.p8d .dl-row dt {
  color: var(--fg-2);
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.p8d .dl-row dd {
  margin: 0;
  color: var(--fg-1);
  font-weight: var(--fw-medium);
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
  /* Long values (e.g. a destination list) wrap instead of overflowing, and clamp
     to 4 lines with an ellipsis when very long. Hover shows the full text (title). */
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p8d .dl-row-single {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--fg-1);
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── CONTENT GRID + ALERT QUEUE (fleet) ─────────────────────────── */
.p8d .content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 340px;
  gap: 12px;
  margin-bottom: 14px;
  align-items: start;
}

/* Two-column variant (alert queue + chart). It applies only on a wide
   screen. Below 1200px the responsive rule stacks the columns. */
@media (min-width: 1201px) {
  .p8d .content-grid.cols-3-2 {
    grid-template-columns: 3fr 2fr;
  }
}

/* ── CII WIDGET (fleet) ─────────────────────────────────────────── */
.p8d .cii-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
}

.p8d .cii-row:last-child {
  border-bottom: none;
}

.p8d .cii-vessel {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
  width: 80px;
  flex-shrink: 0;
}

.p8d .cii-bar-wrap {
  flex: 1;
  height: 5px;
  background: var(--ct-gray-200);
  border-radius: 2px;
  overflow: hidden;
}

.p8d .cii-bar-fill {
  height: 100%;
  border-radius: 2px;
}

.p8d .cii-grade {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.p8d .grade-A {
  background: rgba(148, 216, 21, 0.15);
  color: #4a7200;
}

.p8d .grade-B {
  background: rgba(38, 90, 204, 0.1);
  color: var(--praxis-brand);
}

.p8d .grade-C {
  background: rgba(255, 188, 0, 0.15);
  color: #9a6800;
}

.p8d .grade-D {
  background: rgba(237, 38, 0, 0.1);
  color: var(--ct-danger);
}

/* ── VESSEL GRID (fleet) ────────────────────────────────────────── */
.p8d .vessel-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.p8d .vessel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.p8d .vessel-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--ct-box-shadow);
  padding: 14px 15px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}

.p8d .vessel-card:hover {
  border-color: var(--praxis-brand);
  box-shadow: 0 0 0 2px var(--praxis-brand-soft);
}

.p8d .vessel-card.has-critical {
  border-left: 3px solid var(--ct-danger);
}

.p8d .vessel-card.has-warning {
  border-left: 3px solid var(--ct-warning);
}

.p8d .vc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.p8d .vc-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--praxis-link);
}

.p8d .vc-status {
  font-size: var(--fs-2xs);
}

.p8d .vc-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 10px;
}

.p8d .vc-metric {
  background: var(--bg-surface);
  padding: 6px 8px;
}

.p8d .vc-metric-label {
  font-size: 9px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 2px;
}

.p8d .vc-metric-val {
  font-size: 18px;
  font-weight: var(--fw-light);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.p8d .vc-metric-val.danger {
  color: var(--ct-danger);
  font-weight: var(--fw-regular);
}

.p8d .vc-metric-val.warning {
  color: var(--ct-warning);
  font-weight: var(--fw-regular);
}

.p8d .vc-metric-val.success {
  color: var(--ct-success);
}

.p8d .vc-metric-val.muted {
  color: var(--fg-2);
}

.p8d .vc-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ── RISK BAR (shared, fleet card) ──────────────────────────────── */
.p8d .risk-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.p8d .risk-bar-wrap {
  flex: 1;
  height: 4px;
  background: var(--ct-gray-200);
  border-radius: 2px;
  overflow: hidden;
}

.p8d .risk-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s;
}

.p8d .risk-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.p8d .risk-score {
  font-size: var(--fs-2xs);
  color: var(--fg-3);
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
}

/* ── TILE METRICS (vessel overview) ─────────────────────────────── */
.p8d .tile-metric {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-light);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.p8d .tile-metric.tile-danger {
  color: var(--ct-danger);
}

.p8d .tile-metric.tile-warn {
  color: var(--ct-warning);
}

.p8d .tile-metric.tile-success {
  color: var(--ct-success);
}

.p8d .tile-caption {
  font-size: var(--fs-2xs);
  color: var(--fg-2);
  margin-top: 2px;
  text-align: center;
}

/* ── FORM CONTROLS / SWITCH (vessel) ────────────────────────────── */
.p8d .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.p8d .field-label {
  font-size: var(--fs-xs);
  color: var(--fg-2);
}

.p8d .field-input,
.p8d .field-select {
  width: 100%;
  padding: 5px 10px;
  font-family: inherit;
  font-size: var(--fs-sm);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--fg-1);
}

.p8d .field-input:focus,
.p8d .field-select:focus {
  outline: 0;
  border-color: #c8cbcf;
  box-shadow: 0 0 0 .2rem rgba(0, 150, 255, 0.25);
}

.p8d .field-input:disabled {
  background: var(--bg-sunken);
  color: var(--fg-3);
}

.p8d .switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
}

.p8d .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.p8d .switch .track {
  position: absolute;
  inset: 0;
  background: var(--border-1);
  border-radius: 20px;
  transition: 0.18s;
}

.p8d .switch .track::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: 0.18s;
}

.p8d .switch input:checked+.track {
  background: var(--ct-success);
}

.p8d .switch input:checked+.track::before {
  transform: translateX(18px);
}

/* ── PILL BUTTONS (vessel) ──────────────────────────────────────── */
.p8d .pill-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--bg-tint);
  color: var(--praxis-brand);
  font-size: 11px;
  font-weight: var(--fw-medium);
  border-radius: 8px;
  border: 1px solid rgba(38, 90, 204, .18);
  cursor: pointer;
}

.p8d .pill-button .count {
  background: rgba(38, 90, 204, .18);
  color: var(--praxis-brand);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--fs-2xs);
  margin-left: 2px;
}

/* ── PROGRESS RING (vessel) ─────────────────────────────────────── */
.p8d .pct-ring {
  position: relative;
  display: inline-block;
}

.p8d .pct-ring svg {
  display: block;
}

.p8d .pct-ring .pct-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: var(--fw-light);
}

/* ── OVERVIEW GRID / KV GRID (vessel) ───────────────────────────── */
.p8d .overview-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.p8d .kv-grid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 4px 14px;
  font-size: 12px;
}

.p8d .kv-label {
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}

.p8d .kv-val {
  color: var(--fg-1);
  font-weight: var(--fw-regular);
}

/* ── CONTENT ROWS (vessel) ──────────────────────────────────────── */
.p8d .content-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.p8d .content-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* ── TASK GRID (vessel) ─────────────────────────────────────────── */
.p8d .task-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.p8d .task-cell-label {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  margin-bottom: 6px;
}

.p8d .task-cell-label a {
  color: var(--praxis-link);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.p8d .task-cell-label a:hover {
  color: var(--praxis-link-hover);
}

.p8d .task-pct {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-light);
  line-height: 1;
}

.p8d .task-pct-unit {
  font-size: 14px;
  font-weight: var(--fw-light);
}

.p8d .task-rows {
  margin-top: 10px;
  font-size: var(--fs-sm);
  line-height: 1.9;
}

.p8d .task-row {
  display: flex;
  align-items: baseline;
}

.p8d .task-row span:first-child {
  color: var(--fg-2);
  order: 1;
}

.p8d .task-row::after {
  content: "";
  flex: 1;
  border-bottom: 1px dotted var(--fg-3);
  opacity: 0.35;
  margin: 0 8px;
  order: 2;
}

.p8d .task-row span:last-child {
  order: 3;
}

.p8d .hide-task-details .task-rows,
.p8d .hide-task-details .vd-q-tests,
.p8d .hide-task-details .vd-eqm-list {
  display: none !important;
}

/* SMS 117 checklist link — show "Record Check List" on hover, "SMS117" otherwise */
.p8d .vd-sms-link .vd-sms-full { display: none; }
.p8d .vd-sms-link:hover .vd-sms-short { display: none; }
.p8d .vd-sms-link:hover .vd-sms-full { display: inline; }

/* ── DEFECT ALERT BAR (vessel) ──────────────────────────────────── */
.p8d .defect-alert-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(237, 38, 0, .06);
  border: 1px solid rgba(237, 38, 0, .2);
  border-radius: 5px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.p8d .defect-alert-bar .mdi {
  font-size: 20px;
  color: var(--ct-danger);
}

.p8d .defect-alert-msg {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--ct-danger);
  font-weight: var(--fw-medium);
}

.p8d .defect-alert-bar .btn {
  margin-left: auto;
}

/* ── RISK SCORE PANEL (vessel) ──────────────────────────────────── */
.p8d .risk-panel {
  display: flex;
  align-items: center;
  gap: 20px;
}

.p8d .risk-dial {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.p8d .risk-dial svg {
  display: block;
}

.p8d .risk-dial-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.p8d .risk-dial-num {
  font-size: 22px;
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--ct-danger);
}

.p8d .risk-dial-max {
  font-size: var(--fs-2xs);
  color: var(--fg-3);
}

.p8d .risk-meta {
  flex: 1;
}

.p8d .risk-meta-band {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--ct-danger);
  margin-bottom: 4px;
}

.p8d .risk-domain-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}

.p8d .risk-domain-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.p8d .risk-domain-name {
  width: 80px;
  color: var(--fg-2);
  flex-shrink: 0;
}

.p8d .risk-domain-bar {
  flex: 1;
  height: 4px;
  background: var(--ct-gray-200);
  border-radius: 2px;
  overflow: hidden;
}

.p8d .risk-domain-fill {
  height: 100%;
  border-radius: 2px;
}

.p8d .risk-domain-val {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  width: 26px;
  text-align: right;
  color: var(--fg-2);
}

/* ── FUEL TABLE (vessel) ────────────────────────────────────────── */
.p8d .fuel-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.p8d .fuel-tbl th {
  padding: 7px 12px;
  border: 1px solid var(--border-1);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  color: var(--fg-2);
  background: var(--bg-surface);
}

.p8d .fuel-tbl td {
  padding: 7px 12px;
  border: 1px solid var(--border-1);
  font-weight: var(--fw-light);
}

/* ── CII BADGE (vessel) ─────────────────────────────────────────── */
.p8d .cii-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: var(--fw-bold);
}

.p8d .cii-B {
  background: rgba(38, 90, 204, .1);
  color: var(--praxis-brand);
}

.p8d .cii-C {
  background: rgba(255, 188, 0, .2);
  color: #8e6a00;
}

/* ── DROPZONE (vessel) ──────────────────────────────────────────── */
.p8d .dropzone {
  border: 2px dashed var(--border-1);
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  color: var(--fg-3);
}

.p8d .dropzone .mdi {
  font-size: 28px;
}

.p8d .dropzone:hover {
  border-color: var(--praxis-brand);
}

/* ── SINGLE-PICTURE UPLOAD (vessel / crew photo) ────────────────────
   Fit the photo inside its box, and turn the dropzone into a hover
   overlay so the "Drop/Click to upload" prompt only shows on mouseover. */
.p8d .singlePictureUpload {
  position: relative;
}

.p8d .singlePictureUploadContainer {
  text-align: center;
}

.p8d .singlePictureUploadContainer img {
  height: auto !important;
  width: auto;
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 4px;
}

/* With a photo present, the dropzone becomes a hidden overlay on top of it. */
.p8d .singlePictureUpload:has(.singlePictureUploadContainer) .inlinePhotoDrop.dropzone {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed transparent;
  background: transparent;
  color: #fff;
  opacity: 0;
  transition: opacity .15s ease, background-color .15s ease;
}

.p8d .singlePictureUpload:has(.singlePictureUploadContainer) .inlinePhotoDrop.dropzone .dz-message {
  margin: 0;
}

.p8d .singlePictureUpload:has(.singlePictureUploadContainer) .inlinePhotoDrop.dropzone:hover {
  opacity: 1;
  background: rgba(0, 0, 0, .45);
  border-color: rgba(255, 255, 255, .7);
}

/* Inline upload result — white text over the photo, fades after a moment. */
.p8d .singlePicMsg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 2;
  text-align: center;
  color: #fff;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.p8d .singlePicMsg.show {
  opacity: 1;
}

/* ── EQUIPMENT (running-hours / RPM) MAINTENANCE CELLS ──────────── */
.p8d .task-cell-link {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--praxis-link);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  margin-bottom: 2px;
}

.p8d .task-cell-link:hover {
  color: var(--praxis-link-hover);
}

.p8d .vd-eqm-interval {
  font-size: var(--fs-2xs);
  color: var(--fg-3);
  margin-bottom: 6px;
}

.p8d .vd-eqm-list {
  list-style: none;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.2;
}

.p8d .vd-eqm-list li {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p8d .vd-eqm-list li .mdi {
  font-size: 13px;
  flex-shrink: 0;
}

.p8d .vd-eqm-list li span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── STATUTORY QUARTERLY TESTS (fresh water / lube oil) ─────────── */
.p8d .vd-tests {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.p8d .vd-tests th {
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
  font-size: var(--fs-xs);
  text-align: center;
  padding: 2px 10px;
}

.p8d .vd-tests th:first-child {
  text-align: left;
}

.p8d .vd-tests td {
  padding: 9px 10px;
  /* border-top: 1px solid var(--border-soft); */
}

.p8d .vd-tests td.vd-test-name {
  text-align: left;
  color: var(--fg-1);
  line-height: 1.9;
  white-space: nowrap;
}

.p8d .vd-tests td.vd-drop {
  text-align: center;
}

.p8d .vd-tests td.vd-drop .mdi {
  font-size: 18px;
}

.p8d .vd-tests td.vd-drop a {
  display: inline-block;
  line-height: 1;
}

/* Daily fuel consumption + tracking — horizontal table, one column per day. */
.p8d .vd-fuel {
  border-collapse: collapse;
  width: auto;
  font-size: var(--fs-sm);
}

.p8d .vd-fuel th,
.p8d .vd-fuel td {
  border: 1px solid var(--border-1);
  padding: 8px 12px;
  text-align: center;
  vertical-align: top;
}

.p8d .vd-fuel thead th {
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  white-space: nowrap;
}

.p8d .vd-fuel tbody th {
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
  white-space: nowrap;
}

.p8d .vd-fuel td.vd-fuel-dest {
  text-align: left;
  color: var(--fg-2);
  min-width: 160px;
  max-width: 240px;
}

/* Quarterly-task-cell variant: sits under the Quarterly task rows, tighter spacing. */
.p8d .vd-q-tests {
  margin-top: 4px;
}

.p8d .vd-q-tests .vd-tests th {
  padding: 0px;
}

.p8d .vd-q-tests .vd-tests td {
  padding: 0px;
}

/* ── PLACEHOLDER (deferred gap widgets) ─────────────────────────── */
.p8d .p8d-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  color: var(--fg-3);
  text-align: center;
  font-size: var(--fs-xs);
}

.p8d .p8d-placeholder .mdi {
  font-size: 26px;
  opacity: .6;
}

.p8d .p8d-empty {
  color: var(--fg-3);
  font-size: var(--fs-xs);
  text-align: center;
  padding: 20px;
}

/* ════════════════════════════════════════════════════════════════
   DARK THEME — set data-theme="dark" on <html>. Only surface/text/
   border roles flip; brand blue + status colours stay identical.
   Tokens per the P8 design system (colors_and_type.css).
   ════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --ct-body-bg: #0e0e11;
  --ct-body-color: #e9e9ec;
  --ct-bg-leftbar: #000000;
  --ct-bg-topbar: #0e0e11;
  --ct-gray-100: #17171b;
  --ct-gray-200: #232329;
  --ct-progress-bg: #464650;
  --fg-1: #e9e9ec;
  --fg-2: #9a9aa2;
  --fg-3: #6b6b73;
  --bg-app: #0e0e11;
  --bg-surface: #1a1a1f;
  --bg-sunken: #232329;
  --bg-rail: #000000;
  --bg-tint: rgba(38, 90, 204, 0.22);
  --border-1: #2a2a31;
  --border-2: #3a3a42;
  --border-soft: #222228;
  --praxis-link: #6f9bff;
  --praxis-link-hover: #9bb8ff;
  --praxis-brand-soft: rgba(38, 90, 204, 0.22);
  --ct-box-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
}

/* Dark fixes for spots that were hard-coded (not token-driven). */
[data-theme="dark"] .p8d .brand-logo .p {
  color: #c8c8ce;
}

[data-theme="dark"] .p8d .btn-light {
  background: var(--bg-surface);
  color: var(--fg-1);
  border-color: var(--border-1);
}

[data-theme="dark"] .p8d .btn-light:hover {
  background: var(--bg-sunken);
}

[data-theme="dark"] .p8d .field-input,
[data-theme="dark"] .p8d .field-select {
  background: var(--bg-surface);
  color: var(--fg-1);
  border-color: var(--border-1);
}

/* Brighten translucent status-chip text for contrast on dark cards. */
[data-theme="dark"] .p8d .chip-warning,
[data-theme="dark"] .p8d .chip-expiring {
  color: #ffce5a;
}

[data-theme="dark"] .p8d .chip-success,
[data-theme="dark"] .p8d .chip-up,
[data-theme="dark"] .p8d .chip-active {
  color: #a9e84f;
}

[data-theme="dark"] .p8d .chip-critical,
[data-theme="dark"] .p8d .chip-expired,
[data-theme="dark"] .p8d .chip-open {
  color: #ff7a5e;
}

[data-theme="dark"] .p8d .chip-info,
[data-theme="dark"] .p8d .chip-progress {
  color: #6f9bff;
}

[data-theme="dark"] .p8d .chip-new {
  color: #5fb0e6;
}

[data-theme="dark"] .p8d .chip-revised {
  color: #f0a84a;
}

[data-theme="dark"] .p8d .chip-cancelled {
  color: #f06aa6;
}

[data-theme="dark"] .p8d .chip-signed {
  color: #b18ce0;
}

[data-theme="dark"] .p8d .chip-neutral {
  color: var(--fg-3);
}

[data-theme="dark"] .p8d .tag-item {
  background: var(--ct-gray-700, #707579);
  color: #f1f1f1;
}

[data-theme="dark"] .p8d .chip-issued {
  color: #c7cf45;
}

[data-theme="dark"] .p8d .grade-A {
  color: #a9e84f;
}

[data-theme="dark"] .p8d .grade-C,
[data-theme="dark"] .p8d .cii-C {
  color: #ffce5a;
}

[data-theme="dark"] .p8d .grade-D {
  color: #ff7a5e;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE CHROME — hamburger drawer, backdrop, theme toggle
   ════════════════════════════════════════════════════════════════ */
.p8d .theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg-2);
  font-size: 18px;
  padding: 4px;
  line-height: 1;
}

.p8d .theme-toggle:hover {
  color: var(--praxis-brand);
}

.p8d .hamburger {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--fg-1);
  font-size: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.p8d .nav-backdrop {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 50px;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 94;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — fluid 320px → ultrawide. ≥1200 full; 768–1200 reduce;
   ≤768 single column + drawer nav.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .p8d .kpi-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .p8d .overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .p8d .vessel-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .p8d .content-grid {
    grid-template-columns: 1fr;
  }

  .p8d .alert-queue {
    grid-column: auto;
  }

  .p8d .content-row,
  .p8d .content-row-3 {
    grid-template-columns: 1fr 1fr !important;
  }

  .p8d .task-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .p8d .kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .p8d .overview-grid,
  .p8d .vessel-grid,
  .p8d .content-row,
  .p8d .content-row-3 {
    grid-template-columns: 1fr !important;
  }

  .p8d .task-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .p8d .page-title,
  .p8d .page-title-sm {
    font-size: 2rem;
  }

  .p8d .main {
    margin-left: 0;
    padding: 16px 14px 48px;
  }

  /* sidebar rail → slide-in drawer */
  .p8d .sidebar {
    width: 220px;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.3);
    z-index: 110;
  }

  .p8d .sidebar:hover {
    width: 220px;
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.3);
  }

  .p8d .sidebar.open {
    transform: translateX(0);
  }

  /* show labels + section text inside the open drawer */
  .p8d .sidebar:not(:hover) .sidebar-item {
    font-size: var(--fs-sm);
  }

  .p8d .sidebar:not(:hover) .sidebar-section {
    color: var(--fg-3);
  }

  .p8d .sidebar:not(:hover) .sidebar-section::before {
    display: none;
  }

  /* collapsible groups behave normally inside the drawer */
  .p8d .sidebar:not(:hover) .sidebar-grouplbl,
  .p8d .sidebar:not(:hover) .sidebar-caret {
    font-size: var(--fs-sm);
    width: auto;
  }

  .p8d .sidebar:not(:hover) .sidebar-caret {
    font-size: 16px;
  }

  .p8d .sidebar:not(:hover) .sidebar-group.open>.sidebar-subnav {
    display: block !important;
  }

  .p8d .topbar .hamburger {
    display: inline-flex;
  }

  .p8d .nav-backdrop.show {
    display: block;
  }

  /* user pill → avatar only; reclaim topbar width */
  .p8d .topbar-user {
    display: none;
  }

  .p8d .crumb {
    display: none;
  }

  /* wide tables scroll horizontally inside their cards */
  .p8d .card {
    overflow-x: auto;
  }
}

/* Certificate thumbnail hover preview (ported from P8.css for the lean shell) */
.p8d .certificate-thumb-container {
  position: relative;
  display: inline-block;
}

.p8d .certificate-thumb-container .large-preview {
  display: none;
  position: fixed;
  top: 50%;
  right: 35%;
  transform: translate(35%, -50%);
  width: 500px;
  max-height: 95vh;
  z-index: 9999;
  background: #fff;
  border: 1px solid var(--border-1, #ccc);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  padding: 5px;
  overflow: hidden;
}

.p8d .certificate-thumb-container:hover .large-preview {
  display: block;
}

.p8d .certificate-thumb-container .large-preview img {
  width: 100%;
  height: auto;
  display: block;
}

/* ════════════════════════════════════════════════════════════════
   P8-DESIGN UTILITIES — appended from the p8-design skill
   (spacing + text + badge component). Tokens added to :root above.
   ════════════════════════════════════════════════════════════════ */

/* ==================================================================
 * P8-design — SPACING UTILITIES
 * A faithful replication of the Bootstrap 5 (v5.0) spacing utilities.
 * https://getbootstrap.com/docs/5.0/utilities/spacing/
 *
 * Notation:  {property}{sides}-{size}      (xs, all breakpoints)
 *            {property}{sides}-{bp}-{size}  (sm | md | lg | xl | xxl)
 *   property : m (margin) | p (padding)
 *   sides    : t b s(start/left) e(end/right) x(l+r) y(t+b) | blank(all 4)
 *   size     : 0 | 1 | 2 | 3 | 4 | 5 | auto(margin only)
 *              0=0  1=.25rem  2=.5rem  3=1rem  4=1.5rem  5=3rem
 *   gap-{size} / gap-{bp}-{size} for display:grid containers (sizes 0–5)
 *
 * Values reference P8's --space-* tokens, which carry the BS5 default
 * $spacers scale verbatim ($spacer = 1rem). All rules use !important to
 * match Bootstrap. Negative margins are OMITTED — BS5 ships them disabled
 * ($enable-negative-margins: false); see README to opt in.
 * Breakpoints match BS5: sm 576 / md 768 / lg 992 / xl 1200 / xxl 1400.
 * ================================================================== */

/* ---- xs / all breakpoints ---- */
.m-0 {
  margin: var(--space-0) !important;
}

.m-1 {
  margin: var(--space-1) !important;
}

.m-2 {
  margin: var(--space-2) !important;
}

.m-3 {
  margin: var(--space-3) !important;
}

.m-4 {
  margin: var(--space-4) !important;
}

.m-5 {
  margin: var(--space-5) !important;
}

.m-auto {
  margin: auto !important;
}

.mt-0 {
  margin-top: var(--space-0) !important;
}

.mt-1 {
  margin-top: var(--space-1) !important;
}

.mt-2 {
  margin-top: var(--space-2) !important;
}

.mt-3 {
  margin-top: var(--space-3) !important;
}

.mt-4 {
  margin-top: var(--space-4) !important;
}

.mt-5 {
  margin-top: var(--space-5) !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mb-0 {
  margin-bottom: var(--space-0) !important;
}

.mb-1 {
  margin-bottom: var(--space-1) !important;
}

.mb-2 {
  margin-bottom: var(--space-2) !important;
}

.mb-3 {
  margin-bottom: var(--space-3) !important;
}

.mb-4 {
  margin-bottom: var(--space-4) !important;
}

.mb-5 {
  margin-bottom: var(--space-5) !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: var(--space-0) !important;
}

.ms-1 {
  margin-left: var(--space-1) !important;
}

.ms-2 {
  margin-left: var(--space-2) !important;
}

.ms-3 {
  margin-left: var(--space-3) !important;
}

.ms-4 {
  margin-left: var(--space-4) !important;
}

.ms-5 {
  margin-left: var(--space-5) !important;
}

.ms-auto {
  margin-left: auto !important;
}

.me-0 {
  margin-right: var(--space-0) !important;
}

.me-1 {
  margin-right: var(--space-1) !important;
}

.me-2 {
  margin-right: var(--space-2) !important;
}

.me-3 {
  margin-right: var(--space-3) !important;
}

.me-4 {
  margin-right: var(--space-4) !important;
}

.me-5 {
  margin-right: var(--space-5) !important;
}

.me-auto {
  margin-right: auto !important;
}

.mx-0 {
  margin-left: var(--space-0) !important;
  margin-right: var(--space-0) !important;
}

.mx-1 {
  margin-left: var(--space-1) !important;
  margin-right: var(--space-1) !important;
}

.mx-2 {
  margin-left: var(--space-2) !important;
  margin-right: var(--space-2) !important;
}

.mx-3 {
  margin-left: var(--space-3) !important;
  margin-right: var(--space-3) !important;
}

.mx-4 {
  margin-left: var(--space-4) !important;
  margin-right: var(--space-4) !important;
}

.mx-5 {
  margin-left: var(--space-5) !important;
  margin-right: var(--space-5) !important;
}

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

.my-0 {
  margin-top: var(--space-0) !important;
  margin-bottom: var(--space-0) !important;
}

.my-1 {
  margin-top: var(--space-1) !important;
  margin-bottom: var(--space-1) !important;
}

.my-2 {
  margin-top: var(--space-2) !important;
  margin-bottom: var(--space-2) !important;
}

.my-3 {
  margin-top: var(--space-3) !important;
  margin-bottom: var(--space-3) !important;
}

.my-4 {
  margin-top: var(--space-4) !important;
  margin-bottom: var(--space-4) !important;
}

.my-5 {
  margin-top: var(--space-5) !important;
  margin-bottom: var(--space-5) !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.p-0 {
  padding: var(--space-0) !important;
}

.p-1 {
  padding: var(--space-1) !important;
}

.p-2 {
  padding: var(--space-2) !important;
}

.p-3 {
  padding: var(--space-3) !important;
}

.p-4 {
  padding: var(--space-4) !important;
}

.p-5 {
  padding: var(--space-5) !important;
}

.pt-0 {
  padding-top: var(--space-0) !important;
}

.pt-1 {
  padding-top: var(--space-1) !important;
}

.pt-2 {
  padding-top: var(--space-2) !important;
}

.pt-3 {
  padding-top: var(--space-3) !important;
}

.pt-4 {
  padding-top: var(--space-4) !important;
}

.pt-5 {
  padding-top: var(--space-5) !important;
}

.pb-0 {
  padding-bottom: var(--space-0) !important;
}

.pb-1 {
  padding-bottom: var(--space-1) !important;
}

.pb-2 {
  padding-bottom: var(--space-2) !important;
}

.pb-3 {
  padding-bottom: var(--space-3) !important;
}

.pb-4 {
  padding-bottom: var(--space-4) !important;
}

.pb-5 {
  padding-bottom: var(--space-5) !important;
}

.ps-0 {
  padding-left: var(--space-0) !important;
}

.ps-1 {
  padding-left: var(--space-1) !important;
}

.ps-2 {
  padding-left: var(--space-2) !important;
}

.ps-3 {
  padding-left: var(--space-3) !important;
}

.ps-4 {
  padding-left: var(--space-4) !important;
}

.ps-5 {
  padding-left: var(--space-5) !important;
}

.pe-0 {
  padding-right: var(--space-0) !important;
}

.pe-1 {
  padding-right: var(--space-1) !important;
}

.pe-2 {
  padding-right: var(--space-2) !important;
}

.pe-3 {
  padding-right: var(--space-3) !important;
}

.pe-4 {
  padding-right: var(--space-4) !important;
}

.pe-5 {
  padding-right: var(--space-5) !important;
}

.px-0 {
  padding-left: var(--space-0) !important;
  padding-right: var(--space-0) !important;
}

.px-1 {
  padding-left: var(--space-1) !important;
  padding-right: var(--space-1) !important;
}

.px-2 {
  padding-left: var(--space-2) !important;
  padding-right: var(--space-2) !important;
}

.px-3 {
  padding-left: var(--space-3) !important;
  padding-right: var(--space-3) !important;
}

.px-4 {
  padding-left: var(--space-4) !important;
  padding-right: var(--space-4) !important;
}

.px-5 {
  padding-left: var(--space-5) !important;
  padding-right: var(--space-5) !important;
}

.py-0 {
  padding-top: var(--space-0) !important;
  padding-bottom: var(--space-0) !important;
}

.py-1 {
  padding-top: var(--space-1) !important;
  padding-bottom: var(--space-1) !important;
}

.py-2 {
  padding-top: var(--space-2) !important;
  padding-bottom: var(--space-2) !important;
}

.py-3 {
  padding-top: var(--space-3) !important;
  padding-bottom: var(--space-3) !important;
}

.py-4 {
  padding-top: var(--space-4) !important;
  padding-bottom: var(--space-4) !important;
}

.py-5 {
  padding-top: var(--space-5) !important;
  padding-bottom: var(--space-5) !important;
}

.gap-0 {
  gap: var(--space-0) !important;
}

.gap-1 {
  gap: var(--space-1) !important;
}

.gap-2 {
  gap: var(--space-2) !important;
}

.gap-3 {
  gap: var(--space-3) !important;
}

.gap-4 {
  gap: var(--space-4) !important;
}

.gap-5 {
  gap: var(--space-5) !important;
}

@media (min-width: 576px) {
  .m-sm-0 {
    margin: var(--space-0) !important;
  }

  .m-sm-1 {
    margin: var(--space-1) !important;
  }

  .m-sm-2 {
    margin: var(--space-2) !important;
  }

  .m-sm-3 {
    margin: var(--space-3) !important;
  }

  .m-sm-4 {
    margin: var(--space-4) !important;
  }

  .m-sm-5 {
    margin: var(--space-5) !important;
  }

  .m-sm-auto {
    margin: auto !important;
  }

  .mt-sm-0 {
    margin-top: var(--space-0) !important;
  }

  .mt-sm-1 {
    margin-top: var(--space-1) !important;
  }

  .mt-sm-2 {
    margin-top: var(--space-2) !important;
  }

  .mt-sm-3 {
    margin-top: var(--space-3) !important;
  }

  .mt-sm-4 {
    margin-top: var(--space-4) !important;
  }

  .mt-sm-5 {
    margin-top: var(--space-5) !important;
  }

  .mt-sm-auto {
    margin-top: auto !important;
  }

  .mb-sm-0 {
    margin-bottom: var(--space-0) !important;
  }

  .mb-sm-1 {
    margin-bottom: var(--space-1) !important;
  }

  .mb-sm-2 {
    margin-bottom: var(--space-2) !important;
  }

  .mb-sm-3 {
    margin-bottom: var(--space-3) !important;
  }

  .mb-sm-4 {
    margin-bottom: var(--space-4) !important;
  }

  .mb-sm-5 {
    margin-bottom: var(--space-5) !important;
  }

  .mb-sm-auto {
    margin-bottom: auto !important;
  }

  .ms-sm-0 {
    margin-left: var(--space-0) !important;
  }

  .ms-sm-1 {
    margin-left: var(--space-1) !important;
  }

  .ms-sm-2 {
    margin-left: var(--space-2) !important;
  }

  .ms-sm-3 {
    margin-left: var(--space-3) !important;
  }

  .ms-sm-4 {
    margin-left: var(--space-4) !important;
  }

  .ms-sm-5 {
    margin-left: var(--space-5) !important;
  }

  .ms-sm-auto {
    margin-left: auto !important;
  }

  .me-sm-0 {
    margin-right: var(--space-0) !important;
  }

  .me-sm-1 {
    margin-right: var(--space-1) !important;
  }

  .me-sm-2 {
    margin-right: var(--space-2) !important;
  }

  .me-sm-3 {
    margin-right: var(--space-3) !important;
  }

  .me-sm-4 {
    margin-right: var(--space-4) !important;
  }

  .me-sm-5 {
    margin-right: var(--space-5) !important;
  }

  .me-sm-auto {
    margin-right: auto !important;
  }

  .mx-sm-0 {
    margin-left: var(--space-0) !important;
    margin-right: var(--space-0) !important;
  }

  .mx-sm-1 {
    margin-left: var(--space-1) !important;
    margin-right: var(--space-1) !important;
  }

  .mx-sm-2 {
    margin-left: var(--space-2) !important;
    margin-right: var(--space-2) !important;
  }

  .mx-sm-3 {
    margin-left: var(--space-3) !important;
    margin-right: var(--space-3) !important;
  }

  .mx-sm-4 {
    margin-left: var(--space-4) !important;
    margin-right: var(--space-4) !important;
  }

  .mx-sm-5 {
    margin-left: var(--space-5) !important;
    margin-right: var(--space-5) !important;
  }

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

  .my-sm-0 {
    margin-top: var(--space-0) !important;
    margin-bottom: var(--space-0) !important;
  }

  .my-sm-1 {
    margin-top: var(--space-1) !important;
    margin-bottom: var(--space-1) !important;
  }

  .my-sm-2 {
    margin-top: var(--space-2) !important;
    margin-bottom: var(--space-2) !important;
  }

  .my-sm-3 {
    margin-top: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
  }

  .my-sm-4 {
    margin-top: var(--space-4) !important;
    margin-bottom: var(--space-4) !important;
  }

  .my-sm-5 {
    margin-top: var(--space-5) !important;
    margin-bottom: var(--space-5) !important;
  }

  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .p-sm-0 {
    padding: var(--space-0) !important;
  }

  .p-sm-1 {
    padding: var(--space-1) !important;
  }

  .p-sm-2 {
    padding: var(--space-2) !important;
  }

  .p-sm-3 {
    padding: var(--space-3) !important;
  }

  .p-sm-4 {
    padding: var(--space-4) !important;
  }

  .p-sm-5 {
    padding: var(--space-5) !important;
  }

  .pt-sm-0 {
    padding-top: var(--space-0) !important;
  }

  .pt-sm-1 {
    padding-top: var(--space-1) !important;
  }

  .pt-sm-2 {
    padding-top: var(--space-2) !important;
  }

  .pt-sm-3 {
    padding-top: var(--space-3) !important;
  }

  .pt-sm-4 {
    padding-top: var(--space-4) !important;
  }

  .pt-sm-5 {
    padding-top: var(--space-5) !important;
  }

  .pb-sm-0 {
    padding-bottom: var(--space-0) !important;
  }

  .pb-sm-1 {
    padding-bottom: var(--space-1) !important;
  }

  .pb-sm-2 {
    padding-bottom: var(--space-2) !important;
  }

  .pb-sm-3 {
    padding-bottom: var(--space-3) !important;
  }

  .pb-sm-4 {
    padding-bottom: var(--space-4) !important;
  }

  .pb-sm-5 {
    padding-bottom: var(--space-5) !important;
  }

  .ps-sm-0 {
    padding-left: var(--space-0) !important;
  }

  .ps-sm-1 {
    padding-left: var(--space-1) !important;
  }

  .ps-sm-2 {
    padding-left: var(--space-2) !important;
  }

  .ps-sm-3 {
    padding-left: var(--space-3) !important;
  }

  .ps-sm-4 {
    padding-left: var(--space-4) !important;
  }

  .ps-sm-5 {
    padding-left: var(--space-5) !important;
  }

  .pe-sm-0 {
    padding-right: var(--space-0) !important;
  }

  .pe-sm-1 {
    padding-right: var(--space-1) !important;
  }

  .pe-sm-2 {
    padding-right: var(--space-2) !important;
  }

  .pe-sm-3 {
    padding-right: var(--space-3) !important;
  }

  .pe-sm-4 {
    padding-right: var(--space-4) !important;
  }

  .pe-sm-5 {
    padding-right: var(--space-5) !important;
  }

  .px-sm-0 {
    padding-left: var(--space-0) !important;
    padding-right: var(--space-0) !important;
  }

  .px-sm-1 {
    padding-left: var(--space-1) !important;
    padding-right: var(--space-1) !important;
  }

  .px-sm-2 {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
  }

  .px-sm-3 {
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
  }

  .px-sm-4 {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }

  .px-sm-5 {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
  }

  .py-sm-0 {
    padding-top: var(--space-0) !important;
    padding-bottom: var(--space-0) !important;
  }

  .py-sm-1 {
    padding-top: var(--space-1) !important;
    padding-bottom: var(--space-1) !important;
  }

  .py-sm-2 {
    padding-top: var(--space-2) !important;
    padding-bottom: var(--space-2) !important;
  }

  .py-sm-3 {
    padding-top: var(--space-3) !important;
    padding-bottom: var(--space-3) !important;
  }

  .py-sm-4 {
    padding-top: var(--space-4) !important;
    padding-bottom: var(--space-4) !important;
  }

  .py-sm-5 {
    padding-top: var(--space-5) !important;
    padding-bottom: var(--space-5) !important;
  }

  .gap-sm-0 {
    gap: var(--space-0) !important;
  }

  .gap-sm-1 {
    gap: var(--space-1) !important;
  }

  .gap-sm-2 {
    gap: var(--space-2) !important;
  }

  .gap-sm-3 {
    gap: var(--space-3) !important;
  }

  .gap-sm-4 {
    gap: var(--space-4) !important;
  }

  .gap-sm-5 {
    gap: var(--space-5) !important;
  }
}

@media (min-width: 768px) {
  .m-md-0 {
    margin: var(--space-0) !important;
  }

  .m-md-1 {
    margin: var(--space-1) !important;
  }

  .m-md-2 {
    margin: var(--space-2) !important;
  }

  .m-md-3 {
    margin: var(--space-3) !important;
  }

  .m-md-4 {
    margin: var(--space-4) !important;
  }

  .m-md-5 {
    margin: var(--space-5) !important;
  }

  .m-md-auto {
    margin: auto !important;
  }

  .mt-md-0 {
    margin-top: var(--space-0) !important;
  }

  .mt-md-1 {
    margin-top: var(--space-1) !important;
  }

  .mt-md-2 {
    margin-top: var(--space-2) !important;
  }

  .mt-md-3 {
    margin-top: var(--space-3) !important;
  }

  .mt-md-4 {
    margin-top: var(--space-4) !important;
  }

  .mt-md-5 {
    margin-top: var(--space-5) !important;
  }

  .mt-md-auto {
    margin-top: auto !important;
  }

  .mb-md-0 {
    margin-bottom: var(--space-0) !important;
  }

  .mb-md-1 {
    margin-bottom: var(--space-1) !important;
  }

  .mb-md-2 {
    margin-bottom: var(--space-2) !important;
  }

  .mb-md-3 {
    margin-bottom: var(--space-3) !important;
  }

  .mb-md-4 {
    margin-bottom: var(--space-4) !important;
  }

  .mb-md-5 {
    margin-bottom: var(--space-5) !important;
  }

  .mb-md-auto {
    margin-bottom: auto !important;
  }

  .ms-md-0 {
    margin-left: var(--space-0) !important;
  }

  .ms-md-1 {
    margin-left: var(--space-1) !important;
  }

  .ms-md-2 {
    margin-left: var(--space-2) !important;
  }

  .ms-md-3 {
    margin-left: var(--space-3) !important;
  }

  .ms-md-4 {
    margin-left: var(--space-4) !important;
  }

  .ms-md-5 {
    margin-left: var(--space-5) !important;
  }

  .ms-md-auto {
    margin-left: auto !important;
  }

  .me-md-0 {
    margin-right: var(--space-0) !important;
  }

  .me-md-1 {
    margin-right: var(--space-1) !important;
  }

  .me-md-2 {
    margin-right: var(--space-2) !important;
  }

  .me-md-3 {
    margin-right: var(--space-3) !important;
  }

  .me-md-4 {
    margin-right: var(--space-4) !important;
  }

  .me-md-5 {
    margin-right: var(--space-5) !important;
  }

  .me-md-auto {
    margin-right: auto !important;
  }

  .mx-md-0 {
    margin-left: var(--space-0) !important;
    margin-right: var(--space-0) !important;
  }

  .mx-md-1 {
    margin-left: var(--space-1) !important;
    margin-right: var(--space-1) !important;
  }

  .mx-md-2 {
    margin-left: var(--space-2) !important;
    margin-right: var(--space-2) !important;
  }

  .mx-md-3 {
    margin-left: var(--space-3) !important;
    margin-right: var(--space-3) !important;
  }

  .mx-md-4 {
    margin-left: var(--space-4) !important;
    margin-right: var(--space-4) !important;
  }

  .mx-md-5 {
    margin-left: var(--space-5) !important;
    margin-right: var(--space-5) !important;
  }

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

  .my-md-0 {
    margin-top: var(--space-0) !important;
    margin-bottom: var(--space-0) !important;
  }

  .my-md-1 {
    margin-top: var(--space-1) !important;
    margin-bottom: var(--space-1) !important;
  }

  .my-md-2 {
    margin-top: var(--space-2) !important;
    margin-bottom: var(--space-2) !important;
  }

  .my-md-3 {
    margin-top: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
  }

  .my-md-4 {
    margin-top: var(--space-4) !important;
    margin-bottom: var(--space-4) !important;
  }

  .my-md-5 {
    margin-top: var(--space-5) !important;
    margin-bottom: var(--space-5) !important;
  }

  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .p-md-0 {
    padding: var(--space-0) !important;
  }

  .p-md-1 {
    padding: var(--space-1) !important;
  }

  .p-md-2 {
    padding: var(--space-2) !important;
  }

  .p-md-3 {
    padding: var(--space-3) !important;
  }

  .p-md-4 {
    padding: var(--space-4) !important;
  }

  .p-md-5 {
    padding: var(--space-5) !important;
  }

  .pt-md-0 {
    padding-top: var(--space-0) !important;
  }

  .pt-md-1 {
    padding-top: var(--space-1) !important;
  }

  .pt-md-2 {
    padding-top: var(--space-2) !important;
  }

  .pt-md-3 {
    padding-top: var(--space-3) !important;
  }

  .pt-md-4 {
    padding-top: var(--space-4) !important;
  }

  .pt-md-5 {
    padding-top: var(--space-5) !important;
  }

  .pb-md-0 {
    padding-bottom: var(--space-0) !important;
  }

  .pb-md-1 {
    padding-bottom: var(--space-1) !important;
  }

  .pb-md-2 {
    padding-bottom: var(--space-2) !important;
  }

  .pb-md-3 {
    padding-bottom: var(--space-3) !important;
  }

  .pb-md-4 {
    padding-bottom: var(--space-4) !important;
  }

  .pb-md-5 {
    padding-bottom: var(--space-5) !important;
  }

  .ps-md-0 {
    padding-left: var(--space-0) !important;
  }

  .ps-md-1 {
    padding-left: var(--space-1) !important;
  }

  .ps-md-2 {
    padding-left: var(--space-2) !important;
  }

  .ps-md-3 {
    padding-left: var(--space-3) !important;
  }

  .ps-md-4 {
    padding-left: var(--space-4) !important;
  }

  .ps-md-5 {
    padding-left: var(--space-5) !important;
  }

  .pe-md-0 {
    padding-right: var(--space-0) !important;
  }

  .pe-md-1 {
    padding-right: var(--space-1) !important;
  }

  .pe-md-2 {
    padding-right: var(--space-2) !important;
  }

  .pe-md-3 {
    padding-right: var(--space-3) !important;
  }

  .pe-md-4 {
    padding-right: var(--space-4) !important;
  }

  .pe-md-5 {
    padding-right: var(--space-5) !important;
  }

  .px-md-0 {
    padding-left: var(--space-0) !important;
    padding-right: var(--space-0) !important;
  }

  .px-md-1 {
    padding-left: var(--space-1) !important;
    padding-right: var(--space-1) !important;
  }

  .px-md-2 {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
  }

  .px-md-3 {
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
  }

  .px-md-4 {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }

  .px-md-5 {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
  }

  .py-md-0 {
    padding-top: var(--space-0) !important;
    padding-bottom: var(--space-0) !important;
  }

  .py-md-1 {
    padding-top: var(--space-1) !important;
    padding-bottom: var(--space-1) !important;
  }

  .py-md-2 {
    padding-top: var(--space-2) !important;
    padding-bottom: var(--space-2) !important;
  }

  .py-md-3 {
    padding-top: var(--space-3) !important;
    padding-bottom: var(--space-3) !important;
  }

  .py-md-4 {
    padding-top: var(--space-4) !important;
    padding-bottom: var(--space-4) !important;
  }

  .py-md-5 {
    padding-top: var(--space-5) !important;
    padding-bottom: var(--space-5) !important;
  }

  .gap-md-0 {
    gap: var(--space-0) !important;
  }

  .gap-md-1 {
    gap: var(--space-1) !important;
  }

  .gap-md-2 {
    gap: var(--space-2) !important;
  }

  .gap-md-3 {
    gap: var(--space-3) !important;
  }

  .gap-md-4 {
    gap: var(--space-4) !important;
  }

  .gap-md-5 {
    gap: var(--space-5) !important;
  }
}

@media (min-width: 992px) {
  .m-lg-0 {
    margin: var(--space-0) !important;
  }

  .m-lg-1 {
    margin: var(--space-1) !important;
  }

  .m-lg-2 {
    margin: var(--space-2) !important;
  }

  .m-lg-3 {
    margin: var(--space-3) !important;
  }

  .m-lg-4 {
    margin: var(--space-4) !important;
  }

  .m-lg-5 {
    margin: var(--space-5) !important;
  }

  .m-lg-auto {
    margin: auto !important;
  }

  .mt-lg-0 {
    margin-top: var(--space-0) !important;
  }

  .mt-lg-1 {
    margin-top: var(--space-1) !important;
  }

  .mt-lg-2 {
    margin-top: var(--space-2) !important;
  }

  .mt-lg-3 {
    margin-top: var(--space-3) !important;
  }

  .mt-lg-4 {
    margin-top: var(--space-4) !important;
  }

  .mt-lg-5 {
    margin-top: var(--space-5) !important;
  }

  .mt-lg-auto {
    margin-top: auto !important;
  }

  .mb-lg-0 {
    margin-bottom: var(--space-0) !important;
  }

  .mb-lg-1 {
    margin-bottom: var(--space-1) !important;
  }

  .mb-lg-2 {
    margin-bottom: var(--space-2) !important;
  }

  .mb-lg-3 {
    margin-bottom: var(--space-3) !important;
  }

  .mb-lg-4 {
    margin-bottom: var(--space-4) !important;
  }

  .mb-lg-5 {
    margin-bottom: var(--space-5) !important;
  }

  .mb-lg-auto {
    margin-bottom: auto !important;
  }

  .ms-lg-0 {
    margin-left: var(--space-0) !important;
  }

  .ms-lg-1 {
    margin-left: var(--space-1) !important;
  }

  .ms-lg-2 {
    margin-left: var(--space-2) !important;
  }

  .ms-lg-3 {
    margin-left: var(--space-3) !important;
  }

  .ms-lg-4 {
    margin-left: var(--space-4) !important;
  }

  .ms-lg-5 {
    margin-left: var(--space-5) !important;
  }

  .ms-lg-auto {
    margin-left: auto !important;
  }

  .me-lg-0 {
    margin-right: var(--space-0) !important;
  }

  .me-lg-1 {
    margin-right: var(--space-1) !important;
  }

  .me-lg-2 {
    margin-right: var(--space-2) !important;
  }

  .me-lg-3 {
    margin-right: var(--space-3) !important;
  }

  .me-lg-4 {
    margin-right: var(--space-4) !important;
  }

  .me-lg-5 {
    margin-right: var(--space-5) !important;
  }

  .me-lg-auto {
    margin-right: auto !important;
  }

  .mx-lg-0 {
    margin-left: var(--space-0) !important;
    margin-right: var(--space-0) !important;
  }

  .mx-lg-1 {
    margin-left: var(--space-1) !important;
    margin-right: var(--space-1) !important;
  }

  .mx-lg-2 {
    margin-left: var(--space-2) !important;
    margin-right: var(--space-2) !important;
  }

  .mx-lg-3 {
    margin-left: var(--space-3) !important;
    margin-right: var(--space-3) !important;
  }

  .mx-lg-4 {
    margin-left: var(--space-4) !important;
    margin-right: var(--space-4) !important;
  }

  .mx-lg-5 {
    margin-left: var(--space-5) !important;
    margin-right: var(--space-5) !important;
  }

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

  .my-lg-0 {
    margin-top: var(--space-0) !important;
    margin-bottom: var(--space-0) !important;
  }

  .my-lg-1 {
    margin-top: var(--space-1) !important;
    margin-bottom: var(--space-1) !important;
  }

  .my-lg-2 {
    margin-top: var(--space-2) !important;
    margin-bottom: var(--space-2) !important;
  }

  .my-lg-3 {
    margin-top: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
  }

  .my-lg-4 {
    margin-top: var(--space-4) !important;
    margin-bottom: var(--space-4) !important;
  }

  .my-lg-5 {
    margin-top: var(--space-5) !important;
    margin-bottom: var(--space-5) !important;
  }

  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .p-lg-0 {
    padding: var(--space-0) !important;
  }

  .p-lg-1 {
    padding: var(--space-1) !important;
  }

  .p-lg-2 {
    padding: var(--space-2) !important;
  }

  .p-lg-3 {
    padding: var(--space-3) !important;
  }

  .p-lg-4 {
    padding: var(--space-4) !important;
  }

  .p-lg-5 {
    padding: var(--space-5) !important;
  }

  .pt-lg-0 {
    padding-top: var(--space-0) !important;
  }

  .pt-lg-1 {
    padding-top: var(--space-1) !important;
  }

  .pt-lg-2 {
    padding-top: var(--space-2) !important;
  }

  .pt-lg-3 {
    padding-top: var(--space-3) !important;
  }

  .pt-lg-4 {
    padding-top: var(--space-4) !important;
  }

  .pt-lg-5 {
    padding-top: var(--space-5) !important;
  }

  .pb-lg-0 {
    padding-bottom: var(--space-0) !important;
  }

  .pb-lg-1 {
    padding-bottom: var(--space-1) !important;
  }

  .pb-lg-2 {
    padding-bottom: var(--space-2) !important;
  }

  .pb-lg-3 {
    padding-bottom: var(--space-3) !important;
  }

  .pb-lg-4 {
    padding-bottom: var(--space-4) !important;
  }

  .pb-lg-5 {
    padding-bottom: var(--space-5) !important;
  }

  .ps-lg-0 {
    padding-left: var(--space-0) !important;
  }

  .ps-lg-1 {
    padding-left: var(--space-1) !important;
  }

  .ps-lg-2 {
    padding-left: var(--space-2) !important;
  }

  .ps-lg-3 {
    padding-left: var(--space-3) !important;
  }

  .ps-lg-4 {
    padding-left: var(--space-4) !important;
  }

  .ps-lg-5 {
    padding-left: var(--space-5) !important;
  }

  .pe-lg-0 {
    padding-right: var(--space-0) !important;
  }

  .pe-lg-1 {
    padding-right: var(--space-1) !important;
  }

  .pe-lg-2 {
    padding-right: var(--space-2) !important;
  }

  .pe-lg-3 {
    padding-right: var(--space-3) !important;
  }

  .pe-lg-4 {
    padding-right: var(--space-4) !important;
  }

  .pe-lg-5 {
    padding-right: var(--space-5) !important;
  }

  .px-lg-0 {
    padding-left: var(--space-0) !important;
    padding-right: var(--space-0) !important;
  }

  .px-lg-1 {
    padding-left: var(--space-1) !important;
    padding-right: var(--space-1) !important;
  }

  .px-lg-2 {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
  }

  .px-lg-3 {
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
  }

  .px-lg-4 {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }

  .px-lg-5 {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
  }

  .py-lg-0 {
    padding-top: var(--space-0) !important;
    padding-bottom: var(--space-0) !important;
  }

  .py-lg-1 {
    padding-top: var(--space-1) !important;
    padding-bottom: var(--space-1) !important;
  }

  .py-lg-2 {
    padding-top: var(--space-2) !important;
    padding-bottom: var(--space-2) !important;
  }

  .py-lg-3 {
    padding-top: var(--space-3) !important;
    padding-bottom: var(--space-3) !important;
  }

  .py-lg-4 {
    padding-top: var(--space-4) !important;
    padding-bottom: var(--space-4) !important;
  }

  .py-lg-5 {
    padding-top: var(--space-5) !important;
    padding-bottom: var(--space-5) !important;
  }

  .gap-lg-0 {
    gap: var(--space-0) !important;
  }

  .gap-lg-1 {
    gap: var(--space-1) !important;
  }

  .gap-lg-2 {
    gap: var(--space-2) !important;
  }

  .gap-lg-3 {
    gap: var(--space-3) !important;
  }

  .gap-lg-4 {
    gap: var(--space-4) !important;
  }

  .gap-lg-5 {
    gap: var(--space-5) !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-0 {
    margin: var(--space-0) !important;
  }

  .m-xl-1 {
    margin: var(--space-1) !important;
  }

  .m-xl-2 {
    margin: var(--space-2) !important;
  }

  .m-xl-3 {
    margin: var(--space-3) !important;
  }

  .m-xl-4 {
    margin: var(--space-4) !important;
  }

  .m-xl-5 {
    margin: var(--space-5) !important;
  }

  .m-xl-auto {
    margin: auto !important;
  }

  .mt-xl-0 {
    margin-top: var(--space-0) !important;
  }

  .mt-xl-1 {
    margin-top: var(--space-1) !important;
  }

  .mt-xl-2 {
    margin-top: var(--space-2) !important;
  }

  .mt-xl-3 {
    margin-top: var(--space-3) !important;
  }

  .mt-xl-4 {
    margin-top: var(--space-4) !important;
  }

  .mt-xl-5 {
    margin-top: var(--space-5) !important;
  }

  .mt-xl-auto {
    margin-top: auto !important;
  }

  .mb-xl-0 {
    margin-bottom: var(--space-0) !important;
  }

  .mb-xl-1 {
    margin-bottom: var(--space-1) !important;
  }

  .mb-xl-2 {
    margin-bottom: var(--space-2) !important;
  }

  .mb-xl-3 {
    margin-bottom: var(--space-3) !important;
  }

  .mb-xl-4 {
    margin-bottom: var(--space-4) !important;
  }

  .mb-xl-5 {
    margin-bottom: var(--space-5) !important;
  }

  .mb-xl-auto {
    margin-bottom: auto !important;
  }

  .ms-xl-0 {
    margin-left: var(--space-0) !important;
  }

  .ms-xl-1 {
    margin-left: var(--space-1) !important;
  }

  .ms-xl-2 {
    margin-left: var(--space-2) !important;
  }

  .ms-xl-3 {
    margin-left: var(--space-3) !important;
  }

  .ms-xl-4 {
    margin-left: var(--space-4) !important;
  }

  .ms-xl-5 {
    margin-left: var(--space-5) !important;
  }

  .ms-xl-auto {
    margin-left: auto !important;
  }

  .me-xl-0 {
    margin-right: var(--space-0) !important;
  }

  .me-xl-1 {
    margin-right: var(--space-1) !important;
  }

  .me-xl-2 {
    margin-right: var(--space-2) !important;
  }

  .me-xl-3 {
    margin-right: var(--space-3) !important;
  }

  .me-xl-4 {
    margin-right: var(--space-4) !important;
  }

  .me-xl-5 {
    margin-right: var(--space-5) !important;
  }

  .me-xl-auto {
    margin-right: auto !important;
  }

  .mx-xl-0 {
    margin-left: var(--space-0) !important;
    margin-right: var(--space-0) !important;
  }

  .mx-xl-1 {
    margin-left: var(--space-1) !important;
    margin-right: var(--space-1) !important;
  }

  .mx-xl-2 {
    margin-left: var(--space-2) !important;
    margin-right: var(--space-2) !important;
  }

  .mx-xl-3 {
    margin-left: var(--space-3) !important;
    margin-right: var(--space-3) !important;
  }

  .mx-xl-4 {
    margin-left: var(--space-4) !important;
    margin-right: var(--space-4) !important;
  }

  .mx-xl-5 {
    margin-left: var(--space-5) !important;
    margin-right: var(--space-5) !important;
  }

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

  .my-xl-0 {
    margin-top: var(--space-0) !important;
    margin-bottom: var(--space-0) !important;
  }

  .my-xl-1 {
    margin-top: var(--space-1) !important;
    margin-bottom: var(--space-1) !important;
  }

  .my-xl-2 {
    margin-top: var(--space-2) !important;
    margin-bottom: var(--space-2) !important;
  }

  .my-xl-3 {
    margin-top: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
  }

  .my-xl-4 {
    margin-top: var(--space-4) !important;
    margin-bottom: var(--space-4) !important;
  }

  .my-xl-5 {
    margin-top: var(--space-5) !important;
    margin-bottom: var(--space-5) !important;
  }

  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .p-xl-0 {
    padding: var(--space-0) !important;
  }

  .p-xl-1 {
    padding: var(--space-1) !important;
  }

  .p-xl-2 {
    padding: var(--space-2) !important;
  }

  .p-xl-3 {
    padding: var(--space-3) !important;
  }

  .p-xl-4 {
    padding: var(--space-4) !important;
  }

  .p-xl-5 {
    padding: var(--space-5) !important;
  }

  .pt-xl-0 {
    padding-top: var(--space-0) !important;
  }

  .pt-xl-1 {
    padding-top: var(--space-1) !important;
  }

  .pt-xl-2 {
    padding-top: var(--space-2) !important;
  }

  .pt-xl-3 {
    padding-top: var(--space-3) !important;
  }

  .pt-xl-4 {
    padding-top: var(--space-4) !important;
  }

  .pt-xl-5 {
    padding-top: var(--space-5) !important;
  }

  .pb-xl-0 {
    padding-bottom: var(--space-0) !important;
  }

  .pb-xl-1 {
    padding-bottom: var(--space-1) !important;
  }

  .pb-xl-2 {
    padding-bottom: var(--space-2) !important;
  }

  .pb-xl-3 {
    padding-bottom: var(--space-3) !important;
  }

  .pb-xl-4 {
    padding-bottom: var(--space-4) !important;
  }

  .pb-xl-5 {
    padding-bottom: var(--space-5) !important;
  }

  .ps-xl-0 {
    padding-left: var(--space-0) !important;
  }

  .ps-xl-1 {
    padding-left: var(--space-1) !important;
  }

  .ps-xl-2 {
    padding-left: var(--space-2) !important;
  }

  .ps-xl-3 {
    padding-left: var(--space-3) !important;
  }

  .ps-xl-4 {
    padding-left: var(--space-4) !important;
  }

  .ps-xl-5 {
    padding-left: var(--space-5) !important;
  }

  .pe-xl-0 {
    padding-right: var(--space-0) !important;
  }

  .pe-xl-1 {
    padding-right: var(--space-1) !important;
  }

  .pe-xl-2 {
    padding-right: var(--space-2) !important;
  }

  .pe-xl-3 {
    padding-right: var(--space-3) !important;
  }

  .pe-xl-4 {
    padding-right: var(--space-4) !important;
  }

  .pe-xl-5 {
    padding-right: var(--space-5) !important;
  }

  .px-xl-0 {
    padding-left: var(--space-0) !important;
    padding-right: var(--space-0) !important;
  }

  .px-xl-1 {
    padding-left: var(--space-1) !important;
    padding-right: var(--space-1) !important;
  }

  .px-xl-2 {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
  }

  .px-xl-3 {
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
  }

  .px-xl-4 {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }

  .px-xl-5 {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
  }

  .py-xl-0 {
    padding-top: var(--space-0) !important;
    padding-bottom: var(--space-0) !important;
  }

  .py-xl-1 {
    padding-top: var(--space-1) !important;
    padding-bottom: var(--space-1) !important;
  }

  .py-xl-2 {
    padding-top: var(--space-2) !important;
    padding-bottom: var(--space-2) !important;
  }

  .py-xl-3 {
    padding-top: var(--space-3) !important;
    padding-bottom: var(--space-3) !important;
  }

  .py-xl-4 {
    padding-top: var(--space-4) !important;
    padding-bottom: var(--space-4) !important;
  }

  .py-xl-5 {
    padding-top: var(--space-5) !important;
    padding-bottom: var(--space-5) !important;
  }

  .gap-xl-0 {
    gap: var(--space-0) !important;
  }

  .gap-xl-1 {
    gap: var(--space-1) !important;
  }

  .gap-xl-2 {
    gap: var(--space-2) !important;
  }

  .gap-xl-3 {
    gap: var(--space-3) !important;
  }

  .gap-xl-4 {
    gap: var(--space-4) !important;
  }

  .gap-xl-5 {
    gap: var(--space-5) !important;
  }
}

@media (min-width: 1400px) {
  .m-xxl-0 {
    margin: var(--space-0) !important;
  }

  .m-xxl-1 {
    margin: var(--space-1) !important;
  }

  .m-xxl-2 {
    margin: var(--space-2) !important;
  }

  .m-xxl-3 {
    margin: var(--space-3) !important;
  }

  .m-xxl-4 {
    margin: var(--space-4) !important;
  }

  .m-xxl-5 {
    margin: var(--space-5) !important;
  }

  .m-xxl-auto {
    margin: auto !important;
  }

  .mt-xxl-0 {
    margin-top: var(--space-0) !important;
  }

  .mt-xxl-1 {
    margin-top: var(--space-1) !important;
  }

  .mt-xxl-2 {
    margin-top: var(--space-2) !important;
  }

  .mt-xxl-3 {
    margin-top: var(--space-3) !important;
  }

  .mt-xxl-4 {
    margin-top: var(--space-4) !important;
  }

  .mt-xxl-5 {
    margin-top: var(--space-5) !important;
  }

  .mt-xxl-auto {
    margin-top: auto !important;
  }

  .mb-xxl-0 {
    margin-bottom: var(--space-0) !important;
  }

  .mb-xxl-1 {
    margin-bottom: var(--space-1) !important;
  }

  .mb-xxl-2 {
    margin-bottom: var(--space-2) !important;
  }

  .mb-xxl-3 {
    margin-bottom: var(--space-3) !important;
  }

  .mb-xxl-4 {
    margin-bottom: var(--space-4) !important;
  }

  .mb-xxl-5 {
    margin-bottom: var(--space-5) !important;
  }

  .mb-xxl-auto {
    margin-bottom: auto !important;
  }

  .ms-xxl-0 {
    margin-left: var(--space-0) !important;
  }

  .ms-xxl-1 {
    margin-left: var(--space-1) !important;
  }

  .ms-xxl-2 {
    margin-left: var(--space-2) !important;
  }

  .ms-xxl-3 {
    margin-left: var(--space-3) !important;
  }

  .ms-xxl-4 {
    margin-left: var(--space-4) !important;
  }

  .ms-xxl-5 {
    margin-left: var(--space-5) !important;
  }

  .ms-xxl-auto {
    margin-left: auto !important;
  }

  .me-xxl-0 {
    margin-right: var(--space-0) !important;
  }

  .me-xxl-1 {
    margin-right: var(--space-1) !important;
  }

  .me-xxl-2 {
    margin-right: var(--space-2) !important;
  }

  .me-xxl-3 {
    margin-right: var(--space-3) !important;
  }

  .me-xxl-4 {
    margin-right: var(--space-4) !important;
  }

  .me-xxl-5 {
    margin-right: var(--space-5) !important;
  }

  .me-xxl-auto {
    margin-right: auto !important;
  }

  .mx-xxl-0 {
    margin-left: var(--space-0) !important;
    margin-right: var(--space-0) !important;
  }

  .mx-xxl-1 {
    margin-left: var(--space-1) !important;
    margin-right: var(--space-1) !important;
  }

  .mx-xxl-2 {
    margin-left: var(--space-2) !important;
    margin-right: var(--space-2) !important;
  }

  .mx-xxl-3 {
    margin-left: var(--space-3) !important;
    margin-right: var(--space-3) !important;
  }

  .mx-xxl-4 {
    margin-left: var(--space-4) !important;
    margin-right: var(--space-4) !important;
  }

  .mx-xxl-5 {
    margin-left: var(--space-5) !important;
    margin-right: var(--space-5) !important;
  }

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

  .my-xxl-0 {
    margin-top: var(--space-0) !important;
    margin-bottom: var(--space-0) !important;
  }

  .my-xxl-1 {
    margin-top: var(--space-1) !important;
    margin-bottom: var(--space-1) !important;
  }

  .my-xxl-2 {
    margin-top: var(--space-2) !important;
    margin-bottom: var(--space-2) !important;
  }

  .my-xxl-3 {
    margin-top: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
  }

  .my-xxl-4 {
    margin-top: var(--space-4) !important;
    margin-bottom: var(--space-4) !important;
  }

  .my-xxl-5 {
    margin-top: var(--space-5) !important;
    margin-bottom: var(--space-5) !important;
  }

  .my-xxl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .p-xxl-0 {
    padding: var(--space-0) !important;
  }

  .p-xxl-1 {
    padding: var(--space-1) !important;
  }

  .p-xxl-2 {
    padding: var(--space-2) !important;
  }

  .p-xxl-3 {
    padding: var(--space-3) !important;
  }

  .p-xxl-4 {
    padding: var(--space-4) !important;
  }

  .p-xxl-5 {
    padding: var(--space-5) !important;
  }

  .pt-xxl-0 {
    padding-top: var(--space-0) !important;
  }

  .pt-xxl-1 {
    padding-top: var(--space-1) !important;
  }

  .pt-xxl-2 {
    padding-top: var(--space-2) !important;
  }

  .pt-xxl-3 {
    padding-top: var(--space-3) !important;
  }

  .pt-xxl-4 {
    padding-top: var(--space-4) !important;
  }

  .pt-xxl-5 {
    padding-top: var(--space-5) !important;
  }

  .pb-xxl-0 {
    padding-bottom: var(--space-0) !important;
  }

  .pb-xxl-1 {
    padding-bottom: var(--space-1) !important;
  }

  .pb-xxl-2 {
    padding-bottom: var(--space-2) !important;
  }

  .pb-xxl-3 {
    padding-bottom: var(--space-3) !important;
  }

  .pb-xxl-4 {
    padding-bottom: var(--space-4) !important;
  }

  .pb-xxl-5 {
    padding-bottom: var(--space-5) !important;
  }

  .ps-xxl-0 {
    padding-left: var(--space-0) !important;
  }

  .ps-xxl-1 {
    padding-left: var(--space-1) !important;
  }

  .ps-xxl-2 {
    padding-left: var(--space-2) !important;
  }

  .ps-xxl-3 {
    padding-left: var(--space-3) !important;
  }

  .ps-xxl-4 {
    padding-left: var(--space-4) !important;
  }

  .ps-xxl-5 {
    padding-left: var(--space-5) !important;
  }

  .pe-xxl-0 {
    padding-right: var(--space-0) !important;
  }

  .pe-xxl-1 {
    padding-right: var(--space-1) !important;
  }

  .pe-xxl-2 {
    padding-right: var(--space-2) !important;
  }

  .pe-xxl-3 {
    padding-right: var(--space-3) !important;
  }

  .pe-xxl-4 {
    padding-right: var(--space-4) !important;
  }

  .pe-xxl-5 {
    padding-right: var(--space-5) !important;
  }

  .px-xxl-0 {
    padding-left: var(--space-0) !important;
    padding-right: var(--space-0) !important;
  }

  .px-xxl-1 {
    padding-left: var(--space-1) !important;
    padding-right: var(--space-1) !important;
  }

  .px-xxl-2 {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
  }

  .px-xxl-3 {
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
  }

  .px-xxl-4 {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }

  .px-xxl-5 {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
  }

  .py-xxl-0 {
    padding-top: var(--space-0) !important;
    padding-bottom: var(--space-0) !important;
  }

  .py-xxl-1 {
    padding-top: var(--space-1) !important;
    padding-bottom: var(--space-1) !important;
  }

  .py-xxl-2 {
    padding-top: var(--space-2) !important;
    padding-bottom: var(--space-2) !important;
  }

  .py-xxl-3 {
    padding-top: var(--space-3) !important;
    padding-bottom: var(--space-3) !important;
  }

  .py-xxl-4 {
    padding-top: var(--space-4) !important;
    padding-bottom: var(--space-4) !important;
  }

  .py-xxl-5 {
    padding-top: var(--space-5) !important;
    padding-bottom: var(--space-5) !important;
  }

  .gap-xxl-0 {
    gap: var(--space-0) !important;
  }

  .gap-xxl-1 {
    gap: var(--space-1) !important;
  }

  .gap-xxl-2 {
    gap: var(--space-2) !important;
  }

  .gap-xxl-3 {
    gap: var(--space-3) !important;
  }

  .gap-xxl-4 {
    gap: var(--space-4) !important;
  }

  .gap-xxl-5 {
    gap: var(--space-5) !important;
  }
}


/* ==================================================================
 * P8-design — TEXT UTILITIES
 * Faithful replication of the Bootstrap 5 (v5.0) text utilities.
 * https://getbootstrap.com/docs/5.0/utilities/text/
 * Same class syntax; values mapped to P8 tokens where one exists
 * (heading scale for .fs-*, --fw-* weights, --ct-font-monospace).
 * Responsive alignment uses BS5 breakpoints: sm 576 / md 768 / lg 992 /
 * xl 1200 / xxl 1400. All rules use !important to match Bootstrap.
 * ================================================================== */

/* ---- Text alignment (responsive) ---- */
.text-start {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

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

/* ---- Wrapping & overflow ---- */
.text-wrap {
  white-space: normal !important;
}

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

/* ---- Word break ---- */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/* ---- Text transform ---- */
.text-lowercase {
  text-transform: lowercase !important;
}

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

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

/* ---- Font size (matches HTML headings h1–h6 → P8 heading scale) ---- */
.fs-1 {
  font-size: var(--fs-3xl) !important;
}

/* 2.75rem */
.fs-2 {
  font-size: var(--fs-2xl) !important;
}

/* 1.75rem */
.fs-3 {
  font-size: var(--fs-xl) !important;
}

/* 1.375rem */
.fs-4 {
  font-size: var(--fs-lg) !important;
}

/* 1.125rem */
.fs-5 {
  font-size: var(--fs-md) !important;
}

/* 1rem */
.fs-6 {
  font-size: var(--fs-base) !important;
}

/* 0.875rem */

/* ---- Font weight & italics ---- */
.fw-light {
  font-weight: var(--fw-light) !important;
}

/* 300 */
.fw-lighter {
  font-weight: lighter !important;
}

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

/* 400 */
.fw-bold {
  font-weight: var(--fw-bold) !important;
}

/* 700 */
.fw-bolder {
  font-weight: bolder !important;
}

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

.fst-normal {
  font-style: normal !important;
}

/* ---- Line height ---- */
.lh-1 {
  line-height: 1 !important;
}

.lh-sm {
  line-height: 1.25 !important;
}

.lh-base {
  line-height: 1.5 !important;
}

.lh-lg {
  line-height: 2 !important;
}

/* ---- Monospace ---- */
.font-monospace {
  font-family: var(--ct-font-monospace) !important;
}

/* ---- Reset colour ---- */
.text-reset {
  color: inherit !important;
}

/* ---- Text decoration ---- */
.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

.text-decoration-line-through {
  text-decoration: line-through !important;
}

/* ---- Responsive alignment variants ---- */
@media (min-width: 576px) {
  .text-sm-start {
    text-align: left !important;
  }

  .text-sm-center {
    text-align: center !important;
  }

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

@media (min-width: 768px) {
  .text-md-start {
    text-align: left !important;
  }

  .text-md-center {
    text-align: center !important;
  }

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

@media (min-width: 992px) {
  .text-lg-start {
    text-align: left !important;
  }

  .text-lg-center {
    text-align: center !important;
  }

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

@media (min-width: 1200px) {
  .text-xl-start {
    text-align: left !important;
  }

  .text-xl-center {
    text-align: center !important;
  }

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

@media (min-width: 1400px) {
  .text-xxl-start {
    text-align: left !important;
  }

  .text-xxl-center {
    text-align: center !important;
  }

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


/* ==================================================================
 * P8-design — BADGE COMPONENT
 * Bootstrap 5 badge, styled to the Praxis / Hyper look pulled from the
 * source app.css. Two families:
 *   • Solid        <span class="badge bg-primary">…</span>
 *   • Soft/lighten <span class="badge badge-primary-lighten">…</span>  (Hyper signature)
 * Pill shape via Bootstrap's .rounded-pill. Counter badges go on the
 * .btn / icon as usual. Colours come from the --ct-* / --ct-*-rgb tokens
 * in colors_and_type.css, so they track light & dark themes automatically.
 * ================================================================== */

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-family: var(--ct-font-sans-serif);
  font-size: 0.75em;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--radius-md);
  /* 0.25rem — matches Bootstrap */
}

.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

/* Pill — Bootstrap 5 uses the generic .rounded-pill helper */
.rounded-pill {
  border-radius: 50rem !important;
}

/* ---- Solid variants: .badge.bg-* ---- */
.badge.bg-primary {
  background-color: var(--ct-primary);
  color: #fff;
}

.badge.bg-secondary {
  background-color: var(--ct-secondary);
  color: #fff;
}

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

.badge.bg-info {
  background-color: var(--ct-info);
  color: #fff;
}

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

/* dark text on amber */
.badge.bg-danger {
  background-color: var(--ct-danger);
  color: #fff;
}

.badge.bg-light {
  background-color: var(--ct-light);
  color: #303037;
}

.badge.bg-dark {
  background-color: var(--ct-dark);
  color: #fff;
}

/* ---- Soft / lighten variants: tinted background, solid-hue text ---- */
.badge-primary-lighten {
  color: var(--ct-primary);
  background-color: rgba(var(--ct-primary-rgb), 0.18);
}

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

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

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

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

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

.badge-light-lighten {
  color: var(--ct-dark);
  background-color: rgba(var(--ct-light-rgb, 241, 242, 242), 0.6);
}

.badge-dark-lighten {
  color: var(--ct-dark);
  background-color: rgba(var(--ct-dark-rgb, 48, 48, 55), 0.18);
}

/* Linked lighten badges deepen the tint on hover/focus (matches Hyper) */
.badge-primary-lighten[href]:hover,
.badge-primary-lighten[href]:focus {
  color: var(--ct-primary);
  background-color: rgba(var(--ct-primary-rgb), 0.4);
  text-decoration: none;
}

.badge-secondary-lighten[href]:hover,
.badge-secondary-lighten[href]:focus {
  color: var(--ct-secondary);
  background-color: rgba(var(--ct-secondary-rgb), 0.4);
  text-decoration: none;
}

.badge-success-lighten[href]:hover,
.badge-success-lighten[href]:focus {
  color: var(--ct-success);
  background-color: rgba(var(--ct-success-rgb), 0.4);
  text-decoration: none;
}

.badge-info-lighten[href]:hover,
.badge-info-lighten[href]:focus {
  color: var(--ct-info);
  background-color: rgba(var(--ct-info-rgb), 0.4);
  text-decoration: none;
}

.badge-warning-lighten[href]:hover,
.badge-warning-lighten[href]:focus {
  color: var(--ct-warning);
  background-color: rgba(var(--ct-warning-rgb), 0.4);
  text-decoration: none;
}

.badge-danger-lighten[href]:hover,
.badge-danger-lighten[href]:focus {
  color: var(--ct-danger);
  background-color: rgba(var(--ct-danger-rgb), 0.4);
  text-decoration: none;
}


/* ════════════════════════════════════════════════════════════════
   BOOTSTRAP TABS — ported from the p8-design skill (tabs.css), scoped
   to .p8d and wired to dashboard tokens. Lets included Hyper views
   (e.g. views/CrewAssignment_view.php) keep their nav-tabs markup.
   Switching JS lives in includes/p8/shell_close.php.
   ════════════════════════════════════════════════════════════════ */
.p8d .nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.p8d .nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--fg-2);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.p8d .nav-link:hover,
.p8d .nav-link:focus {
  color: var(--praxis-brand);
}

.p8d .nav-link.disabled {
  color: var(--fg-3);
  pointer-events: none;
  cursor: default;
}

.p8d .nav-tabs {
  border-bottom: 1px solid var(--border-1);
}

.p8d .nav-tabs .nav-item {
  margin-bottom: -1px;
}

.p8d .nav-tabs .nav-link {
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.p8d .nav-tabs .nav-link.active,
.p8d .nav-tabs .nav-item.show .nav-link {
  color: var(--fg-1);
}

/* Praxis signature underline tab */
.p8d .nav-tabs.nav-bordered {
  border-bottom: 2px solid rgba(var(--ct-secondary-rgb), 0.2);
}

.p8d .nav-tabs.nav-bordered .nav-item {
  margin-bottom: -1px;
}

.p8d .nav-tabs.nav-bordered .nav-link {
  border: 0;
  padding: 0.625rem 1.25rem;
}

.p8d .nav-tabs.nav-bordered .nav-link.active {
  color: var(--praxis-brand);
  border-bottom: 2px solid var(--praxis-brand);
  background: none;
}

.p8d .nav-pills .nav-link {
  border: 0;
  border-radius: var(--radius-md);
}

.p8d .nav-pills .nav-link.active,
.p8d .nav-pills .show>.nav-link {
  color: #fff;
  background-color: var(--praxis-brand);
}

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

.p8d .tab-content>.tab-pane {
  display: none;
}

.p8d .tab-content>.active {
  display: block;
}

.p8d .fade {
  transition: opacity 0.15s linear;
}

.p8d .fade:not(.show) {
  opacity: 0;
}


/* ════════════════════════════════════════════════════════════════
   BOOTSTRAP PROGRESS — ported from the p8-design skill (progress.css),
   scoped to .p8d and wired to dashboard tokens. Track + bar, solid
   status fills, striped/animated, Hyper height helpers, labelled layout.
   ════════════════════════════════════════════════════════════════ */
@keyframes p8d-progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}

.p8d .progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.675rem;
  background-color: var(--ct-progress-bg);
  border-radius: var(--radius-md);
}

.p8d .progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--ct-progress-bar-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--praxis-brand);
  /* default fill; override with .bg-* */
  transition: width 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .p8d .progress-bar {
    transition: none;
  }
}

/* solid fills (Bootstrap .bg-* + Hyper .progress-bar-* aliases) */
.p8d .progress-bar.bg-primary,
.p8d .progress-bar-primary {
  background-color: var(--ct-primary) !important;
}

.p8d .progress-bar.bg-secondary,
.p8d .progress-bar-secondary {
  background-color: var(--ct-secondary) !important;
}

.p8d .progress-bar.bg-success,
.p8d .progress-bar-success {
  background-color: var(--ct-success) !important;
}

.p8d .progress-bar.bg-info,
.p8d .progress-bar-info {
  background-color: var(--ct-info) !important;
}

.p8d .progress-bar.bg-warning,
.p8d .progress-bar-warning {
  background-color: var(--ct-warning) !important;
}

.p8d .progress-bar.bg-danger,
.p8d .progress-bar-danger {
  background-color: var(--ct-danger) !important;
}

.p8d .progress-bar.bg-dark,
.p8d .progress-bar-dark {
  background-color: var(--ct-dark) !important;
}

/* striped / animated */
.p8d .progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.p8d .progress-bar-animated {
  animation: 1s linear infinite p8d-progress-bar-stripes;
}

@media (prefers-reduced-motion: reduce) {
  .p8d .progress-bar-animated {
    animation: none;
  }
}

/* Hyper height helpers */
.p8d .progress-sm {
  height: 5px;
}

.p8d .progress-md {
  height: 8px;
}

.p8d .progress-lg {
  height: 12px;
}

.p8d .progress-xl {
  height: 15px;
}

/* labelled layout */
.p8d .progress-w-percent {
  min-height: 20px;
  margin-bottom: 20px;
}

.p8d .progress-w-percent .progress {
  width: calc(100% - 50px);
  float: left;
  margin-top: 8px;
}

.p8d .progress-w-percent .progress-value {
  width: 40px;
  float: right;
  text-align: right;
  line-height: 20px;
}

/* ── Collapse (paired with the p8-body.js collapse shim) ──────────────────── */
.p8d .collapse {
  display: none;
}

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

/* ── Accordion (lean, token-based; replaces Bootstrap accordion chrome) ───── */
.p8d .accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p8d .accordion-item {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
}

.p8d .accordion-header {
  margin: 0;
}

.p8d .accordion-button {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 16px;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.p8d .accordion-button:hover {
  background: var(--bg-sunken);
}

.p8d .accordion-button::after {
  content: "\F0140";
  /* mdi chevron-down */
  font-family: "Material Design Icons";
  margin-left: auto;
  font-size: var(--fs-lg);
  color: var(--fg-3);
  transition: transform .15s ease;
}

.p8d .accordion-button.collapsed::after {
  transform: rotate(-90deg);
}

.p8d .accordion-body {
  padding: 0;
  border-top: 1px solid var(--border-1);
}

/* ── Stat tile (dashboard KPI) ────────────────────────────────────────────── */
.p8d .p8-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.p8d .p8-stat-label {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  margin: 0 0 4px;
}

.p8d .p8-stat-value {
  font-size: 1.9rem;
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  line-height: 1.1;
  margin: 0;
}

.p8d a .p8-stat-value:hover {
  color: var(--praxis-brand);
}

.p8d .p8-stat-icon {
  font-size: 2rem;
  line-height: 1;
  color: var(--fg-3);
  opacity: .55;
}

/* card lift on hover (dashboard tiles) */
.p8d .hover-shadow {
  transition: box-shadow .15s ease, transform .15s ease;
}

.p8d .hover-shadow:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

/* Dashboard vessel cards — plain white header/footer (no grey kit fills) */
.p8d .vessel-card>.card-header {
  background: var(--bg-surface);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 14px 16px 6px;
  font-weight: var(--fw-medium);
  font-size: inherit;
}

.p8d .vessel-card>.card-footer {
  background: var(--bg-surface);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ============================================================================
   CREW QUALIFICATION MATRIX  (Vessel_crew_qualification.php)
   Ported from legacy P8.css for the lean shell; greys swapped for theme tokens
   so light/dark are handled automatically.
   ============================================================================ */
.p8d .qual-matrix-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.p8d table.qual-matrix {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}

.p8d table.qual-matrix th,
.p8d table.qual-matrix td {
  border: 1px solid var(--border-1);
  vertical-align: middle;
  padding: 6px 8px;
}

.p8d table.qual-matrix tbody td {
  white-space: nowrap;
}

.p8d table.qual-matrix tbody tr:hover td {
  background: var(--bg-sunken);
}

/* Rotated requirement-column headers */
.p8d .qual-matrix .rotated-header {
  min-width: 38px;
  vertical-align: bottom;
  text-align: center;
  padding: 10px 0 12px;
  background: var(--bg-surface);
}

.p8d .qual-matrix .rotated-header .rotate-wrapper {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: inline-block;
  text-align: left;
  font-weight: var(--fw-regular);
  font-size: .78rem;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--fg-2);
}

.p8d .qual-matrix .rotated-header .rotate-wrapper .qid {
  font-weight: var(--fw-bold);
  font-size: .85rem;
  color: var(--fg-1);
}

.p8d .qual-matrix .stcw-ref {
  font-size: .6rem;
  font-weight: var(--fw-regular);
  text-align: center;
  color: var(--fg-3);
  background: var(--bg-surface);
}

/* Sticky identity columns (Crew Name + Rank) for wide matrices */
.p8d .qual-matrix th.col-name,
.p8d .qual-matrix td.col-name,
.p8d .qual-matrix th.col-rank,
.p8d .qual-matrix td.col-rank {
  position: sticky;
  z-index: 2;
  background: var(--bg-surface);
}

.p8d .qual-matrix th.col-name,
.p8d .qual-matrix td.col-name {
  left: 0;
  min-width: 180px;
}

.p8d .qual-matrix th.col-rank,
.p8d .qual-matrix td.col-rank {
  left: 180px;
}

.p8d .qual-matrix thead th.col-name,
.p8d .qual-matrix thead th.col-rank {
  z-index: 3;
  vertical-align: bottom;
}

/* Status letters inside cells */
.p8d .qual-matrix .status-check {
  color: var(--ct-success);
  font-weight: var(--fw-bold);
}

.p8d .qual-matrix .status-expiring {
  color: var(--ct-warning);
  font-weight: var(--fw-bold);
}

.p8d .qual-matrix .status-expired,
.p8d .qual-matrix .status-missing-compulsory {
  color: var(--ct-danger);
  font-weight: var(--fw-bold);
}

.p8d .qual-matrix .status-missing-optional {
  color: var(--fg-3);
}

.p8d .qual-matrix td a {
  text-decoration: none;
}

/* Overall-rating column */
.p8d .qual-matrix .rating-cell {
  font-weight: var(--fw-bold);
  text-align: center;
}

.p8d .qual-matrix .rating-high {
  color: var(--ct-success);
}

.p8d .qual-matrix .rating-med {
  color: var(--ct-warning);
}

.p8d .qual-matrix .rating-low {
  color: var(--ct-danger);
}

/* Legend */
.p8d .qual-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  padding: 12px 14px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

.p8d .qual-legend-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
}

.p8d .qual-legend-title {
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin-right: .15rem;
}

.p8d .qual-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}

.p8d .legend-sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  font-weight: var(--fw-bold);
  font-size: .75rem;
  color: var(--fg-1);
}

.p8d .legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.p8d .legend-dot-success {
  background: var(--ct-success);
}

.p8d .legend-dot-warning {
  background: var(--ct-warning);
}

.p8d .legend-dot-danger {
  background: var(--ct-danger);
}

.p8d .legend-muted {
  color: var(--fg-3);
  font-weight: var(--fw-bold);
}

/* ============================================================================
   TRAINING FEEDBACK  (views/Training_view.php) — radar chart + written feedback
   ============================================================================ */
.p8d .training-feedback {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.p8d .training-feedback-chart {
  flex: 1;
  min-width: 320px;
}

.p8d .training-feedback-lists {
  flex: 1;
  min-width: 320px;
}

.p8d .feedback-panel {
  padding: 14px 16px;
  border: 1px solid var(--border-1);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.p8d .feedback-panel+.feedback-panel {
  margin-top: 12px;
}

.p8d .feedback-panel-info {
  border-left-color: var(--ct-info);
  background: rgba(var(--ct-info-rgb), .06);
}

.p8d .feedback-panel-danger {
  border-left-color: var(--ct-danger);
  background: rgba(var(--ct-danger-rgb), .06);
}

.p8d .feedback-panel-title {
  margin: 0 0 8px;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.p8d .feedback-panel-info .feedback-panel-title {
  color: var(--ct-info);
}

.p8d .feedback-panel-danger .feedback-panel-title {
  color: var(--ct-danger);
}

.p8d .feedback-list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--fg-2);
  font-size: var(--fs-sm);
}

.p8d .feedback-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-1);
}

.p8d .feedback-list li:last-child {
  border-bottom: 0;
}

.p8d .feedback-empty {
  color: var(--fg-3);
  font-style: italic;
}

/* ============================================================================
   STATUS BLOCK + HISTORY LOG  (showStatus() output, e.g. Vessel_crew_ratings.php)
   Ported from legacy P8.css for the lean shell; greys → tokens, semantic
   accent colours kept.
   ============================================================================ */
.p8d .status_current {
  display: inline-block;
  vertical-align: top;
  min-width: 240px;
}

.p8d .status_text {
  font-size: 20px;
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
}

.p8d .status_text.New {
  color: var(--ct-info);
}

.p8d .status_text.Issued,
.p8d .status_text.Confirmed,
.p8d .status_text.Approved,
.p8d .status_text.Acknowledged {
  color: #9aa210;
}

.p8d .status_text.Revised,
.p8d .status_text.Revise,
.p8d .status_text.Updated,
.p8d .status_text.Signing {
  color: var(--ct-warning);
}

.p8d .status_text.Cancelled,
.p8d .status_text.Canceled {
  color: #da478c;
}

.p8d .status_text.Signed,
.p8d .status_text.Prepared,
.p8d .status_text.Received,
.p8d .status_text.Closed {
  color: #7b40c7;
}

.p8d .status_text.Open,
.p8d .status_text.Urgent {
  color: var(--ct-danger);
}

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

.p8d .status_history,
.p8d .log {
  display: inline-block;
  vertical-align: top;
  overflow-y: auto;
  padding: 1px 0 0 10px;
  font-size: var(--fs-2xs);
  color: var(--fg-2);
}

.p8d .status_history {
  height: 54px;
  border-left: 1px solid var(--border-1);
}

/* Crew appraisal — assessment-criteria legend (sits beside the questionnaire) */
.p8d .rating-legend {
  position: sticky;
  top: 58px;
}

.p8d .rating-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p8d .rating-legend-list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 5px 0;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

/* ============================================================================
   INVENTORY LIST (Item.php) — legacy Hyper utilities used by the grouped table
   ============================================================================ */
/* system-code accent in collapsible group headers */
.p8d .purple {
  color: #7b5cd6;
}

/* collapsible group header rows are click-to-toggle */
.p8d tr.toggleHeader td {
  cursor: pointer;
}

/* stock-alert pulse (the red mdi-alert icon already carries an inline colour) */
.p8d .blink {
  /* animation: p8-blink 1.2s steps(1) infinite; */
}

@keyframes p8-blink {
  50% {
    opacity: 0;
  }
}

/* ============================================================================
   CREW ASSIGNMENT — by-rank view (CrewAssignment.php) Signed-On / Signed-Off
   ============================================================================ */
.p8d .crew-rank-group {
  margin-bottom: 4px;
}

.p8d .crew-rank-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 10px;
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: #fff;
}

.p8d .crew-rank-head-on {
  background: var(--ct-success);
}

.p8d .crew-rank-head-off {
  background: var(--ct-danger);
}

.p8d .crew-rank-count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.28);
  font-size: var(--fs-2xs);
  text-align: center;
}

.p8d .crew-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
}

.p8d .crew-rank-list li {
  padding: 3px 2px;
  border-bottom: 1px solid var(--border-1);
  color: var(--fg-1);
}

.p8d .crew-rank-list li:last-child {
  border-bottom: 0;
}

.p8d .crew-rank-vessel {
  color: var(--fg-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.p8d .crew-rank-empty {
  color: var(--fg-3);
  font-style: italic;
}

/* signed-on detail table (Crew / Vessel / Signed-on / TOD) */
.p8d .crew-rank-table {
  font-size: var(--fs-sm);
  margin-bottom: 6px;
}

.p8d .crew-rank-table th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  white-space: normal;
}

.p8d .crew-rank-table td {
  color: var(--fg-1);
  white-space: nowrap;
}

/* The Name column and the header row wrap, so a long crew name cannot push
   the Days column off the right edge of a side-by-side rank card. */
.crew-rank-table th:first-child,
.crew-rank-table td:first-child {
  white-space: normal;
  overflow-wrap: break-word;
}

.p8d .crew-rank-table td .crew-rank-empty {
  white-space: normal;
}

/* signed-off crew who are no longer active are greyed out … */
.p8d .crew-rank-table tr.crew-rank-inactive td,
.p8d .crew-rank-table tr.crew-rank-inactive td a {
  color: var(--fg-3);
}

/* …and hidden by default; revealed only when the "Show inactive" toggle is on */
.p8d .crew-rank-table tr.crew-rank-inactive {
  display: none;
}

.p8d.show-inactive-crew .crew-rank-table tr.crew-rank-inactive {
  display: table-row;
}

/* ── DAILY LOG register ────────────────────────────────────────────────────
   Dense data-entry grid ported from legacy P8.css (table.dailyLog). The lean
   shell drops P8.css, so without these the inputs render full-width and the
   register loses the compact, scannable layout crews rely on. Greys swapped
   for tokens; the bordered grid comes from the body-kit .table-bordered. */
.p8d table.dailyLog {
  width: auto;   /* size to content: small tables stay narrow, wide ones overflow
                    their per-group overflow-x:auto wrapper and scroll individually */
}

.p8d table.dailyLog th {
  padding: 1px !important;
  text-align: center;
  vertical-align: middle;
  font-weight: 500;
  min-width: 90px;
  max-width: 110px;          /* upper bound forces long headers to wrap (table is width:auto) */
  white-space: normal;
  overflow-wrap: break-word;
}

.p8d table.dailyLog td {
  padding: 1px !important;
  text-align: center;
  vertical-align: middle;
}

.p8d table.dailyLog input {
  min-width: 30px;
  max-width: 60px;
  text-align: center;
  font-weight: 300;
  padding: 0.2rem;
  border: none;
  background: transparent;
  box-shadow: none;
}

.p8d table.dailyLog input:focus {
  outline: 2px solid var(--praxis-brand);
  outline-offset: -2px;
}

/* A field with no value shows the previous log's reading as a placeholder.
   The hint is lighter than a typed value, so the crew can tell them apart. */
.p8d table.dailyLog input.dl-prev::placeholder {
  color: var(--fg-3);
  opacity: .7;
  font-style: italic;
}

.p8d table.dailyLog .units {
  display: block;
  clear: both;
  font-size: 0.85em;
  color: var(--fg-3);
}

.p8d input.green {
  color: var(--ct-success);
}

/* ── RECORD FORM ENGINE — control font normalization ─────────────────────────
   The Records form engine emits fields with mixed classes: showInputFormData()
   produces .input / .textarea / .datepick / .mshow and bare date/time inputs,
   while showFormDataField() produces .form-control. The lean shell no longer
   loads the legacy `input { font: inherit }` reset, so the unclassed controls
   fell back to the browser default (~13px system font) while .form-control and
   date/time fields rendered at 14px Inter — a visible size/font mismatch inside
   one form. Force the P8 control font onto every text control in the record
   sheet so all form types read the same (widths/alignment stay inline). */
.p8d .record input:not([type="checkbox"]):not([type="radio"]),
.p8d .record select,
.p8d .record textarea {
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.4;
}

/* ── CALENDAR draggable event chips (ported from legacy app-creative.css) ──
   Colour comes from the bg-*-lighten + text-* utilities on each chip, so the
   white `color` from the legacy rule is intentionally dropped. */
.p8d .external-event {
  cursor: move;
  margin: 10px 0;
  padding: 8px 10px;
  border-radius: 4px;
}

/* ── ZONE / SYSTEM tree editor (ported from legacy P8.css ul.treeLines) ──────
   The lean shell drops P8.css; without these the nested tree collapses to a
   plain bulleted list. Connector PNGs live in assets/images (../images from
   here). The `li i:before` MDI-font rule is what renders the mdi-*-box toggle
   icons that scripts_zone.php toggles — they carry no base `mdi` class. */
.p8d ul.treeLines {
  margin: 0;
  padding: 0;
}

.p8d ul.treeLines li ul {
  margin: 0;
  margin-left: 20px;
}

.p8d ul.treeLines li {
  background-repeat: no-repeat;
  list-style-type: none;
  background-position: 0px -5px;
  background-image: url(../images/tree_l.png);
  margin: 0;
  padding: 0 0 0 12px !important;
  width: 100%;
  line-height: 25px !important;
}

.p8d ul.treeLines li:last-child {
  background-image: url(../images/tree_el.png);
}

.p8d ul.treeLines li div {
  display: inline-block;
  border-bottom: 1px dotted var(--border-1);
  padding: 2px 0;
}

.p8d ul.treeLines li i {
  color: var(--fg-3);
  cursor: pointer;
}

.p8d ul.treeLines li i:before {
  margin: 0;
  display: inline-block;
  font: normal normal normal 24px/1 "Material Design Icons";
  font-size: inherit;
  text-rendering: auto;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.p8d ul.treeLines li i.icon-circle {
  font-size: 8px;
  color: var(--fg-3);
}

.p8d ul.treeLines li div input {
  border: 1px solid transparent;
  margin: 2px 1px;
  background-color: transparent;
}

.p8d ul.treeLines li div.col1 {
  width: 407px;
}

.p8d ul.treeLines li li div.col1 {
  width: 375px;
}

.p8d ul.treeLines li li li div.col1 {
  width: 343px;
}

.p8d ul.treeLines li li li li div.col1 {
  width: 312px;
}

.p8d ul.treeLines li li li li li div.col1 {
  width: 280px;
}

.p8d ul.treeLines li ul {
  display: none;
}

.p8d ul.treeLines li.open>ul {
  display: block;
}

.p8d #ZoneSelectTree li,
.p8d #SystemSelectTree li {
  background-position: 0px -6px;
}

/* ── MATRIX helpers ─────────────────────────────────────────────────────────
   .sticky-col: generic sticky first column (also used by RestHour). The
   QualificationMatrix editor uses the shared .qual-matrix system (above) for
   layout; these add the editable compact select + unsaved-change highlight. */
.p8d .sticky-col {
  position: sticky;
  left: 0;
  z-index: 4;
  background-color: var(--bg-surface) !important;
}

.p8d thead th.sticky-col {
  z-index: 4;
  background-color: var(--bg-surface) !important;
  vertical-align: bottom !important;
}

/* Legacy per-view action bars (Equipment et al.) — was position:absolute in the
   Hyper theme; render as a right-aligned inline bar in the lean shell. */
.p8d .admin-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

/* select.matrix-select (specificity 0,2,1) so it beats .p8d .form-select
   (0,2,0) in p8-body.css — otherwise form-select's ~2.25rem arrow padding
   inside this width clips the selected C/R/S letter out of view. Borderless /
   transparent so the cell border supplies the grid (legacy daily-log look). */
.p8d select.matrix-select {
  width: 44px;
  min-width: 44px;
  padding: 2px 4px;
  font-size: 0.85rem;
  text-align: center;
  text-align-last: center;
  background-image: none !important;
  background-color: transparent;
  border: none;
  box-shadow: none;
  margin: 0 auto;
}

/* Compact in-table select. `.form-select` is width:100%, so in an auto-layout
   table the column grows to fit the longest option, which steals room from the
   name columns. This bounds the width and trims the selected text.
   select.select-compact (0,2,1) beats .p8d .form-select (0,2,0) in p8-body.css. */
.p8d select.select-compact {
  width: 100%;
  min-width: 0;
  max-width: 150px;
  padding: 3px 20px 3px 6px;
  font-size: var(--fs-xs);
  background-position: right 5px center;
  background-size: 10px;
  text-overflow: ellipsis;
}

.p8d .status-changed {
  background-color: rgba(var(--ct-warning-rgb), 0.25) !important;
}

/* ── TOAST (shim target for $.NotificationApp in p8-body.js) ───────────────── */
.p8d .p8-toast-wrap {
  position: fixed;
  top: 64px;
  right: 16px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
}

.p8d .p8-toast {
  background: var(--bg-surface);
  color: var(--fg-1);
  border: 1px solid var(--border-1);
  border-left: 4px solid var(--praxis-brand);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 10px 12px;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.p8d .p8-toast-title {
  font-weight: var(--fw-semibold);
  margin-bottom: 2px;
}

.p8d .p8-toast-msg {
  color: var(--fg-2);
}

/* ── Ellipsis: clamp long task/step lists to a few lines with a trailing … ── */
.p8d .ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0;
  padding-left: 1.1em;
}
.p8d ul.ellipsis {
  list-style-position: outside;
}

/* ── Hide/Show eye toggle (Equipment + Item lists) ───────────────── */
.p8d .equipment-hide-cb,
.p8d .item-hide-cb {
  display: none !important;
}
.p8d .hide-eye-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--praxis-brand);
  user-select: none;
}
.p8d .hide-eye-toggle:hover {
  opacity: 0.75;
}
.p8d .equipment-hide-cb:checked ~ .hide-eye-toggle .eye-show,
.p8d .equipment-hide-cb:not(:checked) ~ .hide-eye-toggle .eye-hide,
.p8d .item-hide-cb:checked ~ .hide-eye-toggle .eye-show,
.p8d .item-hide-cb:not(:checked) ~ .hide-eye-toggle .eye-hide {
  display: none;
}
/* ── PRINT: drop chrome, maximize printable area ─────────────────── */
/* Print rules live here (p8-dashboard.css loads on every P8 page) so pages that
   open the shell directly (e.g. VesselDashboard.php, no body kit) print the same
   as body-kit pages. Do not duplicate these in p8-body.css. */
@media print {

  /* Collapse the shell chrome so content reclaims the page */
  .p8d .topbar,
  .p8d .sidebar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .p8d .layout {
    padding-top: 0 !important;
  }

  .p8d .main {
    margin-left: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* White page background */
  html,
  body,
  body.p8d {
    background: #fff !important;
  }

  /* Elements the page marks as screen-only, and reveal print-only blocks */
  .p8d .no-print,
  .p8d .noprint,
  .no_print,
  .noprint {
    display: none !important;
  }
  .print_only {
    display: block !important;
  }

  /* Buttons do not print */
  .btn,
  .button {
    display: none !important;
  }

  /* Interactive-only chrome does not print: header action bars, tab
     navigation (Bootstrap .nav-tabs and P8 native .tabs), page toolbars,
     filter buttons, file-upload widgets and DataTables chrome. The printed
     page keeps only the record content. The .p8d prefix raises specificity so
     these beat the kit's `.p8d .d-flex { display:flex !important }`. */
  .p8d .page-header-actions,
  .p8d .nav-tabs,
  .p8d .tabs,
  .p8d .admin-tools,
  .p8d .item-inventory-toolbar,
  .p8d .cert-filter-btn,
  .p8d .cert-showexp,
  .p8d .dropzone,
  .p8d .inlinePhotoDrop,
  .p8d .singlePictureUpload,
  .p8d .p8-dropzone,
  .p8d .p8-drop-tile,
  .p8d .dropzone-previews,
  .p8d .dz-remove,
  .p8d .dt-search,
  .p8d .dt-length,
  .p8d .dt-paging,
  .p8d .dt-info,
  .p8d .dataTables_filter,
  .p8d .dataTables_length,
  .p8d .dataTables_paginate,
  .p8d .dataTables_info {
    display: none !important;
  }
}

/* ── Certificate list column sorting ─────────────────────────────────────── */

.p8d .cert-sort {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 22px;
}

.p8d .cert-sort:hover {
  outline: 2px solid rgba(0, 0, 0, 0.05);
  outline-offset: -2px;
}

[data-theme="dark"] .p8d .cert-sort:hover {
  outline-color: rgba(255, 255, 255, 0.05);
}

.p8d .cert-sort .cert-sort-ico {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 12px;
  height: 24px;
  margin-top: -12px;
}

.p8d .cert-sort .cert-sort-ico:before,
.p8d .cert-sort .cert-sort-ico:after {
  position: absolute;
  display: block;
  left: 0;
  opacity: 0.125;
  line-height: 9px;
  font-size: 0.8em;
}

.p8d .cert-sort .cert-sort-ico:before {
  bottom: 50%;
  content: "\25B2";
}

.p8d .cert-sort .cert-sort-ico:after {
  top: 50%;
  content: "\25BC";
}

.p8d .cert-sort.is-asc .cert-sort-ico:before,
.p8d .cert-sort.is-desc .cert-sort-ico:after {
  opacity: 0.6;
}

/* ── Document sheet: DO, MR, Return, and the office documents ────────────── */
.p8d .doc-sheet {
  position: relative;
}

.p8d .doc-sheet .qrTag {
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  text-align: center;
}

.p8d .doc-sheet .qrTag .qrCode {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto;
}

.p8d .doc-sheet .qrTag small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.2;
  white-space: nowrap;
}

.p8d .doc-sheet .doc-label {
  display: block;
  margin: 12px 0 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  letter-spacing: 0.02em;
}

.p8d .doc-sheet .doc-remarks {
  min-height: 4rem;
  resize: vertical;
}

/* A read-only Remarks box stays white, so a print uses no ink on it. */
.p8d .doc-sheet .doc-remarks:disabled,
.p8d .doc-sheet .doc-remarks[readonly] {
  background-color: var(--bg-surface);
  color: var(--fg-1);
  opacity: 1;
}

.p8d .doc-sheet .doc-sign {
  margin-top: 8px;
}

.p8d .doc-sheet .doc-sign > .col-4 {
  min-width: 0;
}
/* .p8d .doc-sheet .signDocCon { */
.p8d .signDocCon {
  max-width: 100%;
  overflow: hidden;
}

/* .p8d .doc-sheet .signature-image {*/
.p8d .signDocCon .signature-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 96px;
  margin-bottom: 4px;
}

/* A quantity field: no spin buttons, because they hide the digits in a
   narrow cell. The user types the number. */
.p8d input[type="number"].form-control::-webkit-outer-spin-button,
.p8d input[type="number"].form-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.p8d input[type="number"].form-control {
  -moz-appearance: textfield;
  appearance: textfield;
  min-width: 56px;
}

/* Document brand row: the logo sits at the left, the title below it is
   large and centred. */
.p8d .doc-sheet .doc-brand {
  text-align: left;
  font-size: var(--fs-sm);
}

.p8d .doc-sheet .doc-logo {
  height: auto;
  max-height: 60px;
  max-width: 180px;
  vertical-align: middle;
}

.p8d .doc-sheet .doc-title {
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── Instruction attachments (Instructions.php?q=v) ──────────────────
   Documents are one row each: type icon, name + size, actions on the
   right. Images and videos follow, full width, with the file name. */
.p8d .instr-attach-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.p8d .instr-attach-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.p8d .instr-attach-row + .instr-attach-row {
  border-top: 1px solid var(--border-soft);
}

.p8d .instr-attach-icon {
  flex: 0 0 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border-radius: var(--radius-md);
  color: var(--fg-3);
  background: var(--bg-sunken);
}

.p8d .instr-attach-icon.is-pdf   { color: rgb(var(--ct-danger-rgb));  background: rgba(var(--ct-danger-rgb), 0.12); }
.p8d .instr-attach-icon.is-word  { color: rgb(var(--ct-primary-rgb)); background: rgba(var(--ct-primary-rgb), 0.12); }
.p8d .instr-attach-icon.is-excel { color: rgb(var(--ct-success-rgb)); background: rgba(var(--ct-success-rgb), 0.15); }
.p8d .instr-attach-icon.is-ppt   { color: rgb(var(--ct-warning-rgb)); background: rgba(var(--ct-warning-rgb), 0.15); }

.p8d .instr-attach-name {
  flex: 1 1 auto;
  min-width: 0; /* let a long file name truncate instead of pushing the buttons out */
  line-height: 1.3;
}

.p8d .instr-attach-name > a,
.p8d .instr-attach-name > span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}

.p8d .instr-attach-name > a:hover {
  color: var(--ct-primary);
  text-decoration: underline;
}

.p8d .instr-attach-name small {
  color: var(--fg-3);
  font-size: var(--fs-xs);
}

.p8d .instr-attach-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}

.p8d .instr-attach-media {
  margin: 0 0 1rem;
}

.p8d .instr-attach-media img,
.p8d .instr-attach-media video {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}

.p8d .instr-attach-media video {
  width: 100%;
  max-width: 900px;
}

.p8d .instr-attach-media figcaption {
  margin-top: 4px;
  color: var(--fg-3);
  font-size: var(--fs-xs);
}

/* On a phone the row keeps the icon-only Download button. */
@media (max-width: 575.98px) {
  .p8d .instr-attach-label { display: none; }
  .p8d .instr-attach-row { gap: 10px; padding: 10px; }
}