/* ═══════════════════════════════════════════════════════════════════
   Helpex ERP — UX Foundation Layer
   -------------------------------------------------------------------
   Loaded AFTER helpex-variables.css + helpex.css + helpex_dt.css.
   Purpose: close the gaps in the base design system so every module
   page feels finished — consistent badges, empty states, skeletons,
   page headers, form affordances, focus rings, dark-mode corrections.

   Consumes ONLY the tokens from helpex-variables.css.
   Additive + opt-in: never restyles a page by surprise; new classes
   opt-in, targeted overrides fix hard-coded Bootstrap colors.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. GLOBAL POLISH / ACCESSIBILITY
   ───────────────────────────────────────────────────────────── */
html { scrollbar-gutter: stable; }

/* Brand-tinted focus ring for links & keyboard-driven controls */
a:focus-visible,
[tabindex]:focus-visible,
tr[data-row-href]:focus-visible {
  box-shadow: 0 0 0 3px var(--hp-focus-ring);
  border-radius: var(--hp-radius-sm);
  outline: none;
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   2. BUTTONS — consistent icon+text rhythm, focus, hover lifts
   ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-weight: var(--hp-font-weight-medium, 500);
  border-radius: var(--hp-radius-md);
  transition: background-color var(--hp-transition-fast),
              border-color var(--hp-transition-fast),
              color var(--hp-transition-fast),
              box-shadow var(--hp-transition-fast),
              transform var(--hp-transition-fast);
  white-space: nowrap;
}
.btn .bi { vertical-align: -0.08em; }
.btn-sm { border-radius: var(--hp-radius-sm); }
.btn:disabled, .btn.disabled { opacity: 0.55; }

/* Opt-in gentle lift for primary call-to-actions */
.btn-lift:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--hp-shadow-md); }

/* Icon-only button (square, centered glyph) */
.btn-icon {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.45rem;
  --bs-btn-font-size: 0.875rem;
  width: 2rem; height: 2rem;
  padding: 0;
  flex: 0 0 auto;
}
.btn-icon-lg { width: 2.5rem; height: 2.5rem; font-size: 1.05rem; }

/* ─────────────────────────────────────────────────────────────
   3. FORMS — required markers, focus rings, validation states
   ───────────────────────────────────────────────────────────── */
/* Required asterisk: span.req-star injected by helpex_ux.js / present in
   generated markup. The old ::after landed AFTER the control (below inputs). */

/* Validation states — token colors, calm ring */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: var(--hp-danger);
  background-image: none;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-danger) 25%, transparent);
}
.invalid-feedback { color: var(--hp-danger); font-size: var(--hp-font-size-xs); }
.form-control.is-valid:focus,
.form-select.is-valid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-success) 25%, transparent);
}

/* Read-only inputs read like text, not disabled fields */
.form-control[readonly],
.form-control-plaintext {
  background-color: var(--hp-surface-2);
}

/* Input groups: single unified focus ring, no double borders inside */
.input-group {
  border-radius: var(--hp-radius-md);
  transition: box-shadow var(--hp-transition-fast), border-color var(--hp-transition-fast);
}
.input-group:focus-within {
  box-shadow: var(--hp-shadow-focus);
  border-radius: var(--hp-radius-md);
}
.input-group .form-control:focus,
.input-group .form-select:focus { box-shadow: none; }
.input-group .form-control:focus, .input-group .form-select:focus { z-index: 3; }

/* Consistent control height + subtle hover */
.form-control, .form-select {
  font-size: var(--hp-font-size-base);
  border-radius: var(--hp-radius-md);
  transition: border-color var(--hp-transition-fast), box-shadow var(--hp-transition-fast),
              background-color var(--hp-transition-fast);
}
.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--hp-border-strong); }

/* ─────────────────────────────────────────────────────────────
   4. BADGES — soft semantic family (complement the hard badges)
   ───────────────────────────────────────────────────────────── */
.badge {
  font-weight: var(--hp-font-weight-medium, 500);
  letter-spacing: 0.01em;
}
.badge-soft-success { background: var(--hp-success-bg);    color: var(--hp-success-text); }
.badge-soft-warning { background: var(--hp-warning-bg);    color: var(--hp-warning-text); }
.badge-soft-danger  { background: var(--hp-danger-bg);     color: var(--hp-danger-text); }
.badge-soft-info    { background: var(--hp-info-bg);       color: var(--hp-info-text); }
.badge-soft-primary { background: var(--hp-brand-soft);    color: var(--hp-primary-dark); }
.badge-soft-secondary { background: var(--hp-surface-2);   color: var(--hp-text-muted); }
.badge-soft-muted   { background: var(--hp-surface-2);     color: var(--hp-text-muted); }

/* Status dot — tiny semantic indicator for table status columns */
.hp-status-dot {
  display: inline-block;
  width: 0.55rem; height: 0.55rem;
  border-radius: var(--hp-radius-full);
  background: var(--hp-text-light);
  margin-right: 0.4rem;
  vertical-align: middle;
}
.hp-status-dot.ok, .hp-status-dot.success  { background: var(--hp-success); }
.hp-status-dot.warn, .hp-status-dot.pending { background: var(--hp-warning); }
.hp-status-dot.bad,  .hp-status-dot.error   { background: var(--hp-danger); }
.hp-status-dot.info                       { background: var(--hp-info); }
.hp-status-dot.neutral, .hp-status-dot.off { background: var(--hp-text-light); }

/* ─────────────────────────────────────────────────────────────
   5. EMPTY STATES — turn bare "No X found" rows into guidance
   ───────────────────────────────────────────────────────────── */
.hp-empty {
  padding: var(--hp-space-10) var(--hp-space-6);
  text-align: center;
  color: var(--hp-text-muted);
}
.hp-empty .hp-empty-icon {
  font-size: 2.75rem;
  color: var(--hp-text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem; height: 5rem;
  border-radius: var(--hp-radius-full);
  background: var(--hp-surface-2);
  margin-bottom: var(--hp-space-4);
}
.hp-empty .hp-empty-title {
  font-size: var(--hp-font-size-lg);
  font-weight: var(--hp-font-weight-semibold);
  color: var(--hp-text);
  margin-bottom: var(--hp-space-1);
}
.hp-empty .hp-empty-text {
  font-size: var(--hp-font-size-sm);
  max-width: 34rem;
  margin: 0 auto var(--hp-space-4);
}

/* ─────────────────────────────────────────────────────────────
   6. SKELETON LOADING — shimmer placeholders for async regions
   ───────────────────────────────────────────────────────────── */
.hp-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--hp-surface-2);
  border-radius: var(--hp-radius-sm);
  background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hp-brand-soft) 60%, transparent), transparent);
  background-size: 220% 100%;
  animation: hp-shimmer 1.4s ease-in-out infinite;
}
.hp-skeleton-text { height: 0.75rem; margin-bottom: 0.5rem; }
.hp-skeleton-title { height: 1.1rem; width: 40%; margin-bottom: 0.75rem; }
.hp-skeleton-avatar { width: 2.5rem; height: 2.5rem; border-radius: var(--hp-radius-full); flex: 0 0 auto; }
.hp-skeleton-card { height: 9rem; border-radius: var(--hp-radius-lg); }
@keyframes hp-shimmer {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* ─────────────────────────────────────────────────────────────
   7. PAGE HEADER — consistent title + subtitle + actions slot
   ───────────────────────────────────────────────────────────── */
.hp-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hp-space-3);
  padding: var(--hp-space-4) var(--hp-space-5);
  border-bottom: 1px solid var(--hp-border-light);
  background: var(--hp-surface);
}
.hp-page-header .hp-page-title {
  font-size: var(--hp-font-size-xl);
  font-weight: var(--hp-font-weight-bold);
  color: var(--hp-text);
  margin: 0;
}
.hp-page-header .hp-page-subtitle {
  font-size: var(--hp-font-size-sm);
  color: var(--hp-text-muted);
  margin: 0.1rem 0 0;
}
.hp-page-header .hp-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hp-space-2);
}

/* Sticky action bar for long forms — always reachable */
.hp-form-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp-space-2);
  padding: var(--hp-space-4) var(--hp-space-5);
  background: color-mix(in srgb, var(--hp-surface) 92%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--hp-border-light);
  z-index: var(--hp-z-toolbar);
}

/* Form section grouping */
.hp-form-section {
  border: 1px solid var(--hp-card-border);
  border-radius: var(--hp-radius-lg);
  background: var(--hp-card-bg);
}
.hp-form-section .hp-form-section-title {
  font-size: var(--hp-font-size-base);
  font-weight: var(--hp-font-weight-semibold);
  color: var(--hp-text-secondary);
  padding: var(--hp-space-3) var(--hp-space-5);
  margin: 0;
  border-bottom: 1px solid var(--hp-border-light);
  background: var(--hp-surface-2);
  border-radius: var(--hp-radius-lg) var(--hp-radius-lg) 0 0;
}

/* ─────────────────────────────────────────────────────────────
   8. CARDS / TABLES — hover lift opt-in, table row links
   ───────────────────────────────────────────────────────────── */
.card-hover { transition: transform var(--hp-transition-fast), box-shadow var(--hp-transition-fast); }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--hp-shadow-lg); }

.table thead th {
  font-weight: var(--hp-font-weight-semibold);
  white-space: nowrap;
}
tr[data-row-href] { cursor: pointer; }
tr[data-row-href]:hover { cursor: pointer; }
.table .hp-cell-actions { white-space: nowrap; text-align: right; }
.table .hp-cell-actions .btn { margin-left: 0.15rem; }

/* Two-line clamp helper for dense lists */
.hp-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   9. TOASTS / MODALS / DROPDOWNS — restyle default surfaces
   ───────────────────────────────────────────────────────────── */
.toast { border-radius: var(--hp-radius-md); box-shadow: var(--hp-shadow-lg); border: 0; }
.modal-content { border-radius: var(--hp-radius-lg); border: 0; box-shadow: var(--hp-shadow-xl); }
.dropdown-menu { border-radius: var(--hp-radius-md); box-shadow: var(--hp-shadow-md); border: 1px solid var(--hp-border-light); }

/* ─────────────────────────────────────────────────────────────
   10. DARK-MODE CORRECTIONS — hard-coded Bootstrap colors used by
       scores of legacy templates (bg-light, table-light, text-dark…)
   ───────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bs-body-bg: var(--hp-bg);
  --bs-body-color: var(--hp-text);
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-light-subtle,
[data-theme="dark"] .table-light {
  background-color: var(--hp-surface-2) !important;
  color: var(--hp-text);
}
[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td { background-color: var(--hp-surface-2); color: var(--hp-text); }

[data-theme="dark"] .text-dark { color: var(--hp-text) !important; }
[data-theme="dark"] .text-body { color: var(--hp-text) !important; }
[data-theme="dark"] .text-muted { color: var(--hp-text-muted) !important; }
[data-theme="dark"] .bg-white { background-color: var(--hp-surface) !important; }
[data-theme="dark"] .border-light { border-color: var(--hp-border) !important; }
[data-theme="dark"] .badge.bg-light { background-color: var(--hp-surface-2) !important; color: var(--hp-text); }
[data-theme="dark"] .card-header.bg-transparent { background-color: transparent; }
[data-theme="dark"] .btn-outline-secondary {
  color: var(--hp-text-secondary);
  border-color: var(--hp-border-strong);
}
[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--hp-text);
}
[data-theme="dark"] .timeline-item,
[data-theme="dark"] .card-footer { border-color: var(--hp-border); }

/* light table-header utility used by dashboard */
[data-theme="dark"] table.table thead.table-light th {
  background-color: var(--hp-table-header-bg) !important;
  color: var(--hp-table-header-text);
}

/* ─────────────────────────────────────────────────────────────
   11. SELECT2 THEME BINDING — match the green brand
   ───────────────────────────────────────────────────────────── */
.select2-container--bootstrap-5 .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection--multiple {
  border-color: var(--hp-input-border);
  border-radius: var(--hp-radius-md);
  min-height: calc(1.5em + 0.75rem + 2px);
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: var(--hp-text);
  line-height: calc(1.5em + 0.75rem + 2px);
}
.select2-container--bootstrap-5 .select2-dropdown {
  border-color: var(--hp-border);
  border-radius: var(--hp-radius-md);
  box-shadow: var(--hp-shadow-md);
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection--single,
.select2-container--bootstrap-5.select2-container--focus .select2-selection--multiple {
  border-color: var(--hp-input-focus-border);
  box-shadow: var(--hp-shadow-focus);
}
.select2-container--bootstrap-5 .select2-results__option--selected {
  background-color: var(--hp-surface-active);
  color: var(--hp-primary-dark);
}
.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: var(--hp-secondary);
  color: var(--hp-text-inverse);
}

/* ─────────────────────────────────────────────────────────────
   12. SMALL UTILITIES
   ───────────────────────────────────────────────────────────── */
.hp-gap-1 { gap: var(--hp-space-1); }
.hp-gap-2 { gap: var(--hp-space-2); }
.hp-gap-3 { gap: var(--hp-space-3); }
.hp-divider {
  height: 1px; border: 0;
  background: var(--hp-border-light);
  margin: var(--hp-space-4) 0;
}
.hp-hover-bg { transition: background-color var(--hp-transition-fast); }
.hp-hover-bg:hover { background-color: var(--hp-surface-hover); }
.hp-text-xs { font-size: var(--hp-font-size-xs); }
.hp-text-sm { font-size: var(--hp-font-size-sm); }
.hp-fw-medium { font-weight: var(--hp-font-weight-medium); }
.hp-fw-semibold { font-weight: var(--hp-font-weight-semibold); }
.hp-rounded { border-radius: var(--hp-radius-md); }
.hp-rounded-lg { border-radius: var(--hp-radius-lg); }
.hp-shadow-sm { box-shadow: var(--hp-shadow-sm); }

/* ═══════════════════════════════════════════════════════════════════
   PHASE C — DASHBOARDS & KPIs
   ═══════════════════════════════════════════════════════════════════ */

/* ── Dashboard Grid Layout ── */
.hp-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hp-space-4);
  padding: var(--hp-space-4) var(--hp-space-5);
}
@media (min-width: 576px) { .hp-dashboard { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .hp-dashboard { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .hp-dashboard { grid-template-columns: repeat(4, 1fr); } }

/* Widget container (draggable via data-hp-draggable) */
.hp-dashboard-widget {
  background: var(--hp-card-bg);
  border: 1px solid var(--hp-card-border);
  border-radius: var(--hp-radius-lg);
  box-shadow: var(--hp-shadow-sm);
  transition: box-shadow var(--hp-transition-fast), transform var(--hp-transition-fast);
  min-height: 0; /* allow grid to size it */
}
.hp-dashboard-widget:hover { box-shadow: var(--hp-shadow-md); }
.hp-dashboard-widget.dragging { opacity: 0.5; box-shadow: var(--hp-shadow-xl); transform: scale(1.02); }

/* Widget header */
.hp-dashboard-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--hp-space-3) var(--hp-space-4);
  border-bottom: 1px solid var(--hp-border-light);
  background: var(--hp-surface-2);
  border-radius: var(--hp-radius-lg) var(--hp-radius-lg) 0 0;
  cursor: grab;
}
.hp-dashboard-widget-header.dragging { cursor: grabbing; }
.hp-dashboard-widget-title {
  font-size: var(--hp-font-size-base);
  font-weight: var(--hp-font-weight-semibold);
  color: var(--hp-text);
  margin: 0;
}
.hp-dashboard-widget-actions { display: flex; gap: var(--hp-space-1); }
.hp-dashboard-widget-body { padding: var(--hp-space-4); }

/* ── KPI Cards ── */
.hp-kpi-card {
  background: var(--hp-card-bg);
  border: 1px solid var(--hp-card-border);
  border-radius: var(--hp-radius-lg);
  padding: var(--hp-space-5);
  box-shadow: var(--hp-shadow-sm);
  transition: transform var(--hp-transition-fast), box-shadow var(--hp-transition-fast);
  position: relative;
  overflow: hidden;
}
.hp-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--hp-shadow-md); }

.hp-kpi-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--hp-kpi-accent, var(--hp-primary));
  opacity: 0.6;
}

.hp-kpi-card.success { --hp-kpi-accent: var(--hp-success); }
.hp-kpi-card.warning { --hp-kpi-accent: var(--hp-warning); }
.hp-kpi-card.danger  { --hp-kpi-accent: var(--hp-danger); }
.hp-kpi-card.info    { --hp-kpi-accent: var(--hp-info); }
.hp-kpi-card.primary { --hp-kpi-accent: var(--hp-primary); }

.hp-kpi-icon {
  width: 3rem; height: 3rem;
  border-radius: var(--hp-radius-lg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  background: var(--hp-kpi-accent-bg, var(--hp-brand-soft));
  color: var(--hp-kpi-accent, var(--hp-primary));
  margin-bottom: var(--hp-space-3);
}
.hp-kpi-card.success .hp-kpi-icon { background: var(--hp-success-bg); color: var(--hp-success); }
.hp-kpi-card.warning .hp-kpi-icon { background: var(--hp-warning-bg); color: var(--hp-warning); }
.hp-kpi-card.danger  .hp-kpi-icon { background: var(--hp-danger-bg);  color: var(--hp-danger); }
.hp-kpi-card.info    .hp-kpi-icon { background: var(--hp-info-bg);   color: var(--hp-info); }
.hp-kpi-card.primary .hp-kpi-icon { background: var(--hp-brand-soft); color: var(--hp-primary); }

.hp-kpi-value {
  font-size: var(--hp-font-size-3xl);
  font-weight: var(--hp-font-weight-bold);
  color: var(--hp-text);
  line-height: 1.1;
  margin: 0 0 var(--hp-space-1);
}
.hp-kpi-label {
  font-size: var(--hp-font-size-sm);
  color: var(--hp-text-muted);
  font-weight: var(--hp-font-weight-medium);
  margin: 0 0 var(--hp-space-3);
}

.hp-kpi-trend {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: var(--hp-font-size-xs);
  font-weight: var(--hp-font-weight-semibold);
  padding: 0.2rem 0.5rem;
  border-radius: var(--hp-radius-full);
}
.hp-kpi-trend.up   { background: var(--hp-success-bg); color: var(--hp-success); }
.hp-kpi-trend.down { background: var(--hp-danger-bg);  color: var(--hp-danger); }
.hp-kpi-trend.flat { background: var(--hp-surface-2);    color: var(--hp-text-muted); }

/* Sparkline placeholder (canvas-based, opt-in via Chart.js) */
.hp-kpi-sparkline { width: 100%; height: 40px; margin-top: var(--hp-space-3); }

/* ── Period Selector (sticky) ── */
.hp-period-selector {
  position: sticky;
  top: var(--hp-space-4);
  z-index: var(--hp-z-toolbar);
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-lg);
  padding: var(--hp-space-3) var(--hp-space-4);
  box-shadow: var(--hp-shadow-sm);
  margin-bottom: var(--hp-space-4);
}
.hp-period-selector .btn-group { flex-wrap: wrap; gap: var(--hp-space-1); }
.hp-period-selector .btn { font-size: var(--hp-font-size-sm); }

/* ── Quick Actions FAB ── */
.hp-fab {
  position: fixed;
  bottom: var(--hp-space-6);
  right: var(--hp-space-6);
  z-index: var(--hp-z-fab);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--hp-space-2);
}
.hp-fab-main {
  width: 56px; height: 56px;
  border-radius: var(--hp-radius-full);
  background: var(--hp-primary);
  color: var(--hp-text-inverse);
  font-size: 1.5rem;
  box-shadow: var(--hp-shadow-lg);
  border: 0;
  cursor: pointer;
  transition: transform var(--hp-transition-fast), box-shadow var(--hp-transition-fast);
}
.hp-fab-main:hover { transform: scale(1.05); box-shadow: var(--hp-shadow-xl); }
.hp-fab-menu {
  display: none;
  flex-direction: column;
  gap: var(--hp-space-2);
  margin-right: 12px;
}
.hp-fab.open .hp-fab-menu { display: flex; }
.hp-fab-item {
  width: 48px; height: 48px;
  border-radius: var(--hp-radius-full);
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  color: var(--hp-text);
  font-size: 1.1rem;
  box-shadow: var(--hp-shadow-md);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--hp-transition-fast), background var(--hp-transition-fast);
  text-decoration: none;
}
.hp-fab-item:hover { background: var(--hp-surface-hover); transform: scale(1.05); }
.hp-fab-item span {
  position: absolute;
  right: 64px;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  padding: 0.25rem 0.5rem;
  border-radius: var(--hp-radius-sm);
  font-size: var(--hp-font-size-sm);
  color: var(--hp-text);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hp-transition-fast), visibility var(--hp-transition-fast);
}
.hp-fab-item:hover span { opacity: 1; visibility: visible; }

@media (max-width: 575px) {
  .hp-fab { bottom: var(--hp-space-4); right: var(--hp-space-4); }
  .hp-fab-main { width: 48px; height: 48px; font-size: 1.25rem; }
}

/* ── Widget API: user layout persistence ── */
.hp-dashboard[data-hp-draggable="true"] .hp-dashboard-widget-header {
  cursor: grab;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE D — BUSINESS FLOWS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Stepper / Wizard ── */
.hp-stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hp-space-4);
  padding: var(--hp-space-4) 0;
  margin: 0 calc(var(--hp-space-4) * -1);
  overflow-x: auto;
}
.hp-stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hp-space-1);
  min-width: 0;
  flex: 1;
  position: relative;
  padding: 0 var(--hp-space-2);
}
.hp-stepper-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1rem;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--hp-border);
  z-index: 0;
}
.hp-stepper-step.completed:not(:last-child)::after,
.hp-stepper-step.active:not(:last-child)::after { background: var(--hp-primary); }

.hp-stepper-circle {
  width: 2rem; height: 2rem;
  border-radius: var(--hp-radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem;
  font-weight: var(--hp-font-weight-bold);
  background: var(--hp-surface-2);
  color: var(--hp-text-muted);
  border: 2px solid var(--hp-border);
  z-index: 1;
  transition: all var(--hp-transition-fast);
}
.hp-stepper-step.active .hp-stepper-circle {
  background: var(--hp-primary);
  color: var(--hp-text-inverse);
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hp-primary) 20%, transparent);
}
.hp-stepper-step.completed .hp-stepper-circle {
  background: var(--hp-success);
  color: var(--hp-text-inverse);
  border-color: var(--hp-success);
}
.hp-stepper-step.error .hp-stepper-circle {
  background: var(--hp-danger);
  color: var(--hp-text-inverse);
  border-color: var(--hp-danger);
}
.hp-stepper-label {
  font-size: var(--hp-font-size-xs);
  font-weight: var(--hp-font-weight-medium);
  color: var(--hp-text-muted);
  text-align: center;
  white-space: nowrap;
}
.hp-stepper-step.active .hp-stepper-label { color: var(--hp-primary); font-weight: var(--hp-font-weight-semibold); }
.hp-stepper-step.completed .hp-stepper-label { color: var(--hp-success); }

/* Vertical stepper for narrow screens */
@media (max-width: 575px) {
  .hp-stepper {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hp-space-5);
    padding: var(--hp-space-3) 0;
    margin: 0;
  }
  .hp-stepper-step { flex-direction: row; align-items: center; width: 100%; flex: none; padding: 0; }
  .hp-stepper-step:not(:last-child)::after {
    top: 1.5rem; left: 1rem; width: 2px; height: calc(100% + var(--hp-space-5));
  }
  .hp-stepper-label { text-align: left; }
}

/* ── Side-panel Drawer ── */
.hp-drawer {
  position: fixed;
  top: 0; bottom: 0;
  width: 100%; max-width: 480px;
  background: var(--hp-surface);
  box-shadow: var(--hp-shadow-xl);
  z-index: var(--hp-z-drawer);
  display: none;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--hp-transition-normal);
}
.hp-drawer.open { display: flex; transform: translateX(0); }
.hp-drawer.left { right: auto; left: 0; transform: translateX(-100%); }
.hp-drawer.left.open { transform: translateX(0); }

.hp-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: calc(var(--hp-z-drawer) - 1);
  opacity: 0; visibility: hidden;
  transition: opacity var(--hp-transition-normal), visibility var(--hp-transition-normal);
}
.hp-drawer-backdrop.show { opacity: 1; visibility: visible; }

.hp-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--hp-space-4) var(--hp-space-5);
  border-bottom: 1px solid var(--hp-border);
  background: var(--hp-surface-2);
  flex-shrink: 0;
}
.hp-drawer-title {
  font-size: var(--hp-font-size-lg);
  font-weight: var(--hp-font-weight-semibold);
  color: var(--hp-text);
  margin: 0;
}
.hp-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--hp-space-5);
}
.hp-drawer-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--hp-space-2);
  padding: var(--hp-space-4) var(--hp-space-5);
  border-top: 1px solid var(--hp-border);
  background: var(--hp-surface-2);
  flex-shrink: 0;
}

/* ── Inline Edit in Grids ── */
.hp-inline-edit {
  position: relative;
}
.hp-inline-edit .form-control,
.hp-inline-edit .form-select {
  min-width: 120px;
}
.hp-inline-edit .btn-icon {
  vertical-align: middle;
}

/* ── Bulk Workflow Actions ── */
.hp-bulk-workflow {
  display: flex; flex-wrap: wrap; gap: var(--hp-space-2);
}
.hp-bulk-workflow .btn {
  display: inline-flex; align-items: center; gap: var(--hp-space-1);
}

/* ── Process Timeline ── */
.hp-timeline {
  position: relative;
  padding-left: var(--hp-space-8);
}
.hp-timeline::before {
  content: "";
  position: absolute;
  left: 1.1rem; top: 0; bottom: 0;
  width: 2px;
  background: var(--hp-border);
}
.hp-timeline-item {
  position: relative;
  padding-bottom: var(--hp-space-6);
}
.hp-timeline-item:last-child { padding-bottom: 0; }
.hp-timeline-dot {
  position: absolute;
  left: -1.9rem;
  width: 1rem; height: 1rem;
  border-radius: var(--hp-radius-full);
  background: var(--hp-surface);
  border: 2px solid var(--hp-primary);
  z-index: 1;
}
.hp-timeline-item.success .hp-timeline-dot { background: var(--hp-success); border-color: var(--hp-success); }
.hp-timeline-item.warning .hp-timeline-dot { background: var(--hp-warning); border-color: var(--hp-warning); }
.hp-timeline-item.danger .hp-timeline-dot { background: var(--hp-danger); border-color: var(--hp-danger); }
.hp-timeline-item.info .hp-timeline-dot { background: var(--hp-info); border-color: var(--hp-info); }
.hp-timeline-item.muted .hp-timeline-dot { background: var(--hp-text-light); border-color: var(--hp-border); }

.hp-timeline-time {
  font-size: var(--hp-font-size-xs);
  color: var(--hp-text-muted);
  white-space: nowrap;
  margin-bottom: 0.125rem;
}
.hp-timeline-title {
  font-size: var(--hp-font-size-sm);
  font-weight: var(--hp-font-weight-semibold);
  color: var(--hp-text);
  margin: 0 0 var(--hp-space-1);
}
.hp-timeline-desc {
  font-size: var(--hp-font-size-sm);
  color: var(--hp-text-muted);
  margin: 0;
}

/* ── Keyboard navigation for stepper ── */
.hp-stepper-step[tabindex] { outline: none; }
.hp-stepper-step[tabindex]:focus-visible .hp-stepper-circle {
  box-shadow: 0 0 0 3px var(--hp-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE E — ONBOARDING & HELP
   ═══════════════════════════════════════════════════════════════════ */

/* ── Guided Tours (Intro.js overlay tweaks) ── */
.introjs-overlay { background: rgba(0,0,0,0.5) !important; }
.introjs-helperLayer { box-shadow: 0 0 0 9999px rgba(0,0,0,0.5) !important; border-radius: var(--hp-radius-md) !important; }
.introjs-tooltip {
  min-width: 280px; max-width: 360px;
  background: var(--hp-surface) !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: var(--hp-radius-lg) !important;
  box-shadow: var(--hp-shadow-xl) !important;
  padding: 0 !important;
}
.introjs-tooltip-header {
  padding: var(--hp-space-3) var(--hp-space-4);
  border-bottom: 1px solid var(--hp-border);
  background: var(--hp-surface-2);
  border-radius: var(--hp-radius-lg) var(--hp-radius-lg) 0 0;
}
.introjs-tooltip-title { font-weight: var(--hp-font-weight-semibold); color: var(--hp-text); margin: 0; }
.introjs-tooltip-text { padding: var(--hp-space-4); color: var(--hp-text); font-size: var(--hp-font-size-sm); line-height: 1.5; }
.introjs-tooltipbuttons {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--hp-space-3) var(--hp-space-4);
  border-top: 1px solid var(--hp-border);
  background: var(--hp-surface-2);
  border-radius: 0 0 var(--hp-radius-lg) var(--hp-radius-lg);
}
.introjs-button { border-radius: var(--hp-radius-md); font-weight: var(--hp-font-weight-medium); }
.introjs-button.introjs-skipbutton { background: transparent; color: var(--hp-text-muted); border: 1px solid var(--hp-border); }
.introjs-button.introjs-skipbutton:hover { background: var(--hp-surface-hover); }
.introjs-button.introjs-nextbutton,
.introjs-button.introjs-donebutton { background: var(--hp-primary); border-color: var(--hp-primary); color: var(--hp-text-inverse); }
.introjs-button.introjs-prevbutton { background: var(--hp-surface); border-color: var(--hp-border); color: var(--hp-text); }
.introjs-progress { height: 3px; background: var(--hp-border); border-radius: var(--hp-radius-full); overflow: hidden; }
.introjs-progressbar { background: var(--hp-primary); height: 100%; }

/* ── Contextual Hints / Tooltips ── */
.hp-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem; height: 1.25rem;
  border-radius: var(--hp-radius-full);
  background: var(--hp-info-bg);
  color: var(--hp-info);
  font-size: 0.7rem;
  cursor: help;
  flex-shrink: 0;
  transition: background var(--hp-transition-fast), color var(--hp-transition-fast);
}
.hp-hint:hover { background: var(--hp-info); color: var(--hp-text-inverse); }
.hp-hint[data-hp-hint]::after {
  content: attr(data-hp-hint);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  max-width: 280px;
  padding: var(--hp-space-2) var(--hp-space-3);
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-md);
  box-shadow: var(--hp-shadow-md);
  font-size: var(--hp-font-size-xs);
  color: var(--hp-text);
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hp-transition-fast), visibility var(--hp-transition-fast);
  z-index: var(--hp-z-tooltip);
}
.hp-hint:hover::after { opacity: 1; visibility: visible; }

/* Dismissible hint banner */
.hp-hint-banner {
  display: flex; align-items: flex-start; gap: var(--hp-space-3);
  padding: var(--hp-space-4);
  background: var(--hp-info-bg);
  border: 1px solid var(--hp-info-border);
  border-radius: var(--hp-radius-lg);
  margin-bottom: var(--hp-space-4);
}
.hp-hint-banner .hp-hint-icon { flex: 0 0 auto; color: var(--hp-info); font-size: 1.25rem; margin-top: 0.125rem; }
.hp-hint-banner .hp-hint-content { flex: 1; min-width: 0; }
.hp-hint-banner .hp-hint-title { font-weight: var(--hp-font-weight-semibold); color: var(--hp-text); margin: 0 0 var(--hp-space-1); }
.hp-hint-banner .hp-hint-text { font-size: var(--hp-font-size-sm); color: var(--hp-text-secondary); margin: 0; }
.hp-hint-banner .hp-hint-actions { display: flex; gap: var(--hp-space-2); margin-top: var(--hp-space-2); }
.hp-hint-banner .btn-close { flex: 0 0 auto; margin-top: -0.25rem; }

/* ── Empty State CTA Slot ── */
.hp-empty .hp-empty-cta { margin-top: var(--hp-space-4); display: flex; gap: var(--hp-space-2); justify-content: center; flex-wrap: wrap; }

/* ── Command Palette ── */
.hp-command-palette {
  position: fixed;
  top: 20vh; left: 50%;
  transform: translateX(-50%) scale(0.95);
  width: min(92vw, 720px);
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-lg);
  box-shadow: var(--hp-shadow-xl);
  z-index: var(--hp-z-modal);
  opacity: 0; visibility: hidden;
  transition: opacity var(--hp-transition-fast), transform var(--hp-transition-fast), visibility var(--hp-transition-fast);
  overflow: hidden;
}
.hp-command-palette.open { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); }
.hp-command-palette-header {
  display: flex; align-items: center; gap: var(--hp-space-3);
  padding: var(--hp-space-3) var(--hp-space-4);
  border-bottom: 1px solid var(--hp-border);
  background: var(--hp-surface-2);
}
.hp-command-palette-search {
  flex: 1;
  border: 0; background: var(--hp-surface-3);
  border-radius: var(--hp-radius-md);
  padding: var(--hp-space-2) var(--hp-space-3);
  font-size: var(--hp-font-size-base);
  color: var(--hp-text);
  width: 100%;
}
.hp-command-palette-search:focus { outline: none; box-shadow: var(--hp-shadow-focus); }
.hp-command-palette-kbd {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: var(--hp-surface-3);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-sm);
  font-size: var(--hp-font-size-xs);
  color: var(--hp-text-muted);
  font-family: var(--hp-font-mono);
}
.hp-command-palette-results { max-height: 50vh; overflow-y: auto; padding: var(--hp-space-2); }
.hp-command-section { margin-bottom: var(--hp-space-3); }
.hp-command-section-title { font-size: var(--hp-font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--hp-text-muted); padding: var(--hp-space-2) var(--hp-space-3); margin: 0; }
.hp-command-item {
  display: flex; align-items: center; gap: var(--hp-space-3);
  padding: var(--hp-space-2) var(--hp-space-3);
  border-radius: var(--hp-radius-md);
  color: var(--hp-text);
  text-decoration: none;
  transition: background var(--hp-transition-fast);
}
.hp-command-item:hover,
.hp-command-item.highlighted { background: var(--hp-surface-hover); }
.hp-command-item-icon { flex: 0 0 auto; width: 1.5rem; text-align: center; color: var(--hp-text-muted); }
.hp-command-item-label { flex: 1; font-size: var(--hp-font-size-sm); }
.hp-command-item-shortcut { font-size: var(--hp-font-size-xs); color: var(--hp-text-muted); font-family: var(--hp-font-mono); }

/* ── Help Sidebar ── */
.hp-help-sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 360px; max-width: 100vw;
  background: var(--hp-surface);
  border-left: 1px solid var(--hp-border);
  box-shadow: var(--hp-shadow-xl);
  z-index: var(--hp-z-drawer);
  transform: translateX(100%);
  transition: transform var(--hp-transition-normal);
  display: flex; flex-direction: column;
}
.hp-help-sidebar.open { transform: translateX(0); }
.hp-help-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--hp-space-4);
  border-bottom: 1px solid var(--hp-border);
  background: var(--hp-surface-2);
}
.hp-help-sidebar-title { font-size: var(--hp-font-size-lg); font-weight: var(--hp-font-weight-semibold); color: var(--hp-text); margin: 0; }
.hp-help-sidebar-body { flex: 1; overflow-y: auto; padding: var(--hp-space-4); }
.hp-help-sidebar-section { margin-bottom: var(--hp-space-5); }
.hp-help-sidebar-section-title { font-size: var(--hp-font-size-sm); font-weight: var(--hp-font-weight-semibold); color: var(--hp-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--hp-space-3); }
.hp-help-link {
  display: flex; align-items: center; gap: var(--hp-space-3);
  padding: var(--hp-space-2) var(--hp-space-3);
  border-radius: var(--hp-radius-md);
  color: var(--hp-text);
  text-decoration: none;
  transition: background var(--hp-transition-fast);
}
.hp-help-link:hover { background: var(--hp-surface-hover); color: var(--hp-primary); }
.hp-help-link-icon { flex: 0 0 auto; width: 1.5rem; text-align: center; color: var(--hp-text-muted); }
.hp-help-link-label { flex: 1; font-size: var(--hp-font-size-sm); }

/* ═══════════════════════════════════════════════════════════════════
   PHASE F — MOBILE / PWA
   ═══════════════════════════════════════════════════════════════════ */

/* ── Touch-Optimized Tables ── */
@media (max-width: 767px) {
  .table-responsive { -webkit-overflow-scrolling: touch; }
  /* UXX-01e: the original `min-width: 600px` here is what forced EVERY table
     into a horizontal scroller on phones, overriding card mode. Tables must
     be allowed to shrink so card mode can engage. */
  .table-responsive > .table { min-width: 0; }
  /* Sticky first column */
  .table th:first-child, .table td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--hp-surface);
    border-right: 1px solid var(--hp-border);
  }
  .table thead th:first-child { z-index: 2; }
}

/* Swipe actions on table rows */
.hp-swipe-actions {
  position: relative;
  overflow: hidden;
}
.hp-swipe-content {
  transition: transform var(--hp-transition-fast);
  will-change: transform;
}
.hp-swipe-menu {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex; align-items: center;
  width: 0; overflow: hidden;
  background: var(--hp-danger);
  transition: width var(--hp-transition-fast);
}
.hp-swipe-actions.open .hp-swipe-menu { width: 80px; }
.hp-swipe-actions.open .hp-swipe-content { transform: translateX(-80px); }
.hp-swipe-btn {
  flex: 1; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--hp-text-inverse); font-size: 1.1rem;
  background: transparent; border: 0;
}

/* Pull to refresh */
.hp-pull-refresh {
  position: absolute; top: -60px; left: 0; right: 0;
  height: 60px;
  display: flex; align-items: center; justify-content: center;
  color: var(--hp-text-muted);
  font-size: var(--hp-font-size-sm);
  transition: top var(--hp-transition-fast);
}
.hp-pull-refresh.active { top: 0; }
.hp-pull-refresh .spinner { width: 24px; height: 24px; }

/* ── Bottom Sheet Modals ── */
.hp-bottom-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-height: 90vh;
  background: var(--hp-surface);
  border-top-left-radius: var(--hp-radius-xl);
  border-top-right-radius: var(--hp-radius-xl);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
  z-index: var(--hp-z-modal);
  transform: translateY(100%);
  transition: transform var(--hp-transition-normal);
  display: flex; flex-direction: column;
}
.hp-bottom-sheet.open { transform: translateY(0); }
.hp-bottom-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: calc(var(--hp-z-modal) - 1);
  opacity: 0; visibility: hidden;
  transition: opacity var(--hp-transition-normal), visibility var(--hp-transition-normal);
}
.hp-bottom-sheet-backdrop.show { opacity: 1; visibility: visible; }

.hp-bottom-sheet-handle {
  width: 36px; height: 5px;
  margin: 12px auto 0;
  background: var(--hp-border-strong);
  border-radius: var(--hp-radius-full);
}
.hp-bottom-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--hp-space-4) var(--hp-space-5);
  border-bottom: 1px solid var(--hp-border);
}
.hp-bottom-sheet-title { font-size: var(--hp-font-size-lg); font-weight: var(--hp-font-weight-semibold); color: var(--hp-text); margin: 0; }
.hp-bottom-sheet-body { flex: 1; overflow-y: auto; padding: var(--hp-space-5); }
.hp-bottom-sheet-footer {
  display: flex; justify-content: flex-end; gap: var(--hp-space-2);
  padding: var(--hp-space-4) var(--hp-space-5);
  border-top: 1px solid var(--hp-border);
  background: var(--hp-surface-2);
}

/* On desktop, keep as center modal */
@media (min-width: 576px) {
  .hp-bottom-sheet[data-hp-desktop-modal="true"] {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    max-width: 480px; max-height: 80vh;
    border-radius: var(--hp-radius-lg);
    box-shadow: var(--hp-shadow-xl);
  }
  .hp-bottom-sheet[data-hp-desktop-modal="true"].open { transform: translate(-50%, -50%) scale(1); }
}

/* ── PWA Install Prompt ── */
.hp-install-banner {
  position: fixed;
  bottom: var(--hp-space-4); left: var(--hp-space-4); right: var(--hp-space-4);
  max-width: 400px; margin: 0 auto;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-lg);
  box-shadow: var(--hp-shadow-xl);
  padding: var(--hp-space-4);
  z-index: var(--hp-z-toast);
  transform: translateY(120px);
  opacity: 0;
  transition: transform var(--hp-transition-normal), opacity var(--hp-transition-normal);
}
.hp-install-banner.show { transform: translateY(0); opacity: 1; }
.hp-install-banner-content { display: flex; align-items: center; gap: var(--hp-space-3); }
.hp-install-banner-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--hp-radius-lg); background: var(--hp-primary); color: var(--hp-text-inverse); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.hp-install-banner-text { flex: 1; min-width: 0; }
.hp-install-banner-title { font-weight: var(--hp-font-weight-semibold); color: var(--hp-text); margin: 0 0 0.125rem; }
.hp-install-banner-desc { font-size: var(--hp-font-size-sm); color: var(--hp-text-muted); margin: 0; }
.hp-install-banner-actions { display: flex; gap: var(--hp-space-2); margin-top: var(--hp-space-3); }

/* PWA Update Notification */
.hp-update-banner {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--hp-warning-bg);
  border-bottom: 1px solid var(--hp-warning);
  color: var(--hp-warning-text);
  padding: var(--hp-space-3) var(--hp-space-4);
  z-index: var(--hp-z-toast);
  transform: translateY(-100%);
  transition: transform var(--hp-transition-normal);
  display: flex; align-items: center; justify-content: space-between; gap: var(--hp-space-4);
}
.hp-update-banner.show { transform: translateY(0); }
.hp-update-banner-text { flex: 1; font-size: var(--hp-font-size-sm); }
.hp-update-banner-actions { display: flex; gap: var(--hp-space-2); flex-shrink: 0; }

/* ── Responsive Nav: Bottom Tab Bar ── */
.hp-bottom-tabs {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--hp-surface);
  border-top: 1px solid var(--hp-border);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  z-index: var(--hp-z-nav);
  padding: var(--hp-space-1) 0 env(safe-area-inset-bottom);
}
@media (max-width: 767px) {
  .hp-bottom-tabs { display: flex; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}
.hp-bottom-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.125rem;
  padding: var(--hp-space-1) var(--hp-space-2);
  color: var(--hp-text-muted);
  text-decoration: none;
  font-size: var(--hp-font-size-xs);
  transition: color var(--hp-transition-fast);
}
.hp-bottom-tab:hover, .hp-bottom-tab.active { color: var(--hp-primary); }
.hp-bottom-tab-icon { font-size: 1.25rem; }

/* ── Touch Gestures ── */
/* Swipe gesture area for drawer */
.hp-swipe-edge {
  position: fixed; top: 0; bottom: 0; width: 24px;
  z-index: calc(var(--hp-z-drawer) - 2);
  background: transparent;
}
.hp-swipe-edge.left { left: 0; }
.hp-swipe-edge.right { right: 0; }

/* Double-tap zoom for tables */
.hp-table-zoom {
  touch-action: manipulation;
}
.hp-table-zoom.zoomed {
  transform-origin: 0 0;
  transform: scale(1.5);
}

/* ── Offline Indicator ── */
.hp-offline-indicator {
  position: fixed; bottom: var(--hp-space-4); left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--hp-danger);
  color: var(--hp-text-inverse);
  padding: var(--hp-space-2) var(--hp-space-4);
  border-radius: var(--hp-radius-full);
  font-size: var(--hp-font-size-sm);
  font-weight: var(--hp-font-weight-medium);
  box-shadow: var(--hp-shadow-lg);
  z-index: var(--hp-z-toast);
  display: flex; align-items: center; gap: var(--hp-space-2);
  opacity: 0; visibility: hidden;
  transition: transform var(--hp-transition-normal), opacity var(--hp-transition-normal), visibility var(--hp-transition-normal);
}
.hp-offline-indicator.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }
.hp-offline-indicator.online { background: var(--hp-success); }

/* ── Safe Area Insets ── */
@supports (padding: max(0px)) {
  .hp-bottom-sheet { padding-bottom: max(var(--hp-space-4), env(safe-area-inset-bottom)); }
  .hp-install-banner { bottom: max(var(--hp-space-4), env(safe-area-inset-bottom)); }
}

/* ── US-27 Order Booker: stacked item rows — zero horizontal scroll ── */
/* Items flow vertically on every screen size; two fields share a row on
   phones, the whole row fits one line on desktop (2+2+3+1+2+1+1 = 12). */
.order-items-stacked { display: block; }
.order-items-stacked .order-item-row {
  background: var(--hp-surface-2);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-lg, 0.75rem);
  padding: 0.75rem;
}
.order-items-stacked .order-item-row .form-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--hp-text-secondary);
  margin-bottom: 0.2rem;
}
@media (max-width: 767.98px) {
  /* The old layout scrolled these sideways on phones — this one never does. */
  .order-items-stacked { overflow-x: hidden; }
  .order-items-stacked .remove-item-btn {
    min-height: calc(1.5em + 0.5rem + 2px);
  }
}

/* ── Sales Order Form: Horizontal Item Cards on Mobile ── */
@media (max-width: 767px) {
  .order-items-horizontal {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--hp-space-3);
    padding-bottom: var(--hp-space-2);
    margin: 0 calc(var(--hp-space-4) * -1);
    padding: 0 var(--hp-space-4) var(--hp-space-2);
    scroll-snap-type: x mandatory;
  }
  .order-items-horizontal .order-item-row {
    flex: 0 0 280px;
    max-width: 280px;
    scroll-snap-align: start;
  }
  .order-items-horizontal .order-item-row .col-md-2 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: var(--hp-space-2);
  }
  .order-items-horizontal .order-item-row .remove-item-btn {
    width: 100%;
  }
}

/* Scroll indicator for horizontal items */
.order-items-horizontal::-webkit-scrollbar {
  height: 6px;
}
.order-items-horizontal::-webkit-scrollbar-track {
  background: var(--hp-surface-2);
  border-radius: 3px;
}
.order-items-horizontal::-webkit-scrollbar-thumb {
  background: var(--hp-border-strong);
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE-FIRST COMPREHENSIVE UX IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Mobile Card-Based Table View ── */
@media (max-width: 767.98px) {
  /* Transform tables into stacked cards */
  .table-responsive[data-hp-mobile-cards] table {
    display: block;
  }
  .table-responsive[data-hp-mobile-cards] thead {
    display: none;
  }
  .table-responsive[data-hp-mobile-cards] tbody {
    display: block;
  }
  .table-responsive[data-hp-mobile-cards] tr {
    display: block;
    background: var(--hp-card-bg);
    border: 1px solid var(--hp-card-border);
    border-radius: var(--hp-radius-lg);
    margin-bottom: var(--hp-space-3);
    padding: var(--hp-space-4);
    box-shadow: var(--hp-shadow-sm);
  }
  .table-responsive[data-hp-mobile-cards] td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--hp-space-2) 0;
    border-bottom: 1px solid var(--hp-border-light);
    white-space: normal !important;
  }
  .table-responsive[data-hp-mobile-cards] td:last-child {
    border-bottom: none;
  }
  .table-responsive[data-hp-mobile-cards] td::before {
    content: attr(data-label);
    font-weight: var(--hp-font-weight-semibold);
    color: var(--hp-text-muted);
    font-size: var(--hp-font-size-sm);
    flex: 0 0 40%;
  }
  .table-responsive[data-hp-mobile-cards] td > * {
    flex: 1;
    text-align: right;
  }
  /* Checkboxes keep their natural size in cards (SELECT row) instead of
     stretching full-width like text values do. */
  .table-responsive[data-hp-mobile-cards] td input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-left: auto;
  }
  .table-responsive[data-hp-mobile-cards] td .badge,
  .table-responsive[data-hp-mobile-cards] td .btn {
    margin-left: var(--hp-space-2);
  }
}

/* Card actions row on mobile */
@media (max-width: 767.98px) {
  .hp-card-actions {
    display: flex;
    gap: var(--hp-space-2);
    margin-top: var(--hp-space-3);
    padding-top: var(--hp-space-3);
    border-top: 1px solid var(--hp-border-light);
    flex-wrap: wrap;
  }
  .hp-card-actions .btn {
    flex: 1;
    min-width: 120px;
  }
}

/* ── Mobile Form Improvements ── */
@media (max-width: 767.98px) {
  /* Full-width form fields */
  .form-section {
    padding: var(--hp-space-4) var(--hp-space-3);
  }
  .form-section .row.g-3 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .form-section .row.g-3 > .col-auto {
    flex: 0 0 auto;
    width: auto;
  }

  /* Larger touch targets for form controls */
  .form-control,
  .form-select,
  .form-check-input {
    min-height: 44px;
  }
  .form-select {
    padding-right: 3rem;
  }
  .input-group-text {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Better spacing for field groups */
  .mb-3 { margin-bottom: var(--hp-space-4) !important; }
  .mb-2 { margin-bottom: var(--hp-space-3) !important; }

  /* Checkbox/radio touch targets */
  .form-check {
    padding-left: 2rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: -1.75rem;
  }
}

/* ── Sticky Form Actions (Bottom Bar) ── */
.hp-form-sticky-actions {
  display: none;
}
@media (max-width: 767.98px) {
  .hp-form-sticky-actions {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--hp-surface);
    border-top: 1px solid var(--hp-border);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    padding: var(--hp-space-3) var(--hp-space-4);
    z-index: var(--hp-z-toolbar);
    gap: var(--hp-space-2);
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .hp-form-sticky-actions .btn {
    flex: 1;
    min-width: 120px;
    min-height: 48px;
  }
  body.has-sticky-form-actions {
    padding-bottom: 80px;
  }
}

/* ── Mobile-Optimized Wizard Stepper ── */
@media (max-width: 767.98px) {
  .hp-stepper,
  .wizard-stepper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--hp-space-2);
    margin-bottom: var(--hp-space-4);
  }
  .hp-stepper-step,
  .stepper-item {
    flex: 0 0 auto;
    min-width: 0;
  }
  .hp-stepper-circle,
  .stepper-circle {
    width: 36px; height: 36px;
    font-size: 0.8rem;
  }
  .hp-stepper-label,
  .stepper-label {
    display: none; /* Hide labels on very small screens, show only in landscape or via tooltip */
  }
}

/* ── Mobile Search & Filter Bar ── */
@media (max-width: 767.98px) {
  .hx-dt-toolbar,
  .dt-top,
  .table-toolbar {
    flex-wrap: wrap;
    gap: var(--hp-space-2);
  }
  .hx-dt-toolbar-left,
  .hx-dt-toolbar-right,
  .dt-actions {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
  }
  .hx-dt-search,
  .dt-search,
  .dataTables_filter {
    width: 100% !important;
    order: 99;
  }
  .hx-dt-search input,
  .dt-search input,
  .dataTables_filter input {
    width: 100% !important;
    min-height: 44px;
  }
  .dt-buttons {
    order: 98;
    flex-wrap: wrap;
    gap: var(--hp-space-1);
  }
  .dt-buttons .btn {
    min-height: 40px;
    padding: 0.375rem 0.75rem;
  }
}

/* ── Mobile Dropdown Improvements ── */
@media (max-width: 767.98px) {
  .select2-container--bootstrap-5 .select2-selection--single {
    min-height: 44px;
  }
  .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
  }
  .select2-container--bootstrap-5 .select2-selection__arrow {
    height: 40px;
  }
  .select2-dropdown {
    max-height: 60vh;
  }
  .select2-results__option {
    padding: 0.75rem 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ── Mobile Modal Improvements ── */
@media (max-width: 767.98px) {
  .modal-dialog {
    margin: 0;
    max-width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  .modal-content {
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--hp-space-4);
  }
  .modal-header,
  .modal-footer {
    flex-shrink: 0;
    padding: var(--hp-space-3) var(--hp-space-4);
  }
  .modal-footer {
    flex-wrap: wrap;
    gap: var(--hp-space-2);
  }
  .modal-footer .btn {
    flex: 1;
    min-width: 120px;
    min-height: 44px;
  }
}

/* ── Mobile Dashboard/KPI Cards ── */
@media (max-width: 575.98px) {
  .hp-dashboard {
    grid-template-columns: 1fr;
    gap: var(--hp-space-3);
    padding: var(--hp-space-3);
  }
  .hp-kpi-card {
    padding: var(--hp-space-4);
  }
  .hp-kpi-value { font-size: var(--hp-font-size-2xl); }
  .hp-kpi-icon { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
}

/* ── Mobile Empty States ── */
@media (max-width: 767.98px) {
  .hp-empty {
    padding: var(--hp-space-8) var(--hp-space-4);
  }
  .hp-empty .hp-empty-icon {
    width: 4rem; height: 4rem;
    font-size: 2rem;
  }
  .hp-empty .hp-empty-title { font-size: var(--hp-font-size-lg); }
  .hp-empty .hp-empty-text { font-size: var(--hp-font-size-sm); }
  .hp-empty .hp-empty-cta .btn {
    width: 100%;
    min-height: 48px;
  }
}

/* ── Mobile Breadcrumb ── */
@media (max-width: 767.98px) {
  .breadcrumb {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 0.5rem;
  }
}

/* ── Mobile Tab Navigation ── */
@media (max-width: 767.98px) {
  .nav-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--hp-space-2);
    margin-bottom: calc(var(--hp-space-2) * -1);
  }
  .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .nav-tabs .nav-link {
    white-space: nowrap;
    padding: var(--hp-space-2) var(--hp-space-3);
    min-width: max-content;
  }
}

/* ── Mobile Button Groups ── */
@media (max-width: 767.98px) {
  .btn-group,
  .btn-group-vertical {
    flex-wrap: wrap;
  }
  .btn-group .btn,
  .btn-group-vertical .btn {
    flex: 1;
    min-width: 120px;
    text-align: center;
  }
  .d-flex.gap-1,
  .d-flex.gap-2,
  .d-flex.gap-3 {
    flex-wrap: wrap;
  }
}

/* ── Mobile Pagination ── */
@media (max-width: 767.98px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--hp-space-1);
  }
  .page-link {
    min-width: 40px;
    min-height: 40px;
    padding: 0.375rem 0.75rem;
  }
  .page-item:not(:first-child):not(:last-child) {
    display: none; /* Hide middle pages on mobile, show only prev/next */
  }
  .page-item:first-child,
  .page-item:last-child {
    display: block;
  }
}

/* ── Mobile Alert/Toast Improvements ── */
@media (max-width: 767.98px) {
  .alert {
    padding: var(--hp-space-3) var(--hp-space-4);
    border-radius: var(--hp-radius-md);
  }
  .alert .btn-close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Mobile List Groups ── */
@media (max-width: 767.98px) {
  .list-group-item {
    padding: var(--hp-space-3) var(--hp-space-4);
  }
  .list-group-item .d-flex {
    flex-wrap: wrap;
    gap: var(--hp-space-2);
  }
  .list-group-item .ms-auto {
    margin-left: 0 !important;
    width: 100%;
    text-align: right;
  }
}

/* ── Mobile Card Layout ── */
@media (max-width: 767.98px) {
  .card { margin-bottom: var(--hp-space-3); }
  .card-body { padding: var(--hp-space-4); }
  .card-header { padding: var(--hp-space-3) var(--hp-space-4); }
  .card-header h4,
  .card-header h5 { font-size: var(--hp-font-size-base); }
}

/* ── Mobile Input Groups (UXX-13) ──
   Inline on phones: icon + input + button share ONE bordered shell.
   Old rules stacked them vertically (icon detached from field = broken). */
@media (max-width: 767.98px) {
  .input-group {
    flex-wrap: nowrap;
  }
  .input-group > .form-control,
  .input-group > .form-select {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
  }
  .input-group-text,
  .input-group-append .btn,
  .input-group-prepend .btn {
    min-height: 48px;
    flex: 0 0 auto;
  }
}

/* ── Mobile Table with Sticky First Column ── */
@media (max-width: 767.98px) {
  .table-responsive {
    position: relative;
  }
  .table-responsive table th:first-child,
  .table-responsive table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--hp-surface);
    border-right: 2px solid var(--hp-border);
  }
  .table-responsive table thead th:first-child {
    z-index: 2;
  }
  .table-responsive table th:first-child {
    background: var(--hp-table-header-bg);
    color: var(--hp-table-header-text);
  }
}

/* ── Mobile Swipe Actions for List Items ── */
@media (max-width: 767.98px) {
  .hp-swipe-item {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
  }
  .hp-swipe-content {
    transition: transform var(--hp-transition-fast);
    background: var(--hp-card-bg);
  }
  .hp-swipe-actions {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    display: flex;
    width: 0;
    overflow: hidden;
  }
  .hp-swipe-item.open .hp-swipe-content {
    transform: translateX(-80px);
  }
  .hp-swipe-item.open .hp-swipe-actions {
    width: 80px;
  }
  .hp-swipe-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    border: none;
    background: var(--hp-danger);
  }
}

/* ── Mobile Collapsible Sections ── */
@media (max-width: 767.98px) {
  .hp-collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--hp-space-3);
    background: var(--hp-surface-2);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-md);
    cursor: pointer;
  }
  .hp-collapsible-header[aria-expanded="false"] + .hp-collapsible-body {
    display: none;
  }
  .hp-collapsible-chevron {
    transition: transform var(--hp-transition-fast);
  }
  .hp-collapsible-header[aria-expanded="true"] .hp-collapsible-chevron {
    transform: rotate(180deg);
  }
}

/* ── Mobile Page Header ── */
@media (max-width: 767.98px) {
  .hp-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hp-space-3);
    padding: var(--hp-space-4);
  }
  .hp-page-header .hp-page-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .hp-page-header .hp-page-actions .btn {
    min-height: 40px;
  }
}

/* ── Mobile Focus Indicators ── */
@media (max-width: 767.98px) {
  *:focus-visible {
    outline: 3px solid var(--hp-focus-ring);
    outline-offset: 2px;
  }
}

/* ── Mobile Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .hp-swipe-content,
  .hp-stepper-circle,
  .hp-kpi-card,
  .card-hover,
  .btn {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Landscape Mobile Adjustments ── */
@media (max-height: 500px) and (orientation: landscape) {
  .modal-dialog {
    max-height: 90vh;
    margin: 2vh auto;
  }
  .modal-body {
    max-height: 60vh;
  }
  .hp-bottom-sheet {
    max-height: 85vh;
  }
  .hp-install-banner,
  .hp-update-banner {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ── Print Optimizations ── */
@media print {
  .hp-form-sticky-actions,
  .hp-bottom-tabs,
  .hp-fab,
  .hp-offline-indicator,
  .hp-install-banner,
  .hp-update-banner,
  .mobile-menu-toggle,
  .sidebar-backdrop,
  .sidebar { display: none !important; }
  .main-content { margin-left: 0 !important; padding: 0 !important; }
  .table-responsive[data-hp-mobile-cards] tr { break-inside: avoid; page-break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE-FIRST UX OVERHAUL — Simplified, Friendly, Easy to Use
   ═══════════════════════════════════════════════════════════════════ */

/* ── Global Mobile Simplification ── */
@media (max-width: 767.98px) {
  /* Reduce visual clutter - hide secondary info */
  .text-muted.small,
  .text-muted.xs,
  .form-text,
  .badge.bg-secondary,
  .badge.bg-light { display: none !important; }
  
  /* Simplify cards */
  .card { border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border-radius: 12px; margin-bottom: 12px; }
  .card-body { padding: 16px; }
  .card-header { background: transparent; border: none; padding: 12px 16px; }
  .card-header h4, .card-header h5 { font-size: 16px; font-weight: 600; }
  
  /* Larger base font for readability */
  html { font-size: 16px; }
  body { line-height: 1.6; }
  
  /* More generous spacing */
  .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
  .row { margin-left: -8px; margin-right: -8px; }
  [class*="col-"] { padding-left: 8px; padding-right: 8px; }
}

/* ── Mobile Dashboard - Card Based, Not Table ── */
@media (max-width: 767.98px) {
  .hp-dashboard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  
  .hp-kpi-card {
    background: var(--hp-card-bg);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid var(--hp-card-border);
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .hp-kpi-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
  }
  
  .hp-kpi-content { flex: 1; min-width: 0; }
  .hp-kpi-value { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0; }
  .hp-kpi-label { font-size: 13px; color: var(--hp-text-muted); margin: 4px 0 0; }
  .hp-kpi-trend { font-size: 12px; padding: 4px 10px; }
  
  /* Hide sparkline on mobile - takes too much space */
  .hp-kpi-sparkline { display: none; }
}

/* ── Bottom Navigation Bar - Primary Mobile Nav ── */
.hp-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--hp-surface);
  border-top: 1px solid var(--hp-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  z-index: 1000;
  padding: 8px 0 env(safe-area-inset-bottom);
}

@media (max-width: 767.98px) {
  .hp-bottom-nav { display: flex; }
  body { padding-bottom: 88px; }
}

.hp-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  color: var(--hp-text-muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  transition: color 0.2s;
  min-height: 56px;
}

.hp-bottom-nav-item:hover,
.hp-bottom-nav-item.active { color: var(--hp-primary); }

.hp-bottom-nav-icon { font-size: 22px; }
.hp-bottom-nav-badge {
  position: absolute;
  top: 4px; right: 20%;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  background: var(--hp-danger);
  color: white;
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

/* UXX-16: FAB removed system-wide. It was "display:flex" unconditionally, so a
   56px green plus-circle floated over EVERY desktop page (JS never ran >=768 to
   hide it) and duplicated the quick-actions of the bottom bar / Add-New buttons
   on mobile. Real quick actions live in the page header + bottom tab bar. */
.hp-fab,
.hp-fab-menu,
.hp-swipe-edge {
  display: none !important;
}

.hp-fab-main {
  width: 56px; height: 56px;
  border-radius: 28px;
  background: var(--hp-primary);
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 16px rgba(16,185,129,0.4);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.hp-fab-main:active { transform: scale(0.95); }
.hp-fab-main:hover { box-shadow: 0 6px 24px rgba(16,185,129,0.5); }

.hp-fab-menu {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-right: 8px;
}

.hp-fab.open .hp-fab-menu { display: flex; }

.hp-fab-item {
  width: 48px; height: 48px;
  border-radius: 24px;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  color: var(--hp-text);
  font-size: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, background 0.2s;
  text-decoration: none;
}

.hp-fab-item:active { transform: scale(0.95); }
.hp-fab-item:hover { background: var(--hp-surface-hover); transform: scale(1.05); }

/* ── Mobile Forms - Stacked, Large Touch Targets ── */
@media (max-width: 767.98px) {
  /* Full width fields */
  .form-section .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  /* Large touch targets */
  .form-control,
  .form-select,
  .input-group-text,
  .btn {
    min-height: 48px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  .form-select { padding-right: 44px; }
  
  /* Labels above inputs, larger */
  .form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--hp-text);
    margin-bottom: 8px;
    display: block;
  }
  
  .form-label .text-danger { color: var(--hp-danger) !important; }
  
  /* Help text */
  .form-text {
    display: block !important;
    font-size: 12px;
    color: var(--hp-text-muted);
    margin-top: 4px;
  }
  
  /* Checkboxes/radios - large touch area, label never glued to the box */
  .form-check {
    padding-left: 32px;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  .form-check-input {
    width: 22px; height: 22px;
    margin-left: -32px;
    margin-top: 0;
    border: 2px solid var(--hp-border-strong);
  }
  .form-check-input:checked { border-color: var(--hp-primary); }
  .form-check-label { font-size: 15px; line-height: 1.4; cursor: pointer; }
  
  /* Input groups stay inline on mobile (UXX-13) — icon, field and button
     keep one shared shell; Bootstrap's radii/margins apply untouched. */
  .input-group { flex-direction: row; }
  
  /* Field groups */
  .mb-3 { margin-bottom: 20px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE FORM ENHANCEMENTS — Proper Structure, Spacing, Layout
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  /* ── Form Section Cards - Visual Grouping ── */
  .form-section {
    background: var(--hp-card-bg);
    border: 1px solid var(--hp-card-border);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
  }
  .form-section .section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--hp-surface-2);
    border-bottom: 1px solid var(--hp-border-light);
    font-weight: 600;
    font-size: 15px;
    color: var(--hp-text);
  }
  .form-section .section-header .section-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    background: var(--hp-brand-soft);
    color: var(--hp-primary);
    flex-shrink: 0;
  }
  .form-section .section-body {
    padding: 16px;
  }
  .form-section .section-footer {
    padding: 12px 16px;
    background: var(--hp-surface-2);
    border-top: 1px solid var(--hp-border-light);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* ── Field Row Cards - Visual Separation ── */
  .hp-field-row {
    background: var(--hp-surface);
    border: 1px solid var(--hp-border-light);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
  }
  .hp-field-row:last-child { margin-bottom: 0; }
  .hp-field-row.compact { padding: 8px 12px; }
  
  /* ── Field Label + Input Alignment ── */
  .hp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .hp-field.inline { flex-direction: row; align-items: center; gap: 12px; }
  .hp-field.inline .form-label { 
    flex: 0 0 90px; 
    margin-bottom: 0; 
    font-size: 13px; 
    white-space: nowrap;
  }
  .hp-field.inline .form-control,
  .hp-field.inline .form-select { flex: 1; }
  
  /* ── Inline Validation States ── */
  .form-control.is-valid,
  .form-select.is-valid {
    border-color: var(--hp-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2310b981' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-right: 40px;
  }
  .form-control.is-invalid,
  .form-select.is-invalid {
    border-color: var(--hp-danger);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ef4444'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ef4444' stroke='none'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-right: 40px;
  }
  .invalid-feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--hp-danger);
    margin-top: 6px;
    padding: 8px 12px;
    background: var(--hp-danger-bg);
    border-radius: 8px;
    border: 1px solid var(--hp-danger-border);
  }
  .invalid-feedback::before {
    content: "âš ";
    font-size: 12px;
  }
  .valid-feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--hp-success);
    margin-top: 6px;
  }
  .valid-feedback::before {
    content: "✓";
    font-size: 12px;
  }

  /* ── Floating Label Style (for focused/filled inputs) ── */
  .hp-floating-label {
    position: relative;
  }
  .hp-floating-label .form-control,
  .hp-floating-label .form-select {
    padding-top: 24px;
    padding-bottom: 8px;
  }
  .hp-floating-label .form-label {
    position: absolute;
    top: 50%; left: 12px;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--hp-text-muted);
    pointer-events: none;
    transition: all 0.2s ease;
    background: transparent;
    padding: 0 4px;
  }
  .hp-floating-label .form-control:focus + .form-label,
  .hp-floating-label .form-control:not(:placeholder-shown) + .form-label,
  .hp-floating-label .form-select:focus + .form-label,
  .hp-floating-label .form-select:not([value=""]) + .form-label {
    top: 4px;
    font-size: 11px;
    color: var(--hp-primary);
    font-weight: 600;
    background: var(--hp-surface);
  }

  /* ── Field Groups with Visual Separation ── */
  .hp-field-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: var(--hp-surface);
    border-radius: 12px;
    border: 1px solid var(--hp-border-light);
    margin-bottom: 16px;
  }
  .hp-field-group.compact { gap: 12px; padding: 12px; }
  .hp-field-group .group-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--hp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hp-border-light);
    margin-bottom: 8px;
  }

  /* ── Sticky Section Headers for Long Forms ── */
  .hp-sticky-section {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--hp-surface);
    border-bottom: 1px solid var(--hp-border);
    padding: 12px 16px;
    margin: 0 -16px 16px -16px;
    backdrop-filter: blur(8px);
    background: color-mix(in srgb, var(--hp-surface) 95%, transparent);
  }
  .hp-sticky-section .section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--hp-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .hp-sticky-section .section-progress {
    margin-left: auto;
    font-size: 12px;
    color: var(--hp-text-muted);
  }

  /* ── Multi-Step Form Wizard ── */
  .hp-wizard {
    margin-bottom: 24px;
  }
  .hp-wizard-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .hp-wizard-steps::-webkit-scrollbar { display: none; }
  .hp-wizard-step {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 72px;
  }
  .hp-wizard-step-circle {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    font-weight: 600;
    background: var(--hp-surface-2);
    color: var(--hp-text-muted);
    border: 2px solid var(--hp-border);
    transition: all 0.2s;
  }
  .hp-wizard-step.active .hp-wizard-step-circle {
    background: var(--hp-primary);
    color: white;
    border-color: var(--hp-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hp-primary) 20%, transparent);
  }
  .hp-wizard-step.completed .hp-wizard-step-circle {
    background: var(--hp-success);
    color: white;
    border-color: var(--hp-success);
  }
  .hp-wizard-step-label {
    font-size: 11px;
    color: var(--hp-text-muted);
    text-align: center;
    white-space: nowrap;
  }
  .hp-wizard-step.active .hp-wizard-step-label { color: var(--hp-primary); font-weight: 600; }
  .hp-wizard-step.completed .hp-wizard-step-label { color: var(--hp-success); }

  .hp-wizard-panel { display: none; }
  .hp-wizard-panel.active { display: block; animation: hp-slide-up 0.2s ease; }
  @keyframes hp-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  
  .hp-wizard-actions {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--hp-border-light);
    margin-top: 24px;
  }
  .hp-wizard-actions .btn { flex: 1; min-height: 48px; }

  /* ── Auto-Focus Management ── */
  .hp-auto-focus:first-child { 
    animation: hp-focus-ring 1s ease infinite; 
  }
  @keyframes hp-focus-ring {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hp-primary) 40%, transparent); }
    50% { box-shadow: 0 0 0 8px transparent; }
  }

  /* ── Reduced Horizontal Scrolling ── */
  .form-section .row { 
    margin-left: 0; 
    margin-right: 0; 
  }
  .form-section [class*="col-"] { 
    padding-left: 0; 
    padding-right: 0; 
  }
  /* Prevent any element from causing horizontal overflow */
  .form-section * { max-width: 100%; }
  .form-section .table-responsive { margin-left: -16px; margin-right: -16px; }

  /* ── Better Date Picker / Select2 Dropdown Positioning ── */
  .select2-dropdown { max-width: 100vw !important; left: 0 !important; right: 0 !important; }
  .select2-container--open .select2-dropdown { border-radius: 16px !important; }

  /* ── Keyboard Navigation ── */
  .form-control:focus-visible,
  .form-select:focus-visible {
    outline: 3px solid var(--hp-focus-ring);
    outline-offset: 2px;
  }
}

/* ── Sticky Form Actions Bar ──
   UXX-21: base stays hidden — an unconditional `display:flex` here made the
   fixed full-width bar appear on desktop too (double bar + stray overlap). */
.hp-form-actions-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--hp-surface);
  border-top: 1px solid var(--hp-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  padding: 12px 16px;
  z-index: 1000;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 767.98px) {
  /* UXX-21: sit ABOVE the bottom nav — both were fixed bottom:0 z:1000 and the
     nav (injected later in DOM) painted over Cancel/Next entirely. */
  .hp-form-actions-bar {
    display: flex;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    z-index: 1002;
  }
  body.has-form-actions { padding-bottom: calc(184px + env(safe-area-inset-bottom, 0px)); }
}

.hp-form-actions-bar .btn {
  flex: 1;
  min-width: 120px;
  min-height: 48px;
  font-weight: 600;
  border-radius: 12px;
}

/* US-26: phones — Cancel/Previous go icon-only (.hp-bar-label hidden) so a
   3-button bar (Cancel + Previous + Create) fits 360-414px with no wrap. */
@media (max-width: 575.98px) {
  .hp-form-actions-bar .hp-bar-label { display: none; }
  .hp-form-actions-bar .btn { min-width: 0; }
  .hp-form-actions-bar a[data-hp-wizard-prev],
  .hp-form-actions-bar button[data-hp-wizard-prev] {
    flex: 0 0 auto;
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ═══════════════ UXX-21: form pages — actions bar, select2, input-groups ═══════════════ */

/* select2 renders its own white theme (bs-5 theme keys off bootstrap vars the
   app never switches to dark). Skin it with the brand tokens. */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--hp-input-bg);
  border-color: var(--hp-border);
  color: var(--hp-text);
}
.select2-container--bootstrap-5 .select2-selection--single,
.select2-container--default .select2-selection--single { min-height: 44px; }
.select2-container--bootstrap-5 .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--hp-text);
}
.select2-container--bootstrap-5 .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--hp-input-placeholder);
}
.select2-container--bootstrap-5.select2-container--disabled .select2-selection,
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: var(--hp-input-disabled-bg);
  color: var(--hp-text-muted);
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--hp-surface-2);
  border-color: var(--hp-border);
  color: var(--hp-text);
}
.select2-container--bootstrap-5 .select2-selection__clear,
.select2-container--default .select2-selection__clear { color: var(--hp-text-muted); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--default.select2-container--focus .select2-selection {
  border-color: var(--hp-input-focus-border);
  box-shadow: 0 0 0 3px var(--hp-input-focus-ring);
}
.select2-container--bootstrap-5 .select2-dropdown,
.select2-container--default .select2-dropdown {
  background-color: var(--hp-surface);
  border-color: var(--hp-border);
  color: var(--hp-text);
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--hp-input-bg);
  border-color: var(--hp-border);
  color: var(--hp-text);
}
.select2-container--bootstrap-5 .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--hp-surface-2);
  color: var(--hp-text);
}
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--hp-primary);
  color: var(--hp-text-inverse);
}

/* input-groups are ONE shell — templates carrying inline `flex-wrap:wrap`
   split the add/append button onto its own stray row (Customer "+", etc.). */
.input-group,
.input-group .input-group-append,
.input-group .input-group-prepend {
  flex-wrap: nowrap !important;
}
.input-group { gap: 0 !important; }
.input-group > .form-control,
.input-group > .form-select { min-width: 0; }

/* Toolbar rows (Back + legend + mode toggle) overflowed off-screen on phones */
@media (max-width: 767.98px) {
  .container-fluid > .d-flex { flex-wrap: wrap; row-gap: 8px; }
}

/* install banner floats above the bottom nav / actions bar instead of
   parking on top of them */
@media (max-width: 767.98px) {
  .hp-install-banner { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  body.has-form-actions .hp-install-banner { bottom: calc(196px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) {
  body.has-form-actions .hp-install-banner { bottom: 92px; }
}

/* ═══════════════ UXX-22: visible wizard validation on select2 controls ═══════════════ */
/* select2 hides the native <select>, so .is-invalid landed on an invisible
   element — required-field errors on Customer/Branch were invisible and the
   Next button looked dead. */
.hp-select2-invalid .select2-selection,
.hp-select2-invalid.select2-container .select2-selection {
  border-color: #e05252 !important;
  box-shadow: 0 0 0 3px rgba(224, 82, 82, 0.25) !important;
}

/* ── Bottom Sheets Instead of Modals ── */
@media (max-width: 767.98px) {
  .modal.show .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .modal-content {
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .modal-header {
    padding: 16px;
    border-radius: 0;
    flex-shrink: 0;
  }
  .modal-title { font-size: 18px; font-weight: 600; }
  .modal-header .btn-close {
    width: 32px; height: 32px;
    padding: 0;
    background-size: 16px;
  }
  .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
  }
  .modal-footer {
    padding: 16px;
    border-radius: 0;
    flex-wrap: wrap;
    gap: 12px;
    flex-shrink: 0;
  }
  .modal-footer .btn {
    flex: 1;
    min-width: 120px;
    min-height: 48px;
  }
}

/* ── Progressive Disclosure - Collapsible Sections ── */
@media (max-width: 767.98px) {
  .hp-collapsible {
    border: 1px solid var(--hp-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--hp-card-bg);
  }
  .hp-collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--hp-surface-2);
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
  }
  .hp-collapsible-chevron {
    transition: transform 0.2s;
    font-size: 18px;
    color: var(--hp-text-muted);
  }
  .hp-collapsible[open] .hp-collapsible-chevron {
    transform: rotate(180deg);
  }
  .hp-collapsible-body {
    padding: 16px;
    animation: hp-slide-down 0.2s ease;
  }
  @keyframes hp-slide-down {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ── Empty States - Friendly & Actionable ── */
@media (max-width: 767.98px) {
  .hp-empty {
    padding: 48px 20px;
    text-align: center;
  }
  .hp-empty-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--hp-surface-2);
    color: var(--hp-text-muted);
    font-size: 32px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
  }
  .hp-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--hp-text);
    margin-bottom: 8px;
  }
  .hp-empty-text {
    font-size: 14px;
    color: var(--hp-text-muted);
    margin-bottom: 24px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
  .hp-empty-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
  .hp-empty-cta .btn {
    width: 100%;
    min-height: 48px;
    font-weight: 600;
    border-radius: 12px;
    font-size: 15px;
  }
}

/* ── Search & Filter - Simplified ── */
@media (max-width: 767.98px) {
  .hx-dt-toolbar,
  .dt-top,
  .table-toolbar {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  .hx-dt-toolbar-left,
  .hx-dt-toolbar-right,
  .dt-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .hx-dt-search,
  .dt-search,
  .dataTables_filter {
    width: 100% !important;
    order: 99;
  }
  .hx-dt-search input,
  .dt-search input,
  .dataTables_filter input {
    width: 100% !important;
    min-height: 48px;
    font-size: 16px;
    padding: 12px 16px;
    border-radius: 12px;
  }
  .dt-buttons {
    order: 98;
    flex-wrap: wrap;
    gap: 8px;
  }
  .dt-buttons .btn {
    min-height: 40px;
    padding: 10px 16px;
    flex: 1;
    min-width: 100px;
    justify-content: center;
  }
}

/* ── Select2 - Mobile Friendly ── */
@media (max-width: 767.98px) {
  .select2-container--bootstrap-5 .select2-selection--single {
    min-height: 48px !important;
    border-radius: 12px !important;
    border: 1px solid var(--hp-input-border) !important;
  }
  .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: 46px !important;
    font-size: 15px !important;
    padding-left: 16px !important;
    padding-right: 44px !important;
  }
  .select2-container--bootstrap-5 .select2-selection__arrow {
    height: 46px !important;
    width: 44px !important;
  }
  .select2-dropdown {
    border-radius: 16px !important;
    max-height: 60vh !important;
  }
  .select2-results__option {
    padding: 14px 16px !important;
    min-height: 48px !important;
    font-size: 15px !important;
    display: flex; align-items: center;
  }
  .select2-search__field {
    min-height: 48px !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
  }
}

/* ── Pagination - Prev/Next Only ── */
@media (max-width: 767.98px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .page-link {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 15px;
  }
  .page-item:not(:first-child):not(:last-child) { display: none; }
  .page-item:first-child .page-link,
  .page-item:last-child .page-link {
    border-radius: 10px;
  }
}

/* ── Alerts & Toasts ── */
@media (max-width: 767.98px) {
  .alert {
    padding: 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
  }
  .alert .btn-close {
    width: 32px; height: 32px;
    padding: 0;
    background-size: 14px;
  }
}

/* ── List Groups ── */
@media (max-width: 767.98px) {
  .list-group-item {
    padding: 16px;
    border: none;
    border-bottom: 1px solid var(--hp-border-light);
  }
  .list-group-item:last-child { border-bottom: none; }
  .list-group-item .d-flex { flex-wrap: wrap; gap: 12px; }
  .list-group-item .ms-auto {
    margin-left: 0 !important;
    width: 100%;
    text-align: right;
    margin-top: 8px;
  }
}

/* ── Page Header ── */
@media (max-width: 767.98px) {
  .hp-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
  .hp-page-title { font-size: 20px; font-weight: 700; margin: 0; }
  .hp-page-subtitle { font-size: 13px; color: var(--hp-text-muted); margin: 0; }
  .hp-page-actions { width: 100%; justify-content: flex-end; }
  .hp-page-actions .btn {
    min-height: 40px;
    padding: 10px 16px;
  }
}

/* ── Tables - Card View on Mobile ── */
@media (max-width: 767.98px) {
  .table-responsive[data-hp-mobile-cards] table {
    display: block;
  }
  .table-responsive[data-hp-mobile-cards] thead { display: none; }
  .table-responsive[data-hp-mobile-cards] tbody { display: block; }
  .table-responsive[data-hp-mobile-cards] tr {
    display: block;
    background: var(--hp-card-bg);
    border: 1px solid var(--hp-card-border);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .table-responsive[data-hp-mobile-cards] td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--hp-border-light);
    white-space: normal !important;
    font-size: 14px;
  }
  .table-responsive[data-hp-mobile-cards] td:last-child { border-bottom: none; }
  .table-responsive[data-hp-mobile-cards] td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--hp-text-muted);
    font-size: 12px;
    flex: 0 0 40%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .table-responsive[data-hp-mobile-cards] td > * { flex: 1; text-align: right; }
  /* Checkboxes keep their natural size in cards (SELECT row). */
  .table-responsive[data-hp-mobile-cards] td input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-left: auto;
  }
  .table-responsive[data-hp-mobile-cards] td .badge,
  .table-responsive[data-hp-mobile-cards] td .btn { margin-left: 8px; }
}

/* Card actions row */
@media (max-width: 767.98px) {
  .hp-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--hp-border-light);
    flex-wrap: wrap;
  }
  .hp-card-actions .btn {
    flex: 1;
    min-width: 120px;
    min-height: 40px;
  }
}

/* ── Touch Targets - Everything Clickable 48px Min ── */
/* UXX-19 CRITICAL BUG FIX: the old selector was bare `a,` — it turned EVERY
   link into a centered inline-flex 48x48 box on phones, which visually
   "destroyed" the sidebar (all links centered in one row) and malformed
   countless mobile layouts. Scoped to real button-like actions, and the
   sidebar menu is pinned back to a straight left column. */
@media (max-width: 767.98px) {
  a.btn, button, [role="button"], .btn,
  .dropdown-toggle, .nav-link,
  .pagination .page-link,
  .list-group-item-action,
  .hp-bottom-nav-item,
  .hp-fab-item,
  .hp-fab-main {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .hp-bottom-nav-item,
  .hp-fab-item,
  .hp-fab-main { min-width: 48px; }
  .dropdown-item { min-height: 48px; padding: 12px 16px; font-size: 15px; }
  /* sidebar stays a professional left-aligned column — never centered */
  .sidebar .menu-item {
    display: flex !important;
    justify-content: flex-start;
    text-align: left;
  }
}

/* ── Focus States ── */
@media (max-width: 767.98px) {
  *:focus-visible {
    outline: 3px solid var(--hp-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  @media (max-width: 767.98px) {
    .hp-collapsible-body,
    .modal.fade .modal-dialog,
    .hp-fab-main,
    .hp-fab-item,
    .btn,
    .card,
    .hp-kpi-card {
      transition: none !important;
      animation: none !important;
    }
  }
}

/* ── Landscape Mobile ── */
@media (max-height: 500px) and (orientation: landscape) {
  .modal-dialog { max-height: 90vh; margin: 2vh auto; }
  .modal-body { max-height: 55vh; }
  .hp-bottom-nav { padding-bottom: 4px; }
  body { padding-bottom: 72px; }
  .hp-fab { bottom: 76px; }
  body.has-form-actions { padding-bottom: 90px; }
}

/* ── High Contrast Mode Support ── */
@media (prefers-contrast: high) {
  @media (max-width: 767.98px) {
    .card, .hp-kpi-card, .modal-content { border: 2px solid currentColor; }
    .form-control, .form-select { border-width: 2px; }
    .btn { border-width: 2px; }
  }
}

/* ── Large Text Support ── */
@media (prefers-reduced-data: reduce) {
  .hp-kpi-sparkline { display: none; }
}
/* UXX-01c-nav: bottom nav items must never push beyond viewport */
.hp-bottom-nav { overflow: hidden; }
.hp-bottom-nav-item { min-width: 0; padding: 8px 2px; }
.hp-bottom-nav-item > span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }

/* ============================================================
   UXX-11: FINAL POLISH PASS (2026-10-19)
   ============================================================ */

/* UXX-11a: floating banners must sit ABOVE the bottom nav, not overlap it */
@media (max-width: 767.98px) {
  .hp-install-banner { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .hp-offline-indicator { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* UXX-11b: mobile topbar - search gets its own full-width row (title stays row 1) */
@media (max-width: 767.98px) {
  .topbar { flex-wrap: wrap; column-gap: 8px; row-gap: 8px; padding: 10px 12px !important; }
  .topbar-left { order: 1; flex: 1 1 100%; }
  .topbar-right { order: 2; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; align-items: center; }
  #globalSearchDropdown { flex: 1 1 100%; width: 100% !important; }
  .global-search-input { width: 100% !important; min-height: 42px; font-size: 16px; }
  #globalSearchResults { width: 100% !important; max-width: 100%; }
  #notificationMenu { width: calc(100vw - 48px) !important; max-width: calc(100vw - 48px); }
  .topbar-left h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* UXX-11c: mobile sidebar drawer - professional, touch-friendly */
@media (max-width: 767.98px) {
  .sidebar { width: min(84vw, 300px); scroll-behavior: smooth; }
  .sidebar-brand { padding: 14px 18px; display: flex; align-items: center; gap: 10px; text-align: left; }
  .sidebar-brand i { margin-right: 0; }
  .menu-item { min-height: 48px; padding: 0 16px; overflow: hidden; }
  .submenu { padding-left: 20px; }
  .submenu .menu-item { min-height: 44px; padding: 0 1rem; }
  .menu-divider { margin: 6px 18px; }
}

/* UXX-11d: login - comfortable mobile sizing; 16px inputs stop iOS zoom-on-focus */
@media (max-width: 575.98px) {
  .login-right { padding: 1.75rem 1.5rem 2.25rem; }
  .login-right h2 { margin-top: 0.75rem; }
  .login-right .form-control { min-height: 48px; font-size: 16px; padding: 10px 14px; }
  .login-right .input-group-text { min-height: 48px; }
  .btn-login { min-height: 50px; font-size: 1rem; }
  .login-container { padding: 0; }
}

/* UXX-11f: legacy install button duplicates the FAB circle on phones ->
   overlaps it ("multiple rings"). Banner system is the single install prompt
   on mobile; the legacy button remains desktop-only. */
@media (max-width: 767.98px) {
  #install-btn { display: none !important; }
}

/* UXX-11g: login mobile brand row — hidden on desktop, flex row on phones */
.login-row-mobile { display: none; }
@media (max-width: 575.98px) {
  .login-row-mobile { display: flex !important; align-items: center; gap: 10px; margin-bottom: 1.25rem; }
}

/* UXX-11e: no lingering focus "rings" after taps on touch devices
   (rings stay for keyboard users via :focus-visible) */
@media (hover: none) and (pointer: coarse) {
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible),
  [tabindex]:focus:not(:focus-visible),
  tr[data-row-href]:focus:not(:focus-visible) {
    box-shadow: none !important;
    outline: none !important;
  }
}
/* ============================================================/* ================================================================
   US-25  PROFESSIONAL FORM SYSTEM (2026-10-20)
   Flat responsive field grid / labels above controls / uniform
   40px controls / compact tables / no per-field boxes
   ================================================================ */

/* 1 - per-field "cards" OFF: a field is a plain grid cell */
.hp-field-row {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

/* 2 - the responsive field grid: any wrapper whose DIRECT children
      are .hp-field-row lays them into autofit columns */
:is(.form-section, .hp-field-group, .section-body, .card-body, .row, .wizard-step):has(> .hp-field-row) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px 18px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* mixed sections place non-field children across the full row */
.form-section > :not(.hp-field-row):not(.section-header):not(.section-body),
.hp-field-group > :not(.hp-field-row):not(.section-header):not(.section-body) {
  width: 100%;
  grid-column: 1 / -1;
}

.form-section > .section-body,
.hp-field-group > .section-body {
  padding: 0 !important;
}
/* bodies that do NOT directly hold field rows keep natural flow */
.form-section > .section-body:not(:has(> .hp-field-row)),
.hp-field-group > .section-body:not(:has(> .hp-field-row)) {
  display: block;
}

/* 3 - section cards: calm, consistent rhythm */
.form-section,
.hp-field-group {
  padding: 18px 20px !important;
  border-radius: 14px !important;
  margin-bottom: 18px !important;
  gap: 14px !important;
}
.form-section > .section-header,
.hp-field-group > .section-header {
  margin: 0 0 14px !important;
  padding-bottom: 11px !important;
  border-bottom: 1px solid var(--hp-border-light) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* 4 - field internals: label ABOVE the control */
.hp-field,
.hp-field.inline {
  display: block !important;
}
.hp-field.inline .form-label {
  flex: none !important;
  white-space: normal !important;
}
.hp-field .form-label {
  display: block !important;
  margin: 0 0 6px 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
/* control or hint living inside the label (generated markup) */
.hp-field .form-label > .form-control,
.hp-field .form-label > .form-select,
.hp-field .form-label > .input-group,
.hp-field .form-label > .select2-container {
  margin-top: 6px !important;
}
.hp-field .form-label > .form-text,
.hp-field .form-label > .numbering-hint,
.hp-field .form-label > .small {
  margin-top: 5px !important;
  display: block;
}

/* 5 - uniform controls */
.hp-field .form-control,
.hp-field .form-select,
.form-section .form-control,
.form-section .form-select,
.hp-field-group .form-control,
.hp-field-group .form-select {
  width: 100% !important;
  max-width: none !important;
  height: 40px;
  min-height: 40px;
  padding: 7px 12px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  border-radius: 10px !important;
}
.hp-field textarea.form-control,
.form-section textarea.form-control {
  height: auto !important;
  min-height: 86px;
  padding: 10px 12px !important;
}
.hp-field select[multiple].form-select {
  height: auto !important;
  min-height: 96px;
}
.hp-field .input-group .form-control {
  border-radius: 10px 0 0 10px !important;
}
.hp-field .input-group > .btn,
.hp-field .input-group > .input-group-text {
  border-radius: 0 10px 10px 0 !important;
}

/* 6 - hints, badges, stars */
.form-text {
  font-size: 12px !important;
  margin-top: 5px !important;
}
.opt-badge {
  display: inline-block;
  font-size: 11px !important;
  padding: 1px 8px !important;
  border-radius: 999px !important;
  background: var(--hp-surface-2);
  border: 1px solid var(--hp-border-light);
  color: var(--hp-text-muted) !important;
  font-weight: 500 !important;
  margin-left: 7px;
  vertical-align: 1px;
}
.req-star {
  color: var(--hp-danger) !important;
  margin-left: 3px;
  font-weight: 700;
}

/* 7 - item/summary tables: compact, professional */
table .form-control,
table .form-select {
  width: auto !important;
  max-width: 100% !important;
  height: 36px;
  min-height: 36px;
  padding: 4px 9px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}
.form-section .table > :not(caption) > * > *,
.hp-field-group .table > :not(caption) > * > * {
  padding: 7px 10px;
  vertical-align: middle;
}
.table thead th {
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--hp-text-muted) !important;
}

/* 8 - select2 matches native control heights */
.select2-container--bootstrap-5 .select2-selection--single {
  height: 40px !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  line-height: 26px !important;
  padding-left: 0 !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
  top: 1px !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple {
  min-height: 40px !important;
  padding: 4px 8px !important;
  border-radius: 10px !important;
}
.select2-dropdown {
  border-radius: 10px !important;
  font-size: 14px !important;
}

/* 9 - wizard step headers */
.wizard-step-header {
  margin: 0 0 13px !important;
}
.wizard-step-header h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
}

/* 10 - small screens: single column, tighter */
@media (max-width: 575.98px) {
  .form-section,
  .hp-field-group {
    padding: 14px !important;
    border-radius: 12px !important;
  }
  :is(.form-section, .hp-field-group, .section-body, .card-body, .row, .wizard-step):has(> .hp-field-row) {
    gap: 12px;
    grid-template-columns: 1fr;
  }
  .hp-field .form-control,
  .hp-field .form-select {
    height: 44px;
    min-height: 44px;
    font-size: 16px !important; /* prevent iOS zoom */
  }
}

/* ============================================================
   UXX-28 (2026-10-22): app-like phone shell + Order Booker polish
   ============================================================ */

/* Mobile search toggle: hidden on desktop. */
.mobile-search-toggle { display: none; }

@media (max-width: 767.98px) {
  /* ONE compact app bar: menu + title + search/bell/avatar.
     The old layout stacked title, full-width search and actions = 181px. */
  .topbar {
    flex-wrap: nowrap !important;
    align-items: center;
    min-height: 56px;
    padding: 6px 8px !important;
    gap: 4px;
  }
  .topbar-left { order: 0; flex: 1 1 auto; width: auto !important; min-width: 0; gap: 2px; }
  .topbar-left h4 { flex: 1 1 auto; min-width: 0; font-size: 1rem !important; }
  .topbar-right { order: 0; flex: 0 0 auto; width: auto !important; flex-wrap: nowrap !important; gap: 2px; }
  .mobile-search-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; color: var(--hp-text); border: 0;
  }
  /* Theme + language live in the drawer/desktop bar; they stole a whole row. */
  .topbar-right > .theme-toggle,
  .topbar-right > .nav-item.dropdown { display: none !important; }
  .topbar-right .notification-bell > .btn { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  .topbar-right > .dropdown:last-child > .btn { min-height: 40px; padding: 2px; }

  /* Search opens as an overlay row under the app bar (bar height unchanged). */
  #globalSearchDropdown { display: none; }
  .topbar.search-open #globalSearchDropdown {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    padding: 8px 10px 10px;
    background: var(--hp-topbar-bg);
    border-bottom: 1px solid var(--hp-topbar-border);
    box-shadow: var(--hp-topbar-shadow);
    z-index: 6;
  }
  .topbar.search-open .global-search-input { width: 100% !important; min-height: 44px; font-size: 16px; }
  .topbar.search-open #globalSearchResults { width: 100% !important; max-width: 100%; }
  #notificationMenu { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px); }

  /* Order Booker page: topbar already shows the title, so drop the duplicate
     h2 and keep a compact back control (was ~140px of dead space). */
  .ob-page-head { margin-bottom: 8px !important; gap: 8px; }
  .ob-page-head h2 { display: none; }
  .ob-page-head .ob-back { margin-left: auto; min-height: 40px; padding: 6px 12px; font-size: .85rem; }
  #orderForm .wizard-step-header { display: none; }

  /* Item rows: product full width; qty+price and total+remove share rows
     (the global mobile rule forced every column to 100%). */
  .form-section .order-items-stacked .order-item-row > .col-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: calc(var(--bs-gutter-x, .5rem) / 2) !important;
    padding-right: calc(var(--bs-gutter-x, .5rem) / 2) !important;
  }
  .form-section .order-items-stacked .order-item-row > .col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: calc(var(--bs-gutter-x, .5rem) / 2) !important;
    padding-right: calc(var(--bs-gutter-x, .5rem) / 2) !important;
  }
  .order-items-stacked .order-item-row { padding: .65rem .5rem; }
  .order-items-stacked .remove-item-btn { min-height: 44px; }

  /* UXX-28c: keep qty/price/total on ONE row and float the remove icon, so a
     line item is ~170px instead of ~256px (2-up grid wasted a whole row). */
  .form-section .order-items-stacked .order-item-row > .col-6:nth-child(2),
  .form-section .order-items-stacked .order-item-row > .col-6:nth-child(3),
  .form-section .order-items-stacked .order-item-row > .col-6:nth-child(4) {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
    padding-left: calc(var(--bs-gutter-x, .5rem) / 2) !important;
    padding-right: calc(var(--bs-gutter-x, .5rem) / 2) !important;
  }
  .form-section .order-items-stacked .order-item-row > .col-6:nth-child(5) {
    position: absolute;
    top: .5rem;
    right: .25rem;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
  .form-section .order-items-stacked .order-item-row > .col-12:nth-child(1) {
    padding-right: 2.75rem !important;
  }
  .order-items-stacked .order-item-row { position: relative; }
  .order-items-stacked .order-item-row .form-label {
    font-size: 11px !important;
    margin-bottom: 3px !important;
  }
  .order-items-stacked .order-item-row .form-control {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 16px !important; /* prevents iOS zoom */
    padding: 6px 8px !important;
  }
  .order-items-stacked .remove-item-btn {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Step-3 review card (all sizes). */
.ob-review {
  border: 1px solid var(--hp-border);
  border-radius: .75rem;
  background: var(--hp-surface-2);
  padding: .75rem .9rem;
  margin-bottom: 1rem;
}
.ob-review-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: .3rem 0; font-size: .9rem;
}
.ob-review-row span { color: var(--hp-text-secondary); }
.ob-review-row strong { text-align: right; }
.ob-review-items { margin-top: .35rem; border-top: 1px solid var(--hp-border); padding-top: .35rem; }
.ob-review-item {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem; padding: .3rem 0; font-size: .875rem;
}
.ob-review-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ob-review-item .qty { color: var(--hp-text-secondary); white-space: nowrap; flex: 0 0 auto; }
.ob-review-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: .35rem; padding-top: .5rem; border-top: 1px solid var(--hp-border);
  font-weight: 700;
}

/* UXX-28b: one compact toolbar on phones (the duplicated title/back/toolbar
   rows cost ~200px before the form even started). */
@media (max-width: 767.98px) {
  .ob-page-head { display: none !important; }
  .ob-toolbar { margin-bottom: 8px !important; flex-wrap: nowrap; gap: 6px; }
  .ob-toolbar .ob-legend { display: none; }
  .ob-toolbar .btn { min-height: 40px !important; padding: 6px 10px; }
  .ob-toolbar .btn-group .btn { min-height: 40px !important; }
}

/* UXX-28d: focused capture screens. The sticky wizard bar replaces the bottom
   tab bar (two fixed bars stacked ate 153px of a 640px phone); the bar moves
   flush to the safe area and content clears it with one padding value. */
@media (max-width: 767.98px) {
  body.has-form-actions .hp-bottom-nav { display: none !important; }
  body.has-form-actions .hp-form-actions-bar {
    bottom: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  body.has-form-actions { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  body.has-form-actions .hp-install-banner {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* UXX-28e: 320-359px phones. Give the read-only total more width so a price
   like 210.00 is never clipped; 26/34/40 keeps qty/price tappable. */
@media (max-width: 359.98px) {
  .form-section .order-items-stacked .order-item-row > .col-6:nth-child(2) {
    flex: 0 0 26% !important;
    max-width: 26% !important;
  }
  .form-section .order-items-stacked .order-item-row > .col-6:nth-child(3) {
    flex: 0 0 34% !important;
    max-width: 34% !important;
  }
  .form-section .order-items-stacked .order-item-row > .col-6:nth-child(4) {
    flex: 0 0 40% !important;
    max-width: 40% !important;
  }
  .order-items-stacked .order-item-row .form-control {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .order-items-stacked .order-item-row .total-display { font-size: 14px !important; }
  .order-items-stacked .order-item-row .form-label {
    font-size: 10px !important;
    white-space: nowrap;
  }
}

/* ══ UXX-29: phone capture polish + list ergonomics ══ */

@media (max-width: 767.98px) {
  /* The phone topbar already carries the page context: drop the extra
     Back/Wizard/Quick row above the form entirely (mobile only). */
  .ob-toolbar { display: none !important; }

  /* Step 2: line items become swipeable cards. One card fits the viewport,
     the next card peeks on the right so the gesture is discoverable. */
  .ob-items-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px;
    font-size: .78rem;
    color: var(--hp-text-secondary);
  }
  .ob-items-count {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hp-primary) 12%, transparent);
    color: var(--hp-primary);
    font-weight: 700;
    font-size: .72rem;
  }
  #order-items-container.ob-items-swipe {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 10px;
    margin: 0 !important;
    padding: 2px 2px 10px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--hp-border-strong) transparent;
  }
  #order-items-container.ob-items-swipe .order-item-row {
    flex: 0 0 88% !important;
    max-width: 88% !important;
    margin: 0 !important;
    scroll-snap-align: center;
  }
  #order-items-container.ob-items-swipe .order-item-row:only-child {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  #order-items-container.ob-items-swipe::-webkit-scrollbar { height: 4px; }
  #order-items-container.ob-items-swipe::-webkit-scrollbar-track { background: transparent; }
  #order-items-container.ob-items-swipe::-webkit-scrollbar-thumb {
    background: var(--hp-border-strong);
    border-radius: 99px;
  }

  /* Grid/list pages: UXX-29 OVERRIDE REMOVED (2026-10-26).
     This block previously forced #globalDataTable back into a horizontally
     swiped desktop-style table on phones (display:table !important,
     min-width:980px, sticky first/last columns, td::before stripped), which
     defeated the global mobile card system (table[data-responsive] +
     [data-hp-mobile-cards]) and produced the horizontal scrollbar on listing
     screens. Per requirement: NO horizontal scroll on phones — listing rows
     render as stacked cards (label/value + SELECT + ACTIONS) like every other
     table. The card rules in helpex.css (table[data-responsive]) and above
     ([data-hp-mobile-cards]) now apply to the grid pages as well. */
  .hp-grid-table-wrap {
    overflow: visible !important;
    max-height: none !important;
    border: 1px solid var(--hp-border);
    border-radius: .65rem;
    background: var(--hp-card-bg);
  }

  /* Pagination: full-width, thumb-sized targets; jump box only if it fits. */
  #dtPagination { width: 100%; }
  #paginationUl { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  #paginationUl .page-link {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .4rem .5rem;
  }
  #pageJumpContainer { flex: 1 1 auto; min-width: 0; }
  #pageJumpInput { width: 44px !important; }
  #dtInfo { font-size: .76rem; }
}

@media (max-width: 359.98px) {
  /* At 320px the 3-up row needs every pixel: a full-width card avoids
     clipping "70.00"/"210.00"; the item counter still tells users to swipe. */
  #order-items-container.ob-items-swipe .order-item-row {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  #pageJumpContainer { display: none !important; }
  #paginationUl { justify-content: space-around; }
}

/* UXX-29b REMOVED (2026-10-26): sticky last-column + scrollbar styling existed
   only to keep row actions reachable while the wide grid was swiped sideways.
   With cards (no horizontal scroll) the ACTIONS row sits inside each card, so
   there is nothing to pin and nothing to scroll. */

/* UXX-29c: the legacy mobile rule hid prev/next/page numbers (it matched every
   item that was not first/last). Keep real paging controls on phones. */
@media (max-width: 767.98px) {
  #dtPagination .page-item { display: block !important; }
  #dtPagination #pageFirst,
  #dtPagination #pageLast { display: none !important; }
  #dtPagination #paginationUl {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
}


/* UXX-29d: phone form uses the full width (nested 16+16+20px padding made a
   320px card only ~190px wide, which clipped 5-6 digit prices). */
@media (max-width: 767.98px) {
  .ob-form-page.container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .ob-form-page .card-body { padding: 10px 8px !important; }
  .ob-form-page .form-section,
  .ob-form-page .hp-field-group { padding: 12px !important; }
}


/* UXX-29e: 320px step-3 bar has Cancel + Previous + Submit; keep the short
   Submit label on one line by trimming the button padding. */
@media (max-width: 575.98px) {
  .hp-form-actions-bar [data-hp-wizard-submit] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* UXX-30: Order Booker mobile app-like fit - ensure full scrolling */
@media (max-width: 767.98px) {
  html:has(body .ob-form-page),
  body:has(.ob-form-page) {
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body:has(.ob-form-page) .navbar,
  body:has(.ob-form-page) header,
  body:has(.ob-form-page) #header,
  body:has(.ob-form-page) .hp-topbar,
  body:has(.ob-form-page) .breadcrumb,
  body:has(.ob-form-page) .page-header,
  body:has(.ob-form-page) .hp-page-header,
  body:has(.ob-form-page) .btn-back,
  body:has(.ob-form-page) [data-hp-wizard-back],
  body:has(.ob-form-page) .hp-mobile-wizard-toolbar {
    display: none !important;
  }

  body:has(.ob-form-page) #main-content,
  body:has(.ob-form-page) .main-content,
  body:has(.ob-form-page) .content-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .ob-form-page {
    min-height: 100dvh;
    height: auto;
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
    padding: 10px 16px calc(90px + env(safe-area-inset-bottom, 0px)) 16px !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ob-form-page .card {
    margin-bottom: 8px;
    border-radius: 12px;
  }

  .ob-form-page .card-body {
    padding: 10px 10px !important;
  }

  .ob-form-page .wizard-steps {
    margin-bottom: 6px !important;
  }

  .ob-form-page .stepper-item {
    padding: 4px 6px;
  }

  .ob-form-page .stepper-label {
    font-size: 11px;
  }

  .ob-form-page .form-label {
    margin-bottom: 4px;
    font-size: 13px;
  }

  .ob-form-page .form-control,
  .ob-form-page .form-select {
    padding: 8px 10px;
    font-size: 14px;
    min-height: 38px;
  }

  .ob-form-page .row.g-3 {
    --bs-gutter-y: .5rem;
    --bs-gutter-x: .5rem;
  }

  .hp-form-actions-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) 16px !important;
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.04);
    gap: 10px;
    flex-wrap: nowrap;
    z-index: 1000;
    border-radius: 16px 16px 0 0;
  }

  .hp-form-actions-bar .btn {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 14px;
    min-height: 40px;
  }

  .hp-form-actions-bar [data-hp-wizard-prev],
  .hp-form-actions-bar [data-hp-wizard-next] {
    flex: 0 0 auto;
  }

  .ob-items-swipe,
  #order-items-container.ob-items-swipe,
  #order-items-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 14px 14px 14px !important;
    margin: 0 -14px !important;
    width: calc(100% + 28px) !important;
    max-width: calc(100% + 28px) !important;
    box-sizing: border-box !important;
  }

  .ob-item-card,
  .ob-items-swipe > .order-item-row,
  #order-items-container > .order-item-row {
    flex: 0 0 calc(100% - 28px) !important;
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    scroll-snap-align: start;
    display: block !important;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
    padding: 18px 18px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #order-items-container > .order-item-row.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0.75rem;
  }

  #order-items-container > .order-item-row .col,
  #order-items-container > .order-item-row .col-12,
  #order-items-container > .order-item-row .col-md-4,
  #order-items-container > .order-item-row .col-md-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ob-items-swipe::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .ob-items-swipe {
    scrollbar-width: none;
  }

  .ob-item-card,
  .ob-items-swipe > .order-item-row {
    flex: 0 0 calc(100% - 24px) !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    scroll-snap-align: start;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 1px 2px rgba(15,23,42,.02);
  }

  .ob-item-card .card-body,
  .ob-items-swipe > .order-item-row .card-body,
  .ob-items-swipe > .order-item-row {
    padding: 10px 10px !important;
  }

  .ob-item-card .form-label,
  .ob-items-swipe > .order-item-row .form-label {
    font-size: 12px;
  }

  .ob-item-card .form-control,
  .ob-item-card .form-select,
  .ob-items-swipe > .order-item-row .form-control,
  .ob-items-swipe > .order-item-row .form-select {
    min-height: 36px;
    padding: 7px 9px;
  }

  .ob-items-toolbar {
    gap: 6px;
  }

  #ob-item-count {
    font-size: 12px;
  }
}

@media (max-width: 359.98px) {
  .ob-form-page {
    padding: 4px 6px 0 6px !important;
  }

  .ob-form-page .card-body {
    padding: 9px 9px !important;
  }

  .ob-item-card,
  .ob-items-swipe > .order-item-row {
    flex: 0 0 92% !important;
    width: 92% !important;
    max-width: 92% !important;
    display: block !important;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
    padding: 12px 12px !important;
  }

  .ob-items-swipe > .order-item-row .col,
  .ob-items-swipe > .order-item-row .col-12,
  .ob-items-swipe > .order-item-row .col-md-4,
  .ob-items-swipe > .order-item-row .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .ob-items-swipe > .order-item-row .row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }

  .hp-form-actions-bar {
    margin: 0 -6px;
    padding: 7px 8px;
    gap: 6px;
  }

  .hp-form-actions-bar .btn {
    font-size: 13px;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (max-width: 767.98px) {
  .hp-grid-table-wrap {
    max-height: clamp(240px, 48dvh, 420px);
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }

  .hp-grid-table-wrap table {
    min-width: 880px;
  }

  .hp-grid-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f8fafc;
  }

  .hp-grid-table-wrap th:first-child,
  .hp-grid-table-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: 6;
    background: #fff;
  }

  .hp-grid-table-wrap thead th:first-child {
    z-index: 7;
    background: #f8fafc;
  }

  .hp-grid-table-wrap td:last-child,
  .hp-grid-table-wrap th:last-child {
    position: sticky;
    right: 0;
    z-index: 6;
    background: #fff;
  }

  .hp-grid-table-wrap thead th:last-child {
    z-index: 7;
    background: #f8fafc;
  }

  #dtPagination .page-item {
    display: block !important;
  }

  #dtPagination .page-item:first-child,
  #dtPagination .page-item:last-child {
    display: none !important;
  }

  #dtPagination .page-link {
    padding: 6px 10px;
    min-width: 36px;
  }
}

/* ============================================================
   TASK1 (2026-10-30): mobile dropdown / filter-bar fixes
   - Smart Filter Bar: inputs were ~144px wide with truncated
     placeholders; groups wasted half of each row. Stack groups
     full-width on phones, inputs fill the remaining space.
     (Inline JS widths 150/140/100px need !important to beat.)
   - Export dropdown hidden by d-none d-sm-block -> fixed in
     templates/components/global_datatable.html.
   - #globalPageLength select hijacked by initSelect2()
     width:100% -> 270px box; fixed via .no-select2 in template.
   ============================================================ */
@media (max-width: 767.98px) {
  /* One filter group per row */
  #filterControls {
    flex-direction: column;
    align-items: stretch;
    gap: 6px !important;
  }
  #filterControls .filter-group {
    flex-wrap: wrap;
    width: 100%;
    gap: 6px !important;
    margin: 0;
  }
  #filterControls .filter-group > label {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
  }
  /* Override inline JS widths (150px/140px/100px) + minWidth 120px */
  #filterControls .filter-control {
    flex: 1 1 10rem !important;
    width: auto !important;
    min-width: 0 !important;
  }
  /* From/To and Min/Max pairs share the line under the label */
  #filterControls .filter-control[data-range="from"],
  #filterControls .filter-control[data-range="to"],
  #filterControls .filter-control[data-range="min"],
  #filterControls .filter-control[data-range="max"] {
    flex: 1 1 42% !important;
  }
  #filterControls .filter-group .mx-1 {
    flex: 0 0 auto;
    margin: 0 !important;
  }

  /* Keep native compact selects on the toolbar (defensive; main
     fix is .no-select2 in the template) */
  #globalPageLength {
    width: auto;
    min-width: 64px;
  }

  /* The global mobile simplification above hides .text-muted.small;
     that collateral-kills the filter labels and the "to"/"-" range
     separators, leaving the two "All" selects (Status/Source)
     indistinguishable. Re-show them ONLY inside the filter bar,
     with the label on its own row so paired inputs stay aligned. */
  #filterControls .filter-group > label,
  #filterControls .filter-group .mx-1 {
    display: inline-block !important;
    font-size: 12px;
  }
  #filterControls .filter-group > label {
    flex: 0 0 100%;
  }

  /* TASK2: bulk action bar (Delete/Approve/Reject/Clear) wraps
     instead of overflowing a phone row */
  #bulkActionBar {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  #bulkActionBar .btn {
    min-height: 40px;
  }
}


/* ==========================================================================
   GLOBAL FORM & WIZARD RESPONSIVENESS FIXES (Scroll, Overflow & Mobile Actions)
   ========================================================================== */

/* Ensure pages and forms never block vertical scrolling */
body, .content-area, .main-content, .card-body, .wizard-step {
  overflow-y: visible !important;
}

/* Ensure form pages leave comfortable clearance for sticky action bars */
body.has-form-actions,
body:has(.hp-form-actions-bar),
body:has(.sticky-actions) {
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Mobile actions bar styling & color fixes */
@media (max-width: 767.98px) {
  .hp-form-actions-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) 16px !important;
    z-index: 1050 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  [data-bs-theme="dark"] .hp-form-actions-bar,
  body.dark-mode .hp-form-actions-bar {
    background: #1e293b !important;
    border-top-color: #334155 !important;
  }

  .hp-form-actions-bar .btn {
    flex: 1 1 auto !important;
    min-height: 42px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 8px !important;
  }

  .hp-form-actions-bar .btn-secondary {
    background-color: #64748b !important;
    border-color: #64748b !important;
    color: #ffffff !important;
  }
  .hp-form-actions-bar .btn-secondary:hover {
    background-color: #475569 !important;
  }

  .hp-form-actions-bar .btn-primary {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
  }
  .hp-form-actions-bar .btn-primary:hover {
    background-color: #0b5ed7 !important;
  }

  .hp-form-actions-bar .btn-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: #ffffff !important;
  }
  .hp-form-actions-bar .btn-success:hover {
    background-color: #157347 !important;
  }

  .hp-form-actions-bar .btn-outline-secondary {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
  }
  .hp-form-actions-bar .btn-outline-secondary:hover {
    background-color: #e2e8f0 !important;
  }

  /* Prevent item rows from overflowing right screen edge on mobile */
  .order-item-row {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .order-item-row .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .order-item-row .col-6,
  .order-item-row .col-md-2,
  .order-item-row .col-md-3,
  .order-item-row .col-md-4,
  .order-item-row .col-12 {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Input groups with discount type dropdown and value */
  .order-item-row .input-group {
    flex-wrap: nowrap !important;
    width: 100% !important;
  }

  .order-item-row .input-group > .form-select {
    flex: 0 0 54px !important;
    max-width: 54px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 13px !important;
  }

  .order-item-row .input-group > .form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}


/* Step-3 review card and order summary overflow fixes */
.ob-review {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  word-break: break-word !important;
}

.ob-review-row,
.ob-review-item,
.ob-review-total {
  max-width: 100% !important;
  box-sizing: border-box !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.ob-review-item-name {
  flex: 1 1 55% !important;
  min-width: 0 !important;
  word-break: break-word !important;
  white-space: normal !important;
}

.ob-review-item .qty {
  flex: 0 0 auto !important;
  text-align: right !important;
  white-space: normal !important;
  word-break: break-all !important;
}

.wizard-step[data-step="3"] .hp-field-row,
#step-3 .hp-field-row {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.wizard-step[data-step="3"] .form-control,
#step-3 .form-control {
  max-width: 100% !important;
  box-sizing: border-box !important;
}