:root {
  --hx-primary: #2563eb;
  --hx-primary-strong: #1d4ed8;
  --hx-primary-soft: #eaf1ff;
  --hx-secondary: #0f8b8d;
  --hx-secondary-soft: #e3f5f4;
  --hx-success: #28c76f;
  --hx-warning: #ff9f43;
  --hx-danger: #ff4c51;
  --hx-info: #00bad1;
  --hx-canvas: #f8f7fa;
  --hx-surface: #ffffff;
  --hx-surface-muted: #f4f3f6;
  --hx-text: #2f2b3d;
  --hx-muted: #6d6a7a;
  --hx-border: #dedce4;
  --hx-sidebar: #1768e4;
  --hx-sidebar-strong: #1557bb;
  --hx-sidebar-text: #ffffff;
  --hx-sidebar-muted: #d9e7ff;
  --hx-shadow: 0 2px 8px rgba(47, 43, 61, 0.08);
  --hx-shadow-lg: 0 12px 28px rgba(47, 43, 61, 0.16);
  --hx-radius: 6px;
  --hx-sidebar-width: 260px;
  --hx-sidebar-collapsed: 78px;
  --hx-topbar-height: 64px;
}

.theme-dark {
  --hx-canvas: #25293c;
  --hx-surface: #2f3349;
  --hx-surface-muted: #353a52;
  --hx-text: #e1def5;
  --hx-muted: #aab3c5;
  --hx-border: #4a5072;
  --hx-primary-soft: rgba(37, 99, 235, 0.18);
  --hx-secondary-soft: rgba(15, 139, 141, 0.2);
  --hx-shadow: 0 2px 8px rgba(12, 13, 21, 0.28);
  --hx-shadow-lg: 0 14px 30px rgba(12, 13, 21, 0.4);
}

html,
body.hx-admin {
  min-height: 100%;
  background: var(--hx-canvas);
}

body.hx-admin {
  margin: 0;
  color: var(--hx-text);
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
}

.hx-admin *,
.hx-admin *::before,
.hx-admin *::after {
  box-sizing: border-box;
}

.hx-app-shell {
  background: var(--hx-canvas);
}

.hx-app-frame {
  min-inline-size: 0;
  background: var(--hx-canvas);
}

.hx-main {
  scrollbar-color: #b9b7c1 transparent;
  scrollbar-width: thin;
}

.hx-content {
  width: 100%;
  max-width: 1600px;
  padding: 24px 28px 40px;
}

.hx-sidebar,
.hx-mobile-sidebar {
  z-index: 40;
  flex: 0 0 var(--hx-sidebar-width);
  width: var(--hx-sidebar-width);
  min-width: var(--hx-sidebar-width);
  flex-direction: column;
  overflow: hidden;
  color: var(--hx-sidebar-text);
  background: var(--hx-sidebar);
  transition: width 180ms ease, min-width 180ms ease, flex-basis 180ms ease;
}

.hx-sidebar--collapsed {
  flex-basis: var(--hx-sidebar-collapsed);
  width: var(--hx-sidebar-collapsed);
  min-width: var(--hx-sidebar-collapsed);
}

.hx-sidebar__brand {
  display: flex;
  min-height: var(--hx-topbar-height);
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.hx-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.hx-brand__mark {
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--hx-radius);
  background: rgba(255, 255, 255, 0.12);
}

.hx-brand__name {
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx-icon-button {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--hx-radius);
  color: var(--hx-muted);
  background: transparent;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.hx-icon-button:hover {
  color: var(--hx-primary);
  border-color: var(--hx-border);
  background: var(--hx-primary-soft);
}

.hx-sidebar .hx-icon-button,
.hx-mobile-sidebar .hx-icon-button {
  color: #fff;
}

.hx-sidebar .hx-icon-button:hover,
.hx-mobile-sidebar .hx-icon-button:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
}

.hx-icon,
.hx-nav-svg {
  width: 20px;
  height: 20px;
}

.hx-sidebar__scroll {
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 10px;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  scrollbar-width: thin;
}

.hx-sidebar__scroll > div,
.hx-sidebar__scroll > ul {
  margin: 0;
  padding: 0;
}

.hx-nav-item {
  margin: 2px 0;
  padding: 0;
  list-style: none;
}

.hx-nav-link,
.hx-nav-group__trigger {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--hx-radius);
  color: var(--hx-sidebar-muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}

.hx-nav-link:hover,
.hx-nav-group__trigger:hover,
.hx-nav-group--active > .hx-nav-group__trigger {
  color: #fff;
  background: rgba(255, 255, 255, 0.11);
}

.hx-nav-link--active {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 3px 0 0 #7ee7de;
}

[dir="rtl"] .hx-nav-link--active {
  box-shadow: inset -3px 0 0 #7ee7de;
}

.hx-nav-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: none;
  align-items: center;
  justify-content: center;
}

.hx-nav-icon > svg,
.hx-nav-icon > * {
  width: 20px;
  height: 20px;
}

.hx-nav-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx-nav-chevron,
.hx-nav-external {
  width: 16px;
  height: 16px;
  flex: none;
  margin-inline-start: auto;
  transition: transform 150ms ease;
}

.hx-nav-group__children {
  margin: 2px 0 6px 20px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--hx-sidebar-strong);
  border-radius: var(--hx-radius);
}

[dir="rtl"] .hx-nav-group__children {
  margin-right: 20px;
  margin-left: 0;
}

.hx-nav-group__children .hx-nav-link {
  min-height: 36px;
  padding-block: 7px;
  font-size: 12px;
}

.hx-nav-group__children .hx-nav-icon:empty {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.hx-sidebar--collapsed .hx-brand__name,
.hx-sidebar--collapsed .hx-nav-label,
.hx-sidebar--collapsed .hx-sidebar__status .hx-nav-label {
  display: none !important;
}

.hx-sidebar--collapsed .hx-sidebar__brand {
  justify-content: center;
  padding-inline: 10px;
}

.hx-sidebar--collapsed .hx-sidebar__collapse {
  display: none;
}

.hx-sidebar--collapsed .hx-nav-link,
.hx-sidebar--collapsed .hx-nav-group__trigger {
  justify-content: center;
  padding-inline: 10px;
}

.hx-sidebar--collapsed .hx-nav-group__children {
  display: none !important;
}

.hx-sidebar__footer {
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hx-sidebar__status {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--hx-sidebar-muted);
  font-size: 12px;
  font-weight: 600;
}

.hx-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: none;
  border: 2px solid rgba(40, 199, 111, 0.25);
  border-radius: 50%;
  background: var(--hx-success);
  box-shadow: 0 0 0 3px rgba(40, 199, 111, 0.16);
}

.hx-mobile-backdrop {
  z-index: 45;
  background: rgba(47, 43, 61, 0.54);
  backdrop-filter: blur(2px);
}

.hx-mobile-sidebar {
  inset-inline-start: 0;
  z-index: 50;
  display: flex;
  max-width: calc(100vw - 48px);
  box-shadow: var(--hx-shadow-lg);
}

.hx-topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  height: var(--hx-topbar-height);
  flex: none;
  border-bottom: 1px solid var(--hx-border);
  background: color-mix(in srgb, var(--hx-surface) 94%, transparent);
  box-shadow: 0 1px 4px rgba(47, 43, 61, 0.04);
  backdrop-filter: blur(10px);
}

.hx-topbar__inner {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
}

.hx-topbar__leading,
.hx-topbar__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.hx-workspace-label {
  padding-inline-start: 4px;
}

.hx-workspace-label span,
.hx-workspace-label small {
  display: block;
  line-height: 1.25;
}

.hx-workspace-label span {
  color: var(--hx-text);
  font-size: 13px;
  font-weight: 700;
}

.hx-workspace-label small {
  margin-top: 2px;
  color: var(--hx-muted);
  font-size: 10px;
}

.hx-mobile-brand {
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--hx-primary);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.hx-mobile-brand img {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: contain;
}

.hx-language-control select {
  min-width: 90px;
  height: 38px;
  border-color: transparent !important;
  color: var(--hx-muted);
  background-color: transparent !important;
  font-size: 12px;
}

.hx-profile {
  position: relative;
}

.hx-profile__trigger {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: var(--hx-radius);
  color: var(--hx-text);
  background: transparent;
  cursor: pointer;
}

.hx-profile__trigger:hover {
  border-color: var(--hx-border);
  background: var(--hx-surface-muted);
}

.hx-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  border: 2px solid var(--hx-surface);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--hx-border);
}

.hx-avatar--large {
  width: 44px;
  height: 44px;
}

.hx-profile__copy {
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.hx-profile__copy strong {
  max-width: 150px;
  overflow: hidden;
  color: var(--hx-text);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx-profile__copy small {
  margin-top: 3px;
  color: var(--hx-muted);
  font-size: 10px;
}

.hx-profile__chevron {
  width: 16px;
  height: 16px;
  color: var(--hx-muted);
}

.hx-profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: 250px;
  overflow: hidden;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow-lg);
}

.hx-profile-menu__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--hx-border);
}

.hx-profile-menu__header div {
  min-width: 0;
}

.hx-profile-menu__header strong,
.hx-profile-menu__header span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx-profile-menu__header strong {
  color: var(--hx-text);
  font-size: 13px;
}

.hx-profile-menu__header span {
  margin-top: 3px;
  color: var(--hx-muted);
  font-size: 11px;
}

.hx-profile-menu__item {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--hx-text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.hx-profile-menu__item:hover {
  color: var(--hx-primary);
  background: var(--hx-primary-soft);
}

.hx-profile-menu__item--danger {
  color: var(--hx-danger);
}

.hx-page {
  min-width: 0;
}

.hx-page-header {
  display: flex;
  min-height: 52px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.hx-page-header__copy {
  min-width: 0;
}

.hx-page-header h1 {
  margin: 0;
  color: var(--hx-text);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

.hx-page-header p {
  margin: 5px 0 0;
  color: var(--hx-muted);
  font-size: 12px;
}

.hx-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.hx-page-actions:empty {
  display: none;
}

.hx-page-body {
  min-width: 0;
}

.hx-inline-notice {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-inline-start: 3px solid var(--hx-info);
  border-radius: var(--hx-radius);
  color: var(--hx-text);
  background: color-mix(in srgb, var(--hx-info) 10%, var(--hx-surface));
  font-size: 12px;
}

.hx-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: var(--hx-radius);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.hx-button:focus-visible,
.hx-icon-button:focus-visible,
.hx-profile__trigger:focus-visible,
.hx-nav-link:focus-visible,
.hx-nav-group__trigger:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.2);
  outline-offset: 2px;
}

.hx-button--primary {
  color: #fff;
  border-color: var(--hx-primary);
  background: var(--hx-primary);
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.22);
}

.hx-button--primary:hover {
  border-color: var(--hx-primary-strong);
  background: var(--hx-primary-strong);
}

.hx-button--secondary {
  color: var(--hx-text);
  border-color: var(--hx-border);
  background: var(--hx-surface);
}

.hx-button--secondary:hover {
  color: var(--hx-primary);
  border-color: var(--hx-primary);
  background: var(--hx-primary-soft);
}

.hx-button--danger {
  color: #fff;
  border-color: var(--hx-danger);
  background: var(--hx-danger);
}

.hx-button--danger:hover {
  border-color: #e53e44;
  background: #e53e44;
}

.hx-text-link {
  color: var(--hx-primary);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.hx-text-link:hover {
  text-decoration: underline;
}

.hx-permissions-panel {
  padding: 22px;
}

.hx-permissions-panel h2 {
  margin: 0 0 16px;
  color: var(--hx-text);
  font-size: 17px;
  font-weight: 600;
}

.hx-permissions-panel .hx-form {
  margin-bottom: 0;
  border: 0;
  box-shadow: none;
}

.hx-button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.hx-button__icon {
  width: 17px;
  height: 17px;
}

.hx-admin .rounded-xl,
.hx-admin .rounded-lg,
.hx-admin .rounded-md {
  border-radius: var(--hx-radius) !important;
}

.hx-admin .shadow-lg,
.hx-admin .shadow-md,
.hx-admin .shadow-sm {
  box-shadow: var(--hx-shadow) !important;
}

.hx-admin .bg-white {
  background-color: var(--hx-surface) !important;
}

.hx-admin .bg-gray-50 {
  background-color: var(--hx-surface-muted) !important;
}

.hx-admin .text-gray-900,
.hx-admin .text-gray-800,
.hx-admin .text-gray-700 {
  color: var(--hx-text) !important;
}

.hx-admin .text-gray-600,
.hx-admin .text-gray-500 {
  color: var(--hx-muted) !important;
}

.hx-admin .border-gray-100,
.hx-admin .border-gray-200,
.hx-admin .border-gray-300 {
  border-color: var(--hx-border) !important;
}

.hx-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow);
}

.hx-panel__header {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hx-border);
}

.hx-panel__header h2 {
  margin: 0;
  color: var(--hx-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.hx-dashboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: -70px 0 20px;
}

.hx-live-stamp {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
  color: var(--hx-muted);
  background: var(--hx-surface);
  font-size: 10px;
  font-weight: 600;
}

.hx-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.hx-metric-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 110px;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
  color: var(--hx-primary);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow);
}

.hx-metric-card__icon {
  display: flex;
  width: 48px;
  height: 48px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--hx-radius);
  background: var(--hx-primary-soft);
}

.hx-metric-card__copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.hx-metric-card__copy p {
  margin: 0 0 6px;
  overflow: hidden;
  color: var(--hx-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx-metric-card__copy strong {
  display: block;
  overflow: hidden;
  color: var(--hx-text);
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx-metric-card__trend {
  width: 58px;
  height: 28px;
  flex: none;
  margin-inline-start: auto;
  opacity: 0.9;
}

.hx-tone-teal {
  color: var(--hx-secondary);
}

.hx-tone-teal .hx-metric-card__icon,
.hx-tone-cyan .hx-metric-card__icon {
  background: var(--hx-secondary-soft);
}

.hx-tone-cyan {
  color: var(--hx-info);
}

.hx-tone-green {
  color: var(--hx-success);
}

.hx-tone-green .hx-metric-card__icon {
  background: rgba(40, 199, 111, 0.12);
}

.hx-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.hx-dashboard-grid--analytics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hx-chart-panel {
  height: 370px;
  max-height: none !important;
}

.hx-dashboard-grid--analytics .hx-chart-panel {
  height: 330px;
}

.hx-chart-panel__body {
  position: relative;
  min-height: 0;
  height: calc(100% - 49px);
  padding: 12px 14px 16px;
  overflow: hidden;
}

.hx-dashboard-lists {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
  padding-bottom: 28px;
}

.hx-ranking-panel {
  min-height: 260px;
}

.hx-ranking-list {
  padding: 6px 0;
}

.hx-ranking-row {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: var(--hx-text);
  text-decoration: none;
  transition: background-color 140ms ease;
}

.hx-ranking-row:hover {
  background: var(--hx-surface-muted);
}

.hx-ranking-row img {
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
  object-fit: cover;
}

.hx-ranking-row > span {
  min-width: 0;
  flex: 1;
}

.hx-ranking-row strong,
.hx-ranking-row small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx-ranking-row strong {
  font-size: 11px;
  font-weight: 700;
}

.hx-ranking-row small {
  margin-top: 3px;
  color: var(--hx-muted);
  font-size: 9px;
}

.hx-ranking-row__arrow {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--hx-muted);
}

.hx-rating {
  display: flex !important;
  align-items: center;
  gap: 3px;
  color: var(--hx-warning) !important;
}

.hx-rating svg {
  width: 11px;
  height: 11px;
}

.hx-empty-state {
  margin: 0;
  padding: 28px 16px;
  color: var(--hx-muted);
  font-size: 11px;
  text-align: center;
}

.hx-field {
  display: block;
  width: 100%;
}

.hx-field__label,
.hx-field > label,
.hx-admin label.block.text-sm {
  display: block;
  margin-bottom: 6px;
  color: var(--hx-text);
  font-size: 11px;
  font-weight: 600;
}

.hx-field__control,
.hx-admin input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.hx-admin select,
.hx-admin textarea {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
  color: var(--hx-text);
  background: var(--hx-surface);
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.hx-admin textarea {
  min-height: 96px;
  resize: vertical;
}

.hx-field__control:focus,
.hx-admin input:focus,
.hx-admin select:focus,
.hx-admin textarea:focus {
  border-color: var(--hx-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.hx-admin input:disabled,
.hx-admin select:disabled,
.hx-admin textarea:disabled {
  color: var(--hx-muted);
  background: var(--hx-surface-muted);
  cursor: not-allowed;
}

.hx-field__hint {
  display: block;
  margin-top: 5px;
  color: var(--hx-muted);
  font-size: 10px;
}

.hx-field__error {
  display: block;
  margin-top: 5px;
  color: var(--hx-danger);
  font-size: 10px;
  font-weight: 600;
}

.hx-select-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.hx-select {
  padding-inline-end: 34px;
  appearance: none;
}

.hx-admin table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  color: var(--hx-text);
  background: var(--hx-surface);
  font-size: 11px;
}

.hx-admin thead th {
  padding: 11px 13px;
  border-top: 1px solid var(--hx-border);
  border-bottom: 1px solid var(--hx-border);
  color: var(--hx-muted);
  background: var(--hx-surface-muted);
  font-size: 10px;
  font-weight: 700;
  text-align: start;
  text-transform: none;
  white-space: nowrap;
}

.hx-admin tbody td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--hx-border);
  vertical-align: middle;
}

.hx-admin tbody tr:hover td {
  background: color-mix(in srgb, var(--hx-primary) 4%, var(--hx-surface));
}

.hx-admin table img {
  border-radius: var(--hx-radius);
}

.hx-admin button[class*="bg-primary-"],
.hx-admin a[class*="bg-primary-"] {
  min-height: 40px;
  border-radius: var(--hx-radius) !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.18);
}

.hx-admin button[class*="bg-red-"],
.hx-admin a[class*="bg-red-"] {
  border-radius: var(--hx-radius) !important;
}

.hx-modal__backdrop {
  background: rgba(47, 43, 61, 0.58);
  backdrop-filter: blur(2px);
}

.hx-modal__dialog {
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow-lg);
}

.hx-modal__body {
  color: var(--hx-text);
  background: var(--hx-surface);
}

.hx-modal__footer {
  border-top: 1px solid var(--hx-border);
  background: var(--hx-surface-muted);
}

.hx-modal__close {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
  color: var(--hx-muted);
  background: var(--hx-surface);
}

.hx-modal__close:hover {
  color: var(--hx-danger);
  border-color: var(--hx-danger);
  background: color-mix(in srgb, var(--hx-danger) 8%, var(--hx-surface));
}

.hx-admin [wire\:loading].fixed {
  backdrop-filter: blur(2px);
}

.theme-dark .hx-chart-panel .apexcharts-text,
.theme-dark .hx-chart-panel .apexcharts-text tspan,
.theme-dark .hx-chart-panel .apexcharts-legend-text {
  fill: var(--hx-muted) !important;
  color: var(--hx-muted) !important;
}

.theme-dark .hx-chart-panel .apexcharts-gridline,
.theme-dark .hx-chart-panel .apexcharts-xaxis-tick,
.theme-dark .hx-chart-panel .apexcharts-yaxis-tick {
  stroke: var(--hx-border) !important;
}

@media (min-width: 768px) {
  .hx-topbar .hx-icon-button.md\:hidden {
    display: none !important;
  }

  .hx-topbar .hx-icon-button.hidden.md\:inline-flex {
    display: inline-flex !important;
  }
}

@media (max-width: 1399px) {
  .hx-metric-card__trend {
    display: none;
  }
}

@media (max-width: 1279px) {
  .hx-dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hx-dashboard-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .hx-dashboard-grid,
  .hx-dashboard-grid--analytics {
    grid-template-columns: 1fr;
  }

  .hx-chart-panel,
  .hx-dashboard-grid--analytics .hx-chart-panel {
    height: 340px;
  }
}

@media (max-width: 767px) {
  :root {
    --hx-topbar-height: 60px;
  }

  .hx-topbar__inner {
    padding: 0 12px;
  }

  .hx-topbar__actions {
    gap: 3px;
  }

  .hx-mobile-brand {
    display: flex;
  }

  .hx-topbar .hx-icon-button.hidden.md\:inline-flex {
    display: none !important;
  }

  .hx-language-control {
    display: none;
  }

  .hx-content {
    padding: 20px 14px 32px;
  }

  .hx-page-header {
    min-height: 46px;
    margin-bottom: 14px;
  }

  .hx-page-header__copy {
    min-width: 0;
    flex: 1;
  }

  .hx-page-header h1 {
    font-size: 21px;
  }

  .hx-page-header p {
    max-width: 230px;
  }

  .hx-dashboard-toolbar {
    margin: -62px 0 18px;
  }

  .hx-dashboard-toolbar .hx-live-stamp {
    display: none;
  }

  .hx-dashboard-toolbar .hx-button {
    width: 42px;
    min-width: 42px;
    padding: 0;
  }

  .hx-dashboard-toolbar .hx-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .hx-dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .hx-metric-card {
    min-height: 118px;
    flex-wrap: wrap;
    align-content: center;
    gap: 10px;
    padding: 14px;
  }

  .hx-metric-card__icon {
    width: 42px;
    height: 42px;
  }

  .hx-metric-card__copy {
    width: calc(100% - 54px);
  }

  .hx-metric-card__copy p {
    font-size: 9px;
  }

  .hx-metric-card__copy strong {
    font-size: 17px;
  }

  .hx-metric-card__trend {
    display: none;
  }

  .hx-dashboard-grid {
    gap: 12px;
    margin-top: 12px;
  }

  .hx-chart-panel,
  .hx-dashboard-grid--analytics .hx-chart-panel {
    height: 320px;
  }

  .hx-dashboard-lists {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
  }

  .hx-chart-panel .apexcharts-xaxis-texts-g text:nth-child(even) {
    display: none;
  }

  .hx-page-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .hx-admin .overflow-x-auto,
  .hx-admin [class*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 390px) {
  .hx-content {
    padding-inline: 10px;
  }

  .hx-dashboard-metrics {
    gap: 8px;
  }

  .hx-metric-card {
    padding: 12px;
  }
}

/* Shared Vuexy form and workflow system */
.hx-form {
  margin: 16px 0;
  padding: 22px;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow);
}

.hx-modal .hx-form {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.hx-field {
  margin-bottom: 14px;
}

.hx-field__label,
.hx-field > label,
.hx-admin label.block.text-sm {
  margin-bottom: 7px;
  color: var(--hx-text);
  font-size: 11px;
  font-weight: 600;
}

.hx-field__control,
.hx-admin input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.hx-admin select,
.hx-admin textarea {
  min-height: 40px;
  padding: 8px 12px;
  border-color: var(--hx-border);
  border-radius: 5px;
  color: var(--hx-text);
  background-color: var(--hx-surface);
  font-size: 12px;
}

.hx-field__control::placeholder,
.hx-admin input::placeholder,
.hx-admin textarea::placeholder {
  color: color-mix(in srgb, var(--hx-muted) 68%, transparent);
}

.hx-choice {
  display: block;
  color: var(--hx-text);
  font-size: 12px;
  cursor: pointer;
}

.hx-choice__row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.hx-choice__control,
.hx-admin input[type="checkbox"],
.hx-admin input[type="radio"] {
  width: 17px;
  height: 17px;
  flex: none;
  margin: 2px 0 0;
  border: 1px solid var(--hx-border);
  color: var(--hx-primary);
  background: var(--hx-surface);
  accent-color: var(--hx-primary);
}

.hx-admin input[type="checkbox"] {
  border-radius: 4px;
}

.hx-admin input[type="radio"] {
  border-radius: 50%;
}

.hx-admin .hx-choice__control[type="checkbox"]:checked,
.hx-admin input[type="checkbox"]:checked {
  -webkit-appearance: none !important;
  appearance: none !important;
  border-color: #075985 !important;
  background-color: #075985 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3.25 8.35 3.05 3.05 6.45-6.8' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 15px 15px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.hx-admin .hx-choice__control:focus-visible,
.hx-admin input[type="checkbox"]:focus-visible,
.hx-admin input[type="radio"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--hx-primary) 34%, transparent);
  outline-offset: 2px;
}

.hx-choice__title,
.hx-choice__description {
  margin: 0;
}

.hx-choice__title {
  color: var(--hx-text);
  font-size: 12px;
  font-weight: 600;
}

.hx-choice__description {
  margin-top: 3px;
  color: var(--hx-muted);
  font-size: 10px;
}

.hx-field__hint-prefix {
  color: var(--hx-warning);
  font-weight: 700;
}

.hx-form-errors {
  margin: 10px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 76, 81, 0.28);
  border-inline-start: 3px solid var(--hx-danger);
  border-radius: 5px;
  color: #b4232b;
  background: rgba(255, 76, 81, 0.08);
  font-size: 11px;
}

.hx-form-errors strong,
.hx-form-errors span {
  display: block;
}

.hx-form-errors ul {
  margin: 8px 0 0;
  padding-inline-start: 18px;
}

.hx-action-button {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--hx-border);
  border-radius: 5px;
  background: var(--hx-surface);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.hx-action-button svg {
  width: 16px;
  height: 16px;
}

.hx-action-button--edit {
  color: var(--hx-primary);
}

.hx-action-button--view {
  color: var(--hx-warning);
}

.hx-action-button--danger {
  color: var(--hx-danger);
}

.hx-action-button:hover {
  border-color: currentColor;
  background: var(--hx-surface-muted);
}

.hx-modal__dialog--lg {
  max-width: 768px;
}

.hx-modal__dialog--xl {
  max-width: 1024px;
}

.hx-modal__body {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  padding-top: 26px !important;
  scrollbar-color: #c9c7d0 transparent;
  scrollbar-width: thin;
}

.hx-modal__body h1,
.hx-modal__body h2,
.hx-modal__body h3,
.hx-modal__body h4 {
  margin-top: 0;
  color: var(--hx-text);
  letter-spacing: 0;
}

.hx-modal__footer {
  gap: 8px;
}

.hx-settings-item {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hx-border);
  color: var(--hx-text);
  background: var(--hx-surface);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.hx-settings-item:hover {
  color: var(--hx-primary);
  background: var(--hx-surface-muted);
}

.hx-settings-item__icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--hx-primary);
  background: var(--hx-primary-soft);
}

.hx-settings-item__icon svg {
  width: 19px;
  height: 19px;
}

.hx-settings-item__arrow {
  width: 16px;
  height: 16px;
  margin-inline-start: auto;
  color: var(--hx-muted);
}

.hx-tabs,
.hx-stepper {
  min-width: 0;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow);
}

.hx-tabs__list {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 0 16px;
  border-bottom: 1px solid var(--hx-border);
}

.hx-tab {
  display: inline-flex;
  min-height: 46px;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--hx-muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.hx-tab:hover,
.hx-tab--active {
  color: var(--hx-primary);
}

.hx-tab--active {
  border-bottom-color: var(--hx-primary);
}

.hx-tabs__panel {
  padding: 18px;
}

.hx-stepper__header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--hx-border);
}

.hx-stepper__eyebrow {
  margin-bottom: 8px;
  color: var(--hx-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.hx-stepper__title {
  min-width: 0;
  flex: 1;
}

.hx-stepper__progress-wrap {
  display: flex;
  width: 260px;
  align-items: center;
  gap: 10px;
}

.hx-stepper__track {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--hx-surface-muted);
}

.hx-stepper__progress {
  height: 100%;
  border-radius: 4px;
  background: var(--hx-success);
}

.hx-stepper__percent {
  width: 36px;
  color: var(--hx-muted);
  font-size: 10px;
  text-align: end;
}

.hx-stepper__step-title {
  color: var(--hx-text);
  font-size: 16px;
  font-weight: 600;
}

.hx-stepper__body {
  padding: 20px;
}

.hx-admin .choices,
.hx-admin .select2-container {
  width: 100% !important;
  margin-bottom: 0;
}

.hx-admin .choices__inner,
.hx-admin .select2-selection {
  min-height: 40px !important;
  border: 1px solid var(--hx-border) !important;
  border-radius: 5px !important;
  color: var(--hx-text) !important;
  background: var(--hx-surface) !important;
  font-size: 12px !important;
}

.hx-admin .choices__list--dropdown,
.hx-admin .select2-dropdown {
  border-color: var(--hx-border) !important;
  border-radius: 5px !important;
  color: var(--hx-text) !important;
  background: var(--hx-surface) !important;
  box-shadow: var(--hx-shadow-lg);
}

.hx-admin .filepond--panel-root {
  border: 1px dashed var(--hx-border);
  border-radius: 5px;
  background: var(--hx-surface-muted);
}

.hx-admin .filepond--drop-label {
  color: var(--hx-muted);
  font-size: 11px;
}

.hx-admin td [class*="gap-x"],
.hx-admin td [class*="gap-2"] {
  gap: 6px;
}

.hx-admin tbody td:last-child button,
.hx-admin tbody td:last-child a {
  border-radius: 5px !important;
}

.hx-password-toggle,
.hx-copy-button {
  border: 0;
  color: var(--hx-muted);
  background: transparent;
  cursor: pointer;
}

.hx-password-toggle:hover,
.hx-copy-button:hover {
  color: var(--hx-primary);
}

.hx-copy-button svg,
.hx-password-toggle svg {
  width: 18px;
  height: 18px;
}

.hx-select-chevron {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: 34px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--hx-muted);
  pointer-events: none;
}

[dir="rtl"] .hx-select-chevron {
  right: auto;
  left: 0;
}

.hx-select-chevron svg {
  width: 15px;
  height: 15px;
}

.hx-select--compact {
  min-height: 34px !important;
  padding-block: 5px !important;
}

.hx-select-plain {
  min-height: 34px;
  padding: 5px 28px 5px 9px;
  border: 1px solid var(--hx-border);
  border-radius: 5px;
  color: var(--hx-muted);
  background: var(--hx-surface);
  font: inherit;
  font-size: 11px;
}

.hx-autocomplete__loading {
  padding: 8px;
  color: var(--hx-muted);
}

.hx-autocomplete__results {
  overflow: hidden;
  border: 1px solid var(--hx-border);
  border-radius: 5px;
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow);
}

.hx-autocomplete__option {
  padding: 9px 12px;
  border-bottom: 1px solid var(--hx-border);
  color: var(--hx-muted);
  font-size: 11px;
  cursor: pointer;
}

.hx-autocomplete__option:hover {
  color: var(--hx-primary);
  background: var(--hx-surface-muted);
}

.hx-input-group {
  position: relative;
  margin-top: 7px;
}

.hx-input-group__append {
  position: absolute;
  inset-block: 1px;
  inset-inline-end: 1px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  border-inline-start: 1px solid var(--hx-border);
  color: var(--hx-muted);
  background: var(--hx-surface-muted);
}

@media (max-width: 767px) {
  .hx-form {
    padding: 16px;
  }

  .hx-modal__dialog,
  .hx-modal__dialog--lg,
  .hx-modal__dialog--xl {
    width: 100%;
    max-width: none;
  }

  .hx-modal__body {
    max-height: calc(100vh - 128px);
  }

  .hx-stepper__progress-wrap {
    width: 100%;
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-admin *,
  .hx-admin *::before,
  .hx-admin *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Vuexy analytics reference */
:root {
  --hx-primary: #20aef3;
  --hx-primary-strong: #159bdc;
  --hx-primary-soft: #e4f6fe;
  --hx-sidebar: #ffffff;
  --hx-sidebar-strong: #f3f2f4;
  --hx-sidebar-text: #444050;
  --hx-sidebar-muted: #5f5b6b;
  --hx-border: #e6e4e9;
  --hx-shadow: 0 2px 8px rgba(47, 43, 61, 0.1);
  --hx-sidebar-width: 260px;
  --hx-topbar-height: 86px;
}

.theme-dark {
  --hx-sidebar: #2f3349;
  --hx-sidebar-strong: #383d55;
  --hx-sidebar-text: #e8e6f0;
  --hx-sidebar-muted: #b7b4c5;
}

.hx-content {
  width: calc(100% - 48px);
  max-width: 1392px;
  padding: 8px 0 40px;
}

.hx-sidebar,
.hx-mobile-sidebar {
  color: var(--hx-sidebar-text);
  border-inline-end: 1px solid var(--hx-border);
  background: var(--hx-sidebar);
  box-shadow: 2px 0 8px rgba(47, 43, 61, 0.04);
}

.hx-sidebar__brand {
  min-height: 62px;
  padding: 10px 14px 8px 18px;
  border-bottom: 0;
}

[dir="rtl"] .hx-sidebar__brand {
  padding-right: 18px;
  padding-left: 14px;
}

.hx-brand {
  gap: 10px;
  color: var(--hx-text);
}

.hx-brand__mark {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
}

.hx-brand__name {
  font-size: 20px;
  font-weight: 700;
}

.hx-sidebar .hx-icon-button,
.hx-mobile-sidebar .hx-icon-button {
  width: 34px;
  height: 34px;
  color: var(--hx-muted);
}

.hx-sidebar .hx-icon-button:hover,
.hx-mobile-sidebar .hx-icon-button:hover {
  color: var(--hx-primary);
  border-color: var(--hx-border);
  background: var(--hx-primary-soft);
}

.hx-sidebar__scroll {
  padding: 4px 11px 12px;
  scrollbar-color: #cbc9d2 transparent;
}

.hx-nav-item {
  margin: 2px 0;
}

.hx-nav-link,
.hx-nav-group__trigger {
  min-height: 39px;
  gap: 10px;
  padding: 8px 12px;
  color: var(--hx-sidebar-muted);
  font-size: 13px;
  font-weight: 400;
}

.hx-nav-link:hover,
.hx-nav-group__trigger:hover {
  color: var(--hx-text);
  background: var(--hx-surface-muted);
}

.hx-nav-group--active > .hx-nav-group__trigger {
  color: var(--hx-text);
  background: var(--hx-sidebar-strong);
  font-weight: 500;
}

.hx-nav-link--active,
.hx-nav-link--active:hover {
  color: #fff;
  background: var(--hx-primary);
  box-shadow: 0 2px 6px rgba(32, 174, 243, 0.28);
}

[dir="rtl"] .hx-nav-link--active,
.hx-nav-link--active {
  box-shadow: 0 2px 6px rgba(32, 174, 243, 0.28);
}

.hx-nav-icon,
.hx-nav-icon > svg,
.hx-nav-icon > * {
  width: 18px;
  height: 18px;
}

.hx-nav-group__children {
  margin: 2px 0 5px;
  padding: 1px 0;
  border: 0;
  background: transparent;
}

[dir="rtl"] .hx-nav-group__children {
  margin: 2px 0 5px;
}

.hx-nav-group__children .hx-nav-link {
  min-height: 38px;
  padding-inline-start: 16px;
  font-size: 13px;
}

.hx-nav-group__children .hx-nav-icon:empty {
  width: 8px;
  height: 8px;
  margin-inline: 4px 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
}

.hx-nav-group__children .hx-nav-link--active .hx-nav-icon:empty {
  border-color: #fff;
}

.hx-sidebar__footer {
  padding: 8px 11px;
  border-top-color: var(--hx-border);
}

.hx-sidebar__status {
  color: var(--hx-muted);
}

.hx-topbar {
  height: var(--hx-topbar-height);
  border-bottom: 0;
  background: var(--hx-canvas);
  box-shadow: none;
  backdrop-filter: none;
}

.hx-topbar__inner {
  width: calc(100% - 48px);
  max-width: 1392px;
  height: 54px;
  margin: 16px auto;
  padding: 0 14px 0 18px;
  border: 1px solid color-mix(in srgb, var(--hx-border) 70%, transparent);
  border-radius: var(--hx-radius);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow);
}

[dir="rtl"] .hx-topbar__inner {
  padding-right: 18px;
  padding-left: 14px;
}

.hx-toolbar-search {
  min-width: 260px;
  align-items: center;
  gap: 12px;
  color: var(--hx-muted);
  font-size: 13px;
}

.hx-toolbar-search kbd {
  margin-inline-start: 2px;
  padding: 2px 5px;
  border: 1px solid var(--hx-border);
  border-radius: 4px;
  color: var(--hx-muted);
  background: var(--hx-surface-muted);
  font: inherit;
  font-size: 10px;
}

.hx-language-control select {
  min-width: 76px;
}

.hx-profile__trigger {
  min-height: 40px;
}

.hx-page--dashboard > .hx-page-header {
  display: none;
}

.hx-dashboard-toolbar {
  margin: 0 0 14px;
}

.hx-live-stamp {
  min-height: 34px;
  background: transparent;
}

.hx-dashboard-top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr) minmax(230px, 1fr);
  gap: 24px;
}

.hx-analytics-hero,
.hx-panel {
  border-radius: var(--hx-radius);
}

.hx-analytics-hero {
  position: relative;
  min-width: 0;
  min-height: 260px;
  overflow: hidden;
  padding: 26px 24px;
  color: #fff;
  background: var(--hx-primary);
  box-shadow: var(--hx-shadow);
}

.hx-analytics-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 58%;
}

.hx-analytics-hero h2,
.hx-analytics-hero h3,
.hx-analytics-hero p {
  margin: 0;
  color: #fff;
}

.hx-analytics-hero h2 {
  font-size: 17px;
  font-weight: 700;
}

.hx-analytics-hero p {
  margin-top: 3px;
  font-size: 12px;
  opacity: 0.9;
}

.hx-analytics-hero h3 {
  margin-top: 35px;
  font-size: 13px;
  font-weight: 700;
}

.hx-analytics-hero__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin-top: 14px;
}

.hx-analytics-hero__metrics div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.hx-analytics-hero__metrics strong {
  max-width: 110px;
  overflow: hidden;
  padding: 4px 7px;
  border-radius: 4px;
  color: #fff;
  background: rgba(5, 113, 175, 0.32);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx-analytics-hero__metrics span {
  font-size: 12px;
}

.hx-analytics-hero__image {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: 17px;
  width: 154px;
  height: 154px;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(27, 33, 76, 0.38));
}

[dir="rtl"] .hx-analytics-hero__image {
  right: auto;
  left: 20px;
}

.hx-widget-dots {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 4px;
}

[dir="rtl"] .hx-widget-dots {
  right: auto;
  left: 18px;
}

.hx-widget-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

.hx-widget-dots span:first-child {
  background: #fff;
}

.hx-daily-sales,
.hx-sales-overview {
  min-height: 260px;
}

.hx-widget-heading {
  padding: 24px 23px 8px;
}

.hx-widget-heading h2,
.hx-widget-heading p,
.hx-widget-heading strong {
  margin: 0;
}

.hx-widget-heading h2 {
  color: var(--hx-text);
  font-size: 16px;
  font-weight: 600;
}

.hx-widget-heading p {
  margin-top: 8px;
  color: var(--hx-muted);
  font-size: 12px;
}

.hx-widget-heading > strong,
.hx-widget-heading > div > strong {
  display: block;
  margin-top: 2px;
  color: var(--hx-text);
  font-size: 23px;
  font-weight: 500;
}

.hx-widget-heading--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.hx-spark-chart {
  height: 132px;
  margin-top: 3px;
  overflow: hidden;
}

.hx-spark-chart > div,
.hx-spark-chart canvas,
.hx-spark-chart svg {
  max-height: 132px !important;
}

.hx-positive {
  margin-top: 3px;
  color: var(--hx-success);
  font-size: 12px;
  font-weight: 600;
}

.hx-overview-compare {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  align-items: stretch;
  padding: 15px 23px 8px;
  text-align: start;
}

.hx-overview-compare > div:last-child {
  text-align: end;
}

.hx-overview-compare p,
.hx-overview-compare strong,
.hx-overview-compare small {
  display: block;
  margin: 0;
}

.hx-overview-compare p {
  margin: 8px 0 7px;
  color: var(--hx-muted);
  font-size: 12px;
}

.hx-overview-compare strong {
  color: var(--hx-text);
  font-size: 17px;
  font-weight: 600;
}

.hx-overview-compare small {
  margin-top: 3px;
  color: color-mix(in srgb, var(--hx-muted) 65%, transparent);
  font-size: 11px;
}

.hx-versus {
  display: flex;
  min-height: 100px;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--hx-border);
  border-left: 1px solid var(--hx-border);
  color: var(--hx-muted);
  font-size: 9px;
}

.hx-stat-icon {
  display: inline-flex;
  width: 27px;
  height: 27px;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--hx-primary);
  background: var(--hx-primary-soft);
}

.hx-stat-icon svg {
  width: 17px;
  height: 17px;
}

.hx-stat-icon--cyan {
  color: var(--hx-info);
  background: rgba(0, 186, 209, 0.12);
}

.hx-stat-icon--red {
  color: var(--hx-danger);
  background: rgba(255, 76, 81, 0.12);
}

.hx-stat-icon--amber {
  color: var(--hx-warning);
  background: rgba(255, 159, 67, 0.14);
}

.hx-split-progress {
  display: flex;
  height: 8px;
  margin: 16px 23px 0;
  overflow: hidden;
  border-radius: 5px;
  background: var(--hx-surface-muted);
}

.hx-split-progress span:first-child {
  flex: 1;
  background: var(--hx-info);
}

.hx-split-progress span:last-child {
  flex: 1;
  background: var(--hx-primary);
}

.hx-dashboard-middle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.hx-earning-report,
.hx-marketplace-tracker {
  min-height: 430px;
}

.hx-widget-more {
  width: 18px;
  height: 18px;
  color: var(--hx-muted);
}

.hx-earning-report__main {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 14px;
  padding: 8px 23px 0;
}

.hx-earning-report__summary strong,
.hx-earning-report__summary span {
  display: block;
}

.hx-earning-report__summary strong {
  overflow: hidden;
  color: var(--hx-text);
  font-size: 28px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx-earning-report__summary span {
  margin-top: 16px;
  color: var(--hx-muted);
  font-size: 11px;
  line-height: 1.6;
}

.hx-report-chart {
  height: 160px;
  overflow: hidden;
}

.hx-report-chart > div,
.hx-report-chart canvas,
.hx-report-chart svg {
  max-height: 160px !important;
}

.hx-report-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 23px 23px;
  padding: 20px;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
}

.hx-report-stats > div {
  min-width: 0;
}

.hx-report-stats p,
.hx-report-stats strong {
  margin: 0;
}

.hx-report-stats p {
  display: inline;
  margin-inline-start: 7px;
  color: var(--hx-text);
  font-size: 12px;
}

.hx-report-stats strong {
  display: block;
  overflow: hidden;
  margin-top: 10px;
  color: var(--hx-text);
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx-tracker-content {
  display: grid;
  grid-template-columns: minmax(160px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  min-height: 330px;
  padding: 0 23px 22px;
}

.hx-tracker-summary > strong {
  display: block;
  color: var(--hx-text);
  font-size: 28px;
  font-weight: 500;
}

.hx-tracker-summary > p {
  margin: 4px 0 22px;
  color: var(--hx-muted);
  font-size: 12px;
}

.hx-tracker-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hx-tracker-summary li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.hx-tracker-summary li strong,
.hx-tracker-summary li small {
  display: block;
}

.hx-tracker-summary li strong {
  color: var(--hx-text);
  font-size: 12px;
}

.hx-tracker-summary li small {
  margin-top: 2px;
  color: var(--hx-muted);
  font-size: 10px;
}

.hx-tracker-chart {
  height: 280px;
  overflow: hidden;
}

.hx-tracker-chart > div,
.hx-tracker-chart canvas,
.hx-tracker-chart svg {
  max-height: 280px !important;
}

.hx-chart-empty {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 112px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--hx-muted);
  background: var(--hx-surface-muted);
  font-size: 11px;
  text-align: center;
}

.hx-chart-empty svg {
  width: 26px;
  height: 26px;
  color: var(--hx-primary);
}

.hx-chart-empty--large {
  min-height: 220px;
}

.hx-dashboard-grid--analytics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.hx-dashboard-grid--analytics .hx-chart-panel {
  height: 330px;
}

.hx-dashboard-lists {
  gap: 24px;
  margin-top: 24px;
}

@media (max-width: 1279px) {
  .hx-dashboard-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hx-analytics-hero {
    grid-column: 1 / -1;
  }

  .hx-dashboard-grid--analytics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .hx-content,
  .hx-topbar__inner {
    width: calc(100% - 32px);
  }

  .hx-dashboard-middle,
  .hx-dashboard-grid--analytics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  :root {
    --hx-topbar-height: 72px;
  }

  .hx-topbar__inner {
    width: calc(100% - 20px);
    height: 52px;
    margin: 10px auto;
    padding-inline: 10px;
  }

  .hx-content {
    width: calc(100% - 24px);
    padding: 6px 0 28px;
  }

  .hx-dashboard-toolbar {
    margin: 0 0 12px;
  }

  .hx-dashboard-top {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hx-analytics-hero {
    grid-column: auto;
    min-height: 285px;
    padding: 22px 18px;
  }

  .hx-analytics-hero__copy {
    max-width: 68%;
  }

  .hx-analytics-hero__metrics {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hx-analytics-hero__image {
    right: 10px;
    bottom: 16px;
    width: 112px;
    height: 112px;
  }

  [dir="rtl"] .hx-analytics-hero__image {
    right: auto;
    left: 10px;
  }

  .hx-dashboard-middle {
    gap: 12px;
    margin-top: 12px;
  }

  .hx-earning-report__main,
  .hx-tracker-content {
    grid-template-columns: 1fr;
  }

  .hx-report-chart,
  .hx-tracker-chart {
    margin-top: 14px;
  }

  .hx-report-stats {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hx-dashboard-grid--analytics,
  .hx-dashboard-lists {
    gap: 12px;
    margin-top: 12px;
  }

  .hx-dashboard-grid--analytics .hx-chart-panel {
    height: 320px;
  }
}

@media (max-width: 390px) {
  .hx-analytics-hero__copy {
    max-width: 100%;
  }

  .hx-analytics-hero__image {
    display: none;
  }

  .hx-overview-compare,
  .hx-widget-heading,
  .hx-tracker-content {
    padding-inline: 16px;
  }

  .hx-report-stats {
    margin-inline: 16px;
  }
}

/* ============================================================================
   Home.X domain dashboard widgets
   ----------------------------------------------------------------------------
   Extends the Vuexy analytics widget set above with the pieces the domain
   dashboard needs and the marketplace dashboard never did: a measured trend
   chip, the revenue-split list that replaces "sales by country", a fact grid
   for warehouse and subscription counters, and a legend list that sits beside
   a donut.

   Everything here uses the same --hx-* tokens, so it follows .theme-dark with
   no dark-mode rules of its own.
   ========================================================================== */

.hx-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.hx-delta svg {
  width: 12px;
  height: 12px;
}

.hx-delta--up {
  color: var(--hx-success);
  background: rgba(40, 199, 111, 0.12);
}

.hx-delta--down {
  color: var(--hx-danger);
  background: rgba(255, 76, 81, 0.12);
}

.hx-delta--flat {
  color: var(--hx-muted);
  background: var(--hx-surface-muted);
}

/* A figure with its movement beside it, used in card headers. */
.hx-figure-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.hx-figure-row strong {
  color: var(--hx-text);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.2;
}

/* Revenue split / progress rows: label, value, then the share as a bar. */
.hx-progress-list {
  display: grid;
  gap: 16px;
  padding: 6px 23px 22px;
}

.hx-progress-list__row p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 7px;
}

.hx-progress-list__row span {
  color: var(--hx-muted);
  font-size: 12px;
  font-weight: 500;
}

.hx-progress-list__row strong {
  color: var(--hx-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.hx-progress-list__track {
  height: 8px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--hx-surface-muted);
}

.hx-progress-list__bar {
  height: 100%;
  border-radius: 5px;
  background: var(--hx-primary);
  /* Transformed rather than resized: animating width relayouts the row on
     every frame, and this bar carries no text to distort. */
  transform-origin: left center;
  transition: transform 320ms ease;
}

[dir="rtl"] .hx-progress-list__bar {
  transform-origin: right center;
}

.hx-progress-list__bar--success {
  background: var(--hx-success);
}

.hx-progress-list__bar--warning {
  background: var(--hx-warning);
}

.hx-progress-list__bar--info {
  background: var(--hx-info);
}

/* Counter tiles inside a panel — warehouses, subscriptions. */
.hx-fact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 6px 23px 20px;
}

.hx-fact {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
  background: var(--hx-surface);
}

.hx-fact p {
  margin: 0;
  overflow: hidden;
  color: var(--hx-muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx-fact strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: var(--hx-text);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx-fact--warning strong {
  color: var(--hx-warning);
}

.hx-fact--danger strong {
  color: var(--hx-danger);
}

/* Label/value list that sits under or beside a chart. */
.hx-legend-list {
  margin: 0;
  padding: 4px 23px 20px;
  list-style: none;
}

.hx-legend-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hx-border);
}

.hx-legend-list li:last-child {
  border-bottom: 0;
}

.hx-legend-list span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  color: var(--hx-muted);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hx-legend-list strong {
  color: var(--hx-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.hx-legend-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--hx-primary);
}

/* Section rules between domains. */
.hx-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 28px 0 14px;
  color: var(--hx-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hx-section-title svg {
  width: 16px;
  height: 16px;
  color: var(--hx-primary);
}

.hx-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hx-border);
}

/* The hero's revenue chips wrap to one column on narrow cards; the domain
   dashboard shows three revenue lines plus a count, which is one more than the
   marketplace hero carried. */
.hx-analytics-hero__metrics--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hx-panel-note {
  margin: 0 23px 20px;
  padding: 12px 14px;
  border-radius: var(--hx-radius);
  color: var(--hx-muted);
  background: var(--hx-surface-muted);
  font-size: 11px;
  line-height: 1.6;
}

.hx-panel-note strong {
  color: var(--hx-text);
}

@media (max-width: 1279px) {
  .hx-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .hx-progress-list,
  .hx-fact-grid,
  .hx-legend-list {
    padding-inline: 16px;
  }

  .hx-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hx-panel-note {
    margin-inline: 16px;
  }

  .hx-section-title {
    margin: 20px 0 12px;
  }
}

/* The dashboard toolbar is a right-aligned flex row, and the period select is
   a form control that would otherwise stretch to fill it. */
.hx-dashboard-toolbar .hx-select-wrap {
  flex: 0 0 auto;
  width: 158px;
}

.hx-dashboard-toolbar .hx-select {
  min-height: 36px;
}

/* The hero's headline figure. The `h3` beneath it in the marketplace hero was
   a section label ("Overview") at 13px; here it carries the total, so it needs
   the weight of a headline rather than the size of a caption. */
.hx-analytics-hero__figure {
  margin-top: 22px;
  font-size: 30px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Revenue chips hold a currency and an amount, which is longer than the counts
   the marketplace hero showed. */
.hx-analytics-hero__metrics strong {
  max-width: 150px;
  font-size: 12px;
}

@media (max-width: 767px) {
  .hx-dashboard-toolbar .hx-select-wrap {
    width: 100%;
  }

  .hx-analytics-hero__figure {
    font-size: 25px !important;
  }
}

@media (max-width: 767px) {
  /* The toolbar is a right-aligned row. Once the period select and the refresh
     button no longer fit on one line, flex-end pushes the overflow off the
     left edge instead of clipping on the right, so the select has to be
     allowed to wrap and shrink rather than hold a fixed width. */
  .hx-dashboard-toolbar {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .hx-dashboard-toolbar .hx-select-wrap {
    min-width: 0;
    flex: 1 1 auto;
    width: auto;
  }

  .hx-dashboard-toolbar .hx-button {
    flex: 0 0 auto;
  }

  /* Two columns of currency chips inside a 68%-wide hero leaves each one
     narrower than "E£ 1,234.00", so every chip ellipsises to "E£ …". One
     column per chip is worth more than the density. */
  .hx-analytics-hero__metrics--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .hx-analytics-hero__metrics strong {
    max-width: none;
  }
}

/* ============================================================================
   Topbar responsive rules
   ----------------------------------------------------------------------------
   The topbar markup asks Tailwind for its responsive behaviour — `hidden
   md:flex` on the search chip, `md:hidden` on the mobile brand, `hidden
   sm:flex` on the profile name. The built public/css/app.css contains no
   `@media (min-width: 768px)` block at all: PurgeCSS stripped every `md:*` and
   `sm:*` variant, while plain `.hidden` survived. The result on the live site
   is that each pair collapses to its "off" half — the search chip never
   appears, the profile name never appears, and the mobile brand shows at every
   width, doubling the sidebar's.

   These rules restate that intent in CSS this stylesheet owns, so the topbar
   no longer depends on utilities that are not in the bundle. They are written
   to win over `.hidden` by specificity rather than by source order.
   ========================================================================== */

.hx-topbar .hx-toolbar-search {
  display: none;
}

.hx-topbar .hx-mobile-brand {
  display: flex;
}

.hx-topbar .hx-profile__copy {
  display: none;
}

@media (min-width: 640px) {
  .hx-topbar .hx-profile__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
  }
}

@media (min-width: 768px) {
  /* The sidebar carries the brand from this width up; a second one in the
     topbar is duplication, not navigation. */
  .hx-topbar .hx-mobile-brand {
    display: none;
  }

  .hx-topbar .hx-toolbar-search {
    display: flex;
  }
}

/* Below the search breakpoint the leading group is the menu button and the
   brand only, and the brand takes whatever room is left rather than pushing
   into the actions. */
@media (max-width: 767px) {
  .hx-topbar__leading {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .hx-mobile-brand span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .hx-topbar__actions {
    flex: 0 0 auto;
  }
}

/* ============================================================================
   Interactive dashboard: segmented controls, trend panel, funnel, motion
   ========================================================================== */

/* Segmented control — the period switch and the trend panel's metric and
   chart-type switches. One control, three uses, so they cannot drift apart. */
.hx-segments {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--hx-border);
  border-radius: 8px;
  background: var(--hx-surface-muted);
  gap: 2px;
}

.hx-segment {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  color: var(--hx-muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.hx-segment:hover {
  color: var(--hx-text);
}

.hx-segment svg {
  width: 14px;
  height: 14px;
}

.hx-segment--active {
  color: var(--hx-primary);
  background: var(--hx-surface);
  box-shadow: var(--hx-shadow);
}

.hx-segment:focus-visible {
  outline: 2px solid var(--hx-primary);
  outline-offset: 1px;
}

/* The trend panel: full-width chart with its controls in the header and its
   own figures underneath. */
.hx-trend-panel {
  margin-top: 24px;
}

.hx-trend-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.hx-trend-canvas {
  min-height: 320px;
  padding: 4px 10px 0;
}

.hx-trend-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 23px 22px;
  padding: 16px 18px;
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius);
}

.hx-trend-stats div {
  min-width: 0;
}

.hx-trend-stats p {
  margin: 0;
  color: var(--hx-muted);
  font-size: 11px;
  font-weight: 500;
}

.hx-trend-stats strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: var(--hx-text);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Fulfilment funnel: each step as a bar whose width is its share of the first
   step, with the drop-off named between steps. */
.hx-funnel {
  display: grid;
  gap: 14px;
  padding: 8px 23px 20px;
}

.hx-funnel__step p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 7px;
}

.hx-funnel__step span {
  color: var(--hx-muted);
  font-size: 12px;
  font-weight: 500;
}

.hx-funnel__step strong {
  color: var(--hx-text);
  font-size: 15px;
  font-weight: 700;
}

.hx-funnel__track {
  height: 34px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--hx-surface-muted);
}

.hx-funnel__bar {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 10px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(90deg, var(--hx-primary), color-mix(in srgb, var(--hx-primary) 62%, #ffffff));
  font-size: 11px;
  font-weight: 700;
  /* No width transition here. The bar holds its own percentage label, so
     scaling it would distort the text, and animating width would relayout
     the row on every frame. The value is rendered once per period. */
}

.hx-funnel__bar--success {
  background: linear-gradient(90deg, var(--hx-success), color-mix(in srgb, var(--hx-success) 62%, #ffffff));
}

.hx-funnel__bar--info {
  background: linear-gradient(90deg, var(--hx-info), color-mix(in srgb, var(--hx-info) 62%, #ffffff));
}

.hx-funnel__drop {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--hx-muted);
  font-size: 11px;
}

.hx-funnel__drop svg {
  width: 13px;
  height: 13px;
  color: var(--hx-danger);
}

/* Panel entrance. Staggered by nth-child so the grid resolves visually from
   the top-left rather than appearing all at once. Disabled entirely under
   prefers-reduced-motion — the whole page is still legible without it. */
@keyframes hx-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.hx-animate > * {
  animation: hx-rise 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hx-animate > *:nth-child(2) { animation-delay: 60ms; }
.hx-animate > *:nth-child(3) { animation-delay: 120ms; }
.hx-animate > *:nth-child(4) { animation-delay: 180ms; }

/* Panels lift very slightly on hover, which is the cue that the figures inside
   are current rather than a printed report. */
.hx-panel,
.hx-metric-card {
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.hx-metric-card:hover,
.hx-panel:hover {
  box-shadow: var(--hx-shadow-lg);
}

.hx-metric-card:hover {
  transform: translateY(-2px);
}

/* While Livewire is fetching a new period the figures on screen belong to the
   old one, so they are dimmed rather than left looking current. */
.hx-dashboard-fetching {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .hx-animate > *,
  .hx-funnel__bar,
  .hx-progress-list__bar {
    animation: none !important;
    transition: none !important;
  }

  .hx-metric-card:hover {
    transform: none;
  }
}

@media (max-width: 1023px) {
  .hx-trend-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .hx-trend-stats,
  .hx-funnel {
    margin-inline: 16px;
    padding-inline: 16px;
  }

  .hx-trend-stats {
    margin-inline: 16px;
  }

  .hx-trend-canvas {
    padding-inline: 4px;
  }

  .hx-segments {
    width: 100%;
    justify-content: space-between;
    overflow-x: auto;
  }

  .hx-trend-controls {
    width: 100%;
  }
}

/* The funnel's percentage sits at the end of its own bar, so the gradient runs
   light-to-strong rather than strong-to-light: white text on the pale end of a
   gradient is the one place these bars fail to be readable. */
.hx-funnel__bar {
  background: linear-gradient(90deg, color-mix(in srgb, var(--hx-primary) 58%, #ffffff), var(--hx-primary));
}

.hx-funnel__bar--success {
  background: linear-gradient(90deg, color-mix(in srgb, var(--hx-success) 58%, #ffffff), var(--hx-success));
}

.hx-funnel__bar--info {
  background: linear-gradient(90deg, color-mix(in srgb, var(--hx-info) 58%, #ffffff), var(--hx-info));
}

[dir="rtl"] .hx-funnel__bar,
[dir="rtl"] .hx-funnel__bar--success,
[dir="rtl"] .hx-funnel__bar--info {
  background: linear-gradient(270deg, color-mix(in srgb, var(--hx-primary) 58%, #ffffff), var(--hx-primary));
}

[dir="rtl"] .hx-funnel__bar--success {
  background: linear-gradient(270deg, color-mix(in srgb, var(--hx-success) 58%, #ffffff), var(--hx-success));
}

[dir="rtl"] .hx-funnel__bar--info {
  background: linear-gradient(270deg, color-mix(in srgb, var(--hx-info) 58%, #ffffff), var(--hx-info));
}

/* ============================================================================
   Form grid
   ----------------------------------------------------------------------------
   The design system styles fields but never owned a layout for them, so every
   new form reached for Tailwind's grid utilities. That dependency is the bug:
   public/css/app.css is a build artifact, and the deployed one predates these
   screens, so a utility no older view happened to use — `md:col-span-3` among
   them — is simply not in the bundle and the span silently collapses.

   This file ships with the code and needs no build, so the form layout lives
   here. Twelve columns, one column below the tablet breakpoint, and cells that
   name their own span.
   ========================================================================== */

.hx-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px 18px;
}

.hx-form-grid > * {
  min-width: 0;
  grid-column: span 12;
}

@media (min-width: 768px) {
  .hx-col-3 { grid-column: span 3; }
  .hx-col-4 { grid-column: span 4; }
  .hx-col-6 { grid-column: span 6; }
  .hx-col-8 { grid-column: span 8; }
  .hx-col-9 { grid-column: span 9; }
  .hx-col-12 { grid-column: span 12; }
}

/* A labelled break between groups of fields. More space above than below, so
   the rule reads as belonging to the group it introduces. */
.hx-form-section {
  grid-column: span 12;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--hx-border);
  color: var(--hx-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hx-form-grid > .hx-form-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Title row inside a modal body: the dialog's own heading and its one-line
   explanation of what the form does. */
.hx-modal-title {
  margin: 0 0 4px;
  color: var(--hx-text);
  font-size: 17px;
  font-weight: 700;
}

.hx-modal-subtitle {
  margin: 0 0 20px;
  padding-inline-end: 40px;
  color: var(--hx-muted);
  font-size: 12px;
  line-height: 1.55;
}

/* A field whose control is a checkbox sits lower than a labelled input, so it
   aligns to the bottom of its row rather than the top. */
.hx-choice-field {
  display: flex;
  align-items: flex-end;
  min-height: 40px;
}

@media (max-width: 767px) {
  .hx-choice-field {
    align-items: flex-start;
    min-height: 0;
  }
}

/* Screen badges: the domain a screen reports on, and the capability it needs.
   Metadata, not a control — so they read as labels rather than as buttons. */
.hx-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.hx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--hx-primary);
  background: var(--hx-primary-soft);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.hx-badge--muted {
  color: var(--hx-muted);
  background: var(--hx-surface-muted);
}

.hx-badge__icon {
  width: 13px;
  height: 13px;
}

.hx-screen-note {
  margin: 12px 0 0;
  color: var(--hx-muted);
  font-size: 11px;
  line-height: 1.6;
}

/* Vertical rhythm between the blocks of a domain screen — badge row, notice,
   metric strip, panels, tables. One value rather than the three ad-hoc inline
   margins this shell used to carry, so a screen reached from the sidebar keeps
   the same spacing as the dashboard it was reached from. */
.hx-screen-block {
  margin-top: 24px;
}

@media (max-width: 767px) {
  .hx-screen-block {
    margin-top: 16px;
  }
}

/* Row action groups in domain tables, and the affirmative variant used where a
   row action records something rather than editing or removing it — taking a
   payment is neither an edit nor a danger, and borrowing either colour said
   the wrong thing about it. */
.hx-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.hx-action-button--confirm {
  color: var(--hx-success);
}

.hx-action-button--confirm:hover {
  border-color: var(--hx-success);
  background: color-mix(in srgb, var(--hx-success) 10%, var(--hx-surface));
}

/* ============================================================================
   Domain colour
   ----------------------------------------------------------------------------
   This dashboard reports three domains that are deliberately never added
   together, and until now they were told apart only by reading the heading. A
   hue per domain makes that structure visible: a card, a chart series and a
   section heading that share a colour belong to the same ledger.

   The three hues are wayfinding, and they are kept clear of the semantic set —
   success, warning, danger keep their meanings and are never spent on identity,
   so a red figure always means trouble and never means "Subscriptions".

   Commerce and Direct Services reuse the two brand colours already committed;
   only Subscriptions needed a hue of its own, chosen far enough from both to
   stay separable in a chart legend and in dark mode.
   ========================================================================== */

:root {
  /* Commerce is the brand hue itself, taken by reference rather than copied.
     The literal at the top of this file is overridden further down by the
     Vuexy analytics block, so a hard-coded copy here would put the Commerce
     cards and chart series a shade away from the hero and the buttons. */
  --hx-domain-commerce: var(--hx-primary);
  --hx-domain-commerce-soft: var(--hx-primary-soft);
  --hx-domain-services: #0f8b8d;
  --hx-domain-services-soft: #e0f4f4;
  --hx-domain-subs: #7048c4;
  --hx-domain-subs-soft: #efe9fb;
  --hx-domain-ops: #0a7ea4;
  --hx-domain-ops-soft: #e2f2f8;
}

.theme-dark {
  --hx-domain-commerce: #78a4ff;
  --hx-domain-commerce-soft: rgba(120, 164, 255, 0.16);
  --hx-domain-services: #3fc3c5;
  --hx-domain-services-soft: rgba(63, 195, 197, 0.16);
  --hx-domain-subs: #b39bf0;
  --hx-domain-subs-soft: rgba(179, 155, 240, 0.18);
  --hx-domain-ops: #58bfe0;
  --hx-domain-ops-soft: rgba(88, 191, 224, 0.16);
}

/* Section headings carry their domain's colour on the icon and on a short
   segment of the rule — enough to mark the boundary, not enough to become a
   coloured rail down the side of a card. */
.hx-section-title svg {
  color: var(--hx-section-hue, var(--hx-primary));
}

.hx-section-title::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--hx-section-hue, var(--hx-primary));
}

.hx-section-title--commerce { --hx-section-hue: var(--hx-domain-commerce); }
.hx-section-title--services { --hx-section-hue: var(--hx-domain-services); }
.hx-section-title--ops { --hx-section-hue: var(--hx-domain-ops); }

/* Metric cards inherit the same identity through their icon. */
.hx-tone-commerce { color: var(--hx-domain-commerce); }
.hx-tone-commerce .hx-metric-card__icon { background: var(--hx-domain-commerce-soft); }

.hx-tone-services { color: var(--hx-domain-services); }
.hx-tone-services .hx-metric-card__icon { background: var(--hx-domain-services-soft); }

.hx-tone-subs { color: var(--hx-domain-subs); }
.hx-tone-subs .hx-metric-card__icon { background: var(--hx-domain-subs-soft); }

.hx-tone-ops { color: var(--hx-domain-ops); }
.hx-tone-ops .hx-metric-card__icon { background: var(--hx-domain-ops-soft); }

/* A figure that needs attention says so in weight and in a dot as well as in
   colour, because colour alone is not a signal everyone receives. */
.hx-fact strong {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hx-fact--warning strong::before,
.hx-fact--danger strong::before,
.hx-fact--good strong::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.hx-fact--good strong { color: var(--hx-success); }

/* The hero's revenue chips were one flat wash over a blue card; giving each its
   domain's tint makes the split legible at a glance instead of only after
   reading four labels. */
.hx-analytics-hero__metrics div[data-domain] span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: 6px;
  border-radius: 50%;
  background: var(--hx-chip-hue, rgba(255, 255, 255, 0.6));
  vertical-align: middle;
}

/* Tints that stay legible on the hero's own blue rather than the page ground. */
.hx-analytics-hero__metrics div[data-domain="commerce"] { --hx-chip-hue: #bcd4ff; }
.hx-analytics-hero__metrics div[data-domain="services"] { --hx-chip-hue: #7fe3e4; }
.hx-analytics-hero__metrics div[data-domain="subs"] { --hx-chip-hue: #cbb8ff; }
.hx-analytics-hero__metrics div[data-domain="guests"] { --hx-chip-hue: rgba(255, 255, 255, 0.55); }

/* Legend dots and progress bars pick up the same three hues so a colour means
   the same thing wherever it appears on the page. */
.hx-legend-dot--commerce { background: var(--hx-domain-commerce); }
.hx-legend-dot--services { background: var(--hx-domain-services); }
.hx-legend-dot--subs { background: var(--hx-domain-subs); }

.hx-progress-list__bar--commerce { background: var(--hx-domain-commerce); }
.hx-progress-list__bar--services { background: var(--hx-domain-services); }
.hx-progress-list__bar--subs { background: var(--hx-domain-subs); }

/* Figures carry a little more weight than the labels around them, so the eye
   lands on the number first. */
.hx-metric-card__copy strong {
  font-size: 23px;
  letter-spacing: -0.015em;
}

.hx-report-stats strong,
.hx-trend-stats strong {
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
   Ink variants for coloured figures.

   Vuexy's semantic colours are tuned for fills — a chart band, a chip, a dot —
   where they sit on a tint and read well. As text on white they do not: warning
   measures 2.0:1 and success 2.2:1 against the surface, both far under the 4.5
   that body text needs, and the brand blue is 2.5:1 which misses even the 3:1
   an icon needs.

   So the bright hue keeps every fill and dot, and these darker inks carry the
   text. The pairing stays recognisable — the same hue family, one step down in
   lightness — while the number stays readable for someone who is not reading it
   in ideal light.
   -------------------------------------------------------------------------- */

:root {
  --hx-success-ink: #0a7a45;
  --hx-warning-ink: #96530a;
  --hx-danger-ink: #c0362c;
  --hx-domain-commerce-ink: #0d7098;
}

.theme-dark {
  --hx-success-ink: #5cc59b;
  --hx-warning-ink: #e0a44a;
  --hx-danger-ink: #ff8f93;
  --hx-domain-commerce-ink: #78c8f5;
}

.hx-fact--warning strong { color: var(--hx-warning-ink); }
.hx-fact--danger strong { color: var(--hx-danger-ink); }
.hx-fact--good strong { color: var(--hx-success-ink); }

/* The dot keeps the vivid hue: it is a fill, and it sits beside the text rather
   than carrying it. */
.hx-fact--warning strong::before { background: var(--hx-warning); }
.hx-fact--danger strong::before { background: var(--hx-danger); }
.hx-fact--good strong::before { background: var(--hx-success); }

/* Section icons are small and thin-stroked, so they take the ink too. The
   26px rule beside them keeps the vivid hue. */
.hx-section-title--commerce svg { color: var(--hx-domain-commerce-ink); }

.hx-legend-list strong { color: var(--hx-text); }