/* Final shared visual language for the ERP frontend. */
:root {
  --holxn-page-max: 1240px;
  --holxn-radius: 12px;
  --holxn-radius-sm: 8px;
  --holxn-brand: #287a63;
  --holxn-brand-hover: #21614f;
  --holxn-brand-bright: #12b981;
  --holxn-brand-soft: rgba(40, 122, 99, .12);
  --holxn-status-info: #3b82f6;
  --holxn-status-warning: #f59e0b;
  --holxn-status-danger: #ef4444;
  --holxn-status-violet: #7c5cfc;
  --holxn-page-bg: #f6f7f8;
  --holxn-surface: #ffffff;
  --holxn-surface-solid: #ffffff;
  --holxn-surface-muted: #f1f3f5;
  --holxn-text: #27364a;
  --holxn-muted: #6f8097;
  --holxn-border: rgba(38, 65, 56, .15);
  --holxn-shadow-sm: 0 .35rem 1rem rgba(30, 52, 44, .06);
  --holxn-shadow-md: 0 .8rem 2rem rgba(30, 52, 44, .1);
  --holxn-focus: 0 0 0 .2rem rgba(40, 122, 99, .14);
  --holxn-font: "Outfit", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --bs-primary: var(--holxn-brand);
  --bs-primary-rgb: 40, 122, 99;
  --bs-link-color: var(--holxn-brand);
  --bs-link-hover-color: var(--holxn-brand-hover);
  --bs-success: var(--holxn-brand);
  --bs-success-rgb: 40, 122, 99;
  --bs-body-color: var(--holxn-text);
  --bs-body-color-rgb: 29, 41, 36;
  --bs-body-bg: var(--holxn-page-bg);
  --bs-body-bg-rgb: 243, 246, 244;
  --bs-secondary-color: var(--holxn-muted);
  --bs-secondary-color-rgb: 100, 117, 110;
  --bs-secondary-bg: var(--holxn-surface-muted);
  --bs-tertiary-bg: #e1ebe5;
  --bs-border-color: var(--holxn-border);
}

html[data-bs-theme="dark"] {
  color-scheme: dark;
  --holxn-page-bg: #111315;
  --holxn-surface: #202326;
  --holxn-surface-solid: #282c30;
  --holxn-surface-muted: #272b2e;
  --holxn-text: #f1f4f3;
  --holxn-muted: rgba(241, 244, 243, .7);
  --holxn-border: rgba(255, 255, 255, .14);
  --holxn-brand-soft: rgba(72, 177, 141, .16);
  --holxn-shadow-sm: 0 .35rem 1rem rgba(0, 0, 0, .22);
  --holxn-shadow-md: 0 .8rem 2rem rgba(0, 0, 0, .32);
  --holxn-focus: 0 0 0 .2rem rgba(72, 177, 141, .22);
  --bs-body-color: var(--holxn-text);
  --bs-body-color-rgb: 238, 246, 242;
  --bs-body-bg: var(--holxn-page-bg);
  --bs-body-bg-rgb: 17, 19, 21;
  --bs-secondary-color: var(--holxn-muted);
  --bs-secondary-color-rgb: 171, 187, 180;
  --bs-secondary-bg: var(--holxn-surface-muted);
  --bs-secondary-bg-rgb: 39, 43, 46;
  --bs-tertiary-bg: #303438;
  --bs-border-color: var(--holxn-border);
}

html {
  background-color: var(--holxn-page-bg);
}

body,
body.bg-body,
body.data-display {
  color: var(--holxn-text) !important;
  background: var(--holxn-page-bg) !important;
  background-image: none !important;
  font-family: var(--holxn-font) !important;
}

body {
  --holxn-page-accent: #287a63;
  --holxn-page-accent-rgb: 40, 122, 99;
  text-rendering: optimizeLegibility;
}

body[class*="holxn-route-site-"] {
  --holxn-page-accent: #12b981;
  --holxn-page-accent-rgb: 18, 185, 129;
}

body[class*="holxn-route-pt-"] {
  --holxn-page-accent: #3b82f6;
  --holxn-page-accent-rgb: 59, 130, 246;
}

body.data-display-pt {
  --holxn-page-accent: #3b82f6;
  --holxn-page-accent-rgb: 59, 130, 246;
}

body.data-display-site {
  --holxn-page-accent: #12b981;
  --holxn-page-accent-rgb: 18, 185, 129;
}

body[class*="holxn-route-job-"] {
  --holxn-page-accent: #d98a08;
  --holxn-page-accent-rgb: 217, 138, 8;
}

body[class*="holxn-route-user-"] {
  --holxn-page-accent: #7c5cfc;
  --holxn-page-accent-rgb: 124, 92, 252;
}

body[class*="holxn-route-admin-"] {
  --holxn-page-accent: #e15f73;
  --holxn-page-accent-rgb: 225, 95, 115;
}

body:is([class*="holxn-route-qr"], [class*="holxn-route-hub-"], [class*="holxn-route-track-"]) {
  --holxn-page-accent: #0d94a6;
  --holxn-page-accent-rgb: 13, 148, 166;
}

body:is([class*="holxn-route-login-"], [class*="holxn-route-consultation"]) {
  --holxn-page-accent: #4f76d9;
  --holxn-page-accent-rgb: 79, 118, 217;
}

body,
body.bg-body,
body.data-display {
  background-color: var(--holxn-page-bg) !important;
  background-image: linear-gradient(180deg, #fafbfc, var(--holxn-page-bg) 24rem) !important;
}

html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] body.bg-body,
html[data-bs-theme="dark"] body.data-display {
  background-image: linear-gradient(180deg, #171a1d, var(--holxn-page-bg) 24rem) !important;
}

a {
  color: var(--holxn-brand);
}

a:hover {
  color: var(--holxn-brand-hover);
}

.fill {
  width: 100%;
}

.navbar,
.navbar.bg-body,
.navbar-body.bg-body {
  color: var(--holxn-text);
  background: var(--holxn-surface) !important;
  border-bottom: 1px solid var(--holxn-border) !important;
  box-shadow: 0 .25rem 1rem rgba(22, 29, 27, .06);
  backdrop-filter: none;
}

.navbar-brand {
  color: var(--holxn-text) !important;
}

.navbar .nav-link {
  color: var(--holxn-text);
  border-radius: var(--holxn-radius-sm);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: var(--holxn-brand-hover);
  background: var(--holxn-brand-soft);
}

.navbar-toggler {
  border-color: var(--holxn-border);
}

/* Dark navigation hover states stay crisp against the green-tinted surface. */
html[data-bs-theme="dark"] .navbar .nav-link:hover,
html[data-bs-theme="dark"] .navbar .nav-link:focus-visible,
html[data-bs-theme="dark"] .navbar .nav-link.active {
  color: #effff6 !important;
  background: var(--holxn-brand-soft) !important;
}

html[data-bs-theme="dark"] .navbar .nav-link:focus-visible,
html[data-bs-theme="dark"] .navbar-toggler:focus-visible {
  box-shadow: var(--holxn-focus) !important;
}

html[data-bs-theme="dark"] .navbar .dropdown-menu {
  background: var(--holxn-surface-solid) !important;
  border-color: var(--holxn-border) !important;
  box-shadow: 0 .7rem 1.6rem rgba(0, 0, 0, .34) !important;
}

html[data-bs-theme="dark"] .navbar .dropdown-item {
  color: #d9ebe1 !important;
}

html[data-bs-theme="dark"] .navbar .dropdown-item:hover,
html[data-bs-theme="dark"] .navbar .dropdown-item:focus-visible {
  color: #f5fff8 !important;
  background: var(--holxn-brand-soft) !important;
}

.card,
.modal-content,
.dropdown-menu,
.toast,
.table-responsive,
.auth-card,
.consult-hero,
.consult-shell > .row > .col-lg-7 > .card {
  color: var(--holxn-text);
  background: var(--holxn-surface) !important;
  border-color: var(--holxn-border) !important;
  border-radius: var(--holxn-radius) !important;
  box-shadow: var(--holxn-shadow-sm) !important;
  backdrop-filter: none;
}

/* Public toast tones must win over the shared neutral surface override. */
#holxnToastContainer .toast {
  min-width: min(22rem, calc(100vw - 2rem));
  max-width: calc(100vw - 1.5rem);
  color: #fff !important;
  background: #475569 !important;
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .2) !important;
  font-weight: 600;
}

#holxnToastContainer .toast-body { color: inherit !important; }
#holxnToastContainer .toast.text-bg-primary { background: #0d6efd !important; }
#holxnToastContainer .toast.text-bg-secondary { background: #475569 !important; }
#holxnToastContainer .toast.text-bg-success { background: #198754 !important; }
#holxnToastContainer .toast.text-bg-info { background: #087f9b !important; }
#holxnToastContainer .toast.text-bg-danger { background: #b42318 !important; }
#holxnToastContainer .toast.text-bg-warning {
  color: #1f2937 !important;
  background: #f4c145 !important;
}
#holxnToastContainer .toast.text-bg-warning .btn-close { filter: none; }

.card-header,
.card-footer,
.modal-header,
.modal-footer {
  background: transparent !important;
  border-color: var(--holxn-border) !important;
}

.card > .card-header {
  background: var(--holxn-surface-muted) !important;
}

.form-control,
.form-select,
.input-group-text,
.page-link,
.holxn-select-trigger {
  color: var(--holxn-text);
  background: var(--holxn-surface-solid) !important;
  border-color: var(--holxn-border) !important;
  border-radius: var(--holxn-radius-sm);
}

.form-control::placeholder,
.form-select::placeholder {
  color: var(--holxn-muted);
}

.form-control:focus,
.form-select:focus,
.holxn-select-trigger:focus-visible {
  border-color: var(--holxn-page-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--holxn-page-accent-rgb), .14) !important;
}

.btn,
.badge,
.page-link {
  border-radius: var(--holxn-radius-sm);
}

.btn-primary,
.btn-success {
  color: #fff !important;
  background: var(--holxn-brand) !important;
  border-color: var(--holxn-brand) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  color: #fff !important;
  background: var(--holxn-brand-hover) !important;
  border-color: var(--holxn-brand-hover) !important;
}

.btn-outline-primary,
.btn-outline-success {
  color: var(--holxn-brand) !important;
  border-color: var(--holxn-brand) !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover {
  color: #fff !important;
  background: var(--holxn-brand) !important;
  border-color: var(--holxn-brand) !important;
}

.table {
  --bs-table-striped-bg: rgba(var(--holxn-page-accent-rgb), .035);
  --bs-table-hover-bg: rgba(var(--holxn-page-accent-rgb), .07);
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--holxn-border);
}

.table thead th,
.table-light {
  color: var(--holxn-muted) !important;
  background: var(--holxn-surface-muted) !important;
  border-bottom-color: var(--holxn-border) !important;
}

.ops-pagehead h1,
.ops-pagehead h2,
.fill > .d-flex:has(> h1) > h1,
.fill > .d-flex:has(> div > h1) h1 {
  position: relative;
  padding-left: .85rem;
}

.ops-pagehead h1::before,
.ops-pagehead h2::before,
.fill > .d-flex:has(> h1) > h1::before,
.fill > .d-flex:has(> div > h1) h1::before {
  content: '';
  position: absolute;
  top: .12em;
  bottom: .12em;
  left: 0;
  width: .25rem;
  background: var(--holxn-page-accent);
  border-radius: 999px;
}

.alert-info {
  color: color-mix(in srgb, var(--holxn-status-info) 72%, var(--holxn-text));
  background: color-mix(in srgb, var(--holxn-status-info) 10%, var(--holxn-surface));
  border-color: color-mix(in srgb, var(--holxn-status-info) 28%, var(--holxn-border));
}

.alert-warning {
  color: color-mix(in srgb, #a56700 72%, var(--holxn-text));
  background: color-mix(in srgb, var(--holxn-status-warning) 11%, var(--holxn-surface));
  border-color: color-mix(in srgb, var(--holxn-status-warning) 30%, var(--holxn-border));
}

.alert-danger {
  color: color-mix(in srgb, #bd2635 74%, var(--holxn-text));
  background: color-mix(in srgb, var(--holxn-status-danger) 9%, var(--holxn-surface));
  border-color: color-mix(in srgb, var(--holxn-status-danger) 27%, var(--holxn-border));
}

/* Pointer clicks must not leave pagination looking selected; keep keyboard focus visible. */
.pagination .page-link:focus:not(:focus-visible) {
  box-shadow: none;
}

.pagination .page-item:not(.active):not(.disabled) .page-link:not(.active):not(:disabled):focus:not(:focus-visible) {
  color: var(--holxn-text);
}

.page-item.active .page-link {
  color: #fff !important;
  background: var(--holxn-brand) !important;
  border-color: var(--holxn-brand) !important;
}

.text-body-secondary {
  color: var(--holxn-muted) !important;
}

.theme-toggle-btn {
  color: var(--holxn-text) !important;
}

/* Home cards use the same surface, action, and accent language as management pages. */
.home-shell {
  max-width: var(--holxn-page-max);
  color: var(--holxn-text) !important;
  font-family: var(--holxn-font) !important;
}

.home-card {
  color: var(--holxn-text) !important;
  background: var(--holxn-surface) !important;
  border-color: var(--holxn-border) !important;
  border-radius: 1rem !important;
  box-shadow: 0 .45rem 1.25rem rgba(39, 54, 74, .055) !important;
}

.home-card:hover,
.home-card:focus-visible {
  color: var(--holxn-text) !important;
  background: var(--holxn-surface-solid) !important;
  border-color: var(--holxn-brand) !important;
  box-shadow: var(--holxn-shadow-md) !important;
}

.home-card:focus-visible {
  outline: 3px solid var(--holxn-brand-soft);
}

.home-card-icon {
  color: var(--holxn-brand) !important;
  background: var(--holxn-brand-soft) !important;
  border-color: var(--holxn-border) !important;
  border-radius: var(--holxn-radius-sm) !important;
}

.home-card:nth-child(2) .home-card-icon {
  color: var(--holxn-status-warning) !important;
  background: color-mix(in srgb, var(--holxn-status-warning) 10%, var(--holxn-surface)) !important;
}

.home-card:nth-child(3) .home-card-icon {
  color: var(--holxn-status-info) !important;
  background: color-mix(in srgb, var(--holxn-status-info) 10%, var(--holxn-surface)) !important;
}

.home-card:hover .home-card-icon,
.home-card:focus-visible .home-card-icon {
  color: var(--holxn-brand) !important;
  background: var(--holxn-brand-soft) !important;
  border-color: var(--holxn-brand) !important;
}

.home-card-action,
.home-card:hover .home-card-action,
.home-card:focus-visible .home-card-action {
  color: var(--holxn-muted) !important;
}

/* Overview surfaces borrow the reference UI's semantic color, without inflating CRUD layouts. */
.wallet-stat-card {
  background: var(--holxn-surface) !important;
  border-left: 4px solid var(--holxn-status-info) !important;
  border-radius: 1rem !important;
  box-shadow: 0 .5rem 1.35rem rgba(39, 54, 74, .055) !important;
}

.wallet-stat-balance {
  border-left-color: var(--holxn-brand-bright) !important;
}

.wallet-stat-expire {
  border-left-color: var(--holxn-status-warning) !important;
}

.wallet-stat-card .card-body > .fw-bold {
  color: var(--holxn-text) !important;
}

.wallet-stat-balance .card-body > .fw-bold {
  color: var(--holxn-brand-bright) !important;
}

.profile-card {
  border-radius: 1rem !important;
  box-shadow: 0 .55rem 1.4rem rgba(39, 54, 74, .06) !important;
}

.profile-card > .card-header {
  background: var(--holxn-surface-muted) !important;
}

.profile-field-value {
  color: var(--holxn-text) !important;
}

/* Colored-surface guardrails: route accents identify sections without tinting content areas. */
.business-admin-panel,
.user-manage-panel,
.realm-panel,
.node-api-panel,
.node-manage-panel,
.ops-filter-panel,
.ops-filter-card,
body[class*="holxn-route-site-"] .fill > .card.mb-4,
body[class*="holxn-route-pt-"] .fill > .card.mb-4,
body[class*="holxn-route-job-"] .fill > .card.mb-4 {
  background: var(--holxn-surface) !important;
  border-color: var(--holxn-border) !important;
}

.profile-field,
.profile-field:nth-child(3n + 2),
.profile-field:nth-child(3n) {
  background: var(--holxn-surface-solid) !important;
  border-color: var(--holxn-border) !important;
  border-left-color: var(--holxn-page-accent) !important;
}

.profile-field:hover {
  background: var(--holxn-surface-muted) !important;
  border-color: var(--holxn-border) !important;
  border-left-color: var(--holxn-page-accent) !important;
}

html[data-bs-theme="dark"] .holxn-offcanvas,
html[data-bs-theme="dark"] .job-operations-card,
html[data-bs-theme="dark"] .job-detail-body {
  color: var(--holxn-text) !important;
  background: var(--holxn-surface) !important;
  border-color: var(--holxn-border) !important;
}

html[data-bs-theme="dark"] .holxn-offcanvas :is(
  .btn-toggle:hover,
  .btn-toggle:focus,
  .btn-toggle[aria-expanded="true"],
  .btn-toggle-nav a:hover,
  .btn-toggle-nav a:focus
) {
  background: var(--holxn-surface-muted) !important;
}

html[data-bs-theme="dark"] .holxn-offcanvas .btn-toggle-nav a.is-active {
  background: var(--holxn-brand-soft) !important;
}

html[data-bs-theme="dark"] .home-card,
html[data-bs-theme="dark"] .wallet-stat-card,
html[data-bs-theme="dark"] .profile-card {
  box-shadow: var(--holxn-shadow-sm) !important;
}

/* Data display pages keep their workflow, but inherit the shared ERP geometry. */
.data-display #app-container {
  width: min(100% - 2rem, var(--holxn-page-max));
  font-family: var(--holxn-font) !important;
}

.data-display #login-form > .d-flex,
.data-display #data-section > .d-flex,
.data-display #data-container .card {
  background: var(--holxn-surface) !important;
  border-color: var(--holxn-border) !important;
  border-radius: var(--holxn-radius) !important;
  box-shadow: var(--holxn-shadow-sm) !important;
}

.data-display #login-form input,
.data-display .factor-block {
  color: var(--holxn-text);
  background: var(--holxn-surface-solid) !important;
  border-color: var(--holxn-border) !important;
  border-radius: var(--holxn-radius-sm) !important;
}

.data-display-pt #data-container .card-body {
  justify-content: center;
  text-align: center;
}

.data-display-pt #data-container > :only-child {
  width: calc(50% - .425rem);
  grid-column: 1 / -1;
  justify-self: center;
}

.data-display .btn-secondary {
  color: var(--holxn-text);
  background: var(--holxn-surface-muted) !important;
  border-color: var(--holxn-border) !important;
}

.data-display .btn-secondary:hover,
.data-display .btn-secondary.active {
  color: #fff !important;
  background: var(--holxn-brand) !important;
  border-color: var(--holxn-brand) !important;
}

/* Auth and consultation surfaces follow the same restrained shell. */
.auth-card {
  border-radius: var(--holxn-radius) !important;
  background: var(--holxn-surface) !important;
  border-color: var(--holxn-border) !important;
  box-shadow: var(--holxn-shadow-md) !important;
}

.auth-header,
.auth-password-toggle,
.auth-success-notice {
  background: var(--holxn-surface-muted) !important;
  border-color: var(--holxn-border) !important;
}

.auth-password-panel {
  background: var(--holxn-surface) !important;
  border-color: var(--holxn-border) !important;
}

.auth-header {
  background-image: none !important;
}

.auth-card .form-control:focus,
.auth-card .form-select:focus {
  border-color: var(--holxn-brand) !important;
  box-shadow: var(--holxn-focus) !important;
}

.consult-shell {
  max-width: var(--holxn-page-max);
}

.consult-hero,
.consult-price-card {
  background: var(--holxn-surface) !important;
  border-color: var(--holxn-border) !important;
  border-radius: var(--holxn-radius) !important;
  box-shadow: var(--holxn-shadow-sm) !important;
}

.consult-kicker {
  color: var(--holxn-brand) !important;
  letter-spacing: .02em;
  text-transform: none;
}

.consult-price-card {
  background: var(--holxn-brand-soft) !important;
}

.consult-points li::before {
  color: var(--holxn-brand);
}

/* Static data pages get the same public shell as wrapped pages. */
.erp-standalone-page .navbar {
  position: fixed;
}

.erp-standalone-page .standalone-content {
  flex: 1 0 auto;
}

.erp-standalone-page > footer,
.erp-standalone-page .footer {
  flex-shrink: 0;
  width: 100%;
  padding: .85rem 1rem 1.1rem;
  color: var(--holxn-muted);
  text-align: center;
}

.erp-standalone-page > footer p,
.erp-standalone-page .footer p {
  margin-bottom: 0;
  font-size: .75rem;
}

@media (max-width: 767.98px) {
  .data-display #app-container {
    width: min(100% - 1.25rem, var(--holxn-page-max));
  }

  .home-card {
    border-radius: var(--holxn-radius-sm) !important;
  }

  .data-display-pt #data-container > :only-child {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Control alignment: distinguish standard, touch, and compact actions. */
:root {
  --holxn-control-height: 2.5rem;
  --holxn-touch-control-height: 2.75rem;
}

/* The theme switch shares the same 40px rail as the mobile navbar toggle. */
.theme-toggle-btn {
  width: var(--holxn-control-height);
  min-height: var(--holxn-control-height);
}

/* Toolbar icon buttons stay square beside their text inputs. */
.business-admin-search .business-admin-tool-btn {
  width: var(--holxn-control-height);
  min-width: var(--holxn-control-height);
  min-height: var(--holxn-control-height);
}

/* Business pagination follows the toolbar control height. */
.business-admin-footer .page-link {
  width: auto;
  min-width: var(--holxn-control-height);
  height: var(--holxn-control-height);
  min-height: var(--holxn-control-height);
}

/* Task filters use 44px controls, so desktop pagination should align with them. */
.job-management-workspace .page-link {
  min-height: var(--holxn-touch-control-height);
}

/* Modal actions align with the 43.2px modal form fields. */
.business-admin-modal .business-admin-footer-btn,
.user-manage-modal .user-manage-footer-btn {
  min-height: 2.7rem;
}

@media (max-width: 767.98px) {
  /* Search rows become one consistent touch target on smaller screens. */
  .business-admin-search .form-control,
  .business-admin-search .business-admin-tool-btn,
  .user-manage-search .form-control,
  .user-manage-search .user-manage-tool-btn {
    min-height: var(--holxn-touch-control-height);
  }

  .business-admin-search .business-admin-tool-btn,
  .user-manage-search .user-manage-tool-btn {
    width: var(--holxn-touch-control-height);
    min-width: var(--holxn-touch-control-height);
  }

  .business-admin-footer .page-link {
    min-width: var(--holxn-touch-control-height);
    height: var(--holxn-touch-control-height);
    min-height: var(--holxn-touch-control-height);
  }
}

/* Dark-mode contrast for the administrator floating menu icon. */
html[data-bs-theme="dark"] #menuBar {
  color: #d9f7e9 !important;
  background: var(--holxn-surface-solid) !important;
  border-color: rgba(112, 211, 171, .42) !important;
  box-shadow: 0 .65rem 1.5rem rgba(0, 0, 0, .34) !important;
}

html[data-bs-theme="dark"] #menuBar:hover,
html[data-bs-theme="dark"] #menuBar:focus-visible {
  color: #ffffff !important;
  background: #2a3932 !important;
  border-color: rgba(137, 232, 194, .62) !important;
}