/* ------------------------------------------------------------------
   hi24 compatibility layer for Sngine 5.0 (Nova theme)
   Bootstrap 3/4/5 class names used by hi24 plugins, mapped to Nova's
   design tokens (--color-primary, --color-base-100/200/300, --radius-*).
   Load this AFTER the theme CSS and BEFORE the plugin's own CSS.
   ------------------------------------------------------------------ */

/* ---------- layout / grid ---------- */
.h24-plugin .container, .h24-plugin.container { width: 100%; }
.container-fluid { width: 100%; }
.row { display: flex; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; }
.row > * { padding-left: 8px; padding-right: 8px; box-sizing: border-box; min-width: 0; }
.row.g-3 { margin-left: -8px; margin-right: -8px; row-gap: 16px; }
.form-row { display: flex; flex-wrap: wrap; margin-left: -5px; margin-right: -5px; }
.form-row > * { padding-left: 5px; padding-right: 5px; }
[class*="col-"] { position: relative; width: 100%; flex: 0 0 100%; max-width: 100%; }
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; max-width: none; }
.col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-xs-6, .col-xs-6 { flex: 0 0 50%; max-width: 50%; }
.col-xs-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-xs-3 { flex: 0 0 25%; max-width: 25%; }
.col-xs-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-xs-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) {
  .col-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  .d-sm-none { display: none !important; } .d-sm-block { display: block !important; } .d-sm-flex { display: flex !important; } .d-sm-inline-block { display: inline-block !important; }
}
@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  .order-md-1 { order: 1; } .order-md-2 { order: 2; } .order-md-3 { order: 3; }
  .d-md-none { display: none !important; } .d-md-block { display: block !important; } .d-md-flex { display: flex !important; } .d-md-inline-block { display: inline-block !important; }
  .text-md-right, .text-md-end { text-align: right; }
}
@media (min-width: 992px) {
  .col-lg-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  .d-lg-none { display: none !important; } .d-lg-block { display: block !important; } .d-lg-flex { display: flex !important; } .d-lg-inline-block { display: inline-block !important; }
}
@media (min-width: 1200px) {
  .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .col-xl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-xl-9 { flex: 0 0 75%; max-width: 75%; } .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ---------- display / flex utilities ---------- */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-fill { flex: 1 1 auto !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-stretch { align-items: stretch !important; }
.align-self-center { align-self: center !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-start { justify-content: flex-start !important; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; } .gap-4 { gap: 1.5rem; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
.top-0 { top: 0; } .start-0 { left: 0; } .end-0 { right: 0; } .bottom-0 { bottom: 0; }
.w-100 { width: 100% !important; }
.w-75 { width: 75% !important; }
.w-50 { width: 50% !important; }
.w-25 { width: 25% !important; }
.w-auto { width: auto !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }
.mw-100 { max-width: 100% !important; }
.vh-100 { height: 100vh !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.pull-right, .float-right, .float-end { float: right !important; }
.pull-left, .float-left, .float-start { float: left !important; }
.clearfix::after { content: ""; display: table; clear: both; }
.nowrap, .text-nowrap { white-space: nowrap !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-break { word-wrap: break-word !important; word-break: break-word !important; }
.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.invisible { visibility: hidden !important; }
.visible { visibility: visible !important; }
.img-responsive, .img-fluid { max-width: 100%; height: auto; }
.img-thumbnail { padding: .25rem; background-color: var(--color-base-100); border: 1px solid var(--color-base-300); border-radius: var(--radius-field, .5rem); max-width: 100%; height: auto; }
.img-circle, .rounded-circle { border-radius: 50% !important; }
.rounded { border-radius: var(--radius-field, .5rem) !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-pill { border-radius: 50rem !important; }
.rounded-3 { border-radius: .75rem !important; }
.border { border: 1px solid var(--color-base-300) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--color-base-300) !important; }
.border-bottom { border-bottom: 1px solid var(--color-base-300) !important; }
.border-start, .border-left { border-left: 1px solid var(--color-base-300) !important; }
.border-end, .border-right { border-right: 1px solid var(--color-base-300) !important; }
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; }
.shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; }

/* ---------- spacing (Bootstrap + Sngine 4.x helpers) ---------- */
.m-0 { margin: 0 !important; } .m-1 { margin: .25rem !important; } .m-2 { margin: .5rem !important; } .m-3 { margin: 1rem !important; } .m-auto { margin: auto !important; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: .25rem !important; } .mt-2 { margin-top: .5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; } .mt-auto { margin-top: auto !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .25rem !important; } .mb-2 { margin-bottom: .5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; }
.ms-0, .ml-0 { margin-left: 0 !important; } .ms-1, .ml-1 { margin-left: .25rem !important; } .ms-2, .ml-2 { margin-left: .5rem !important; } .ms-3, .ml-3 { margin-left: 1rem !important; } .ms-auto, .ml-auto { margin-left: auto !important; }
.me-0, .mr-0 { margin-right: 0 !important; } .me-1, .mr-1 { margin-right: .25rem !important; } .me-2, .mr-2 { margin-right: .5rem !important; } .me-3, .mr-3 { margin-right: 1rem !important; } .me-auto, .mr-auto { margin-right: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; } .mx-1 { margin-left: .25rem !important; margin-right: .25rem !important; } .mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; }
.my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; } .my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; } .my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.p-0 { padding: 0 !important; } .p-1 { padding: .25rem !important; } .p-2 { padding: .5rem !important; } .p-3 { padding: 1rem !important; } .p-4 { padding: 1.5rem !important; } .p-5 { padding: 3rem !important; }
.pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: .25rem !important; } .pt-2 { padding-top: .5rem !important; } .pt-3 { padding-top: 1rem !important; } .pt-4 { padding-top: 1.5rem !important; }
.pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: .25rem !important; } .pb-2 { padding-bottom: .5rem !important; } .pb-3 { padding-bottom: 1rem !important; } .pb-4 { padding-bottom: 1.5rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-1 { padding-left: .25rem !important; padding-right: .25rem !important; } .px-2 { padding-left: .5rem !important; padding-right: .5rem !important; } .px-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; } .py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; } .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.ps-1, .pl-1 { padding-left: .25rem !important; } .ps-2, .pl-2 { padding-left: .5rem !important; } .ps-3, .pl-3 { padding-left: 1rem !important; }
.pe-1, .pr-1 { padding-right: .25rem !important; } .pe-2, .pr-2 { padding-right: .5rem !important; } .pe-3, .pr-3 { padding-right: 1rem !important; }
.mr5 { margin-right: 5px !important; } .mr10 { margin-right: 10px !important; } .mr15 { margin-right: 15px !important; } .mr20 { margin-right: 20px !important; }
.ml5 { margin-left: 5px !important; } .ml10 { margin-left: 10px !important; } .ml15 { margin-left: 15px !important; } .ml20 { margin-left: 20px !important; }
.mt0 { margin-top: 0 !important; } .mt5 { margin-top: 5px !important; } .mt10 { margin-top: 10px !important; } .mt15 { margin-top: 15px !important; } .mt20 { margin-top: 20px !important; } .mt30 { margin-top: 30px !important; }
.mb0 { margin-bottom: 0 !important; } .mb5 { margin-bottom: 5px !important; } .mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px !important; } .mb30 { margin-bottom: 30px !important; }
.pt0 { padding-top: 0 !important; } .pt5 { padding-top: 5px !important; } .pt10 { padding-top: 10px !important; } .pt20 { padding-top: 20px !important; }
.pb0 { padding-bottom: 0 !important; } .pb5 { padding-bottom: 5px !important; } .pb10 { padding-bottom: 10px !important; } .pb20 { padding-bottom: 20px !important; }
.pl0 { padding-left: 0 !important; } .pl5 { padding-left: 5px !important; } .pl10 { padding-left: 10px !important; } .pr0 { padding-right: 0 !important; } .pr5 { padding-right: 5px !important; } .pr10 { padding-right: 10px !important; }
.p0 { padding: 0 !important; } .p5 { padding: 5px !important; } .p10 { padding: 10px !important; } .p15 { padding: 15px !important; } .p20 { padding: 20px !important; }

/* ---------- typography / colors ---------- */
.text-center { text-align: center !important; }
.text-left, .text-start { text-align: left !important; }
.text-right, .text-end { text-align: right !important; }
.text-muted { color: color-mix(in oklab, var(--color-base-content) 60%, transparent) !important; }
.text-dark { color: var(--color-base-content) !important; }
.text-black { color: var(--color-base-content) !important; }
.text-white { color: #fff !important; }
.text-danger { color: var(--color-error) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: color-mix(in oklab, var(--color-base-content) 60%, transparent) !important; }
.text-body { color: var(--color-base-content) !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-decoration-none { text-decoration: none !important; }
.fw-bold, .font-weight-bold, .text-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-normal, .font-weight-normal { font-weight: 400 !important; }
.fw-light { font-weight: 300 !important; }
.fst-italic, .font-italic { font-style: italic !important; }
.small, .text-sm { font-size: .875em; }
.text-xs { font-size: .75rem; }
.text-lg { font-size: 1.125rem; }
.text-xlg { font-size: 1.5rem; }
.text-xxlg { font-size: 2rem; }
.lead { font-size: 1.25rem; font-weight: 300; }
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; line-height: 1.2; }
.h1 { font-size: 2.25rem; } .h2 { font-size: 1.875rem; } .h3 { font-size: 1.5rem; } .h4 { font-size: 1.25rem; } .h5 { font-size: 1.125rem; } .h6 { font-size: 1rem; }
.display-4 { font-size: 2.5rem; font-weight: 300; }
.bg-light { background-color: var(--color-base-200) !important; }
.bg-white { background-color: var(--color-base-100) !important; }
.bg-dark { background-color: var(--color-neutral) !important; color: var(--color-neutral-content); }
.bg-primary { background-color: var(--color-primary) !important; color: var(--color-primary-content, #fff); }
.bg-secondary { background-color: color-mix(in oklab, var(--color-base-content) 55%, transparent) !important; color: #fff; }
.bg-success { background-color: var(--color-success) !important; color: var(--color-success-content, #fff); }
.bg-danger { background-color: var(--color-error) !important; color: var(--color-error-content, #fff); }
.bg-warning { background-color: var(--color-warning) !important; color: var(--color-warning-content, #000); }
.bg-info { background-color: var(--color-info) !important; color: var(--color-info-content, #fff); }
.bg-gradient-primary { background: linear-gradient(135deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 70%, #000)) !important; color: #fff; }
.bg-gradient-success { background: linear-gradient(135deg, var(--color-success), color-mix(in oklab, var(--color-success) 70%, #000)) !important; color: #fff; }
.bg-gradient-warning { background: linear-gradient(135deg, var(--color-warning), color-mix(in oklab, var(--color-warning) 70%, #000)) !important; color: #fff; }
.bg-gradient-info { background: linear-gradient(135deg, var(--color-info), color-mix(in oklab, var(--color-info) 70%, #000)) !important; color: #fff; }
.bg-gradient-danger { background: linear-gradient(135deg, var(--color-error), color-mix(in oklab, var(--color-error) 70%, #000)) !important; color: #fff; }
.opacity-50 { opacity: .5 !important; } .opacity-75 { opacity: .75 !important; } .opacity-25 { opacity: .25 !important; }

/* ---------- forms ---------- */
.form-group { margin-bottom: 1rem; }
.form-group > label, .form-label, .control-label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .375rem; color: var(--color-base-content); }
.form-text, .help-block { display: block; margin-top: .375rem; font-size: .8rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.form-control, .form-select, select.form-control {
  display: block; width: 100%; min-height: 2.5rem; padding: .5rem .75rem; font-size: .9375rem; line-height: 1.4;
  color: var(--color-base-content); background-color: var(--color-base-100);
  border: 1px solid color-mix(in oklab, var(--color-base-content) 30%, transparent);
  border-radius: var(--radius-field, .5rem); transition: border-color .15s, box-shadow .15s; appearance: none; box-sizing: border-box;
}
textarea.form-control { min-height: 5rem; height: auto; resize: vertical; }
.form-control:focus, .form-select:focus { outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent); }
.form-control::placeholder { color: color-mix(in oklab, var(--color-base-content) 45%, transparent); }
.form-control:disabled, .form-control[readonly] { background-color: var(--color-base-200); opacity: .8; }
.form-control-sm, .form-select-sm { min-height: 2rem; padding: .25rem .5rem; font-size: .8125rem; }
.form-control-lg { min-height: 3rem; font-size: 1.0625rem; }
.form-select, select.form-control {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 14px 10px;
}
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-text, .input-group-addon { display: flex; align-items: center; padding: .5rem .75rem; font-size: .9rem; background-color: var(--color-base-200); border: 1px solid color-mix(in oklab, var(--color-base-content) 30%, transparent); border-radius: var(--radius-field, .5rem); white-space: nowrap; }
.input-group > .input-group-text:first-child { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-text:last-child { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.form-check { display: flex; align-items: center; gap: .5rem; min-height: 1.5rem; margin-bottom: .25rem; }
.form-check-inline { display: inline-flex; margin-right: 1rem; }
.form-check-input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; }
.form-check-label { cursor: pointer; font-size: .9rem; }
.form-switch .form-check-input { width: 2.25rem; height: 1.25rem; appearance: none; background: color-mix(in oklab, var(--color-base-content) 30%, transparent); border-radius: 1rem; position: relative; transition: background .2s; }
.form-switch .form-check-input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.form-switch .form-check-input:checked { background: var(--color-primary); }
.form-switch .form-check-input:checked::after { transform: translateX(16px); }
.checkbox, .radio { position: static; }
.checkbox label, .radio label { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 400; }
.h24-plugin input[type="checkbox"].checkbox, .h24-plugin input[type="radio"].radio { appearance: auto; }
.has-error .form-control { border-color: var(--color-error); }
.has-success .form-control { border-color: var(--color-success); }
.invalid-feedback { display: block; color: var(--color-error); font-size: .8rem; margin-top: .25rem; }
.is-invalid { border-color: var(--color-error) !important; }
label.label, span.label { display: inline-block; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; background-color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.label-primary { background-color: var(--color-primary) !important; } .label-success { background-color: var(--color-success) !important; } .label-danger { background-color: var(--color-error) !important; } .label-warning { background-color: var(--color-warning) !important; color: #000; } .label-info { background-color: var(--color-info) !important; } .label-default { background-color: #777 !important; }

/* ---------- buttons (Bootstrap variants missing from FlyonUI) ---------- */
.btn-default, .btn-light, .btn-secondary, .btn-outline-secondary {
  --btn-color: var(--color-base-content);
  --btn-bg: var(--color-base-200); --btn-fg: var(--color-base-content); --btn-border: color-mix(in oklab, var(--color-base-content) 15%, transparent); --btn-noise: none;
  color: var(--color-base-content);
}
.btn-outline-secondary { --btn-bg: transparent; --btn-border: color-mix(in oklab, var(--color-base-content) 30%, transparent); }
.btn-success { --btn-color: var(--color-success); --btn-bg: var(--color-success); --btn-fg: var(--color-success-content, #fff); --btn-border: var(--color-success); color: var(--color-success-content, #fff); }
.btn-danger { --btn-color: var(--color-error); --btn-bg: var(--color-error); --btn-fg: var(--color-error-content, #fff); --btn-border: var(--color-error); color: var(--color-error-content, #fff); }
.btn-warning { --btn-color: var(--color-warning); --btn-bg: var(--color-warning); --btn-fg: var(--color-warning-content, #000); --btn-border: var(--color-warning); color: var(--color-warning-content, #000); }
.btn-outline-primary { --btn-color: var(--color-primary); --btn-bg: transparent; --btn-fg: var(--color-primary); --btn-border: var(--color-primary); color: var(--color-primary); }
.btn-outline-primary:hover { --btn-bg: var(--color-primary); --btn-fg: var(--color-primary-content, #fff); color: var(--color-primary-content, #fff); }
.btn-outline-danger { --btn-color: var(--color-error); --btn-bg: transparent; --btn-fg: var(--color-error); --btn-border: var(--color-error); color: var(--color-error); }
.btn-outline-danger:hover { --btn-bg: var(--color-error); --btn-fg: #fff; color: #fff; }
.btn-outline-success { --btn-color: var(--color-success); --btn-bg: transparent; --btn-fg: var(--color-success); --btn-border: var(--color-success); color: var(--color-success); }
.btn-outline-success:hover { --btn-bg: var(--color-success); --btn-fg: #fff; color: #fff; }
.btn-outline-warning { --btn-color: var(--color-warning); --btn-bg: transparent; --btn-fg: var(--color-warning); --btn-border: var(--color-warning); color: var(--color-warning); }
.btn-outline-warning:hover { --btn-bg: var(--color-warning); --btn-fg: #000; color: #000; }
.btn-outline-info { --btn-color: var(--color-info); --btn-bg: transparent; --btn-fg: var(--color-info); --btn-border: var(--color-info); color: var(--color-info); }
.btn-outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-border: rgba(255,255,255,.6); color: #fff; }
.btn-link { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--color-primary); color: var(--color-primary); text-decoration: underline; box-shadow: none; }
.btn-block { display: flex; width: 100%; }
.btn-rounded, .btn-pill { border-radius: 50rem !important; }
.btn-md { --size: 2.5rem; }
.btn-icon { padding-inline: .5rem; }
.btn-group { display: inline-flex; vertical-align: middle; }
.btn-group > .btn { position: relative; flex: 1 1 auto; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group-sm > .btn { --size: 2rem; font-size: .8125rem; }
.btn-close, .close { background: transparent; border: 0; padding: .25rem; cursor: pointer; opacity: .6; line-height: 1; font-size: 1.25rem; color: inherit; width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; }
.btn-close:hover, .close:hover { opacity: 1; }
.btn-close::before { content: "\2715"; font-size: 1rem; }
.btn-close-white { color: #fff; }
.spinner-border { display: inline-block; width: 1.5rem; height: 1.5rem; border: .2em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: h24-spin .75s linear infinite; vertical-align: -.125em; }
.spinner-border-sm { width: 1rem; height: 1rem; border-width: .15em; }
.btn-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: h24-spin .75s linear infinite; }
@keyframes h24-spin { to { transform: rotate(360deg); } }

/* ---------- alerts / badges ---------- */
.alert-danger { --alert-color: var(--color-error); background: color-mix(in oklab, var(--color-error) 10%, var(--color-base-100)); border-color: color-mix(in oklab, var(--color-error) 30%, transparent); color: var(--color-error); }
.alert-success { --alert-color: var(--color-success); background: color-mix(in oklab, var(--color-success) 10%, var(--color-base-100)); border-color: color-mix(in oklab, var(--color-success) 30%, transparent); color: var(--color-success); }
.alert-warning { --alert-color: var(--color-warning); background: color-mix(in oklab, var(--color-warning) 12%, var(--color-base-100)); border-color: color-mix(in oklab, var(--color-warning) 35%, transparent); color: color-mix(in oklab, var(--color-warning) 75%, var(--color-base-content)); }
.alert-info { --alert-color: var(--color-info); background: color-mix(in oklab, var(--color-info) 10%, var(--color-base-100)); border-color: color-mix(in oklab, var(--color-info) 30%, transparent); color: var(--color-info); }
.alert-light { background: var(--color-base-200); border-color: var(--color-base-300); color: var(--color-base-content); }
.alert { padding: .75rem 1rem; margin-bottom: 1rem; display: block; }
.alert.d-none { display: none; }
.badge-danger { --badge-color: var(--color-error); background-color: var(--color-error); color: #fff; border-color: var(--color-error); }
.badge.bg-success, .badge.bg-danger, .badge.bg-warning, .badge.bg-info, .badge.bg-primary, .badge.bg-secondary, .badge.bg-dark { border-color: transparent; }
.badge-pill { border-radius: 50rem; }

/* ---------- panels / cards / tables ---------- */
.panel { background: var(--color-base-100); border: 1px solid var(--color-base-300); border-radius: var(--radius-box, .75rem); margin-bottom: 1.25rem; overflow: hidden; }
.panel-heading { padding: .75rem 1rem; border-bottom: 1px solid var(--color-base-300); font-weight: 600; background: var(--color-base-100); }
.panel-body { padding: 1rem; }
.panel-footer { padding: .75rem 1rem; border-top: 1px solid var(--color-base-300); background: var(--color-base-200); }
.panel-title { margin: 0; font-size: 1rem; }
.h24-plugin .card, .card.h24 { border: 1px solid var(--color-base-300); box-shadow: none; margin-bottom: 1rem; }
.h24-plugin .card-header { padding: .875rem 1.25rem; border-bottom: 1px solid var(--color-base-300); font-weight: 600; display: block; }
.h24-plugin .card-header::after { content: ""; display: table; clear: both; }
.h24-plugin .card-body { padding: 1.25rem; display: block; color: var(--color-base-content); }
.h24-plugin .card-footer { padding: .875rem 1.25rem; border-top: 1px solid var(--color-base-300); }
.card-header-tabs { margin: -.5rem 0 -.875rem; border-bottom: 0; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.h24-plugin .table, .table.h24 { overflow: visible; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: color-mix(in oklab, var(--color-base-content) 3%, transparent); }
.table-hover > tbody > tr:hover { background-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); }
.table-bordered { border: 1px solid var(--color-base-300); }
.table-bordered th, .table-bordered td { border: 1px solid var(--color-base-300); }
.table-sm th, .table-sm td { padding: .4rem .5rem; }
.table thead th { font-weight: 600; }
.table-light th { background-color: var(--color-base-200); }
.list-group { display: flex; flex-direction: column; border-radius: var(--radius-box, .75rem); overflow: hidden; }
.list-group-item { padding: .75rem 1rem; background: var(--color-base-100); border: 1px solid var(--color-base-300); margin-top: -1px; }
.progress-bar-striped { background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; }
.progress-bar-animated { animation: h24-progress-stripes 1s linear infinite; }
@keyframes h24-progress-stripes { 0% { background-position-x: 1rem; } }
.h24-plugin .progress { height: .75rem; }
.progress-bar.bg-success { background-color: var(--color-success); } .progress-bar.bg-danger { background-color: var(--color-error); } .progress-bar.bg-warning { background-color: var(--color-warning); } .progress-bar.bg-info { background-color: var(--color-info); }

/* ---------- nav tabs / pills (Bootstrap) ---------- */
.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-tabs { border-bottom: 1px solid var(--color-base-300); gap: .25rem; }
.nav-item { list-style: none; }
.nav-link { display: flex; align-items: center; gap: .4rem; padding: .6rem 1rem; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); text-decoration: none; cursor: pointer; border: 0; background: transparent; font-weight: 500; font-size: .9rem; border-radius: var(--radius-field, .5rem) var(--radius-field, .5rem) 0 0; }
.nav-link:hover { color: var(--color-base-content); background: color-mix(in oklab, var(--color-base-content) 5%, transparent); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.active > .nav-link { color: var(--color-primary); background: transparent; border-bottom: 2px solid var(--color-primary); margin-bottom: -1px; }
.nav-pills .nav-link.active { color: #fff; background: var(--color-primary); border-radius: var(--radius-field, .5rem); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active, .tab-content > .active { display: block; background-color: transparent; }
.nav-tabs .active, .nav-pills .active, .h24-plugin li.active, .h24-plugin .tab-pane.active { background-color: transparent; }

/* ---------- collapse (Bootstrap) - Nova sets .collapse{visibility:collapse} ---------- */
.h24-plugin .collapse:not(.show), .collapse.h24-collapse:not(.show) { display: none; visibility: hidden; }
.h24-plugin .collapse.show, .collapse.h24-collapse.show { display: block; visibility: visible; }
.collapsing { position: relative; height: 0; overflow: hidden; transition: height .25s ease; visibility: visible; }

/* ---------- dropdowns (Bootstrap data-toggle; FlyonUI uses .dropdown-toggle/.dropdown-menu.open) ---------- */
.h24-dropdown { position: relative; display: inline-flex; }
.h24-plugin .dropdown-menu:not(.h24-show):not(.open), .h24-dropdown .dropdown-menu:not(.h24-show) { display: none; }
.h24-plugin .dropdown-menu.open { display: block; opacity: 1; }
.dropdown-menu.h24-show { display: block !important; opacity: 1 !important; position: absolute; top: 100%; min-width: 10rem; z-index: 50; }
.dropdown-menu.h24-show:not(.dropdown-menu-end) { left: 0; }
.dropdown-menu-end.h24-show, .dropdown-menu-right.h24-show { right: 0; left: auto; }
.dropdown-divider { height: 0; margin: .5rem 0; border-top: 1px solid var(--color-base-300); }
.dropdown-header { padding: .5rem 1rem; font-size: .8rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.caret { display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; }

/* ---------- modals (Bootstrap markup driven by hi24-compat.js) ---------- */
.modal.h24-modal { display: none; position: fixed; inset: 0; z-index: 1050; overflow-x: hidden; overflow-y: auto; background: rgba(0,0,0,.55); padding: 1rem; opacity: 1; pointer-events: auto; grid-template-columns: none; justify-items: stretch; }
.modal.h24-modal.h24-open { display: block; }
.modal.h24-modal .modal-dialog { position: relative; width: auto; max-width: 32rem; margin: 1.75rem auto; pointer-events: auto; }
.modal.h24-modal .modal-dialog.modal-lg { max-width: 50rem; }
.modal.h24-modal .modal-dialog.modal-xl { max-width: 70rem; }
.modal.h24-modal .modal-dialog.modal-sm { max-width: 20rem; }
.modal.h24-modal .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; background: var(--color-base-100); border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 1rem); box-shadow: 0 20px 40px rgba(0,0,0,.25); color: var(--color-base-content); pointer-events: auto; }
.modal.h24-modal .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-base-300); }
.modal.h24-modal .modal-title { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.modal.h24-modal .modal-body { padding: 1.25rem; overflow: visible; }
.modal.h24-modal .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .875rem 1.25rem; border-top: 1px solid var(--color-base-300); }
.modal-open { overflow: hidden; }
.modal-backdrop { display: none; }
.fade { opacity: 1; }

/* Nova sets `a:not(.btn,.button){color:var(--color-primary)}` (unlayered). Inside plugin pages let the
   plugin's own CSS decide link colours; this rule has the same specificity and loads later. */
:where(.h24-plugin) a:not(.btn, .button) { color: inherit; }

/* ---------- misc Sngine 4.x helpers used by plugins ---------- */
.x-hidden { display: none !important; }
.text-link { color: var(--color-primary); }
.offcanvas-responsive { width: 100%; }
.hidden-xs { } .visible-xs { display: none; }
@media (max-width: 767px) { .hidden-xs { display: none !important; } .visible-xs { display: block !important; } }
@media (max-width: 991px) { .hidden-sm { display: none !important; } }
.text-xxlg { font-size: 2rem; }
.with-icon { display: inline-flex; align-items: center; gap: .4rem; }
.stat-panel { display: flex; flex-wrap: wrap; gap: .75rem; }
.stat-cell { flex: 1 1 8rem; text-align: center; padding: 1rem; background: var(--color-base-100); border: 1px solid var(--color-base-300); border-radius: var(--radius-box, .75rem); }
.upload-area { border: 2px dashed var(--color-base-300); border-radius: var(--radius-box, .75rem); padding: 1.5rem; text-align: center; cursor: pointer; background: var(--color-base-200); }
.upload-area:hover { border-color: var(--color-primary); }
.rounded-circle { border-radius: 50% !important; }
hr { border-top: 1px solid var(--color-base-300); margin: 1rem 0; }
.h24-plugin h1, .h24-plugin h2, .h24-plugin h3, .h24-plugin h4, .h24-plugin h5, .h24-plugin h6 { font-weight: 600; line-height: 1.25; }
.h24-plugin h1 { font-size: 1.875rem; } .h24-plugin h2 { font-size: 1.5rem; } .h24-plugin h3 { font-size: 1.25rem; } .h24-plugin h4 { font-size: 1.125rem; } .h24-plugin h5 { font-size: 1rem; } .h24-plugin h6 { font-size: .9rem; }
.h24-plugin p { margin-bottom: .75rem; }
.h24-plugin ul:not(.nav):not(.menu):not(.dropdown-menu):not(.list-unstyled), .h24-plugin ol { padding-left: 1.25rem; margin-bottom: .75rem; }
.h24-plugin ul:not(.nav):not(.menu):not(.dropdown-menu):not(.list-unstyled) { list-style: disc; }
.h24-plugin ol { list-style: decimal; }
.list-unstyled, .list-inline { list-style: none; padding-left: 0; }
.list-inline > li { display: inline-block; margin-right: .5rem; }
.h24-plugin table { border-collapse: collapse; }
.h24-plugin th, .h24-plugin td { padding: .6rem .75rem; vertical-align: middle; text-align: left; }
.h24-plugin tbody tr { border-top: 1px solid var(--color-base-300); }
.h24-plugin img { max-width: 100%; }
.h24-plugin input[type="date"], .h24-plugin input[type="time"], .h24-plugin input[type="datetime-local"] { color-scheme: light dark; }
.night-mode .h24-plugin .card, .night-mode .panel { background: var(--color-base-100); }