/*
 * NVR shared CRUD styling
 * Dipakai oleh halaman index, view, dan active form supaya style tidak tersebar di masing-masing view.
 */
:root {
  --nvr-crud-radius-xl: 28px;
  --nvr-crud-radius-lg: 22px;
  --nvr-crud-radius-md: 16px;
  --nvr-crud-gap: 1rem;
  --nvr-crud-soft-blue: rgba(37, 99, 235, .10);
  --nvr-crud-soft-cyan: rgba(6, 182, 212, .10);
  --nvr-crud-danger: #dc2626;
  --nvr-crud-success: #16a34a;
}

html.dark {
  --nvr-crud-soft-blue: rgba(56, 189, 248, .16);
  --nvr-crud-soft-cyan: rgba(129, 140, 248, .14);
  --nvr-crud-danger: #f87171;
  --nvr-crud-success: #4ade80;
}

.nvr-crud-page,
.nvr-crud-view,
.nvr-crud-form {
  color: var(--nvr-text, #0f172a);
}

.nvr-crud-page {
  display: flex;
  flex-direction: column;
  gap: var(--nvr-crud-gap);
  min-width: 0;
}

.nvr-crud-page > h1,
.nvr-crud-page > p:empty,
.nvr-crud-view > p:empty {
  display: none;
}

.nvr-crud-page .kv-panel-before .btn-toolbar,
.nvr-crud-page .kv-panel-before .toolbar-container,
.nvr-crud-page .kv-panel-before .btn-group,
.nvr-crud-page .kv-toolbar-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .55rem;
}

.nvr-crud-card,
.nvr-crud-page .grid-view,
.nvr-crud-view .tab-content,
.nvr-crud-view .detail-view,
.nvr-crud-form,
.nvr-form-card {
  border: 1px solid var(--nvr-border, rgba(203, 213, 225, .82));
  border-radius: var(--nvr-crud-radius-lg);
  background: var(--nvr-surface, rgba(255, 255, 255, .88));
  box-shadow: 0 16px 42px rgba(15, 23, 42, .08);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

html.dark .nvr-crud-card,
html.dark .nvr-crud-page .grid-view,
html.dark .nvr-crud-view .tab-content,
html.dark .nvr-crud-view .detail-view,
html.dark .nvr-crud-form,
html.dark .nvr-form-card {
  box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
}

.nvr-crud-page .grid-view {
  overflow: hidden;
}

.nvr-grid-scroll {
  overflow: auto;
  max-width: 100%;
}

.nvr-crud-page .panel,
.nvr-crud-page .card,
.nvr-crud-page .kv-grid-wrapper,
.nvr-crud-page .kv-grid-container {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nvr-crud-page .panel-heading,
.nvr-crud-page .card-header,
.nvr-crud-page .kv-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 58px;
  padding: 1rem 1.2rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nvr-border, rgba(203, 213, 225, .82)) !important;
  border-radius: var(--nvr-crud-radius-lg) var(--nvr-crud-radius-lg) 0 0 !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--nvr-primary, #2563eb) 12%, transparent), transparent) !important;
  color: var(--nvr-text, #0f172a) !important;
}

.nvr-crud-page .panel-title,
.nvr-crud-page .card-title,
.nvr-crud-page .kv-panel-title {
  margin: 0;
  color: var(--nvr-text, #0f172a) !important;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.015em;
}

.nvr-crud-page .panel-title:has(.nvr-index-heading),
.nvr-crud-page .card-title:has(.nvr-index-heading),
.nvr-crud-page .kv-panel-title:has(.nvr-index-heading) {
  width: 100%;
}

.nvr-crud-page .panel-heading:has(.nvr-index-heading),
.nvr-crud-page .card-header:has(.nvr-index-heading),
.nvr-crud-page .kv-panel-heading:has(.nvr-index-heading) {
  justify-content: flex-end !important;
  overflow: visible !important;
}

.nvr-crud-page .panel-heading:has(.nvr-index-heading) > h5,
.nvr-crud-page .card-header:has(.nvr-index-heading) > h5,
.nvr-crud-page .kv-panel-heading:has(.nvr-index-heading) > h5,
.nvr-crud-page .panel-heading:has(.nvr-index-heading) > .panel-title,
.nvr-crud-page .card-header:has(.nvr-index-heading) > .card-title,
.nvr-crud-page .kv-panel-heading:has(.nvr-index-heading) > .kv-panel-title {
  order: 2 !important;
  display: flex !important;
  justify-content: flex-end !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: auto !important;
}

.nvr-crud-page .panel-heading:has(.nvr-index-heading) > .float-right,
.nvr-crud-page .panel-heading:has(.nvr-index-heading) > .float-end,
.nvr-crud-page .panel-heading:has(.nvr-index-heading) > .pull-right,
.nvr-crud-page .card-header:has(.nvr-index-heading) > .float-right,
.nvr-crud-page .card-header:has(.nvr-index-heading) > .float-end,
.nvr-crud-page .card-header:has(.nvr-index-heading) > .pull-right,
.nvr-crud-page .kv-panel-heading:has(.nvr-index-heading) > .float-right,
.nvr-crud-page .kv-panel-heading:has(.nvr-index-heading) > .float-end,
.nvr-crud-page .kv-panel-heading:has(.nvr-index-heading) > .pull-right {
  order: 1 !important;
  float: none !important;
  flex: 0 0 auto !important;
  margin-right: auto !important;
}

.nvr-crud-page .panel-heading:has(.nvr-index-heading) > .clearfix,
.nvr-crud-page .card-header:has(.nvr-index-heading) > .clearfix,
.nvr-crud-page .kv-panel-heading:has(.nvr-index-heading) > .clearfix {
  display: none !important;
}

.nvr-crud-page .panel-heading:has(.nvr-index-heading) .nvr-index-heading,
.nvr-crud-page .card-header:has(.nvr-index-heading) .nvr-index-heading,
.nvr-crud-page .kv-panel-heading:has(.nvr-index-heading) .nvr-index-heading {
  justify-content: flex-end !important;
  width: auto !important;
  margin-left: auto !important;
}

.nvr-index-heading,
.nvr-index-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .45rem;
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
}

.nvr-index-heading-actions:empty {
  display: none;
}

.nvr-index-heading-actions .btn,
.nvr-index-header-btn {
  min-height: 34px !important;
  padding: .45rem .72rem !important;
  font-size: .84rem !important;
  white-space: nowrap;
}

.nvr-crud-page .kv-panel-before:empty,
.nvr-crud-page .kv-panel-before:has(.btn-toolbar:empty),
.nvr-crud-page .kv-panel-before:has(.toolbar-container:empty),
.nvr-crud-page .kv-panel-before:has(.kv-toolbar-container:empty) {
  display: none !important;
  padding: 0 !important;
  border: 0 !important;
}

@media (max-width: 768px) {
  .nvr-index-heading,
  .nvr-index-heading-actions {
    justify-content: flex-end;
    width: 100%;
  }
}

.nvr-crud-page .kv-panel-before,
.nvr-crud-page .panel-body,
.nvr-crud-page .card-body {
  border-color: var(--nvr-border, rgba(203, 213, 225, .82)) !important;
  background: transparent !important;
}

.nvr-crud-page .kv-panel-before {
  padding: .85rem 1rem !important;
}

.nvr-crud-page .kv-panel-after {
  float: none !important;
  display: flex;
  justify-content: flex-end;
  padding: .85rem 1rem !important;
  border-color: var(--nvr-border, rgba(203, 213, 225, .82)) !important;
  background: transparent !important;
}

.nvr-crud-page .kv-panel-after .btn {
  margin: 0 !important;
}

.nvr-crud-page .table,
.nvr-crud-view .table {
  margin: 0;
  color: var(--nvr-text, #0f172a);
  --bs-table-bg: transparent;
  --bs-table-color: var(--nvr-text, #0f172a);
  --bs-table-border-color: var(--nvr-border, rgba(203, 213, 225, .82));
}

.nvr-crud-page .table thead th,
.nvr-crud-page .table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--nvr-border, rgba(203, 213, 225, .82)) !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 82%, var(--nvr-primary, #2563eb) 8%) !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}

html.dark .nvr-crud-page .table thead th,
html.dark .nvr-crud-page .table > thead > tr > th {
  background: color-mix(in srgb, var(--nvr-surface-solid, #0f172a) 84%, var(--nvr-primary, #38bdf8) 10%) !important;
}

.nvr-crud-page .table tbody tr,
.nvr-crud-view .table tbody tr {
  transition: background-color .2s ease, transform .2s ease;
}

.nvr-crud-page .table tbody tr:hover {
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 7%, transparent) !important;
}

.nvr-crud-page .table td,
.nvr-crud-page .table th,
.nvr-crud-view .table td,
.nvr-crud-view .table th {
  border-color: var(--nvr-border, rgba(203, 213, 225, .82)) !important;
  vertical-align: middle !important;
}

.nvr-crud-page .filters input,
.nvr-crud-page .filters select,
.nvr-crud-page .form-control,
.nvr-crud-page .form-select,
.nvr-crud-form .form-control,
.nvr-crud-form .form-select,
.nvr-modern-form .form-control,
.nvr-modern-form .form-select,
.nvr-modern-form select,
.nvr-modern-form textarea,
.nvr-modern-form input[type='text'],
.nvr-modern-form input[type='email'],
.nvr-modern-form input[type='number'],
.nvr-modern-form input[type='password'] {
  min-height: 42px;
  border: 1px solid var(--nvr-border, rgba(203, 213, 225, .82)) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 92%, transparent) !important;
  color: var(--nvr-text, #0f172a) !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.nvr-crud-page .filters input:focus,
.nvr-crud-page .filters select:focus,
.nvr-crud-form .form-control:focus,
.nvr-modern-form .form-control:focus,
.nvr-modern-form select:focus,
.nvr-modern-form textarea:focus {
  border-color: var(--nvr-primary, #2563eb) !important;
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--nvr-primary, #2563eb) 16%, transparent) !important;
}

.nvr-crud-page .btn,
.nvr-crud-view .btn,
.nvr-crud-form .btn,
.nvr-modern-form .btn,
.nvr-crud-view .btns,
.nvr-crud-view .btnsview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 38px;
  padding: .55rem .8rem;
  border-radius: 999px !important;
  border-width: 1px !important;
  font-weight: 750;
  line-height: 1.1;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .10);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease;
}

.nvr-crud-page .btn:hover,
.nvr-crud-view .btn:hover,
.nvr-crud-form .btn:hover,
.nvr-modern-form .btn:hover,
.nvr-crud-view .btns:hover,
.nvr-crud-view .btnsview:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(15, 23, 42, .14);
}

.nvr-crud-page .btn-success,
.nvr-crud-view .btn-success,
.nvr-crud-form .btn-success,
.nvr-modern-form .btn-success {
  border-color: color-mix(in srgb, var(--nvr-crud-success) 74%, transparent) !important;
  background: linear-gradient(135deg, var(--nvr-crud-success), color-mix(in srgb, var(--nvr-crud-success) 76%, #0ea5e9)) !important;
  color: #fff !important;
}

.nvr-crud-page .btn-primary,
.nvr-crud-view .btn-primary,
.nvr-crud-form .btn-primary,
.nvr-modern-form .btn-primary,
.nvr-crud-view .btns.btn-primary,
.nvr-crud-view .btnsview.btn-primary {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 76%, transparent) !important;
  background: linear-gradient(135deg, var(--nvr-primary, #2563eb), var(--nvr-primary-2, #06b6d4)) !important;
  color: #fff !important;
}

.nvr-crud-page .btn-danger,
.nvr-crud-view .btn-danger,
.nvr-crud-form .btn-danger,
.nvr-modern-form .btn-danger,
.nvr-crud-view .btns.btn-danger,
.nvr-crud-view .btnsview.btn-danger {
  border-color: color-mix(in srgb, var(--nvr-crud-danger) 76%, transparent) !important;
  background: linear-gradient(135deg, var(--nvr-crud-danger), #fb7185) !important;
  color: #fff !important;
}

.nvr-crud-page .grid-action,
.nvr-crud-page .action-column a,
.nvr-crud-page .action-column button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 .12rem;
  border: 1px solid color-mix(in srgb, var(--nvr-primary, #2563eb) 18%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 9%, transparent) !important;
  color: var(--nvr-primary, #2563eb) !important;
  text-decoration: none !important;
}

.nvr-crud-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nvr-crud-view > p {
  margin: 0;
}

.nvr-action-menu,
.nvr-crud-view .btn-group[role='group'] {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.nvr-crud-view .dropdown-menu,
.nvr-crud-view .dropdown-menuview {
  min-width: 12rem !important;
  padding: .45rem !important;
  border: 1px solid var(--nvr-border, rgba(203, 213, 225, .82)) !important;
  border-radius: 16px !important;
  background: var(--nvr-surface-solid, #fff) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .16) !important;
}

html.dark .nvr-crud-view .dropdown-menu,
html.dark .nvr-crud-view .dropdown-menuview {
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42) !important;
}

.nvr-crud-view .dropdown-menu .btns,
.nvr-crud-view .dropdown-menu .btnsview {
  width: 100%;
  justify-content: flex-start;
  margin: .18rem 0;
  border-radius: 12px !important;
  box-shadow: none;
}

.nvr-crud-view .nav-tabs,
.nvr-crud-view .nav-pills {
  gap: .45rem;
  border-bottom: 0;
}

.nvr-crud-view .nav-tabs .nav-link,
.nvr-crud-view .nav-pills .nav-link,
.nvr-crud-view .ajax-tab {
  border: 1px solid var(--nvr-border, rgba(203, 213, 225, .82)) !important;
  border-radius: 999px !important;
  color: var(--nvr-muted, #64748b) !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 88%, transparent) !important;
  font-weight: 750;
}

.nvr-crud-view .nav-tabs .nav-link.active,
.nvr-crud-view .nav-pills .nav-link.active,
.nvr-crud-view .ajax-tab.active {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 38%, transparent) !important;
  background: linear-gradient(135deg, var(--nvr-primary, #2563eb), var(--nvr-primary-2, #06b6d4)) !important;
  color: #fff !important;
}

.nvr-crud-form {
  padding: 1rem;
  overflow: hidden;
}

.nvr-modern-form {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.nvr-modern-form > .row,
.nvr-modern-form .row.inline-row,
.nvr-modern-form .row:not(.g-0) {
  row-gap: .75rem;
}

.nvr-modern-form .form-group,
.nvr-modern-form .field-gcustomer-gc_alarm_flag,
.nvr-modern-form .field-gsensor-db-gsd_alarm_flag {
  margin-bottom: .8rem;
}

.nvr-modern-form label,
.nvr-modern-form .control-label {
  margin-bottom: .38rem;
  color: var(--nvr-text, #0f172a);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.nvr-modern-form .help-block,
.nvr-modern-form .invalid-feedback,
.nvr-modern-form .hint-block {
  color: var(--nvr-muted, #64748b);
  font-size: .78rem;
}

.nvr-modern-form .has-error .help-block,
.nvr-modern-form .is-invalid ~ .invalid-feedback {
  color: var(--nvr-crud-danger);
}

.nvr-modern-form .select2-container {
  width: 100% !important;
}

.nvr-modern-form .select2-container--krajee-bs5 .select2-selection,
.nvr-modern-form .select2-container--krajee .select2-selection,
.nvr-modern-form .select2-container--bootstrap .select2-selection,
.nvr-modern-form .select2-container--default .select2-selection {
  min-height: 42px !important;
  border: 1px solid var(--nvr-border, rgba(203, 213, 225, .82)) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 92%, transparent) !important;
  color: var(--nvr-text, #0f172a) !important;
  box-shadow: none !important;
}

.nvr-modern-form .select2-container--krajee-bs5 .select2-selection__rendered,
.nvr-modern-form .select2-container--krajee .select2-selection__rendered,
.nvr-modern-form .select2-container--default .select2-selection__rendered {
  color: var(--nvr-text, #0f172a) !important;
  line-height: 40px !important;
}

.nvr-modern-form .file-input,
.nvr-modern-form .file-preview,
.nvr-modern-form .json-editor-btntype-properties,
.nvr-modern-form .borderx,
.nvr-modern-form .multiple-input-list {
  border-color: var(--nvr-border, rgba(203, 213, 225, .82)) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 88%, transparent) !important;
  color: var(--nvr-text, #0f172a) !important;
}

.nvr-modern-form .borderx {
  padding: .85rem;
}

.nvr-modern-form .inline-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: stretch;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.nvr-modern-form .inline-child-margin {
  margin: 0 !important;
}

.nvr-modern-form .ft-content,
.nvr-modern-form .mx-content {
  flex: 1 1 220px;
  min-width: 220px;
}

.nvr-modern-form .btn-groupx {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .35rem;
  border: 1px solid var(--nvr-border, rgba(203, 213, 225, .82));
  border-radius: 999px;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 88%, transparent);
}

.nvr-modern-form .btn-groupx input[type='radio'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nvr-modern-form .btnlist,
.nvr-modern-form .btn-groupx > label,
.nvr-modern-form .btn-groupx .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 0 !important;
  padding: .45rem .75rem;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--nvr-muted, #64748b) !important;
  cursor: pointer;
  font-weight: 800;
  box-shadow: none !important;
}

.nvr-modern-form .btnlist.active,
.nvr-modern-form .btnlist:has(input[type='radio']:checked),
.nvr-modern-form .btn-groupx > label.active,
.nvr-modern-form .btn-groupx > label:has(input[type='radio']:checked),
.nvr-modern-form .btn-groupx .btn.active {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 32%, transparent) !important;
  background: linear-gradient(135deg, var(--nvr-primary, #2563eb), var(--nvr-primary-2, #06b6d4)) !important;
  color: #fff !important;
}

.nvr-modern-form .form-group:last-child:has(.btn-success),
.nvr-modern-form .nvr-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: .5rem;
  padding-top: .8rem;
  border-top: 1px solid var(--nvr-border, rgba(203, 213, 225, .82));
}

.nvr-modern-form #map,
.nvr-modern-form #map2,
.nvr-modern-form #stageCanvas {
  overflow: hidden;
  border: 1px solid var(--nvr-border, rgba(203, 213, 225, .82)) !important;
  border-radius: 18px;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 90%, transparent);
}

.nvr-crud-modal-card {
  border-radius: 20px;
}

@media (max-width: 768px) {
  .nvr-crud-page .kv-panel-before .btn-toolbar,
  .nvr-crud-page .kv-panel-before .btn-group,
  .nvr-crud-page .kv-toolbar-container {
    width: 100%;
    justify-content: flex-start;
  }

  .nvr-crud-page .btn,
  .nvr-crud-view .btn,
  .nvr-crud-form .btn,
  .nvr-modern-form .btn {
    min-height: 40px;
  }

  .nvr-crud-page .kv-grid-container {
    max-height: none;
  }
}

/* Form widgets that previously lived inline in active_form files. */
.nvr-modern-form .iti__country-list {
  position: absolute;
  z-index: 33 !important;
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 0 0 0 -1px;
  border: 1px solid var(--nvr-border, #ccc);
  border-radius: 14px;
  background: var(--nvr-surface-solid, #fff);
  color: var(--nvr-text, #0f172a);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
  white-space: nowrap;
  max-height: 200px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.nvr-modern-form #stageContainer {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 4 / 3;
  margin: 20px auto;
  border: 1px solid var(--nvr-border, rgba(203, 213, 225, .82));
  border-radius: 18px;
  background: var(--nvr-surface-solid, #fff);
  position: relative;
  overflow: hidden;
}

.nvr-modern-form input[type='file'] {
  margin-right: 10px;
}

.nvr-modern-form #areaModal input,
.nvr-modern-form #markerModal input,
.nvr-modern-form #markerModal select {
  font-size: 14px;
}

.nvr-modern-form .select2-selection__rendered img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.nvr-modern-form .radioc-field {
  margin-bottom: 0;
}

.nvr-modern-form .radioc-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.nvr-modern-form .radioc-group label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 0;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: opacity .15s ease, box-shadow .15s ease, transform .15s ease;
}

.nvr-modern-form .radioc-group label:hover {
  opacity: .95;
  transform: translateY(-1px);
}

.nvr-modern-form .radioc-group input[type='radio'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nvr-modern-form .radioc-group .radioc-label-text {
  pointer-events: none;
}

.nvr-modern-form .radioc-group label.active {
  opacity: 1;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22);
}

.nvr-modern-form .radioc-group label:not(.active) {
  opacity: .65;
}

.nvr-modern-form .radioc-group label:not(.active):hover {
  opacity: .85;
}


/* NVR action menu refinement */
.nvr-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}

.nvr-detail-heading-title {
  min-width: 0;
  overflow: hidden;
  color: var(--nvr-text, #0f172a);
  font-weight: 850;
  letter-spacing: -.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nvr-detail-heading-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin-left: auto;
}

.nvr-crud-page .panel,
.nvr-crud-page .card,
.nvr-crud-page .kv-panel,
.nvr-crud-view .panel,
.nvr-crud-view .card,
.nvr-crud-view .kv-panel,
.nvr-crud-page .panel-heading,
.nvr-crud-page .card-header,
.nvr-crud-page .kv-panel-heading,
.nvr-crud-view .panel-heading,
.nvr-crud-view .card-header,
.nvr-crud-view .kv-panel-heading {
  overflow: visible !important;
}

.nvr-crud-page .panel-heading,
.nvr-crud-page .card-header,
.nvr-crud-page .kv-panel-heading,
.nvr-crud-view .panel-heading,
.nvr-crud-view .card-header,
.nvr-crud-view .kv-panel-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.nvr-action-menu,
.nvr-crud-view .btn-group.nvr-action-menu[role='group'] {
  position: relative;
  display: inline-flex !important;
  justify-content: flex-end !important;
  width: auto !important;
  margin-left: auto;
  vertical-align: middle;
  z-index: 5;
}

.nvr-action-menu.show,
.nvr-action-menu:focus-within,
.nvr-action-menu:has(.nvr-action-toggle[aria-expanded='true']) {
  z-index: 1085;
}

.nvr-action-toggle,
.nvr-crud-view .nvr-action-menu > .dropdown-toggle {
  position: relative;
  overflow: hidden;
  min-width: 44px;
  min-height: 40px;
  padding: .62rem .9rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-crud-success, #16a34a) 58%, transparent) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 28%),
    linear-gradient(135deg, #22c55e, #059669 52%, #0f766e) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(22, 163, 74, .28), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  isolation: isolate;
  z-index: 3;
}

.nvr-action-toggle::before {
  content: '';
  position: absolute;
  inset: -45% auto auto -45%;
  width: 70%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: rotate(25deg) translateX(-120%);
  transition: transform .55s ease;
  z-index: -1;
}

.nvr-action-toggle:hover,
.nvr-action-menu.show .nvr-action-toggle,
.nvr-action-toggle[aria-expanded='true'] {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 36px rgba(22, 163, 74, .34), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
  filter: saturate(1.08);
}

.nvr-action-toggle:hover::before,
.nvr-action-toggle[aria-expanded='true']::before {
  transform: rotate(25deg) translateX(260%);
}

.nvr-action-toggle i {
  font-size: .98rem;
  transition: transform .35s ease;
}

.nvr-action-toggle:hover i,
.nvr-action-toggle[aria-expanded='true'] i {
  transform: rotate(48deg);
}

.nvr-action-label {
  display: inline-flex;
  align-items: center;
  margin-left: .18rem;
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .01em;
}

.nvr-action-dropdown,
.nvr-crud-view .dropdown-menu.nvr-action-dropdown,
.nvr-crud-view .dropdown-menuview.nvr-action-dropdown {
  right: 0 !important;
  left: auto !important;
  min-width: 13.5rem !important;
  padding: .5rem !important;
  margin-top: 0 !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 84%, transparent) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--nvr-surface-solid, #fff) 94%, var(--nvr-primary, #2563eb) 4%), var(--nvr-surface-solid, #fff)) !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .18), 0 6px 18px rgba(15, 23, 42, .08) !important;
  inset: calc(100% + .7rem) 0 auto auto !important;
  top: calc(100% + .7rem) !important;
  bottom: auto !important;
  transform: translate3d(0, 0, 0) !important;
  transform-origin: top right;
  animation: nvrActionMenuIn .18s ease both;
  z-index: 2;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

html.dark .nvr-action-dropdown,
html.dark .nvr-crud-view .dropdown-menu.nvr-action-dropdown,
html.dark .nvr-crud-view .dropdown-menuview.nvr-action-dropdown {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--nvr-surface-solid, #0f172a) 90%, var(--nvr-primary, #38bdf8) 7%), var(--nvr-surface-solid, #0f172a)) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .52) !important;
}

.nvr-action-dropdown .btns,
.nvr-action-dropdown .btnsview,
.nvr-action-dropdown button.btns,
.nvr-action-dropdown button.btnsview,
.nvr-crud-view .dropdown-menu .btns,
.nvr-crud-view .dropdown-menu .btnsview {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  width: 100%;
  min-height: 40px;
  margin: .16rem 0 !important;
  padding: .64rem .78rem !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  font-size: .86rem;
  font-weight: 800;
  text-align: left;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.nvr-action-dropdown .btns:hover,
.nvr-action-dropdown .btnsview:hover,
.nvr-action-dropdown button.btns:hover,
.nvr-action-dropdown button.btnsview:hover {
  transform: translateX(3px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .10) !important;
}

.nvr-action-dropdown .btns.btn-primary,
.nvr-action-dropdown .btnsview.btn-primary,
.nvr-action-dropdown .btn-info {
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 18%, transparent) !important;
  color: var(--nvr-primary, #2563eb) !important;
}

.nvr-action-dropdown .btns.btn-primary:hover,
.nvr-action-dropdown .btnsview.btn-primary:hover,
.nvr-action-dropdown .btn-info:hover {
  background: linear-gradient(135deg, var(--nvr-primary, #2563eb), var(--nvr-primary-2, #06b6d4)) !important;
  color: #fff !important;
}

.nvr-action-dropdown .btns.btn-danger,
.nvr-action-dropdown .btnsview.btn-danger {
  background: color-mix(in srgb, var(--nvr-crud-danger, #dc2626) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--nvr-crud-danger, #dc2626) 18%, transparent) !important;
  color: var(--nvr-crud-danger, #dc2626) !important;
}

.nvr-action-dropdown .btns.btn-danger:hover,
.nvr-action-dropdown .btnsview.btn-danger:hover {
  background: linear-gradient(135deg, var(--nvr-crud-danger, #dc2626), #fb7185) !important;
  color: #fff !important;
}

.nvr-action-dropdown .btn-warning,
.nvr-action-dropdown .nvr-clear-action {
  background: color-mix(in srgb, #f59e0b 13%, transparent) !important;
  border-color: color-mix(in srgb, #f59e0b 25%, transparent) !important;
  color: #b45309 !important;
}

.nvr-action-dropdown .btn-warning:hover,
.nvr-action-dropdown .nvr-clear-action:hover {
  background: linear-gradient(135deg, #f59e0b, #f97316) !important;
  color: #fff !important;
}

@keyframes nvrActionMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 576px) {
  .nvr-detail-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .nvr-detail-heading-actions,
  .nvr-action-menu {
    width: 100% !important;
  }

  .nvr-action-toggle {
    width: 100%;
  }

  .nvr-action-dropdown {
    width: 100%;
  }
}

/* Kartik DetailView header alignment fix
   DetailView renders .float-right before h5; force h5/title to the left
   and keep custom action menu locked to the far right. */
.nvr-crud-view .card-header:has(.nvr-detail-heading),
.nvr-crud-view .panel-heading:has(.nvr-detail-heading),
.nvr-crud-view .kv-panel-heading:has(.nvr-detail-heading) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .75rem !important;
  overflow: visible !important;
}

.nvr-crud-view .card-header:has(.nvr-detail-heading) > h5,
.nvr-crud-view .panel-heading:has(.nvr-detail-heading) > h5,
.nvr-crud-view .kv-panel-heading:has(.nvr-detail-heading) > h5 {
  order: 1 !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.nvr-crud-view .card-header:has(.nvr-detail-heading) > .float-right,
.nvr-crud-view .card-header:has(.nvr-detail-heading) > .float-end,
.nvr-crud-view .card-header:has(.nvr-detail-heading) > .pull-right,
.nvr-crud-view .panel-heading:has(.nvr-detail-heading) > .float-right,
.nvr-crud-view .panel-heading:has(.nvr-detail-heading) > .float-end,
.nvr-crud-view .panel-heading:has(.nvr-detail-heading) > .pull-right,
.nvr-crud-view .kv-panel-heading:has(.nvr-detail-heading) > .float-right,
.nvr-crud-view .kv-panel-heading:has(.nvr-detail-heading) > .float-end,
.nvr-crud-view .kv-panel-heading:has(.nvr-detail-heading) > .pull-right {
  order: 2 !important;
  float: none !important;
  flex: 0 0 auto !important;
  margin-left: .75rem !important;
}

.nvr-crud-view .card-header:has(.nvr-detail-heading) .nvr-detail-heading,
.nvr-crud-view .panel-heading:has(.nvr-detail-heading) .nvr-detail-heading,
.nvr-crud-view .kv-panel-heading:has(.nvr-detail-heading) .nvr-detail-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
}

.nvr-crud-view .card-header:has(.nvr-detail-heading) .nvr-detail-heading-title,
.nvr-crud-view .panel-heading:has(.nvr-detail-heading) .nvr-detail-heading-title,
.nvr-crud-view .kv-panel-heading:has(.nvr-detail-heading) .nvr-detail-heading-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}

.nvr-crud-view .card-header:has(.nvr-detail-heading) .nvr-detail-heading-actions,
.nvr-crud-view .panel-heading:has(.nvr-detail-heading) .nvr-detail-heading-actions,
.nvr-crud-view .kv-panel-heading:has(.nvr-detail-heading) .nvr-detail-heading-actions {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  text-align: right !important;
}

@media (max-width: 576px) {
  .nvr-crud-view .card-header:has(.nvr-detail-heading) .nvr-detail-heading,
  .nvr-crud-view .panel-heading:has(.nvr-detail-heading) .nvr-detail-heading,
  .nvr-crud-view .kv-panel-heading:has(.nvr-detail-heading) .nvr-detail-heading {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}

/* =========================================================
   NVR GridView polish
   Menjaga struktur GridView tetap sama, hanya memperhalus card,
   panel heading, table, filter, action icon, badge, dan pagination.
   ========================================================= */
.nvr-crud-page .grid-view {
  border-radius: 24px !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 86%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 92%, transparent) !important;
  box-shadow:
    0 22px 70px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255, 255, 255, .42) !important;
  overflow: hidden !important;
  isolation: isolate;
}

html.dark .nvr-crud-page .grid-view,
body.dark-mode .nvr-crud-page .grid-view {
  background: color-mix(in srgb, var(--nvr-surface-solid, #0f172a) 88%, transparent) !important;
  border-color: rgba(148, 163, 184, .22) !important;
  box-shadow:
    0 24px 82px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.nvr-crud-page .panel,
.nvr-crud-page .card,
.nvr-crud-page .kv-grid-container,
.nvr-crud-page .kv-grid-wrapper {
  border-radius: 24px !important;
  overflow: visible !important;
}

.nvr-crud-page .nvr-grid-scroll,
.nvr-crud-page .kv-grid-container,
.nvr-crud-page .table-responsive {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 42%, transparent) transparent;
}

.nvr-crud-page .nvr-grid-scroll::-webkit-scrollbar,
.nvr-crud-page .kv-grid-container::-webkit-scrollbar,
.nvr-crud-page .table-responsive::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.nvr-crud-page .nvr-grid-scroll::-webkit-scrollbar-thumb,
.nvr-crud-page .kv-grid-container::-webkit-scrollbar-thumb,
.nvr-crud-page .table-responsive::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 42%, transparent);
  background-clip: padding-box;
}

.nvr-crud-page .panel-heading:has(.nvr-index-heading),
.nvr-crud-page .card-header:has(.nvr-index-heading),
.nvr-crud-page .kv-panel-heading:has(.nvr-index-heading) {
  min-height: 64px !important;
  padding: 1rem 1.18rem !important;
  border-bottom: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 78%, transparent) !important;
  background:
    radial-gradient(circle at 98% 0%, color-mix(in srgb, var(--nvr-primary, #2563eb) 14%, transparent), transparent 34%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--nvr-primary, #2563eb) 8%, var(--nvr-surface-solid, #fff)),
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 96%, transparent)
    ) !important;
}

html.dark .nvr-crud-page .panel-heading:has(.nvr-index-heading),
html.dark .nvr-crud-page .card-header:has(.nvr-index-heading),
html.dark .nvr-crud-page .kv-panel-heading:has(.nvr-index-heading),
body.dark-mode .nvr-crud-page .panel-heading:has(.nvr-index-heading),
body.dark-mode .nvr-crud-page .card-header:has(.nvr-index-heading),
body.dark-mode .nvr-crud-page .kv-panel-heading:has(.nvr-index-heading) {
  border-bottom-color: rgba(148, 163, 184, .26) !important;
  background:
    radial-gradient(circle at 98% 0%, color-mix(in srgb, var(--nvr-primary, #38bdf8) 20%, transparent), transparent 36%),
    linear-gradient(135deg, rgba(30, 41, 59, .92), rgba(15, 23, 42, .82)) !important;
}

.nvr-crud-page .summary {
  font-size: .94rem;
  font-weight: 600;
  color: var(--nvr-muted, #64748b);
}

.nvr-crud-page .summary b {
  color: var(--nvr-text, #0f172a);
  font-weight: 900;
}

html.dark .nvr-crud-page .summary,
body.dark-mode .nvr-crud-page .summary {
  color: #cbd5e1;
}

html.dark .nvr-crud-page .summary b,
body.dark-mode .nvr-crud-page .summary b {
  color: #f8fafc;
}

.nvr-index-heading-actions .btn,
.nvr-index-header-btn,
.nvr-create-button {
  position: relative;
  overflow: hidden;
  min-height: 36px !important;
  padding: .5rem .86rem !important;
  border-radius: 999px !important;
  border: 0 !important;
  font-size: .82rem !important;
  font-weight: 850 !important;
  letter-spacing: -.01em;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, .12),
    inset 0 1px 0 rgba(255, 255, 255, .26) !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease !important;
}

.nvr-index-heading-actions .btn::before,
.nvr-index-header-btn::before,
.nvr-create-button::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .28) 46%, transparent 58%);
  transform: translateX(-120%);
  transition: transform .45s ease;
}

.nvr-index-heading-actions .btn:hover,
.nvr-index-header-btn:hover,
.nvr-create-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, .18),
    inset 0 1px 0 rgba(255, 255, 255, .32) !important;
}

.nvr-index-heading-actions .btn:hover::before,
.nvr-index-header-btn:hover::before,
.nvr-create-button:hover::before {
  transform: translateX(120%);
}

.nvr-index-heading-actions .btn:active,
.nvr-index-header-btn:active,
.nvr-create-button:active {
  transform: translateY(0) scale(.98);
}

.nvr-crud-page .table,
.nvr-crud-page table.kv-grid-table,
.nvr-crud-page .grid-view table {
  margin-bottom: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  color: var(--nvr-text, #0f172a) !important;
  --bs-table-bg: transparent;
  --bs-table-color: var(--nvr-text, #0f172a);
  --bs-table-striped-bg: color-mix(in srgb, var(--nvr-surface-solid, #fff) 88%, var(--nvr-primary, #2563eb) 3%);
  --bs-table-hover-bg: color-mix(in srgb, var(--nvr-primary, #2563eb) 8%, var(--nvr-surface-solid, #fff));
  --bs-table-border-color: color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 78%, transparent);
}

.nvr-crud-page .table thead th,
.nvr-crud-page .table > thead > tr > th,
.nvr-crud-page table.kv-grid-table thead th,
.nvr-crud-page .grid-view table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: .66rem .7rem !important;
  border-color: color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 72%, transparent) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--nvr-primary, #2563eb) 9%, var(--nvr-surface-solid, #fff)),
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 95%, transparent)
    ) !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .75rem !important;
  font-weight: 900 !important;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
  vertical-align: middle !important;
  white-space: nowrap;
}

.nvr-crud-page .table thead th a,
.nvr-crud-page .table > thead > tr > th a,
.nvr-crud-page table.kv-grid-table thead th a,
.nvr-crud-page .grid-view table thead th a {
  color: var(--nvr-primary, #0d6efd) !important;
  text-decoration: none !important;
}

.nvr-crud-page .table thead th a:hover,
.nvr-crud-page table.kv-grid-table thead th a:hover {
  text-decoration: underline !important;
  text-underline-offset: .2rem;
}

.nvr-crud-page .table thead tr.filters td,
.nvr-crud-page .table thead tr.filters th,
.nvr-crud-page table.kv-grid-table thead tr.filters td,
.nvr-crud-page table.kv-grid-table thead tr.filters th,
.nvr-crud-page .grid-view table thead tr.filters td,
.nvr-crud-page .grid-view table thead tr.filters th {
  padding: .48rem .42rem !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 94%, transparent) !important;
}

.nvr-crud-page .filters input,
.nvr-crud-page .filters select,
.nvr-crud-page .grid-view .filters input,
.nvr-crud-page .grid-view .filters select,
.nvr-crud-page .kv-grid-table .filters input,
.nvr-crud-page .kv-grid-table .filters select {
  width: 100% !important;
  min-height: 38px !important;
  padding: .44rem .68rem !important;
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 84%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 96%, transparent) !important;
  color: var(--nvr-text, #0f172a) !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04) !important;
  outline: none !important;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease !important;
}

.nvr-crud-page .filters input:focus,
.nvr-crud-page .filters select:focus,
.nvr-crud-page .grid-view .filters input:focus,
.nvr-crud-page .grid-view .filters select:focus {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 72%, white) !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--nvr-primary, #2563eb) 18%, transparent),
    inset 0 1px 2px rgba(15, 23, 42, .04) !important;
}

.nvr-crud-page .table tbody td,
.nvr-crud-page .table tbody th,
.nvr-crud-page table.kv-grid-table tbody td,
.nvr-crud-page table.kv-grid-table tbody th,
.nvr-crud-page .grid-view table tbody td,
.nvr-crud-page .grid-view table tbody th {
  padding: .56rem .7rem !important;
  border-color: color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 66%, transparent) !important;
  font-size: .92rem;
  vertical-align: middle !important;
}

.nvr-crud-page .table tbody tr,
.nvr-crud-page table.kv-grid-table tbody tr,
.nvr-crud-page .grid-view table tbody tr {
  transition:
    background-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.nvr-crud-page .table tbody tr:nth-child(odd) > td,
.nvr-crud-page .table tbody tr:nth-child(odd) > th,
.nvr-crud-page table.kv-grid-table tbody tr:nth-child(odd) > td,
.nvr-crud-page table.kv-grid-table tbody tr:nth-child(odd) > th,
.nvr-crud-page .grid-view table tbody tr:nth-child(odd) > td,
.nvr-crud-page .grid-view table tbody tr:nth-child(odd) > th {
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 91%, var(--nvr-primary, #2563eb) 4%) !important;
}

.nvr-crud-page .table tbody tr:nth-child(even) > td,
.nvr-crud-page .table tbody tr:nth-child(even) > th,
.nvr-crud-page table.kv-grid-table tbody tr:nth-child(even) > td,
.nvr-crud-page table.kv-grid-table tbody tr:nth-child(even) > th,
.nvr-crud-page .grid-view table tbody tr:nth-child(even) > td,
.nvr-crud-page .grid-view table tbody tr:nth-child(even) > th {
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 98%, transparent) !important;
}

.nvr-crud-page .table tbody tr:hover > td,
.nvr-crud-page .table tbody tr:hover > th,
.nvr-crud-page table.kv-grid-table tbody tr:hover > td,
.nvr-crud-page table.kv-grid-table tbody tr:hover > th,
.nvr-crud-page .grid-view table tbody tr:hover > td,
.nvr-crud-page .grid-view table tbody tr:hover > th {
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 9%, var(--nvr-surface-solid, #fff)) !important;
}

.nvr-crud-page .grid-view table tbody td a:not(.btn),
.nvr-crud-page table.kv-grid-table tbody td a:not(.btn) {
  color: var(--nvr-primary, #0d6efd) !important;
  font-weight: 550;
  text-decoration: none !important;
}

.nvr-crud-page .grid-view table tbody td a:not(.btn):hover,
.nvr-crud-page table.kv-grid-table tbody td a:not(.btn):hover {
  text-decoration: underline !important;
  text-underline-offset: .18rem;
}

.nvr-crud-page .grid-view .action-column,
.nvr-crud-page .grid-view th.action-column,
.nvr-crud-page .grid-view td.action-column,
.nvr-crud-page table.kv-grid-table .action-column {
  min-width: 104px;
  text-align: center !important;
  white-space: nowrap !important;
}

.nvr-crud-page .grid-view .action-column a,
.nvr-crud-page table.kv-grid-table .action-column a,
.nvr-crud-page .grid-view .action-column .btn,
.nvr-crud-page table.kv-grid-table .action-column .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 .05rem !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition:
    transform .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease !important;
}

.nvr-crud-page .grid-view .action-column a:hover,
.nvr-crud-page table.kv-grid-table .action-column a:hover,
.nvr-crud-page .grid-view .action-column .btn:hover,
.nvr-crud-page table.kv-grid-table .action-column .btn:hover {
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 13%, transparent) !important;
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 20%, transparent) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .10) !important;
  transform: translateY(-1px);
}

.nvr-crud-page .grid-view .action-column a[data-method='post']:hover,
.nvr-crud-page table.kv-grid-table .action-column a[data-method='post']:hover {
  background: color-mix(in srgb, var(--nvr-crud-danger, #dc2626) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--nvr-crud-danger, #dc2626) 22%, transparent) !important;
}

.nvr-crud-page .badge,
.nvr-crud-page .label,
.nvr-crud-page span.badge,
.nvr-crud-page span.label,
.nvr-crud-page .label-success,
.nvr-crud-page .badge-success,
.nvr-crud-page .bg-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: .22rem .55rem !important;
  border-radius: 999px !important;
  font-size: .7rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.01em;
}

.nvr-crud-page .label-success,
.nvr-crud-page .badge-success,
.nvr-crud-page .bg-success {
  border: 1px solid color-mix(in srgb, var(--nvr-crud-success, #16a34a) 32%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-crud-success, #16a34a) 18%, white) !important;
  color: #047857 !important;
}

.nvr-crud-page .kv-panel-after,
.nvr-crud-page .card-footer,
.nvr-crud-page .panel-footer {
  border-top: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 72%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 94%, transparent) !important;
  padding: .82rem 1rem !important;
}

.nvr-crud-page .pagination,
.nvr-crud-page .yiiPager,
.nvr-crud-page ul.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .28rem;
  margin: 0 !important;
}

.nvr-crud-page .pagination > li > a,
.nvr-crud-page .pagination > li > span,
.nvr-crud-page .page-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  border-radius: 12px !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 82%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 95%, transparent) !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .84rem;
  font-weight: 800;
  box-shadow: none !important;
}

.nvr-crud-page .pagination > .active > a,
.nvr-crud-page .pagination > .active > span,
.nvr-crud-page .page-item.active .page-link {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--nvr-primary, #2563eb), var(--nvr-primary-2, #06b6d4)) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--nvr-primary, #2563eb) 28%, transparent) !important;
}

.nvr-crud-page .kv-panel-before:empty,
.nvr-crud-page .kv-panel-after:empty,
.nvr-crud-page .kv-panel-before:has(.btn-toolbar:empty),
.nvr-crud-page .kv-panel-before:has(.toolbar-container:empty),
.nvr-crud-page .kv-panel-before:has(.kv-toolbar-container:empty) {
  display: none !important;
  padding: 0 !important;
  border: 0 !important;
}

html.dark .nvr-crud-page .table,
html.dark .nvr-crud-page table.kv-grid-table,
html.dark .nvr-crud-page .grid-view table,
body.dark-mode .nvr-crud-page .table,
body.dark-mode .nvr-crud-page table.kv-grid-table,
body.dark-mode .nvr-crud-page .grid-view table {
  --bs-table-color: #e5e7eb;
  --bs-table-striped-bg: rgba(15, 23, 42, .82);
  --bs-table-hover-bg: color-mix(in srgb, var(--nvr-primary, #38bdf8) 16%, #0f172a);
  --bs-table-border-color: rgba(148, 163, 184, .24);
  color: #e5e7eb !important;
}

html.dark .nvr-crud-page .table thead th,
html.dark .nvr-crud-page .table > thead > tr > th,
html.dark .nvr-crud-page table.kv-grid-table thead th,
html.dark .nvr-crud-page .grid-view table thead th,
body.dark-mode .nvr-crud-page .table thead th,
body.dark-mode .nvr-crud-page .table > thead > tr > th,
body.dark-mode .nvr-crud-page table.kv-grid-table thead th,
body.dark-mode .nvr-crud-page .grid-view table thead th {
  border-color: rgba(148, 163, 184, .26) !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, .92), rgba(15, 23, 42, .86)) !important;
  color: #dbeafe !important;
}

html.dark .nvr-crud-page .table thead tr.filters td,
html.dark .nvr-crud-page .table thead tr.filters th,
html.dark .nvr-crud-page table.kv-grid-table thead tr.filters td,
html.dark .nvr-crud-page table.kv-grid-table thead tr.filters th,
html.dark .nvr-crud-page .grid-view table thead tr.filters td,
html.dark .nvr-crud-page .grid-view table thead tr.filters th,
body.dark-mode .nvr-crud-page .table thead tr.filters td,
body.dark-mode .nvr-crud-page .table thead tr.filters th,
body.dark-mode .nvr-crud-page table.kv-grid-table thead tr.filters td,
body.dark-mode .nvr-crud-page table.kv-grid-table thead tr.filters th,
body.dark-mode .nvr-crud-page .grid-view table thead tr.filters td,
body.dark-mode .nvr-crud-page .grid-view table thead tr.filters th {
  background: rgba(15, 23, 42, .78) !important;
}

html.dark .nvr-crud-page .filters input,
html.dark .nvr-crud-page .filters select,
html.dark .nvr-crud-page .grid-view .filters input,
html.dark .nvr-crud-page .grid-view .filters select,
body.dark-mode .nvr-crud-page .filters input,
body.dark-mode .nvr-crud-page .filters select,
body.dark-mode .nvr-crud-page .grid-view .filters input,
body.dark-mode .nvr-crud-page .grid-view .filters select {
  background: rgba(2, 6, 23, .72) !important;
  color: #e5e7eb !important;
  border-color: rgba(148, 163, 184, .34) !important;
}

html.dark .nvr-crud-page .table tbody tr:nth-child(odd) > td,
html.dark .nvr-crud-page .table tbody tr:nth-child(odd) > th,
html.dark .nvr-crud-page table.kv-grid-table tbody tr:nth-child(odd) > td,
html.dark .nvr-crud-page table.kv-grid-table tbody tr:nth-child(odd) > th,
html.dark .nvr-crud-page .grid-view table tbody tr:nth-child(odd) > td,
html.dark .nvr-crud-page .grid-view table tbody tr:nth-child(odd) > th,
body.dark-mode .nvr-crud-page .table tbody tr:nth-child(odd) > td,
body.dark-mode .nvr-crud-page .table tbody tr:nth-child(odd) > th,
body.dark-mode .nvr-crud-page table.kv-grid-table tbody tr:nth-child(odd) > td,
body.dark-mode .nvr-crud-page table.kv-grid-table tbody tr:nth-child(odd) > th,
body.dark-mode .nvr-crud-page .grid-view table tbody tr:nth-child(odd) > td,
body.dark-mode .nvr-crud-page .grid-view table tbody tr:nth-child(odd) > th {
  background: rgba(15, 23, 42, .84) !important;
}

html.dark .nvr-crud-page .table tbody tr:nth-child(even) > td,
html.dark .nvr-crud-page .table tbody tr:nth-child(even) > th,
html.dark .nvr-crud-page table.kv-grid-table tbody tr:nth-child(even) > td,
html.dark .nvr-crud-page table.kv-grid-table tbody tr:nth-child(even) > th,
html.dark .nvr-crud-page .grid-view table tbody tr:nth-child(even) > td,
html.dark .nvr-crud-page .grid-view table tbody tr:nth-child(even) > th,
body.dark-mode .nvr-crud-page .table tbody tr:nth-child(even) > td,
body.dark-mode .nvr-crud-page .table tbody tr:nth-child(even) > th,
body.dark-mode .nvr-crud-page table.kv-grid-table tbody tr:nth-child(even) > td,
body.dark-mode .nvr-crud-page table.kv-grid-table tbody tr:nth-child(even) > th,
body.dark-mode .nvr-crud-page .grid-view table tbody tr:nth-child(even) > td,
body.dark-mode .nvr-crud-page .grid-view table tbody tr:nth-child(even) > th {
  background: rgba(2, 6, 23, .58) !important;
}

html.dark .nvr-crud-page .table tbody tr:hover > td,
html.dark .nvr-crud-page .table tbody tr:hover > th,
html.dark .nvr-crud-page table.kv-grid-table tbody tr:hover > td,
html.dark .nvr-crud-page table.kv-grid-table tbody tr:hover > th,
html.dark .nvr-crud-page .grid-view table tbody tr:hover > td,
html.dark .nvr-crud-page .grid-view table tbody tr:hover > th,
body.dark-mode .nvr-crud-page .table tbody tr:hover > td,
body.dark-mode .nvr-crud-page .table tbody tr:hover > th,
body.dark-mode .nvr-crud-page table.kv-grid-table tbody tr:hover > td,
body.dark-mode .nvr-crud-page table.kv-grid-table tbody tr:hover > th,
body.dark-mode .nvr-crud-page .grid-view table tbody tr:hover > td,
body.dark-mode .nvr-crud-page .grid-view table tbody tr:hover > th {
  background: color-mix(in srgb, var(--nvr-primary, #38bdf8) 16%, #0f172a) !important;
}

html.dark .nvr-crud-page .label-success,
html.dark .nvr-crud-page .badge-success,
html.dark .nvr-crud-page .bg-success,
body.dark-mode .nvr-crud-page .label-success,
body.dark-mode .nvr-crud-page .badge-success,
body.dark-mode .nvr-crud-page .bg-success {
  border-color: rgba(74, 222, 128, .32) !important;
  background: rgba(34, 197, 94, .16) !important;
  color: #86efac !important;
}

html.dark .nvr-crud-page .kv-panel-after,
html.dark .nvr-crud-page .card-footer,
html.dark .nvr-crud-page .panel-footer,
body.dark-mode .nvr-crud-page .kv-panel-after,
body.dark-mode .nvr-crud-page .card-footer,
body.dark-mode .nvr-crud-page .panel-footer {
  border-top-color: rgba(148, 163, 184, .24) !important;
  background: rgba(15, 23, 42, .72) !important;
}

html.dark .nvr-crud-page .pagination > li > a,
html.dark .nvr-crud-page .pagination > li > span,
html.dark .nvr-crud-page .page-link,
body.dark-mode .nvr-crud-page .pagination > li > a,
body.dark-mode .nvr-crud-page .pagination > li > span,
body.dark-mode .nvr-crud-page .page-link {
  background: rgba(15, 23, 42, .74) !important;
  border-color: rgba(148, 163, 184, .28) !important;
  color: #e5e7eb !important;
}

@media (max-width: 768px) {
  .nvr-crud-page .panel-heading:has(.nvr-index-heading),
  .nvr-crud-page .card-header:has(.nvr-index-heading),
  .nvr-crud-page .kv-panel-heading:has(.nvr-index-heading) {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .nvr-crud-page .panel-heading:has(.nvr-index-heading) > h5,
  .nvr-crud-page .card-header:has(.nvr-index-heading) > h5,
  .nvr-crud-page .kv-panel-heading:has(.nvr-index-heading) > h5,
  .nvr-crud-page .panel-heading:has(.nvr-index-heading) > .panel-title,
  .nvr-crud-page .card-header:has(.nvr-index-heading) > .card-title,
  .nvr-crud-page .kv-panel-heading:has(.nvr-index-heading) > .kv-panel-title {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .nvr-index-heading,
  .nvr-index-heading-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }

  .nvr-index-heading-actions .btn,
  .nvr-index-header-btn {
    flex: 1 1 auto;
  }
}

/* =========================================================
   NVR ActiveForm polish and reliable custom radios
   ========================================================= */
.nvr-crud-form {
  position: relative;
  padding: clamp(1rem, 1.4vw, 1.35rem) !important;
  border-radius: 26px !important;
  overflow: visible !important;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 96%, var(--nvr-primary, #2563eb) 4%),
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 90%, transparent)
    ) !important;
  box-shadow:
    0 22px 70px rgba(15, 23, 42, .09),
    inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

.nvr-modern-form {
  gap: 1rem !important;
}

.nvr-modern-form > .row,
.nvr-modern-form .row.inline-row,
.nvr-modern-form .row:not(.g-0) {
  position: relative;
  row-gap: 1rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.nvr-modern-form > .row > [class*='col-'],
.nvr-modern-form > .row > .col,
.nvr-modern-form .row.inline-row > [class*='col-'],
.nvr-modern-form .row.inline-row > .col {
  padding-left: .5rem !important;
  padding-right: .5rem !important;
}

.nvr-modern-form .form-group,
.nvr-modern-form .mb-3,
.nvr-modern-form [class*='field-'] {
  position: relative;
  margin-bottom: .95rem !important;
}

.nvr-modern-form label,
.nvr-modern-form .control-label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .42rem !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.nvr-modern-form .has-star::after,
.nvr-modern-form label.required::after {
  margin-left: .12rem;
  color: var(--nvr-crud-danger, #dc2626);
}

.nvr-modern-form .form-control,
.nvr-modern-form .form-select,
.nvr-modern-form select,
.nvr-modern-form textarea,
.nvr-modern-form input[type='text'],
.nvr-modern-form input[type='email'],
.nvr-modern-form input[type='number'],
.nvr-modern-form input[type='password'],
.nvr-modern-form input[type='url'],
.nvr-modern-form input[type='tel'],
.nvr-modern-form input[type='date'],
.nvr-modern-form input[type='datetime-local'],
.nvr-modern-form input[type='time'] {
  min-height: 46px !important;
  padding: .62rem .88rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 86%, transparent) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 96%, transparent) !important;
  color: var(--nvr-text, #0f172a) !important;
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, .04),
    0 1px 0 rgba(255, 255, 255, .42) !important;
  outline: none !important;
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease !important;
}

.nvr-modern-form textarea.form-control,
.nvr-modern-form textarea {
  min-height: 108px !important;
  resize: vertical;
}

.nvr-modern-form .form-control:hover,
.nvr-modern-form .form-select:hover,
.nvr-modern-form select:hover,
.nvr-modern-form textarea:hover,
.nvr-modern-form input[type='text']:hover,
.nvr-modern-form input[type='email']:hover,
.nvr-modern-form input[type='number']:hover,
.nvr-modern-form input[type='password']:hover,
.nvr-modern-form input[type='url']:hover,
.nvr-modern-form input[type='tel']:hover,
.nvr-modern-form input[type='date']:hover,
.nvr-modern-form input[type='datetime-local']:hover,
.nvr-modern-form input[type='time']:hover {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 42%, var(--nvr-border, #cbd5e1)) !important;
}

.nvr-modern-form .form-control:focus,
.nvr-modern-form .form-select:focus,
.nvr-modern-form select:focus,
.nvr-modern-form textarea:focus,
.nvr-modern-form input[type='text']:focus,
.nvr-modern-form input[type='email']:focus,
.nvr-modern-form input[type='number']:focus,
.nvr-modern-form input[type='password']:focus,
.nvr-modern-form input[type='url']:focus,
.nvr-modern-form input[type='tel']:focus,
.nvr-modern-form input[type='date']:focus,
.nvr-modern-form input[type='datetime-local']:focus,
.nvr-modern-form input[type='time']:focus {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 68%, white) !important;
  background: var(--nvr-surface-solid, #fff) !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--nvr-primary, #2563eb) 16%, transparent),
    inset 0 1px 2px rgba(15, 23, 42, .04) !important;
  transform: translateY(-1px);
}

.nvr-modern-form .input-group,
.nvr-modern-form .input-group.input-group-sm,
.nvr-modern-form .input-group.input-group-lg {
  align-items: stretch;
  border-radius: 16px;
}

.nvr-modern-form .input-group-text,
.nvr-modern-form .input-group-addon,
.nvr-modern-form .input-group-prepend .input-group-text,
.nvr-modern-form .input-group-append .input-group-text {
  min-height: 46px;
  border-color: color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 86%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 8%, var(--nvr-surface-solid, #fff)) !important;
  color: var(--nvr-primary, #2563eb) !important;
  border-radius: 16px !important;
}

.nvr-modern-form .select2-container {
  width: 100% !important;
}

.nvr-modern-form .select2-container--krajee-bs5 .select2-selection,
.nvr-modern-form .select2-container--krajee .select2-selection,
.nvr-modern-form .select2-container--bootstrap .select2-selection,
.nvr-modern-form .select2-container--default .select2-selection {
  min-height: 46px !important;
  border-radius: 16px !important;
  border-color: color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 86%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 96%, transparent) !important;
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, .04),
    0 1px 0 rgba(255, 255, 255, .42) !important;
}

.nvr-modern-form .select2-container--krajee-bs5.select2-container--focus .select2-selection,
.nvr-modern-form .select2-container--krajee.select2-container--focus .select2-selection,
.nvr-modern-form .select2-container--bootstrap.select2-container--focus .select2-selection,
.nvr-modern-form .select2-container--default.select2-container--focus .select2-selection,
.nvr-modern-form .select2-container--krajee-bs5.select2-container--open .select2-selection,
.nvr-modern-form .select2-container--krajee.select2-container--open .select2-selection,
.nvr-modern-form .select2-container--bootstrap.select2-container--open .select2-selection,
.nvr-modern-form .select2-container--default.select2-container--open .select2-selection {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 68%, white) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nvr-primary, #2563eb) 16%, transparent) !important;
}

.nvr-modern-form .select2-container--krajee-bs5 .select2-selection__rendered,
.nvr-modern-form .select2-container--krajee .select2-selection__rendered,
.nvr-modern-form .select2-container--bootstrap .select2-selection__rendered,
.nvr-modern-form .select2-container--default .select2-selection__rendered {
  min-height: 44px !important;
  line-height: 44px !important;
  color: var(--nvr-text, #0f172a) !important;
}

.nvr-modern-form .select2-container--krajee-bs5 .select2-selection__arrow,
.nvr-modern-form .select2-container--krajee .select2-selection__arrow,
.nvr-modern-form .select2-container--bootstrap .select2-selection__arrow,
.nvr-modern-form .select2-container--default .select2-selection__arrow {
  min-height: 44px !important;
}

.nvr-modern-form .nvr-form-card,
.nvr-modern-form .nvr-form-section,
.nvr-modern-form .borderx,
.nvr-modern-form .file-input,
.nvr-modern-form .file-preview,
.nvr-modern-form .multiple-input-list,
.nvr-modern-form .json-editor-btntype-properties,
.nvr-modern-form .kv-editor-container,
.nvr-modern-form .card,
.nvr-modern-form .panel {
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 82%, transparent) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 94%, var(--nvr-primary, #2563eb) 3%),
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 90%, transparent)
    ) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055) !important;
}

.nvr-modern-form .nvr-form-card,
.nvr-modern-form .nvr-form-section,
.nvr-modern-form .borderx {
  padding: 1rem !important;
}

.nvr-modern-form .file-preview {
  overflow: hidden;
}

.nvr-modern-form .file-caption,
.nvr-modern-form .file-caption-name {
  border-radius: 16px !important;
}

.nvr-modern-form .help-block,
.nvr-modern-form .invalid-feedback,
.nvr-modern-form .hint-block {
  margin-top: .32rem !important;
  color: var(--nvr-muted, #64748b) !important;
  font-size: .76rem !important;
}

.nvr-modern-form .has-error .help-block,
.nvr-modern-form .has-error .invalid-feedback,
.nvr-modern-form .is-invalid ~ .invalid-feedback,
.nvr-modern-form .form-control.is-invalid ~ .invalid-feedback {
  color: var(--nvr-crud-danger, #dc2626) !important;
}

.nvr-modern-form .has-success .form-control,
.nvr-modern-form .form-control.is-valid {
  border-color: color-mix(in srgb, var(--nvr-crud-success, #16a34a) 45%, var(--nvr-border, #cbd5e1)) !important;
}

.nvr-modern-form .has-error .form-control,
.nvr-modern-form .form-control.is-invalid {
  border-color: color-mix(in srgb, var(--nvr-crud-danger, #dc2626) 62%, var(--nvr-border, #cbd5e1)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nvr-crud-danger, #dc2626) 12%, transparent) !important;
}

.nvr-modern-form .inline-row {
  align-items: stretch !important;
  gap: .85rem !important;
}

.nvr-modern-form .inline-child-margin,
.nvr-modern-form .ft-content,
.nvr-modern-form .mx-content {
  min-width: min(100%, 230px) !important;
}

.nvr-modern-form .ft-content,
.nvr-modern-form .mx-content,
.nvr-modern-form .advance-menu-field,
.nvr-modern-form .radioc-field {
  padding: .85rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 82%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 88%, transparent);
}

.nvr-modern-form .btn-groupx,
.nvr-modern-form .radioc-group,
.nvr-modern-form .btn-group-toggle[role='radiogroup'],
.nvr-modern-form [role='radiogroup'].btn-group-toggle,
.nvr-modern-form [role='radiogroup'].btn-groupx {
  position: relative;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .45rem !important;
  width: fit-content;
  max-width: 100%;
  min-height: 42px;
  padding: .32rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 84%, transparent) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 94%, var(--nvr-primary, #2563eb) 5%),
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 86%, transparent)
    ) !important;
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, .05),
    0 8px 24px rgba(15, 23, 42, .06) !important;
  isolation: isolate;
}

.nvr-modern-form .btn-groupx input[type='radio'],
.nvr-modern-form .btn-group-toggle input[type='radio'],
.nvr-modern-form .radioc-group input[type='radio'],
.nvr-modern-form [role='radiogroup'] input[type='radio'] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
}

.nvr-modern-form .btnlist,
.nvr-modern-form .btn-groupx > label,
.nvr-modern-form .btn-groupx .btn,
.nvr-modern-form .btn-group-toggle > label,
.nvr-modern-form .btn-group-toggle .btn,
.nvr-modern-form .radioc-group > label,
.nvr-modern-form .radioc-group .btn {
  position: relative !important;
  z-index: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .38rem;
  min-height: 34px !important;
  margin: 0 !important;
  padding: .5rem .78rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--nvr-muted, #64748b) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  user-select: none !important;
  font-size: .8rem !important;
  font-weight: 900 !important;
  letter-spacing: .01em;
  line-height: 1 !important;
  text-transform: none !important;
  transition:
    transform .16s ease,
    color .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    opacity .16s ease !important;
}

.nvr-modern-form .btnlist::before,
.nvr-modern-form .btn-groupx > label::before,
.nvr-modern-form .btn-group-toggle > label::before,
.nvr-modern-form .radioc-group > label::before {
  content: '';
  width: .58rem;
  height: .58rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  opacity: .62;
  transition: transform .16s ease, background .16s ease, opacity .16s ease;
}

.nvr-modern-form .btnlist:hover,
.nvr-modern-form .btn-groupx > label:hover,
.nvr-modern-form .btn-groupx .btn:hover,
.nvr-modern-form .btn-group-toggle > label:hover,
.nvr-modern-form .btn-group-toggle .btn:hover,
.nvr-modern-form .radioc-group > label:hover,
.nvr-modern-form .radioc-group .btn:hover {
  transform: translateY(-1px);
  color: var(--nvr-primary, #2563eb) !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 10%, transparent) !important;
}

.nvr-modern-form .btnlist.active,
.nvr-modern-form .btnlist:has(input[type='radio']:checked),
.nvr-modern-form .btn-groupx > label.active,
.nvr-modern-form .btn-groupx > label:has(input[type='radio']:checked),
.nvr-modern-form .btn-groupx .btn.active,
.nvr-modern-form .btn-group-toggle > label.active,
.nvr-modern-form .btn-group-toggle > label:has(input[type='radio']:checked),
.nvr-modern-form .btn-group-toggle .btn.active,
.nvr-modern-form .radioc-group > label.active,
.nvr-modern-form .radioc-group > label:has(input[type='radio']:checked),
.nvr-modern-form .radioc-group .btn.active {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 34%, transparent) !important;
  background:
    linear-gradient(135deg, var(--nvr-primary, #2563eb), var(--nvr-primary-2, #06b6d4)) !important;
  color: #fff !important;
  opacity: 1 !important;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--nvr-primary, #2563eb) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

.nvr-modern-form .btnlist.active::before,
.nvr-modern-form .btnlist:has(input[type='radio']:checked)::before,
.nvr-modern-form .btn-groupx > label.active::before,
.nvr-modern-form .btn-groupx > label:has(input[type='radio']:checked)::before,
.nvr-modern-form .btn-group-toggle > label.active::before,
.nvr-modern-form .btn-group-toggle > label:has(input[type='radio']:checked)::before,
.nvr-modern-form .radioc-group > label.active::before,
.nvr-modern-form .radioc-group > label:has(input[type='radio']:checked)::before {
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--nvr-primary, #2563eb);
  opacity: 1;
  transform: scale(1.02);
}

.nvr-modern-form .btnlist:focus-visible,
.nvr-modern-form .btn-groupx > label:focus-visible,
.nvr-modern-form .btn-group-toggle > label:focus-visible,
.nvr-modern-form .radioc-group > label:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--nvr-primary, #2563eb) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

.nvr-modern-form .btnlist .radioc-label-text,
.nvr-modern-form .radioc-label-text {
  pointer-events: none;
}

.nvr-modern-form .bootstrap-switch,
.nvr-modern-form .bootstrap-switch-container,
.nvr-modern-form .bootstrap-switch-wrapper {
  border-radius: 999px !important;
  border-color: color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 84%, transparent) !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08) !important;
}

.nvr-modern-form .bootstrap-switch .bootstrap-switch-handle-on,
.nvr-modern-form .bootstrap-switch .bootstrap-switch-handle-off,
.nvr-modern-form .bootstrap-switch .bootstrap-switch-label {
  font-weight: 850 !important;
}

.nvr-modern-form .checkbox,
.nvr-modern-form .radio {
  margin-top: .35rem;
  margin-bottom: .35rem;
}

.nvr-modern-form input[type='checkbox']:not(.kv-row-checkbox),
.nvr-modern-form input[type='radio']:not(.kv-row-checkbox) {
  accent-color: var(--nvr-primary, #2563eb);
}

.nvr-modern-form .btn,
.nvr-modern-form button,
.nvr-modern-form input[type='submit'] {
  border-radius: 999px !important;
  font-weight: 850 !important;
  transition:
    transform .17s ease,
    box-shadow .17s ease,
    filter .17s ease !important;
}

.nvr-modern-form .btn:hover,
.nvr-modern-form button:hover,
.nvr-modern-form input[type='submit']:hover {
  transform: translateY(-1px);
}

.nvr-modern-form .form-group:last-child:has(.btn-success),
.nvr-modern-form .nvr-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap;
  gap: .6rem !important;
  margin: 1rem -1rem -1rem !important;
  padding: .9rem 1rem !important;
  border-top: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 78%, transparent) !important;
  border-radius: 0 0 22px 22px;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 92%, transparent) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.nvr-modern-form .select2-dropdown,
.nvr-modern-form .select2-container--open .select2-dropdown,
.select2-dropdown {
  z-index: 2000 !important;
  border-color: color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 84%, transparent) !important;
  border-radius: 16px !important;
  overflow: hidden;
  background: var(--nvr-surface-solid, #fff) !important;
  color: var(--nvr-text, #0f172a) !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .18) !important;
}

html.dark .nvr-crud-form,
body.dark-mode .nvr-crud-form {
  background:
    linear-gradient(
      135deg,
      rgba(15, 23, 42, .92),
      rgba(2, 6, 23, .76)
    ) !important;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

html.dark .nvr-modern-form .form-control,
html.dark .nvr-modern-form .form-select,
html.dark .nvr-modern-form select,
html.dark .nvr-modern-form textarea,
html.dark .nvr-modern-form input[type='text'],
html.dark .nvr-modern-form input[type='email'],
html.dark .nvr-modern-form input[type='number'],
html.dark .nvr-modern-form input[type='password'],
html.dark .nvr-modern-form input[type='url'],
html.dark .nvr-modern-form input[type='tel'],
html.dark .nvr-modern-form input[type='date'],
html.dark .nvr-modern-form input[type='datetime-local'],
html.dark .nvr-modern-form input[type='time'],
body.dark-mode .nvr-modern-form .form-control,
body.dark-mode .nvr-modern-form .form-select,
body.dark-mode .nvr-modern-form select,
body.dark-mode .nvr-modern-form textarea,
body.dark-mode .nvr-modern-form input[type='text'],
body.dark-mode .nvr-modern-form input[type='email'],
body.dark-mode .nvr-modern-form input[type='number'],
body.dark-mode .nvr-modern-form input[type='password'],
body.dark-mode .nvr-modern-form input[type='url'],
body.dark-mode .nvr-modern-form input[type='tel'],
body.dark-mode .nvr-modern-form input[type='date'],
body.dark-mode .nvr-modern-form input[type='datetime-local'],
body.dark-mode .nvr-modern-form input[type='time'] {
  border-color: rgba(148, 163, 184, .28) !important;
  background: rgba(2, 6, 23, .68) !important;
  color: #e5e7eb !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22) !important;
}

html.dark .nvr-modern-form .form-control:focus,
html.dark .nvr-modern-form .form-select:focus,
html.dark .nvr-modern-form select:focus,
html.dark .nvr-modern-form textarea:focus,
html.dark .nvr-modern-form input:focus,
body.dark-mode .nvr-modern-form .form-control:focus,
body.dark-mode .nvr-modern-form .form-select:focus,
body.dark-mode .nvr-modern-form select:focus,
body.dark-mode .nvr-modern-form textarea:focus,
body.dark-mode .nvr-modern-form input:focus {
  border-color: rgba(56, 189, 248, .72) !important;
  background: rgba(2, 6, 23, .86) !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .16) !important;
}

html.dark .nvr-modern-form label,
html.dark .nvr-modern-form .control-label,
body.dark-mode .nvr-modern-form label,
body.dark-mode .nvr-modern-form .control-label {
  color: #f8fafc !important;
}

html.dark .nvr-modern-form .help-block,
html.dark .nvr-modern-form .invalid-feedback,
html.dark .nvr-modern-form .hint-block,
body.dark-mode .nvr-modern-form .help-block,
body.dark-mode .nvr-modern-form .invalid-feedback,
body.dark-mode .nvr-modern-form .hint-block {
  color: #94a3b8 !important;
}

html.dark .nvr-modern-form .select2-container--krajee-bs5 .select2-selection,
html.dark .nvr-modern-form .select2-container--krajee .select2-selection,
html.dark .nvr-modern-form .select2-container--bootstrap .select2-selection,
html.dark .nvr-modern-form .select2-container--default .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--krajee-bs5 .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--krajee .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--bootstrap .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--default .select2-selection {
  border-color: rgba(148, 163, 184, .28) !important;
  background: rgba(2, 6, 23, .68) !important;
}

html.dark .nvr-modern-form .select2-container--krajee-bs5 .select2-selection__rendered,
html.dark .nvr-modern-form .select2-container--krajee .select2-selection__rendered,
html.dark .nvr-modern-form .select2-container--bootstrap .select2-selection__rendered,
html.dark .nvr-modern-form .select2-container--default .select2-selection__rendered,
body.dark-mode .nvr-modern-form .select2-container--krajee-bs5 .select2-selection__rendered,
body.dark-mode .nvr-modern-form .select2-container--krajee .select2-selection__rendered,
body.dark-mode .nvr-modern-form .select2-container--bootstrap .select2-selection__rendered,
body.dark-mode .nvr-modern-form .select2-container--default .select2-selection__rendered {
  color: #e5e7eb !important;
}

html.dark .nvr-modern-form .nvr-form-card,
html.dark .nvr-modern-form .nvr-form-section,
html.dark .nvr-modern-form .borderx,
html.dark .nvr-modern-form .file-input,
html.dark .nvr-modern-form .file-preview,
html.dark .nvr-modern-form .multiple-input-list,
html.dark .nvr-modern-form .json-editor-btntype-properties,
html.dark .nvr-modern-form .kv-editor-container,
html.dark .nvr-modern-form .card,
html.dark .nvr-modern-form .panel,
html.dark .nvr-modern-form .ft-content,
html.dark .nvr-modern-form .mx-content,
html.dark .nvr-modern-form .advance-menu-field,
html.dark .nvr-modern-form .radioc-field,
body.dark-mode .nvr-modern-form .nvr-form-card,
body.dark-mode .nvr-modern-form .nvr-form-section,
body.dark-mode .nvr-modern-form .borderx,
body.dark-mode .nvr-modern-form .file-input,
body.dark-mode .nvr-modern-form .file-preview,
body.dark-mode .nvr-modern-form .multiple-input-list,
body.dark-mode .nvr-modern-form .json-editor-btntype-properties,
body.dark-mode .nvr-modern-form .kv-editor-container,
body.dark-mode .nvr-modern-form .card,
body.dark-mode .nvr-modern-form .panel,
body.dark-mode .nvr-modern-form .ft-content,
body.dark-mode .nvr-modern-form .mx-content,
body.dark-mode .nvr-modern-form .advance-menu-field,
body.dark-mode .nvr-modern-form .radioc-field {
  border-color: rgba(148, 163, 184, .24) !important;
  background: rgba(15, 23, 42, .58) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .2) !important;
}

html.dark .nvr-modern-form .btn-groupx,
html.dark .nvr-modern-form .radioc-group,
html.dark .nvr-modern-form .btn-group-toggle[role='radiogroup'],
html.dark .nvr-modern-form [role='radiogroup'].btn-group-toggle,
html.dark .nvr-modern-form [role='radiogroup'].btn-groupx,
body.dark-mode .nvr-modern-form .btn-groupx,
body.dark-mode .nvr-modern-form .radioc-group,
body.dark-mode .nvr-modern-form .btn-group-toggle[role='radiogroup'],
body.dark-mode .nvr-modern-form [role='radiogroup'].btn-group-toggle,
body.dark-mode .nvr-modern-form [role='radiogroup'].btn-groupx {
  border-color: rgba(148, 163, 184, .26) !important;
  background: rgba(2, 6, 23, .56) !important;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .24),
    0 10px 30px rgba(0, 0, 0, .18) !important;
}

html.dark .nvr-modern-form .btnlist,
html.dark .nvr-modern-form .btn-groupx > label,
html.dark .nvr-modern-form .btn-groupx .btn,
html.dark .nvr-modern-form .btn-group-toggle > label,
html.dark .nvr-modern-form .btn-group-toggle .btn,
html.dark .nvr-modern-form .radioc-group > label,
html.dark .nvr-modern-form .radioc-group .btn,
body.dark-mode .nvr-modern-form .btnlist,
body.dark-mode .nvr-modern-form .btn-groupx > label,
body.dark-mode .nvr-modern-form .btn-groupx .btn,
body.dark-mode .nvr-modern-form .btn-group-toggle > label,
body.dark-mode .nvr-modern-form .btn-group-toggle .btn,
body.dark-mode .nvr-modern-form .radioc-group > label,
body.dark-mode .nvr-modern-form .radioc-group .btn {
  color: #cbd5e1 !important;
}

html.dark .nvr-modern-form .btnlist:hover,
html.dark .nvr-modern-form .btn-groupx > label:hover,
html.dark .nvr-modern-form .btn-group-toggle > label:hover,
html.dark .nvr-modern-form .radioc-group > label:hover,
body.dark-mode .nvr-modern-form .btnlist:hover,
body.dark-mode .nvr-modern-form .btn-groupx > label:hover,
body.dark-mode .nvr-modern-form .btn-group-toggle > label:hover,
body.dark-mode .nvr-modern-form .radioc-group > label:hover {
  color: #f8fafc !important;
  background: rgba(56, 189, 248, .13) !important;
}

html.dark .nvr-modern-form .form-group:last-child:has(.btn-success),
html.dark .nvr-modern-form .nvr-form-actions,
body.dark-mode .nvr-modern-form .form-group:last-child:has(.btn-success),
body.dark-mode .nvr-modern-form .nvr-form-actions {
  border-top-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .82) !important;
}

html.dark .select2-dropdown,
body.dark-mode .select2-dropdown {
  border-color: rgba(148, 163, 184, .28) !important;
  background: #020617 !important;
  color: #e5e7eb !important;
}

@media (max-width: 768px) {
  .nvr-crud-form {
    padding: .8rem !important;
    border-radius: 20px !important;
  }

  .nvr-modern-form > .row > [class*='col-'],
  .nvr-modern-form > .row > .col,
  .nvr-modern-form .row.inline-row > [class*='col-'],
  .nvr-modern-form .row.inline-row > .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .nvr-modern-form .ft-content,
  .nvr-modern-form .mx-content,
  .nvr-modern-form .advance-menu-field,
  .nvr-modern-form .radioc-field {
    width: 100% !important;
    min-width: 100% !important;
  }

  .nvr-modern-form .btn-groupx,
  .nvr-modern-form .radioc-group,
  .nvr-modern-form .btn-group-toggle[role='radiogroup'] {
    width: 100% !important;
    border-radius: 18px !important;
  }

  .nvr-modern-form .btnlist,
  .nvr-modern-form .btn-groupx > label,
  .nvr-modern-form .btn-group-toggle > label,
  .nvr-modern-form .radioc-group > label {
    flex: 1 1 auto;
  }

  .nvr-modern-form .form-group:last-child:has(.btn-success),
  .nvr-modern-form .nvr-form-actions {
    margin-left: -.8rem !important;
    margin-right: -.8rem !important;
    margin-bottom: -.8rem !important;
  }
}

/* =========================================================
   NVR Active Form Plugin Polish: Select2 + JSON Editor
   ========================================================= */

.nvr-modern-form .select2-container--krajee-bs5,
.nvr-modern-form .select2-container--krajee-bs4,
.nvr-modern-form .select2-container--krajee,
.nvr-modern-form .select2-container--bootstrap4,
.nvr-modern-form .select2-container--bootstrap,
.nvr-modern-form .select2-container--default {
  width: 100% !important;
  display: block !important;
}

.nvr-modern-form .select2-container--krajee-bs5 .select2-selection,
.nvr-modern-form .select2-container--krajee-bs4 .select2-selection,
.nvr-modern-form .select2-container--krajee .select2-selection,
.nvr-modern-form .select2-container--bootstrap4 .select2-selection,
.nvr-modern-form .select2-container--bootstrap .select2-selection,
.nvr-modern-form .select2-container--default .select2-selection {
  min-height: 46px !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 84%, transparent) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 98%, var(--nvr-primary, #2563eb) 2%),
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 94%, transparent)
    ) !important;
  color: var(--nvr-text, #0f172a) !important;
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, .045),
    0 1px 0 rgba(255, 255, 255, .45) !important;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    transform .18s ease !important;
}

.nvr-modern-form .select2-container--krajee-bs5.select2-container--focus .select2-selection,
.nvr-modern-form .select2-container--krajee-bs4.select2-container--focus .select2-selection,
.nvr-modern-form .select2-container--krajee.select2-container--focus .select2-selection,
.nvr-modern-form .select2-container--bootstrap4.select2-container--focus .select2-selection,
.nvr-modern-form .select2-container--bootstrap.select2-container--focus .select2-selection,
.nvr-modern-form .select2-container--default.select2-container--focus .select2-selection,
.nvr-modern-form .select2-container--krajee-bs5.select2-container--open .select2-selection,
.nvr-modern-form .select2-container--krajee-bs4.select2-container--open .select2-selection,
.nvr-modern-form .select2-container--krajee.select2-container--open .select2-selection,
.nvr-modern-form .select2-container--bootstrap4.select2-container--open .select2-selection,
.nvr-modern-form .select2-container--bootstrap.select2-container--open .select2-selection,
.nvr-modern-form .select2-container--default.select2-container--open .select2-selection {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 70%, var(--nvr-border, #cbd5e1)) !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--nvr-primary, #2563eb) 15%, transparent),
    inset 0 1px 2px rgba(15, 23, 42, .04) !important;
}

.nvr-modern-form .select2-selection--single .select2-selection__rendered,
.nvr-modern-form .select2-container--krajee-bs5 .select2-selection__rendered,
.nvr-modern-form .select2-container--krajee-bs4 .select2-selection__rendered,
.nvr-modern-form .select2-container--krajee .select2-selection__rendered,
.nvr-modern-form .select2-container--bootstrap4 .select2-selection__rendered,
.nvr-modern-form .select2-container--bootstrap .select2-selection__rendered,
.nvr-modern-form .select2-container--default .select2-selection__rendered {
  min-height: 44px !important;
  line-height: 44px !important;
  padding-left: .85rem !important;
  padding-right: 2.35rem !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .9rem !important;
  font-weight: 650 !important;
}

.nvr-modern-form .select2-container .select2-selection__placeholder {
  color: color-mix(in srgb, var(--nvr-muted, #64748b) 78%, transparent) !important;
  font-weight: 550 !important;
}

.nvr-modern-form .select2-container .select2-selection__arrow,
.nvr-modern-form .select2-container--krajee-bs5 .select2-selection__arrow,
.nvr-modern-form .select2-container--krajee-bs4 .select2-selection__arrow,
.nvr-modern-form .select2-container--krajee .select2-selection__arrow,
.nvr-modern-form .select2-container--bootstrap4 .select2-selection__arrow,
.nvr-modern-form .select2-container--bootstrap .select2-selection__arrow,
.nvr-modern-form .select2-container--default .select2-selection__arrow {
  top: 1px !important;
  right: .55rem !important;
  width: 1.75rem !important;
  min-height: 44px !important;
  color: var(--nvr-muted, #64748b) !important;
}

.nvr-modern-form .select2-container .select2-selection__clear {
  margin-right: 1.75rem !important;
  color: var(--nvr-muted, #64748b) !important;
  font-size: 1.1rem !important;
  line-height: 42px !important;
}

.nvr-modern-form .select2-selection--multiple {
  min-height: 46px !important;
  padding: .22rem .38rem !important;
}

.nvr-modern-form .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .35rem !important;
  min-height: 38px !important;
  padding: .12rem .28rem !important;
}

.nvr-modern-form .select2-selection--multiple .select2-selection__choice,
.nvr-modern-form .select2-container--krajee-bs5 .select2-selection__choice,
.nvr-modern-form .select2-container--krajee-bs4 .select2-selection__choice,
.nvr-modern-form .select2-container--krajee .select2-selection__choice,
.nvr-modern-form .select2-container--bootstrap4 .select2-selection__choice,
.nvr-modern-form .select2-container--bootstrap .select2-selection__choice,
.nvr-modern-form .select2-container--default .select2-selection__choice {
  display: inline-flex !important;
  align-items: center !important;
  gap: .3rem !important;
  min-height: 28px !important;
  margin: .12rem !important;
  padding: .24rem .56rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-primary, #2563eb) 24%, transparent) !important;
  border-radius: 999px !important;
  background-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 10%, var(--nvr-surface-solid, #fff)) !important;
  background-repeat: no-repeat !important;
  color: var(--nvr-primary, #2563eb) !important;
  font-size: .78rem !important;
  font-weight: 850 !important;
}

.nvr-modern-form .select2-selection--multiple .select2-selection__choice__remove,
.nvr-modern-form .select2-container .select2-selection__choice__remove {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 .1rem 0 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 13%, transparent) !important;
  color: currentColor !important;
  line-height: 1 !important;
}

.nvr-modern-form .select2-selection--multiple .select2-search--inline,
.nvr-modern-form .select2-selection--multiple .select2-search__field {
  min-height: 28px !important;
  margin: 0 !important;
  color: var(--nvr-text, #0f172a) !important;
}

.select2-container--open,
.select2-container--open .select2-dropdown,
.select2-dropdown.nvr-select2-dropdown {
  z-index: 3000 !important;
}

.select2-dropdown,
.select2-dropdown.nvr-select2-dropdown,
.select2-container--open .select2-dropdown {
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 84%, transparent) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 96%, var(--nvr-primary, #2563eb) 3%),
      var(--nvr-surface-solid, #fff)
    ) !important;
  color: var(--nvr-text, #0f172a) !important;
  box-shadow:
    0 24px 64px rgba(15, 23, 42, .2),
    0 6px 18px rgba(15, 23, 42, .08) !important;
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}

.select2-dropdown .select2-search,
.select2-dropdown .select2-search--dropdown {
  padding: .6rem !important;
  border-bottom: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 72%, transparent) !important;
}

.select2-dropdown .select2-search__field {
  min-height: 40px !important;
  padding: .48rem .72rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 84%, transparent) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 96%, transparent) !important;
  color: var(--nvr-text, #0f172a) !important;
  outline: none !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .045) !important;
}

.select2-dropdown .select2-search__field:focus {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 68%, var(--nvr-border, #cbd5e1)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nvr-primary, #2563eb) 15%, transparent) !important;
}

.select2-results,
.select2-results__options {
  padding: .34rem !important;
}

.select2-results__option {
  margin: .12rem 0 !important;
  padding: .62rem .78rem !important;
  border-radius: 13px !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .88rem !important;
  font-weight: 650 !important;
  transition:
    background-color .16s ease,
    color .16s ease,
    transform .16s ease !important;
}

.select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected],
.select2-container--krajee .select2-results__option--highlighted[aria-selected],
.select2-container--krajee-bs4 .select2-results__option--highlighted[aria-selected],
.select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected] {
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 14%, transparent) !important;
  color: var(--nvr-primary, #2563eb) !important;
  transform: translateX(2px);
}

.select2-results__option[aria-selected='true'],
.select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected='true'] {
  background:
    linear-gradient(135deg, var(--nvr-primary, #2563eb), var(--nvr-primary-2, #06b6d4)) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--nvr-primary, #2563eb) 24%, transparent) !important;
}

.select2-results__message,
.select2-results__option.loading-results {
  color: var(--nvr-muted, #64748b) !important;
  font-weight: 700 !important;
}

/* JSON Editor: supports kdn/yii2-json-editor, jsoneditor, @json-editor/json-editor, and Ace editor wrappers. */
.nvr-modern-form .jsoneditor,
.nvr-modern-form .json-editor,
.nvr-modern-form .json-editor-container,
.nvr-modern-form .json-editor-btntype-properties,
.nvr-modern-form .kv-editor-container,
.nvr-modern-form .je-ready,
.nvr-modern-form .je-object__container,
.nvr-modern-form .je-indented-panel,
.nvr-modern-form [data-schematype='object'],
.nvr-modern-form [data-schematype='array'] {
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 82%, transparent) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 96%, var(--nvr-primary, #2563eb) 3%),
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 92%, transparent)
    ) !important;
  color: var(--nvr-text, #0f172a) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055) !important;
}

.nvr-modern-form .jsoneditor,
.nvr-modern-form .json-editor-container,
.nvr-modern-form .kv-editor-container {
  overflow: hidden !important;
}

.nvr-modern-form .jsoneditor-menu,
.nvr-modern-form .jsoneditor-navigation-bar,
.nvr-modern-form .jsoneditor-statusbar,
.nvr-modern-form .je-header,
.nvr-modern-form .je-object__title,
.nvr-modern-form .je-panel__heading,
.nvr-modern-form .je-object__controls {
  border-color: color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 76%, transparent) !important;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--nvr-primary, #2563eb) 9%, var(--nvr-surface-solid, #fff)),
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 94%, transparent)
    ) !important;
  color: var(--nvr-text, #0f172a) !important;
}

.nvr-modern-form .jsoneditor-menu {
  min-height: 42px !important;
  padding: .35rem .5rem !important;
}

.nvr-modern-form .jsoneditor-menu button,
.nvr-modern-form .jsoneditor-menu .jsoneditor-button,
.nvr-modern-form .json-editor-btntype-properties .btn,
.nvr-modern-form .json-editor-btn,
.nvr-modern-form .json-editor-btn-add,
.nvr-modern-form .json-editor-btn-delete,
.nvr-modern-form .json-editor-btn-collapse,
.nvr-modern-form .je-object__controls button,
.nvr-modern-form .je-array-controls button,
.nvr-modern-form .je-header button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  margin: .12rem !important;
  padding: .38rem .62rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-primary, #2563eb) 22%, transparent) !important;
  border-radius: 999px !important;
  background-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 10%, var(--nvr-surface-solid, #fff)) !important;
  background-repeat: no-repeat !important;
  color: var(--nvr-primary, #2563eb) !important;
  font-size: .78rem !important;
  font-weight: 850 !important;
  box-shadow: none !important;
  transition:
    transform .16s ease,
    background-color .16s ease,
    color .16s ease,
    box-shadow .16s ease !important;
}

.nvr-modern-form .jsoneditor-menu button:hover,
.nvr-modern-form .jsoneditor-menu .jsoneditor-button:hover,
.nvr-modern-form .json-editor-btntype-properties .btn:hover,
.nvr-modern-form .json-editor-btn:hover,
.nvr-modern-form .json-editor-btn-add:hover,
.nvr-modern-form .json-editor-btn-delete:hover,
.nvr-modern-form .json-editor-btn-collapse:hover,
.nvr-modern-form .je-object__controls button:hover,
.nvr-modern-form .je-array-controls button:hover,
.nvr-modern-form .je-header button:hover {
  transform: translateY(-1px);
  background-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 16%, var(--nvr-surface-solid, #fff)) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--nvr-primary, #2563eb) 16%, transparent) !important;
}

.nvr-modern-form .jsoneditor-outer,
.nvr-modern-form .jsoneditor-tree,
.nvr-modern-form .jsoneditor-treepath,
.nvr-modern-form .jsoneditor-frame,
.nvr-modern-form .jsoneditor-values,
.nvr-modern-form .jsoneditor-text,
.nvr-modern-form .ace-jsoneditor,
.nvr-modern-form .ace_editor,
.nvr-modern-form .ace_scroller,
.nvr-modern-form .ace_content,
.nvr-modern-form .je-form-input-label,
.nvr-modern-form .je-child-editor-holder,
.nvr-modern-form .je-object__container > div,
.nvr-modern-form .je-indented-panel > div {
  background: transparent !important;
  color: var(--nvr-text, #0f172a) !important;
}

.nvr-modern-form .jsoneditor-field,
.nvr-modern-form .jsoneditor-value,
.nvr-modern-form .jsoneditor-readonly,
.nvr-modern-form .jsoneditor-schema-error,
.nvr-modern-form .jsoneditor-tree button,
.nvr-modern-form .jsoneditor-tree table,
.nvr-modern-form .jsoneditor-tree tbody,
.nvr-modern-form .jsoneditor-tree tr,
.nvr-modern-form .jsoneditor-tree td,
.nvr-modern-form .jsoneditor-tree th,
.nvr-modern-form .je-label,
.nvr-modern-form .je-form-input-label,
.nvr-modern-form .je-object__title,
.nvr-modern-form .je-array__title {
  color: var(--nvr-text, #0f172a) !important;
}

.nvr-modern-form .jsoneditor-field,
.nvr-modern-form .jsoneditor-field[contenteditable='true'] {
  color: color-mix(in srgb, var(--nvr-primary, #2563eb) 82%, var(--nvr-text, #0f172a)) !important;
  font-weight: 750 !important;
}

.nvr-modern-form .jsoneditor-string,
.nvr-modern-form .ace_string {
  color: #059669 !important;
}

.nvr-modern-form .jsoneditor-number,
.nvr-modern-form .ace_constant.ace_numeric {
  color: #7c3aed !important;
}

.nvr-modern-form .jsoneditor-boolean,
.nvr-modern-form .jsoneditor-null,
.nvr-modern-form .ace_constant.ace_language,
.nvr-modern-form .ace_keyword {
  color: #d97706 !important;
  font-weight: 750 !important;
}

.nvr-modern-form .jsoneditor-search,
.nvr-modern-form .jsoneditor-search input,
.nvr-modern-form .jsoneditor-frame input,
.nvr-modern-form .jsoneditor-frame textarea,
.nvr-modern-form .jsoneditor-text textarea,
.nvr-modern-form .je-form-input-label + input,
.nvr-modern-form .je-form-input-label + textarea,
.nvr-modern-form .je-form-input-label + select,
.nvr-modern-form [data-schematype] input,
.nvr-modern-form [data-schematype] textarea,
.nvr-modern-form [data-schematype] select {
  border-color: color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 84%, transparent) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 96%, transparent) !important;
  color: var(--nvr-text, #0f172a) !important;
}

.nvr-modern-form .jsoneditor-highlight,
.nvr-modern-form .jsoneditor-selected,
.nvr-modern-form .ace_marker-layer .ace_active-line,
.nvr-modern-form .ace_marker-layer .ace_selection {
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 15%, transparent) !important;
}

.nvr-modern-form .ace_gutter {
  border-right: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 70%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 6%, var(--nvr-surface-solid, #fff)) !important;
  color: var(--nvr-muted, #64748b) !important;
}

.nvr-modern-form .jsoneditor-statusbar,
.nvr-modern-form .jsoneditor-navigation-bar {
  min-height: 34px !important;
  padding: .35rem .62rem !important;
  color: var(--nvr-muted, #64748b) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
}

.nvr-modern-form .jsoneditor-text-errors,
.nvr-modern-form .jsoneditor-error,
.nvr-modern-form .jsoneditor-schema-error,
.nvr-modern-form .je-error,
.nvr-modern-form .errmsg {
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--nvr-crud-danger, #dc2626) 10%, transparent) !important;
  color: var(--nvr-crud-danger, #dc2626) !important;
}

html.dark .nvr-modern-form .select2-container--krajee-bs5 .select2-selection,
html.dark .nvr-modern-form .select2-container--krajee-bs4 .select2-selection,
html.dark .nvr-modern-form .select2-container--krajee .select2-selection,
html.dark .nvr-modern-form .select2-container--bootstrap4 .select2-selection,
html.dark .nvr-modern-form .select2-container--bootstrap .select2-selection,
html.dark .nvr-modern-form .select2-container--default .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--krajee-bs5 .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--krajee-bs4 .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--krajee .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--bootstrap4 .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--bootstrap .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--default .select2-selection {
  border-color: rgba(148, 163, 184, .3) !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .82), rgba(2, 6, 23, .72)) !important;
  color: #e5e7eb !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .24) !important;
}

html.dark .nvr-modern-form .select2-container--krajee-bs5.select2-container--focus .select2-selection,
html.dark .nvr-modern-form .select2-container--krajee-bs4.select2-container--focus .select2-selection,
html.dark .nvr-modern-form .select2-container--krajee.select2-container--focus .select2-selection,
html.dark .nvr-modern-form .select2-container--bootstrap4.select2-container--focus .select2-selection,
html.dark .nvr-modern-form .select2-container--bootstrap.select2-container--focus .select2-selection,
html.dark .nvr-modern-form .select2-container--default.select2-container--focus .select2-selection,
html.dark .nvr-modern-form .select2-container--krajee-bs5.select2-container--open .select2-selection,
html.dark .nvr-modern-form .select2-container--krajee-bs4.select2-container--open .select2-selection,
html.dark .nvr-modern-form .select2-container--krajee.select2-container--open .select2-selection,
html.dark .nvr-modern-form .select2-container--bootstrap4.select2-container--open .select2-selection,
html.dark .nvr-modern-form .select2-container--bootstrap.select2-container--open .select2-selection,
html.dark .nvr-modern-form .select2-container--default.select2-container--open .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--krajee-bs5.select2-container--focus .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--krajee-bs4.select2-container--focus .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--krajee.select2-container--focus .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--bootstrap4.select2-container--focus .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--bootstrap.select2-container--focus .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--default.select2-container--focus .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--krajee-bs5.select2-container--open .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--krajee-bs4.select2-container--open .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--krajee.select2-container--open .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--bootstrap4.select2-container--open .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--bootstrap.select2-container--open .select2-selection,
body.dark-mode .nvr-modern-form .select2-container--default.select2-container--open .select2-selection {
  border-color: rgba(56, 189, 248, .72) !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .15) !important;
}

html.dark .nvr-modern-form .select2-selection__rendered,
html.dark .nvr-modern-form .select2-selection--multiple .select2-search__field,
body.dark-mode .nvr-modern-form .select2-selection__rendered,
body.dark-mode .nvr-modern-form .select2-selection--multiple .select2-search__field {
  color: #e5e7eb !important;
}

html.dark .nvr-modern-form .select2-container .select2-selection__placeholder,
html.dark .nvr-modern-form .select2-container .select2-selection__clear,
html.dark .nvr-modern-form .select2-container .select2-selection__arrow,
body.dark-mode .nvr-modern-form .select2-container .select2-selection__placeholder,
body.dark-mode .nvr-modern-form .select2-container .select2-selection__clear,
body.dark-mode .nvr-modern-form .select2-container .select2-selection__arrow {
  color: #94a3b8 !important;
}

html.dark .nvr-modern-form .select2-selection--multiple .select2-selection__choice,
body.dark-mode .nvr-modern-form .select2-selection--multiple .select2-selection__choice {
  border-color: rgba(56, 189, 248, .28) !important;
  background-color: rgba(56, 189, 248, .12) !important;
  color: #bae6fd !important;
}

html.dark .select2-dropdown,
html.dark .select2-dropdown.nvr-select2-dropdown,
html.dark .select2-container--open .select2-dropdown,
body.dark-mode .select2-dropdown,
body.dark-mode .select2-dropdown.nvr-select2-dropdown,
body.dark-mode .select2-container--open .select2-dropdown {
  border-color: rgba(148, 163, 184, .3) !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(2, 6, 23, .96)) !important;
  color: #e5e7eb !important;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, .44),
    inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html.dark .select2-dropdown .select2-search,
html.dark .select2-dropdown .select2-search--dropdown,
body.dark-mode .select2-dropdown .select2-search,
body.dark-mode .select2-dropdown .select2-search--dropdown {
  border-bottom-color: rgba(148, 163, 184, .22) !important;
}

html.dark .select2-dropdown .select2-search__field,
body.dark-mode .select2-dropdown .select2-search__field {
  border-color: rgba(148, 163, 184, .3) !important;
  background: rgba(2, 6, 23, .78) !important;
  color: #e5e7eb !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .24) !important;
}

html.dark .select2-results__option,
body.dark-mode .select2-results__option {
  color: #e5e7eb !important;
}

html.dark .select2-results__option--highlighted,
html.dark .select2-container--default .select2-results__option--highlighted[aria-selected],
html.dark .select2-container--bootstrap .select2-results__option--highlighted[aria-selected],
html.dark .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected],
html.dark .select2-container--krajee .select2-results__option--highlighted[aria-selected],
html.dark .select2-container--krajee-bs4 .select2-results__option--highlighted[aria-selected],
html.dark .select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected],
body.dark-mode .select2-results__option--highlighted,
body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected],
body.dark-mode .select2-container--bootstrap .select2-results__option--highlighted[aria-selected],
body.dark-mode .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected],
body.dark-mode .select2-container--krajee .select2-results__option--highlighted[aria-selected],
body.dark-mode .select2-container--krajee-bs4 .select2-results__option--highlighted[aria-selected],
body.dark-mode .select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected] {
  background: rgba(56, 189, 248, .14) !important;
  color: #7dd3fc !important;
}

html.dark .select2-results__option[aria-selected='true'],
html.dark .select2-results__option--selected,
body.dark-mode .select2-results__option[aria-selected='true'],
body.dark-mode .select2-results__option--selected {
  background: linear-gradient(135deg, #2563eb, #0891b2) !important;
  color: #fff !important;
}

html.dark .nvr-modern-form .jsoneditor,
html.dark .nvr-modern-form .json-editor,
html.dark .nvr-modern-form .json-editor-container,
html.dark .nvr-modern-form .json-editor-btntype-properties,
html.dark .nvr-modern-form .kv-editor-container,
html.dark .nvr-modern-form .je-ready,
html.dark .nvr-modern-form .je-object__container,
html.dark .nvr-modern-form .je-indented-panel,
html.dark .nvr-modern-form [data-schematype='object'],
html.dark .nvr-modern-form [data-schematype='array'],
body.dark-mode .nvr-modern-form .jsoneditor,
body.dark-mode .nvr-modern-form .json-editor,
body.dark-mode .nvr-modern-form .json-editor-container,
body.dark-mode .nvr-modern-form .json-editor-btntype-properties,
body.dark-mode .nvr-modern-form .kv-editor-container,
body.dark-mode .nvr-modern-form .je-ready,
body.dark-mode .nvr-modern-form .je-object__container,
body.dark-mode .nvr-modern-form .je-indented-panel,
body.dark-mode .nvr-modern-form [data-schematype='object'],
body.dark-mode .nvr-modern-form [data-schematype='array'] {
  border-color: rgba(148, 163, 184, .26) !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .78), rgba(2, 6, 23, .64)) !important;
  color: #e5e7eb !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .24) !important;
}

html.dark .nvr-modern-form .jsoneditor-menu,
html.dark .nvr-modern-form .jsoneditor-navigation-bar,
html.dark .nvr-modern-form .jsoneditor-statusbar,
html.dark .nvr-modern-form .je-header,
html.dark .nvr-modern-form .je-object__title,
html.dark .nvr-modern-form .je-panel__heading,
html.dark .nvr-modern-form .je-object__controls,
body.dark-mode .nvr-modern-form .jsoneditor-menu,
body.dark-mode .nvr-modern-form .jsoneditor-navigation-bar,
body.dark-mode .nvr-modern-form .jsoneditor-statusbar,
body.dark-mode .nvr-modern-form .je-header,
body.dark-mode .nvr-modern-form .je-object__title,
body.dark-mode .nvr-modern-form .je-panel__heading,
body.dark-mode .nvr-modern-form .je-object__controls {
  border-color: rgba(148, 163, 184, .22) !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, .92), rgba(15, 23, 42, .86)) !important;
  color: #f8fafc !important;
}

html.dark .nvr-modern-form .jsoneditor-outer,
html.dark .nvr-modern-form .jsoneditor-tree,
html.dark .nvr-modern-form .jsoneditor-treepath,
html.dark .nvr-modern-form .jsoneditor-frame,
html.dark .nvr-modern-form .jsoneditor-values,
html.dark .nvr-modern-form .jsoneditor-text,
html.dark .nvr-modern-form .ace-jsoneditor,
html.dark .nvr-modern-form .ace_editor,
html.dark .nvr-modern-form .ace_scroller,
html.dark .nvr-modern-form .ace_content,
html.dark .nvr-modern-form .je-form-input-label,
html.dark .nvr-modern-form .je-child-editor-holder,
html.dark .nvr-modern-form .je-object__container > div,
html.dark .nvr-modern-form .je-indented-panel > div,
body.dark-mode .nvr-modern-form .jsoneditor-outer,
body.dark-mode .nvr-modern-form .jsoneditor-tree,
body.dark-mode .nvr-modern-form .jsoneditor-treepath,
body.dark-mode .nvr-modern-form .jsoneditor-frame,
body.dark-mode .nvr-modern-form .jsoneditor-values,
body.dark-mode .nvr-modern-form .jsoneditor-text,
body.dark-mode .nvr-modern-form .ace-jsoneditor,
body.dark-mode .nvr-modern-form .ace_editor,
body.dark-mode .nvr-modern-form .ace_scroller,
body.dark-mode .nvr-modern-form .ace_content,
body.dark-mode .nvr-modern-form .je-form-input-label,
body.dark-mode .nvr-modern-form .je-child-editor-holder,
body.dark-mode .nvr-modern-form .je-object__container > div,
body.dark-mode .nvr-modern-form .je-indented-panel > div {
  background: transparent !important;
  color: #e5e7eb !important;
}

html.dark .nvr-modern-form .jsoneditor-field,
html.dark .nvr-modern-form .jsoneditor-value,
html.dark .nvr-modern-form .jsoneditor-readonly,
html.dark .nvr-modern-form .jsoneditor-schema-error,
html.dark .nvr-modern-form .jsoneditor-tree button,
html.dark .nvr-modern-form .jsoneditor-tree table,
html.dark .nvr-modern-form .jsoneditor-tree tbody,
html.dark .nvr-modern-form .jsoneditor-tree tr,
html.dark .nvr-modern-form .jsoneditor-tree td,
html.dark .nvr-modern-form .jsoneditor-tree th,
html.dark .nvr-modern-form .je-label,
html.dark .nvr-modern-form .je-form-input-label,
html.dark .nvr-modern-form .je-object__title,
html.dark .nvr-modern-form .je-array__title,
body.dark-mode .nvr-modern-form .jsoneditor-field,
body.dark-mode .nvr-modern-form .jsoneditor-value,
body.dark-mode .nvr-modern-form .jsoneditor-readonly,
body.dark-mode .nvr-modern-form .jsoneditor-schema-error,
body.dark-mode .nvr-modern-form .jsoneditor-tree button,
body.dark-mode .nvr-modern-form .jsoneditor-tree table,
body.dark-mode .nvr-modern-form .jsoneditor-tree tbody,
body.dark-mode .nvr-modern-form .jsoneditor-tree tr,
body.dark-mode .nvr-modern-form .jsoneditor-tree td,
body.dark-mode .nvr-modern-form .jsoneditor-tree th,
body.dark-mode .nvr-modern-form .je-label,
body.dark-mode .nvr-modern-form .je-form-input-label,
body.dark-mode .nvr-modern-form .je-object__title,
body.dark-mode .nvr-modern-form .je-array__title {
  color: #e5e7eb !important;
}

html.dark .nvr-modern-form .jsoneditor-field,
html.dark .nvr-modern-form .jsoneditor-field[contenteditable='true'],
body.dark-mode .nvr-modern-form .jsoneditor-field,
body.dark-mode .nvr-modern-form .jsoneditor-field[contenteditable='true'] {
  color: #7dd3fc !important;
}

html.dark .nvr-modern-form .jsoneditor-string,
html.dark .nvr-modern-form .ace_string,
body.dark-mode .nvr-modern-form .jsoneditor-string,
body.dark-mode .nvr-modern-form .ace_string {
  color: #86efac !important;
}

html.dark .nvr-modern-form .jsoneditor-number,
html.dark .nvr-modern-form .ace_constant.ace_numeric,
body.dark-mode .nvr-modern-form .jsoneditor-number,
body.dark-mode .nvr-modern-form .ace_constant.ace_numeric {
  color: #c4b5fd !important;
}

html.dark .nvr-modern-form .jsoneditor-boolean,
html.dark .nvr-modern-form .jsoneditor-null,
html.dark .nvr-modern-form .ace_constant.ace_language,
html.dark .nvr-modern-form .ace_keyword,
body.dark-mode .nvr-modern-form .jsoneditor-boolean,
body.dark-mode .nvr-modern-form .jsoneditor-null,
body.dark-mode .nvr-modern-form .ace_constant.ace_language,
body.dark-mode .nvr-modern-form .ace_keyword {
  color: #fbbf24 !important;
}

html.dark .nvr-modern-form .jsoneditor-search,
html.dark .nvr-modern-form .jsoneditor-search input,
html.dark .nvr-modern-form .jsoneditor-frame input,
html.dark .nvr-modern-form .jsoneditor-frame textarea,
html.dark .nvr-modern-form .jsoneditor-text textarea,
html.dark .nvr-modern-form [data-schematype] input,
html.dark .nvr-modern-form [data-schematype] textarea,
html.dark .nvr-modern-form [data-schematype] select,
body.dark-mode .nvr-modern-form .jsoneditor-search,
body.dark-mode .nvr-modern-form .jsoneditor-search input,
body.dark-mode .nvr-modern-form .jsoneditor-frame input,
body.dark-mode .nvr-modern-form .jsoneditor-frame textarea,
body.dark-mode .nvr-modern-form .jsoneditor-text textarea,
body.dark-mode .nvr-modern-form [data-schematype] input,
body.dark-mode .nvr-modern-form [data-schematype] textarea,
body.dark-mode .nvr-modern-form [data-schematype] select {
  border-color: rgba(148, 163, 184, .28) !important;
  background: rgba(2, 6, 23, .72) !important;
  color: #e5e7eb !important;
}

html.dark .nvr-modern-form .jsoneditor-highlight,
html.dark .nvr-modern-form .jsoneditor-selected,
html.dark .nvr-modern-form .ace_marker-layer .ace_active-line,
html.dark .nvr-modern-form .ace_marker-layer .ace_selection,
body.dark-mode .nvr-modern-form .jsoneditor-highlight,
body.dark-mode .nvr-modern-form .jsoneditor-selected,
body.dark-mode .nvr-modern-form .ace_marker-layer .ace_active-line,
body.dark-mode .nvr-modern-form .ace_marker-layer .ace_selection {
  background: rgba(56, 189, 248, .16) !important;
}

html.dark .nvr-modern-form .ace_gutter,
body.dark-mode .nvr-modern-form .ace_gutter {
  border-right-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .9) !important;
  color: #94a3b8 !important;
}

html.dark .nvr-modern-form .jsoneditor-menu button,
html.dark .nvr-modern-form .jsoneditor-menu .jsoneditor-button,
html.dark .nvr-modern-form .json-editor-btntype-properties .btn,
html.dark .nvr-modern-form .json-editor-btn,
html.dark .nvr-modern-form .json-editor-btn-add,
html.dark .nvr-modern-form .json-editor-btn-delete,
html.dark .nvr-modern-form .json-editor-btn-collapse,
html.dark .nvr-modern-form .je-object__controls button,
html.dark .nvr-modern-form .je-array-controls button,
html.dark .nvr-modern-form .je-header button,
body.dark-mode .nvr-modern-form .jsoneditor-menu button,
body.dark-mode .nvr-modern-form .jsoneditor-menu .jsoneditor-button,
body.dark-mode .nvr-modern-form .json-editor-btntype-properties .btn,
body.dark-mode .nvr-modern-form .json-editor-btn,
body.dark-mode .nvr-modern-form .json-editor-btn-add,
body.dark-mode .nvr-modern-form .json-editor-btn-delete,
body.dark-mode .nvr-modern-form .json-editor-btn-collapse,
body.dark-mode .nvr-modern-form .je-object__controls button,
body.dark-mode .nvr-modern-form .je-array-controls button,
body.dark-mode .nvr-modern-form .je-header button {
  border-color: rgba(56, 189, 248, .28) !important;
  background-color: rgba(56, 189, 248, .12) !important;
  color: #bae6fd !important;
}

/* =========================================================
   JSONEditor toolbar buttons
   Keep the original jsoneditor-icons.svg sprite from the vendor CSS.
   Do not use the background shorthand here, because it removes
   JSONEditor's background-image and makes toolbar/search icons disappear.
   ========================================================= */
.nvr-modern-form .jsoneditor-menu > button:not(.jsoneditor-modes),
.nvr-modern-form .jsoneditor-menu .jsoneditor-search button,
.nvr-modern-form .jsoneditor-menu .jsoneditor-frame button {
  position: relative !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  overflow: hidden !important;
  color: var(--nvr-primary, #2563eb) !important;
  background-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 10%, transparent) !important;
  background-repeat: no-repeat !important;
}

.nvr-modern-form .jsoneditor-menu > button:not(.jsoneditor-modes):hover,
.nvr-modern-form .jsoneditor-menu .jsoneditor-search button:hover,
.nvr-modern-form .jsoneditor-menu .jsoneditor-frame button:hover {
  background-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 16%, transparent) !important;
}

.nvr-modern-form .jsoneditor-menu button[disabled],
.nvr-modern-form .jsoneditor-menu button:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.nvr-modern-form .jsoneditor-menu .jsoneditor-search,
.nvr-modern-form .jsoneditor-menu .jsoneditor-frame {
  display: inline-flex !important;
  align-items: center !important;
  gap: .25rem !important;
}

.nvr-modern-form .jsoneditor-menu .jsoneditor-frame {
  min-height: 36px !important;
  padding: .16rem .22rem !important;
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 76%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 93%, transparent) !important;
}

.nvr-modern-form .jsoneditor-menu .jsoneditor-frame input {
  min-height: 30px !important;
  border-radius: 10px !important;
}

html.dark .nvr-modern-form .jsoneditor-menu > button:not(.jsoneditor-modes),
html.dark .nvr-modern-form .jsoneditor-menu .jsoneditor-search button,
html.dark .nvr-modern-form .jsoneditor-menu .jsoneditor-frame button,
body.dark-mode .nvr-modern-form .jsoneditor-menu > button:not(.jsoneditor-modes),
body.dark-mode .nvr-modern-form .jsoneditor-menu .jsoneditor-search button,
body.dark-mode .nvr-modern-form .jsoneditor-menu .jsoneditor-frame button {
  color: #7dd3fc !important;
  border-color: rgba(56, 189, 248, .28) !important;
  background-color: rgba(14, 165, 233, .13) !important;
}

html.dark .nvr-modern-form .jsoneditor-menu .jsoneditor-frame,
body.dark-mode .nvr-modern-form .jsoneditor-menu .jsoneditor-frame {
  border-color: rgba(148, 163, 184, .24) !important;
  background: rgba(2, 6, 23, .58) !important;
}

/* =========================================================
   JSONEditor search bar polish
   Keep the toolbar icons visible, but make the search control a clean
   compact pill. This overrides JSONEditor's default absolute/float search
   styling that can make the input look detached in dark mode.
   ========================================================= */
.nvr-modern-form .jsoneditor-menu {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .28rem !important;
  overflow: visible !important;
}

.nvr-modern-form .jsoneditor-menu > .jsoneditor-search,
.nvr-modern-form .jsoneditor-menu .jsoneditor-search {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  height: auto !important;
  min-height: 36px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-results {
  position: absolute !important;
  right: 100% !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  margin-right: .45rem !important;
  padding: .18rem .42rem !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 10%, var(--nvr-surface-solid, #fff)) !important;
  color: var(--nvr-muted, #64748b) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-results:empty {
  display: none !important;
}

.nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .18rem !important;
  width: clamp(190px, 24vw, 280px) !important;
  min-width: 190px !important;
  max-width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: .18rem .22rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 78%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 96%, var(--nvr-primary, #2563eb) 3%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 10px 24px rgba(15, 23, 42, .08) !important;
  overflow: hidden !important;
}

.nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame:focus-within {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 70%, white) !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--nvr-primary, #2563eb) 18%, transparent),
    0 12px 28px rgba(15, 23, 42, .12) !important;
}

.nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: .25rem .5rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .82rem !important;
  font-weight: 650 !important;
  outline: none !important;
  box-shadow: none !important;
}

.nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame input::placeholder {
  color: var(--nvr-muted, #64748b) !important;
  opacity: .82 !important;
}

.nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame button {
  flex: 0 0 30px !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  color: color-mix(in srgb, var(--nvr-primary, #2563eb) 86%, var(--nvr-text, #0f172a)) !important;
  box-shadow: none !important;
}

.nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame button:hover {
  background-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 24%, transparent) !important;
  transform: none !important;
  box-shadow: none !important;
}

html.dark .nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-results,
body.dark-mode .nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-results {
  background: rgba(14, 165, 233, .12) !important;
  color: #cbd5e1 !important;
}

html.dark .nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame,
body.dark-mode .nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame {
  border-color: rgba(56, 189, 248, .28) !important;
  background: rgba(2, 6, 23, .58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 14px 34px rgba(0, 0, 0, .22) !important;
}

html.dark .nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame:focus-within,
body.dark-mode .nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame:focus-within {
  border-color: rgba(125, 211, 252, .58) !important;
  box-shadow:
    0 0 0 4px rgba(14, 165, 233, .16),
    0 16px 40px rgba(0, 0, 0, .32) !important;
}

html.dark .nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame input,
body.dark-mode .nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame input {
  background: transparent !important;
  color: #e5e7eb !important;
  border: 0 !important;
}

html.dark .nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame input::placeholder,
body.dark-mode .nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame input::placeholder {
  color: #94a3b8 !important;
}

html.dark .nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame button,
body.dark-mode .nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame button {
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  color: #7dd3fc !important;
  border-color: transparent !important;
}

html.dark .nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame button:hover,
body.dark-mode .nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame button:hover {
  background-color: rgba(14, 165, 233, .18) !important;
  border-color: rgba(125, 211, 252, .22) !important;
}

@media (max-width: 640px) {
  .nvr-modern-form .jsoneditor-menu > .jsoneditor-search,
  .nvr-modern-form .jsoneditor-menu .jsoneditor-search {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: stretch !important;
  }

  .nvr-modern-form .jsoneditor-menu .jsoneditor-search .jsoneditor-frame {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   JSONEditor context menu polish
   ContextMenu uses its own ul.jsoneditor-menu, so reset the form toolbar
   flex/button overrides here to prevent the menu from being clipped or
   rendered like the top toolbar.
   ========================================================= */
.nvr-modern-form .jsoneditor,
.nvr-modern-form .jsoneditor-outer,
.nvr-modern-form .jsoneditor-anchor,
.nvr-modern-form .jsoneditor-contextmenu-root,
.nvr-modern-form .jsoneditor-contextmenu {
  overflow: visible !important;
}

.nvr-modern-form .jsoneditor,
.nvr-modern-form .json-editor-container,
.nvr-modern-form .kv-editor-container {
  overflow: visible !important;
}

.nvr-modern-form .jsoneditor-anchor {
  z-index: 1090 !important;
  pointer-events: auto !important;
}

.nvr-modern-form .jsoneditor-contextmenu-root {
  width: 0 !important;
  height: 0 !important;
  position: relative !important;
  z-index: 1091 !important;
}

.nvr-modern-form .jsoneditor-contextmenu {
  box-sizing: border-box !important;
  z-index: 1092 !important;
  min-width: 12.5rem !important;
  max-width: min(18rem, calc(100vw - 2rem)) !important;
  animation: nvrJsonEditorContextMenuIn .16s ease both;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu {
  display: block !important;
  flex: none !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: 12.5rem !important;
  min-width: 12.5rem !important;
  max-width: min(18rem, calc(100vw - 2rem)) !important;
  height: auto !important;
  max-height: min(22rem, calc(100vh - 7rem)) !important;
  margin: 0 !important;
  padding: .38rem !important;
  list-style: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 84%, transparent) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 96%, var(--nvr-primary, #2563eb) 3%),
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 94%, transparent)
    ) !important;
  color: var(--nvr-text, #0f172a) !important;
  box-shadow:
    0 24px 70px rgba(15, 23, 42, .18),
    0 8px 22px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255, 255, 255, .38) !important;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu::-webkit-scrollbar {
  width: 8px;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 36%, transparent);
  background-clip: padding-box;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu li {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: .52rem .72rem .52rem 2.25rem !important;
  border: 0 !important;
  border-radius: 12px !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--nvr-text, #0f172a) !important;
  cursor: pointer !important;
  font-family: var(--nvr-font, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
  font-size: .82rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: nowrap !important;
  transition:
    transform .16s ease,
    background-color .16s ease,
    color .16s ease !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button:hover,
.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button:focus {
  transform: translateX(2px) !important;
  background-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 12%, transparent) !important;
  color: color-mix(in srgb, var(--nvr-primary, #2563eb) 86%, var(--nvr-text, #0f172a)) !important;
  outline: none !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover,
.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus {
  background: linear-gradient(135deg, var(--nvr-primary, #2563eb), var(--nvr-primary-2, #06b6d4)) !important;
  color: #fff !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-icon {
  position: absolute !important;
  top: 50% !important;
  left: .48rem !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transform: translateY(-50%) !important;
  background-repeat: no-repeat !important;
  opacity: .86 !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-text,
.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-text.jsoneditor-right-margin {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-separator {
  height: 0 !important;
  margin: .36rem .28rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 76%, transparent) !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-default {
  width: calc(100% - 2.15rem) !important;
  padding-right: .5rem !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 2.1rem !important;
  min-width: 2.1rem !important;
  max-width: 2.1rem !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-left: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 72%, transparent) !important;
  border-radius: 0 12px 12px 0 !important;
  background-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 7%, transparent) !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button .jsoneditor-expand,
.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu li button .jsoneditor-expand {
  position: absolute !important;
  top: 50% !important;
  right: .56rem !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  background-repeat: no-repeat !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu li ul.jsoneditor-menu {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  width: calc(100% + .15rem) !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: .28rem 0 .2rem !important;
  padding: .32rem !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 7%, transparent) !important;
  box-shadow: inset 0 1px 8px rgba(15, 23, 42, .08) !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu li.jsoneditor-selected > ul.jsoneditor-menu {
  overflow: hidden !important;
}

html.dark .nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu,
body.dark-mode .nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu {
  border-color: rgba(148, 163, 184, .26) !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(2, 6, 23, .96)) !important;
  color: #e5e7eb !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .46),
    inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

html.dark .nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button,
body.dark-mode .nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button {
  color: #e5e7eb !important;
  background-color: transparent !important;
}

html.dark .nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button:hover,
html.dark .nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button:focus,
body.dark-mode .nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button:hover,
body.dark-mode .nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button:focus {
  background-color: rgba(56, 189, 248, .14) !important;
  color: #7dd3fc !important;
}

html.dark .nvr-modern-form .jsoneditor-contextmenu .jsoneditor-separator,
body.dark-mode .nvr-modern-form .jsoneditor-contextmenu .jsoneditor-separator {
  border-top-color: rgba(148, 163, 184, .22) !important;
}

html.dark .nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand,
body.dark-mode .nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand {
  border-left-color: rgba(148, 163, 184, .22) !important;
  background-color: rgba(56, 189, 248, .10) !important;
}

html.dark .nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu li ul.jsoneditor-menu,
body.dark-mode .nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu li ul.jsoneditor-menu {
  background: rgba(56, 189, 248, .08) !important;
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, .26) !important;
}

@keyframes nvrJsonEditorContextMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   JSONEditor toolbar icon final polish
   Replace the hard-to-align JSONEditor sprite on the main toolbar with
   Font Awesome pseudo icons. This is scoped only to the real editor toolbar
   (.jsoneditor > .jsoneditor-menu) so context menus keep their own layout.
   ========================================================= */
.nvr-modern-form .jsoneditor > .jsoneditor-menu {
  min-height: 46px !important;
  padding: .42rem .55rem !important;
  gap: .34rem !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu > button:not(.jsoneditor-modes),
.nvr-modern-form .jsoneditor > .jsoneditor-menu .jsoneditor-search .jsoneditor-frame > button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--nvr-primary, #2563eb) 28%, transparent) !important;
  background-image: none !important;
  background-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 12%, transparent) !important;
  background-position: center !important;
  color: color-mix(in srgb, var(--nvr-primary, #2563eb) 88%, var(--nvr-text, #0f172a)) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background-color .16s ease,
    color .16s ease,
    box-shadow .16s ease !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu > button:not(.jsoneditor-modes)::before,
.nvr-modern-form .jsoneditor > .jsoneditor-menu .jsoneditor-search .jsoneditor-frame > button::before {
  display: block !important;
  width: 1em !important;
  height: 1em !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome, sans-serif !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  color: currentColor !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu > button:not(.jsoneditor-modes):hover,
.nvr-modern-form .jsoneditor > .jsoneditor-menu .jsoneditor-search .jsoneditor-frame > button:hover {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 46%, transparent) !important;
  background-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 18%, transparent) !important;
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--nvr-primary, #2563eb) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu > button:not(.jsoneditor-modes):active,
.nvr-modern-form .jsoneditor > .jsoneditor-menu .jsoneditor-search .jsoneditor-frame > button:active {
  transform: translateY(0) scale(.96) !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu > button:disabled,
.nvr-modern-form .jsoneditor > .jsoneditor-menu > button[disabled],
.nvr-modern-form .jsoneditor > .jsoneditor-menu .jsoneditor-search .jsoneditor-frame > button:disabled,
.nvr-modern-form .jsoneditor > .jsoneditor-menu .jsoneditor-search .jsoneditor-frame > button[disabled] {
  cursor: not-allowed !important;
  opacity: .5 !important;
  transform: none !important;
  box-shadow: none !important;
  color: var(--nvr-muted, #64748b) !important;
  background-color: color-mix(in srgb, var(--nvr-muted, #64748b) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 80%, transparent) !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu > button.jsoneditor-separator {
  margin-left: .45rem !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu > button.jsoneditor-expand-all::before {
  content: "\f067" !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu > button.jsoneditor-collapse-all::before {
  content: "\f068" !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu > button.jsoneditor-sort::before {
  content: "\f0dc" !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu > button.jsoneditor-transform::before {
  content: "\f0b0" !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu > button.jsoneditor-undo::before {
  content: "\f0e2" !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu > button.jsoneditor-redo::before {
  content: "\f01e" !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu .jsoneditor-search .jsoneditor-frame > button.jsoneditor-refresh::before {
  content: "\f021" !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu .jsoneditor-search .jsoneditor-frame > button.jsoneditor-next::before {
  content: "\f105" !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu .jsoneditor-search .jsoneditor-frame > button.jsoneditor-previous::before {
  content: "\f104" !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu > .jsoneditor-modes {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  margin: 0 !important;
  float: none !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu > .jsoneditor-modes > button.jsoneditor-modes {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 74px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 .78rem !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--nvr-primary, #2563eb) 36%, transparent) !important;
  background-image: none !important;
  background-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 12%, transparent) !important;
  color: color-mix(in srgb, var(--nvr-primary, #2563eb) 82%, var(--nvr-text, #0f172a)) !important;
  font-size: .86rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu > .jsoneditor-modes > button.jsoneditor-modes:hover {
  transform: translateY(-1px) !important;
  background-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 18%, transparent) !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--nvr-primary, #2563eb) 16%, transparent) !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu .jsoneditor-search .jsoneditor-frame {
  height: 36px !important;
  min-height: 36px !important;
  padding: .12rem .18rem !important;
}

.nvr-modern-form .jsoneditor > .jsoneditor-menu .jsoneditor-search .jsoneditor-frame > input {
  height: 30px !important;
  min-height: 30px !important;
}

html.dark .nvr-modern-form .jsoneditor > .jsoneditor-menu > button:not(.jsoneditor-modes),
html.dark .nvr-modern-form .jsoneditor > .jsoneditor-menu .jsoneditor-search .jsoneditor-frame > button,
body.dark-mode .nvr-modern-form .jsoneditor > .jsoneditor-menu > button:not(.jsoneditor-modes),
body.dark-mode .nvr-modern-form .jsoneditor > .jsoneditor-menu .jsoneditor-search .jsoneditor-frame > button {
  border-color: rgba(56, 189, 248, .34) !important;
  background-color: rgba(14, 165, 233, .14) !important;
  color: #7dd3fc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

html.dark .nvr-modern-form .jsoneditor > .jsoneditor-menu > button:not(.jsoneditor-modes):hover,
html.dark .nvr-modern-form .jsoneditor > .jsoneditor-menu .jsoneditor-search .jsoneditor-frame > button:hover,
body.dark-mode .nvr-modern-form .jsoneditor > .jsoneditor-menu > button:not(.jsoneditor-modes):hover,
body.dark-mode .nvr-modern-form .jsoneditor > .jsoneditor-menu .jsoneditor-search .jsoneditor-frame > button:hover {
  border-color: rgba(125, 211, 252, .46) !important;
  background-color: rgba(14, 165, 233, .22) !important;
  color: #bae6fd !important;
  box-shadow: 0 12px 28px rgba(14, 165, 233, .18) !important;
}

html.dark .nvr-modern-form .jsoneditor > .jsoneditor-menu > button:disabled,
html.dark .nvr-modern-form .jsoneditor > .jsoneditor-menu > button[disabled],
body.dark-mode .nvr-modern-form .jsoneditor > .jsoneditor-menu > button:disabled,
body.dark-mode .nvr-modern-form .jsoneditor > .jsoneditor-menu > button[disabled] {
  border-color: rgba(148, 163, 184, .18) !important;
  background-color: rgba(148, 163, 184, .08) !important;
  color: #64748b !important;
}

html.dark .nvr-modern-form .jsoneditor > .jsoneditor-menu > .jsoneditor-modes > button.jsoneditor-modes,
body.dark-mode .nvr-modern-form .jsoneditor > .jsoneditor-menu > .jsoneditor-modes > button.jsoneditor-modes {
  border-color: rgba(125, 211, 252, .52) !important;
  background-color: rgba(14, 165, 233, .14) !important;
  color: #e0f2fe !important;
}

/* =========================================================
   JSONEditor context menu submenu expand/collapse fix
   The JSONEditor context menu also uses ul.jsoneditor-menu. The toolbar
   polish must not force nested submenu lists to display:block/height:auto,
   otherwise the built-in _onExpandItem toggle has no visible effect.
   ========================================================= */
.nvr-modern-form .jsoneditor-contextmenu > .jsoneditor-menu {
  display: block !important;
  height: auto !important;
  max-height: min(22rem, calc(100vh - 7rem)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu li > ul.jsoneditor-menu {
  display: none !important;
  height: 0 !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 .32rem !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-3px) !important;
  transition:
    opacity .18s ease,
    transform .18s ease !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu li.jsoneditor-selected > ul.jsoneditor-menu {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  margin: .28rem 0 .2rem !important;
  padding: .32rem !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button[type='button'] {
  pointer-events: auto !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button > .jsoneditor-icon,
.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button > .jsoneditor-text,
.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button > .jsoneditor-expand {
  pointer-events: none !important;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button:not(.jsoneditor-expand) > .jsoneditor-expand::before,
.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand > .jsoneditor-expand::before {
  content: "\f105";
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
  font-weight: 900;
  font-size: .72rem;
  color: currentColor;
  opacity: .78;
  transition: transform .18s ease, opacity .18s ease;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu li.jsoneditor-selected > button:not(.jsoneditor-expand) > .jsoneditor-expand::before,
.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu li.jsoneditor-selected > button.jsoneditor-expand > .jsoneditor-expand::before {
  transform: rotate(90deg);
  opacity: 1;
}

.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-type-auto,
.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-append,
.nvr-modern-form .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-insert {
  cursor: pointer !important;
}

/* =========================================================
   NVR ActiveForm radio buttons - restore button style
   Markup referensi: .btn-groupx dengan label .btn.btn-primary.btnlist.
   Bagian ini sengaja diletakkan di akhir file untuk menimpa polish radio sebelumnya.
   ========================================================= */
.nvr-modern-form .btn-groupx,
.nvr-modern-form .radioc-group,
.nvr-modern-form .btn-group.btn-group-toggle,
.nvr-modern-form .btn-group-toggle[role='radiogroup'],
.nvr-modern-form [role='radiogroup'].btn-group-toggle,
.nvr-modern-form [role='radiogroup'].btn-groupx {
  position: relative !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .42rem !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: auto !important;
}

.nvr-modern-form .btn-groupx input[type='radio'],
.nvr-modern-form .btn-group-toggle input[type='radio'],
.nvr-modern-form .radioc-group input[type='radio'],
.nvr-modern-form [role='radiogroup'] input[type='radio'] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
}

.nvr-modern-form .btnlist,
.nvr-modern-form .btn-groupx > label,
.nvr-modern-form .btn-groupx .btn,
.nvr-modern-form .btn-group-toggle > label,
.nvr-modern-form .btn-group-toggle .btn,
.nvr-modern-form .radioc-group > label,
.nvr-modern-form .radioc-group .btn {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .35rem !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: .55rem .9rem !important;
  border-radius: 12px !important;
  border: 1px solid color-mix(in srgb, var(--nvr-primary, #2563eb) 38%, transparent) !important;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--nvr-primary, #2563eb) 86%, #ffffff 8%),
      color-mix(in srgb, var(--nvr-primary-2, #06b6d4) 82%, var(--nvr-primary, #2563eb) 18%)
    ) !important;
  color: #ffffff !important;
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--nvr-primary, #2563eb) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  cursor: pointer !important;
  user-select: none !important;
  font-size: .82rem !important;
  font-weight: 850 !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
  text-transform: none !important;
  opacity: .82 !important;
  transition:
    transform .16s ease,
    opacity .16s ease,
    filter .16s ease,
    border-color .16s ease,
    box-shadow .16s ease !important;
}

.nvr-modern-form .btnlist::before,
.nvr-modern-form .btn-groupx > label::before,
.nvr-modern-form .btn-group-toggle > label::before,
.nvr-modern-form .radioc-group > label::before {
  display: none !important;
  content: none !important;
}

.nvr-modern-form .btnlist:hover,
.nvr-modern-form .btn-groupx > label:hover,
.nvr-modern-form .btn-groupx .btn:hover,
.nvr-modern-form .btn-group-toggle > label:hover,
.nvr-modern-form .btn-group-toggle .btn:hover,
.nvr-modern-form .radioc-group > label:hover,
.nvr-modern-form .radioc-group .btn:hover {
  transform: translateY(-1px) !important;
  opacity: 1 !important;
  filter: brightness(1.05) !important;
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--nvr-primary, #2563eb) 92%, #ffffff 6%),
      color-mix(in srgb, var(--nvr-primary-2, #06b6d4) 88%, var(--nvr-primary, #2563eb) 12%)
    ) !important;
  box-shadow:
    0 12px 26px color-mix(in srgb, var(--nvr-primary, #2563eb) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

.nvr-modern-form .btnlist.active,
.nvr-modern-form .btnlist:has(input[type='radio']:checked),
.nvr-modern-form .btn-groupx > label.active,
.nvr-modern-form .btn-groupx > label:has(input[type='radio']:checked),
.nvr-modern-form .btn-groupx .btn.active,
.nvr-modern-form .btn-group-toggle > label.active,
.nvr-modern-form .btn-group-toggle > label:has(input[type='radio']:checked),
.nvr-modern-form .btn-group-toggle .btn.active,
.nvr-modern-form .radioc-group > label.active,
.nvr-modern-form .radioc-group > label:has(input[type='radio']:checked),
.nvr-modern-form .radioc-group .btn.active {
  opacity: 1 !important;
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 68%, #ffffff 12%) !important;
  background:
    linear-gradient(135deg, var(--nvr-primary, #2563eb), var(--nvr-primary-2, #06b6d4)) !important;
  color: #ffffff !important;
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--nvr-primary, #2563eb) 34%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .24),
    inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

.nvr-modern-form .btnlist.active::after,
.nvr-modern-form .btnlist:has(input[type='radio']:checked)::after,
.nvr-modern-form .btn-groupx > label.active::after,
.nvr-modern-form .btn-groupx > label:has(input[type='radio']:checked)::after,
.nvr-modern-form .btn-group-toggle > label.active::after,
.nvr-modern-form .btn-group-toggle > label:has(input[type='radio']:checked)::after,
.nvr-modern-form .radioc-group > label.active::after,
.nvr-modern-form .radioc-group > label:has(input[type='radio']:checked)::after {
  content: '\f00c';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .95rem;
  height: .95rem;
  margin-left: .08rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
  font-family: 'Font Awesome 5 Free', 'FontAwesome', Arial, sans-serif;
  font-size: .62rem;
  font-weight: 900;
  line-height: 1;
}

.nvr-modern-form .btnlist:active,
.nvr-modern-form .btn-groupx > label:active,
.nvr-modern-form .btn-group-toggle > label:active,
.nvr-modern-form .radioc-group > label:active {
  transform: translateY(0) scale(.98) !important;
}

.nvr-modern-form .btnlist:focus-visible,
.nvr-modern-form .btn-groupx > label:focus-visible,
.nvr-modern-form .btn-group-toggle > label:focus-visible,
.nvr-modern-form .radioc-group > label:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--nvr-primary, #2563eb) 22%, transparent),
    0 12px 26px color-mix(in srgb, var(--nvr-primary, #2563eb) 26%, transparent) !important;
}

.nvr-modern-form .inline-row .control-label,
.nvr-modern-form .inline-row label.control-label {
  display: inline-flex !important;
  margin-bottom: .5rem !important;
}

html.dark .nvr-modern-form .btn-groupx,
html.dark .nvr-modern-form .radioc-group,
html.dark .nvr-modern-form .btn-group.btn-group-toggle,
html.dark .nvr-modern-form .btn-group-toggle[role='radiogroup'],
html.dark .nvr-modern-form [role='radiogroup'].btn-group-toggle,
html.dark .nvr-modern-form [role='radiogroup'].btn-groupx,
body.dark-mode .nvr-modern-form .btn-groupx,
body.dark-mode .nvr-modern-form .radioc-group,
body.dark-mode .nvr-modern-form .btn-group.btn-group-toggle,
body.dark-mode .nvr-modern-form .btn-group-toggle[role='radiogroup'],
body.dark-mode .nvr-modern-form [role='radiogroup'].btn-group-toggle,
body.dark-mode .nvr-modern-form [role='radiogroup'].btn-groupx {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.dark .nvr-modern-form .btnlist,
html.dark .nvr-modern-form .btn-groupx > label,
html.dark .nvr-modern-form .btn-groupx .btn,
html.dark .nvr-modern-form .btn-group-toggle > label,
html.dark .nvr-modern-form .btn-group-toggle .btn,
html.dark .nvr-modern-form .radioc-group > label,
html.dark .nvr-modern-form .radioc-group .btn,
body.dark-mode .nvr-modern-form .btnlist,
body.dark-mode .nvr-modern-form .btn-groupx > label,
body.dark-mode .nvr-modern-form .btn-groupx .btn,
body.dark-mode .nvr-modern-form .btn-group-toggle > label,
body.dark-mode .nvr-modern-form .btn-group-toggle .btn,
body.dark-mode .nvr-modern-form .radioc-group > label,
body.dark-mode .nvr-modern-form .radioc-group .btn {
  border-color: rgba(56, 189, 248, .32) !important;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .82), rgba(6, 182, 212, .72)) !important;
  color: #ffffff !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

html.dark .nvr-modern-form .btnlist.active,
html.dark .nvr-modern-form .btnlist:has(input[type='radio']:checked),
html.dark .nvr-modern-form .btn-groupx > label.active,
html.dark .nvr-modern-form .btn-groupx > label:has(input[type='radio']:checked),
html.dark .nvr-modern-form .btn-group-toggle > label.active,
html.dark .nvr-modern-form .btn-group-toggle > label:has(input[type='radio']:checked),
html.dark .nvr-modern-form .radioc-group > label.active,
html.dark .nvr-modern-form .radioc-group > label:has(input[type='radio']:checked),
body.dark-mode .nvr-modern-form .btnlist.active,
body.dark-mode .nvr-modern-form .btnlist:has(input[type='radio']:checked),
body.dark-mode .nvr-modern-form .btn-groupx > label.active,
body.dark-mode .nvr-modern-form .btn-groupx > label:has(input[type='radio']:checked),
body.dark-mode .nvr-modern-form .btn-group-toggle > label.active,
body.dark-mode .nvr-modern-form .btn-group-toggle > label:has(input[type='radio']:checked),
body.dark-mode .nvr-modern-form .radioc-group > label.active,
body.dark-mode .nvr-modern-form .radioc-group > label:has(input[type='radio']:checked) {
  border-color: rgba(125, 211, 252, .68) !important;
  background:
    linear-gradient(135deg, #2563eb, #06b6d4) !important;
  color: #ffffff !important;
  box-shadow:
    0 14px 34px rgba(6, 182, 212, .24),
    inset 0 0 0 1px rgba(255, 255, 255, .18) !important;
}

/* =========================================================
   GSensorDb ActiveForm quick settings polish
   Scope: Geofencing, Alarm Flag, Priority, Tags, Notes, Advance Menu
   ========================================================= */
.nvr-modern-form .nvr-sensor-settings-row {
  position: relative;
  margin: 1rem 0 1.15rem !important;
  padding: 1rem !important;
  row-gap: .85rem;
  border: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .78)) 82%, transparent);
  border-radius: 24px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 94%, var(--nvr-primary, #2563eb) 5%),
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 96%, transparent));
  box-shadow:
    0 18px 48px rgba(15, 23, 42, .075),
    inset 0 1px 0 rgba(255, 255, 255, .42);
}

.nvr-modern-form .nvr-sensor-settings-left,
.nvr-modern-form .nvr-sensor-settings-right {
  min-width: 0;
}

.nvr-modern-form .nvr-sensor-quick-row {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.2fr) minmax(132px, .78fr) minmax(190px, 1fr);
  align-items: stretch;
  gap: .75rem;
  width: 100%;
  min-width: 0;
}

.nvr-modern-form .nvr-sensor-meta-row {
  row-gap: .75rem;
}

.nvr-modern-form .nvr-sensor-geofencing-field,
.nvr-modern-form .nvr-sensor-alarm-field,
.nvr-modern-form .nvr-sensor-priority-field,
.nvr-modern-form .nvr-sensor-tags-col,
.nvr-modern-form .nvr-sensor-notes-col,
.nvr-modern-form .nvr-sensor-advance-col {
  min-width: 0;
}

.nvr-modern-form .nvr-sensor-geofencing-field,
.nvr-modern-form .nvr-sensor-alarm-field,
.nvr-modern-form .nvr-sensor-priority-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0 !important;
}

.nvr-modern-form .nvr-sensor-settings-row .form-group,
.nvr-modern-form .nvr-sensor-settings-row .mb-3,
.nvr-modern-form .nvr-sensor-settings-row .radioc-field {
  margin-bottom: 0 !important;
}

.nvr-modern-form .nvr-sensor-settings-row .control-label,
.nvr-modern-form .nvr-sensor-settings-row .form-label {
  display: flex;
  align-items: center;
  min-height: 1.25rem;
  margin: 0 0 .42rem !important;
  color: var(--nvr-muted, #64748b) !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .045em;
  line-height: 1.2;
  text-transform: uppercase;
}

.nvr-modern-form .nvr-sensor-settings-row .select2-container,
.nvr-modern-form .nvr-sensor-settings-row .select2.select2-container {
  width: 100% !important;
  max-width: 100% !important;
}

.nvr-modern-form .nvr-sensor-settings-row .select2-container--krajee-bs5 .select2-selection,
.nvr-modern-form .nvr-sensor-settings-row .select2-container--krajee .select2-selection,
.nvr-modern-form .nvr-sensor-settings-row .select2-container--bootstrap4 .select2-selection,
.nvr-modern-form .nvr-sensor-settings-row .select2-container--bootstrap5 .select2-selection,
.nvr-modern-form .nvr-sensor-settings-row .select2-selection {
  min-height: 42px !important;
  border-radius: 16px !important;
}

.nvr-modern-form .nvr-sensor-settings-row .select2-selection--single .select2-selection__rendered {
  min-height: 40px !important;
  line-height: 40px !important;
  padding-left: .82rem !important;
  padding-right: 2.2rem !important;
}

.nvr-modern-form .nvr-sensor-settings-row .select2-selection--single .select2-selection__arrow {
  min-height: 40px !important;
  right: .45rem !important;
}

.nvr-modern-form .nvr-sensor-tags-col .select2-selection--multiple {
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: .22rem .5rem !important;
}

.nvr-modern-form .nvr-sensor-tags-col .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .25rem !important;
  width: 100% !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nvr-modern-form .nvr-sensor-tags-col .select2-search--inline,
.nvr-modern-form .nvr-sensor-tags-col .select2-search__field {
  width: 100% !important;
  min-width: 100% !important;
}

.nvr-modern-form .nvr-sensor-tags-col .select2-search__field {
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: .2rem .25rem !important;
  color: var(--nvr-text, #0f172a) !important;
  line-height: 1.35 !important;
}

.nvr-modern-form .nvr-sensor-notes-col textarea.form-control {
  min-height: 42px !important;
  resize: vertical;
}

.nvr-modern-form .nvr-sensor-settings-row .radioc-group {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .38rem !important;
  width: 100% !important;
  min-width: 0;
}

.nvr-modern-form .nvr-sensor-settings-row .radioc-group > .btn,
.nvr-modern-form .nvr-sensor-settings-row .radioc-group > label.btn,
.nvr-modern-form .nvr-sensor-settings-row .btnlist {
  min-height: 40px !important;
  margin: 0 !important;
  padding: .5rem .72rem !important;
  border-radius: 14px !important;
  font-size: .78rem !important;
  line-height: 1.1 !important;
  white-space: nowrap;
}

.nvr-modern-form .nvr-sensor-alarm-field .radioc-group > label,
.nvr-modern-form .nvr-sensor-advance-col .advance-menu-group > label {
  flex: 1 1 0;
  min-width: 4.9rem;
}

.nvr-modern-form .nvr-sensor-priority-field .priority-group > label {
  flex: 1 1 0;
  min-width: 4.6rem;
}

.nvr-modern-form .nvr-sensor-advance-col .advance-menu-field {
  min-width: 0;
}

.nvr-modern-form .nvr-sensor-advance-col .advance-menu-group {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .38rem !important;
}

.nvr-modern-form .nvr-sensor-advance-col .advance-menu-group > label {
  width: 100%;
  min-width: 0;
}

.nvr-modern-form .nvr-sensor-settings-row .invalid-feedback,
.nvr-modern-form .nvr-sensor-settings-row .help-block {
  margin-top: .32rem !important;
  font-size: .75rem !important;
}

@media (max-width: 1199.98px) {
  .nvr-modern-form .nvr-sensor-quick-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .nvr-modern-form .nvr-sensor-settings-row {
    padding: .85rem !important;
    border-radius: 20px;
  }

  .nvr-modern-form .nvr-sensor-settings-row .radioc-group > .btn,
  .nvr-modern-form .nvr-sensor-settings-row .radioc-group > label.btn,
  .nvr-modern-form .nvr-sensor-settings-row .btnlist {
    flex: 1 1 calc(50% - .38rem);
  }

  .nvr-modern-form .nvr-sensor-priority-field .priority-group > label {
    flex-basis: 100%;
  }
}

html.dark .nvr-modern-form .nvr-sensor-settings-row,
body.dark-mode .nvr-modern-form .nvr-sensor-settings-row {
  border-color: rgba(56, 189, 248, .24);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .86), rgba(2, 6, 23, .66));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

html.dark .nvr-modern-form .nvr-sensor-settings-row .control-label,
html.dark .nvr-modern-form .nvr-sensor-settings-row .form-label,
body.dark-mode .nvr-modern-form .nvr-sensor-settings-row .control-label,
body.dark-mode .nvr-modern-form .nvr-sensor-settings-row .form-label {
  color: #cbd5e1 !important;
}

html.dark .nvr-modern-form .nvr-sensor-tags-col .select2-search__field,
body.dark-mode .nvr-modern-form .nvr-sensor-tags-col .select2-search__field {
  color: #e5e7eb !important;
}

/* =========================================================
   NVR ActiveForm radio state visibility polish
   Tujuan: pilihan aktif dan tidak aktif terlihat jauh lebih jelas.
   Diletakkan di akhir file agar menimpa style radio sebelumnya.
   ========================================================= */
.nvr-modern-form .btnlist,
.nvr-modern-form .btn-groupx > label,
.nvr-modern-form .btn-groupx .btn,
.nvr-modern-form .btn-group-toggle > label,
.nvr-modern-form .btn-group-toggle .btn,
.nvr-modern-form .radioc-group > label,
.nvr-modern-form .radioc-group .btn {
  border: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 86%, transparent) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 98%, var(--nvr-primary, #2563eb) 2%),
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 92%, var(--nvr-muted, #64748b) 5%)
    ) !important;
  color: var(--nvr-text, #0f172a) !important;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, .06),
    inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  opacity: 1 !important;
  filter: none !important;
}

.nvr-modern-form .btnlist:not(.active):not(:has(input[type='radio']:checked)),
.nvr-modern-form .btn-groupx > label:not(.active):not(:has(input[type='radio']:checked)),
.nvr-modern-form .btn-group-toggle > label:not(.active):not(:has(input[type='radio']:checked)),
.nvr-modern-form .radioc-group > label:not(.active):not(:has(input[type='radio']:checked)) {
  color: color-mix(in srgb, var(--nvr-text, #0f172a) 72%, var(--nvr-muted, #64748b) 28%) !important;
}

.nvr-modern-form .btnlist:not(.active):not(:has(input[type='radio']:checked)) .radioc-label-text,
.nvr-modern-form .btn-groupx > label:not(.active):not(:has(input[type='radio']:checked)) .radioc-label-text,
.nvr-modern-form .btn-group-toggle > label:not(.active):not(:has(input[type='radio']:checked)) .radioc-label-text,
.nvr-modern-form .radioc-group > label:not(.active):not(:has(input[type='radio']:checked)) .radioc-label-text {
  opacity: .82;
}

.nvr-modern-form .btnlist:hover,
.nvr-modern-form .btn-groupx > label:hover,
.nvr-modern-form .btn-groupx .btn:hover,
.nvr-modern-form .btn-group-toggle > label:hover,
.nvr-modern-form .btn-group-toggle .btn:hover,
.nvr-modern-form .radioc-group > label:hover,
.nvr-modern-form .radioc-group .btn:hover {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 42%, var(--nvr-border, #cbd5e1) 58%) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 92%, var(--nvr-primary, #2563eb) 8%),
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 88%, var(--nvr-primary, #2563eb) 6%)
    ) !important;
  color: var(--nvr-primary, #2563eb) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255, 255, 255, .78) !important;
}

.nvr-modern-form .btnlist.active,
.nvr-modern-form .btnlist:has(input[type='radio']:checked),
.nvr-modern-form .btn-groupx > label.active,
.nvr-modern-form .btn-groupx > label:has(input[type='radio']:checked),
.nvr-modern-form .btn-groupx .btn.active,
.nvr-modern-form .btn-group-toggle > label.active,
.nvr-modern-form .btn-group-toggle > label:has(input[type='radio']:checked),
.nvr-modern-form .btn-group-toggle .btn.active,
.nvr-modern-form .radioc-group > label.active,
.nvr-modern-form .radioc-group > label:has(input[type='radio']:checked),
.nvr-modern-form .radioc-group .btn.active {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 82%, #ffffff 8%) !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, .34), transparent 34%),
    linear-gradient(135deg, var(--nvr-primary, #2563eb), var(--nvr-primary-2, #06b6d4)) !important;
  color: #ffffff !important;
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--nvr-primary, #2563eb) 34%, transparent),
    0 0 0 3px color-mix(in srgb, var(--nvr-primary, #2563eb) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .32) !important;
  transform: translateY(-1px) !important;
}

.nvr-modern-form .btnlist.active .radioc-label-text,
.nvr-modern-form .btnlist:has(input[type='radio']:checked) .radioc-label-text,
.nvr-modern-form .btn-groupx > label.active .radioc-label-text,
.nvr-modern-form .btn-groupx > label:has(input[type='radio']:checked) .radioc-label-text,
.nvr-modern-form .btn-group-toggle > label.active .radioc-label-text,
.nvr-modern-form .btn-group-toggle > label:has(input[type='radio']:checked) .radioc-label-text,
.nvr-modern-form .radioc-group > label.active .radioc-label-text,
.nvr-modern-form .radioc-group > label:has(input[type='radio']:checked) .radioc-label-text {
  opacity: 1;
  font-weight: 900;
}

.nvr-modern-form .btnlist.active::after,
.nvr-modern-form .btnlist:has(input[type='radio']:checked)::after,
.nvr-modern-form .btn-groupx > label.active::after,
.nvr-modern-form .btn-groupx > label:has(input[type='radio']:checked)::after,
.nvr-modern-form .btn-group-toggle > label.active::after,
.nvr-modern-form .btn-group-toggle > label:has(input[type='radio']:checked)::after,
.nvr-modern-form .radioc-group > label.active::after,
.nvr-modern-form .radioc-group > label:has(input[type='radio']:checked)::after {
  content: '\f00c' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1rem !important;
  height: 1rem !important;
  margin-left: .12rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .24) !important;
  color: #ffffff !important;
  font-family: 'Font Awesome 5 Free', 'FontAwesome', Arial, sans-serif !important;
  font-size: .62rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html.dark .nvr-modern-form .btnlist,
html.dark .nvr-modern-form .btn-groupx > label,
html.dark .nvr-modern-form .btn-groupx .btn,
html.dark .nvr-modern-form .btn-group-toggle > label,
html.dark .nvr-modern-form .btn-group-toggle .btn,
html.dark .nvr-modern-form .radioc-group > label,
html.dark .nvr-modern-form .radioc-group .btn,
body.dark-mode .nvr-modern-form .btnlist,
body.dark-mode .nvr-modern-form .btn-groupx > label,
body.dark-mode .nvr-modern-form .btn-groupx .btn,
body.dark-mode .nvr-modern-form .btn-group-toggle > label,
body.dark-mode .nvr-modern-form .btn-group-toggle .btn,
body.dark-mode .nvr-modern-form .radioc-group > label,
body.dark-mode .nvr-modern-form .radioc-group .btn {
  border-color: rgba(148, 163, 184, .28) !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .92), rgba(2, 6, 23, .78)) !important;
  color: #dbeafe !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

html.dark .nvr-modern-form .btnlist:hover,
html.dark .nvr-modern-form .btn-groupx > label:hover,
html.dark .nvr-modern-form .btn-group-toggle > label:hover,
html.dark .nvr-modern-form .radioc-group > label:hover,
body.dark-mode .nvr-modern-form .btnlist:hover,
body.dark-mode .nvr-modern-form .btn-groupx > label:hover,
body.dark-mode .nvr-modern-form .btn-group-toggle > label:hover,
body.dark-mode .nvr-modern-form .radioc-group > label:hover {
  border-color: rgba(125, 211, 252, .46) !important;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, .96), rgba(15, 23, 42, .88)) !important;
  color: #7dd3fc !important;
}

html.dark .nvr-modern-form .btnlist.active,
html.dark .nvr-modern-form .btnlist:has(input[type='radio']:checked),
html.dark .nvr-modern-form .btn-groupx > label.active,
html.dark .nvr-modern-form .btn-groupx > label:has(input[type='radio']:checked),
html.dark .nvr-modern-form .btn-group-toggle > label.active,
html.dark .nvr-modern-form .btn-group-toggle > label:has(input[type='radio']:checked),
html.dark .nvr-modern-form .radioc-group > label.active,
html.dark .nvr-modern-form .radioc-group > label:has(input[type='radio']:checked),
body.dark-mode .nvr-modern-form .btnlist.active,
body.dark-mode .nvr-modern-form .btnlist:has(input[type='radio']:checked),
body.dark-mode .nvr-modern-form .btn-groupx > label.active,
body.dark-mode .nvr-modern-form .btn-groupx > label:has(input[type='radio']:checked),
body.dark-mode .nvr-modern-form .btn-group-toggle > label.active,
body.dark-mode .nvr-modern-form .btn-group-toggle > label:has(input[type='radio']:checked),
body.dark-mode .nvr-modern-form .radioc-group > label.active,
body.dark-mode .nvr-modern-form .radioc-group > label:has(input[type='radio']:checked) {
  border-color: rgba(125, 211, 252, .72) !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, .28), transparent 34%),
    linear-gradient(135deg, #2563eb, #06b6d4) !important;
  color: #ffffff !important;
  box-shadow:
    0 16px 34px rgba(6, 182, 212, .25),
    0 0 0 3px rgba(56, 189, 248, .18),
    inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

/* =========================================================
   NVR DetailView table polish
   Fokus hanya pada tabel DetailView di halaman view/_form.
   Tidak mengubah header, action menu, GridView, ataupun ActiveForm field.
   ========================================================= */
.nvr-crud-view table.detail-view,
.nvr-crud-view .detail-view > table,
.nvr-crud-view .kv-detail-view table,
.nvr-crud-form table.detail-view,
.nvr-crud-form .detail-view > table,
.nvr-crud-form .kv-detail-view table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 .58rem !important;
  background: transparent !important;
  color: var(--nvr-text, #0f172a) !important;
}

.nvr-crud-view table.detail-view > tbody > tr,
.nvr-crud-view .detail-view > table > tbody > tr,
.nvr-crud-view .kv-detail-view table > tbody > tr,
.nvr-crud-form table.detail-view > tbody > tr,
.nvr-crud-form .detail-view > table > tbody > tr,
.nvr-crud-form .kv-detail-view table > tbody > tr {
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background-color .16s ease;
}

.nvr-crud-view table.detail-view > tbody > tr:hover,
.nvr-crud-view .detail-view > table > tbody > tr:hover,
.nvr-crud-view .kv-detail-view table > tbody > tr:hover,
.nvr-crud-form table.detail-view > tbody > tr:hover,
.nvr-crud-form .detail-view > table > tbody > tr:hover,
.nvr-crud-form .kv-detail-view table > tbody > tr:hover {
  transform: translateY(-1px);
}

.nvr-crud-view table.detail-view > tbody > tr > th,
.nvr-crud-view .detail-view > table > tbody > tr > th,
.nvr-crud-view .kv-detail-view table > tbody > tr > th,
.nvr-crud-form table.detail-view > tbody > tr > th,
.nvr-crud-form .detail-view > table > tbody > tr > th,
.nvr-crud-form .kv-detail-view table > tbody > tr > th,
.nvr-crud-view table.detail-view > tbody > tr > td,
.nvr-crud-view .detail-view > table > tbody > tr > td,
.nvr-crud-view .kv-detail-view table > tbody > tr > td,
.nvr-crud-form table.detail-view > tbody > tr > td,
.nvr-crud-form .detail-view > table > tbody > tr > td,
.nvr-crud-form .kv-detail-view table > tbody > tr > td {
  border-top: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 72%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 72%, transparent) !important;
  vertical-align: middle !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 91%, transparent) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
}

.nvr-crud-view table.detail-view > tbody > tr > th,
.nvr-crud-view .detail-view > table > tbody > tr > th,
.nvr-crud-view .kv-detail-view table > tbody > tr > th,
.nvr-crud-form table.detail-view > tbody > tr > th,
.nvr-crud-form .detail-view > table > tbody > tr > th,
.nvr-crud-form .kv-detail-view table > tbody > tr > th {
  width: 230px;
  min-width: 180px;
  padding: .72rem .95rem !important;
  border-left: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 72%, transparent) !important;
  border-right: 0 !important;
  border-radius: 16px 0 0 16px !important;
  color: var(--nvr-muted, #64748b) !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .045em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: normal;
}

.nvr-crud-view table.detail-view > tbody > tr > td,
.nvr-crud-view .detail-view > table > tbody > tr > td,
.nvr-crud-view .kv-detail-view table > tbody > tr > td,
.nvr-crud-form table.detail-view > tbody > tr > td,
.nvr-crud-form .detail-view > table > tbody > tr > td,
.nvr-crud-form .kv-detail-view table > tbody > tr > td {
  padding: .72rem 1rem !important;
  border-left: 0 !important;
  border-right: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 72%, transparent) !important;
  border-radius: 0 16px 16px 0 !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.45;
  word-break: break-word;
}

.nvr-crud-view table.detail-view > tbody > tr:hover > th,
.nvr-crud-view .detail-view > table > tbody > tr:hover > th,
.nvr-crud-view .kv-detail-view table > tbody > tr:hover > th,
.nvr-crud-form table.detail-view > tbody > tr:hover > th,
.nvr-crud-form .detail-view > table > tbody > tr:hover > th,
.nvr-crud-form .kv-detail-view table > tbody > tr:hover > th,
.nvr-crud-view table.detail-view > tbody > tr:hover > td,
.nvr-crud-view .detail-view > table > tbody > tr:hover > td,
.nvr-crud-view .kv-detail-view table > tbody > tr:hover > td,
.nvr-crud-form table.detail-view > tbody > tr:hover > td,
.nvr-crud-form .detail-view > table > tbody > tr:hover > td,
.nvr-crud-form .kv-detail-view table > tbody > tr:hover > td {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 32%, var(--nvr-border, rgba(203, 213, 225, .82))) !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 5%, var(--nvr-surface-solid, #fff)) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .075);
}

.nvr-crud-view table.detail-view > tbody > tr.table-primary > th,
.nvr-crud-view table.detail-view > tbody > tr.table-primary > td,
.nvr-crud-view .detail-view > table > tbody > tr.table-primary > th,
.nvr-crud-view .detail-view > table > tbody > tr.table-primary > td,
.nvr-crud-form table.detail-view > tbody > tr.table-primary > th,
.nvr-crud-form table.detail-view > tbody > tr.table-primary > td,
.nvr-crud-form .detail-view > table > tbody > tr.table-primary > th,
.nvr-crud-form .detail-view > table > tbody > tr.table-primary > td {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 42%, var(--nvr-border, rgba(203, 213, 225, .82))) !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--nvr-primary, #2563eb) 12%, var(--nvr-surface-solid, #fff)),
    color-mix(in srgb, var(--nvr-surface-solid, #fff) 94%, transparent)
  ) !important;
}

.nvr-crud-view table.detail-view td a:not(.btn),
.nvr-crud-view .detail-view table td a:not(.btn),
.nvr-crud-form table.detail-view td a:not(.btn),
.nvr-crud-form .detail-view table td a:not(.btn) {
  color: var(--nvr-primary, #2563eb) !important;
  font-weight: 800;
  text-decoration: none !important;
}

.nvr-crud-view table.detail-view td a:not(.btn):hover,
.nvr-crud-view .detail-view table td a:not(.btn):hover,
.nvr-crud-form table.detail-view td a:not(.btn):hover,
.nvr-crud-form .detail-view table td a:not(.btn):hover {
  text-decoration: underline !important;
}

.nvr-crud-view .detail-view .form-control,
.nvr-crud-view .kv-detail-view .form-control,
.nvr-crud-form .detail-view .form-control,
.nvr-crud-form .kv-detail-view .form-control,
.nvr-crud-view .detail-view .select2-container .select2-selection,
.nvr-crud-view .kv-detail-view .select2-container .select2-selection,
.nvr-crud-form .detail-view .select2-container .select2-selection,
.nvr-crud-form .kv-detail-view .select2-container .select2-selection {
  border-radius: 14px !important;
}

.nvr-crud-view .detail-view .kv-editable-link,
.nvr-crud-view .kv-detail-view .kv-editable-link,
.nvr-crud-form .detail-view .kv-editable-link,
.nvr-crud-form .kv-detail-view .kv-editable-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: .22rem .5rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 8%, transparent);
}

.nvr-crud-view .detail-view .empty,
.nvr-crud-view .kv-detail-view .empty,
.nvr-crud-form .detail-view .empty,
.nvr-crud-form .kv-detail-view .empty {
  color: var(--nvr-muted, #64748b) !important;
  font-weight: 700;
}

html.dark .nvr-crud-view table.detail-view > tbody > tr > th,
html.dark .nvr-crud-view .detail-view > table > tbody > tr > th,
html.dark .nvr-crud-view .kv-detail-view table > tbody > tr > th,
html.dark .nvr-crud-form table.detail-view > tbody > tr > th,
html.dark .nvr-crud-form .detail-view > table > tbody > tr > th,
html.dark .nvr-crud-form .kv-detail-view table > tbody > tr > th,
body.dark-mode .nvr-crud-view table.detail-view > tbody > tr > th,
body.dark-mode .nvr-crud-view .detail-view > table > tbody > tr > th,
body.dark-mode .nvr-crud-view .kv-detail-view table > tbody > tr > th,
body.dark-mode .nvr-crud-form table.detail-view > tbody > tr > th,
body.dark-mode .nvr-crud-form .detail-view > table > tbody > tr > th,
body.dark-mode .nvr-crud-form .kv-detail-view table > tbody > tr > th,
html.dark .nvr-crud-view table.detail-view > tbody > tr > td,
html.dark .nvr-crud-view .detail-view > table > tbody > tr > td,
html.dark .nvr-crud-view .kv-detail-view table > tbody > tr > td,
html.dark .nvr-crud-form table.detail-view > tbody > tr > td,
html.dark .nvr-crud-form .detail-view > table > tbody > tr > td,
html.dark .nvr-crud-form .kv-detail-view table > tbody > tr > td,
body.dark-mode .nvr-crud-view table.detail-view > tbody > tr > td,
body.dark-mode .nvr-crud-view .detail-view > table > tbody > tr > td,
body.dark-mode .nvr-crud-view .kv-detail-view table > tbody > tr > td,
body.dark-mode .nvr-crud-form table.detail-view > tbody > tr > td,
body.dark-mode .nvr-crud-form .detail-view > table > tbody > tr > td,
body.dark-mode .nvr-crud-form .kv-detail-view table > tbody > tr > td {
  border-color: rgba(148, 163, 184, .24) !important;
  background: rgba(15, 23, 42, .72) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

html.dark .nvr-crud-view table.detail-view > tbody > tr > th,
html.dark .nvr-crud-view .detail-view > table > tbody > tr > th,
html.dark .nvr-crud-view .kv-detail-view table > tbody > tr > th,
html.dark .nvr-crud-form table.detail-view > tbody > tr > th,
html.dark .nvr-crud-form .detail-view > table > tbody > tr > th,
html.dark .nvr-crud-form .kv-detail-view table > tbody > tr > th,
body.dark-mode .nvr-crud-view table.detail-view > tbody > tr > th,
body.dark-mode .nvr-crud-view .detail-view > table > tbody > tr > th,
body.dark-mode .nvr-crud-view .kv-detail-view table > tbody > tr > th,
body.dark-mode .nvr-crud-form table.detail-view > tbody > tr > th,
body.dark-mode .nvr-crud-form .detail-view > table > tbody > tr > th,
body.dark-mode .nvr-crud-form .kv-detail-view table > tbody > tr > th {
  color: #cbd5e1 !important;
}

html.dark .nvr-crud-view table.detail-view > tbody > tr > td,
html.dark .nvr-crud-view .detail-view > table > tbody > tr > td,
html.dark .nvr-crud-view .kv-detail-view table > tbody > tr > td,
html.dark .nvr-crud-form table.detail-view > tbody > tr > td,
html.dark .nvr-crud-form .detail-view > table > tbody > tr > td,
html.dark .nvr-crud-form .kv-detail-view table > tbody > tr > td,
body.dark-mode .nvr-crud-view table.detail-view > tbody > tr > td,
body.dark-mode .nvr-crud-view .detail-view > table > tbody > tr > td,
body.dark-mode .nvr-crud-view .kv-detail-view table > tbody > tr > td,
body.dark-mode .nvr-crud-form table.detail-view > tbody > tr > td,
body.dark-mode .nvr-crud-form .detail-view > table > tbody > tr > td,
body.dark-mode .nvr-crud-form .kv-detail-view table > tbody > tr > td {
  color: #f8fafc !important;
}

html.dark .nvr-crud-view table.detail-view > tbody > tr:hover > th,
html.dark .nvr-crud-view .detail-view > table > tbody > tr:hover > th,
html.dark .nvr-crud-view .kv-detail-view table > tbody > tr:hover > th,
html.dark .nvr-crud-form table.detail-view > tbody > tr:hover > th,
html.dark .nvr-crud-form .detail-view > table > tbody > tr:hover > th,
html.dark .nvr-crud-form .kv-detail-view table > tbody > tr:hover > th,
html.dark .nvr-crud-view table.detail-view > tbody > tr:hover > td,
html.dark .nvr-crud-view .detail-view > table > tbody > tr:hover > td,
html.dark .nvr-crud-view .kv-detail-view table > tbody > tr:hover > td,
html.dark .nvr-crud-form table.detail-view > tbody > tr:hover > td,
html.dark .nvr-crud-form .detail-view > table > tbody > tr:hover > td,
html.dark .nvr-crud-form .kv-detail-view table > tbody > tr:hover > td,
body.dark-mode .nvr-crud-view table.detail-view > tbody > tr:hover > th,
body.dark-mode .nvr-crud-view .detail-view > table > tbody > tr:hover > th,
body.dark-mode .nvr-crud-view .kv-detail-view table > tbody > tr:hover > th,
body.dark-mode .nvr-crud-form table.detail-view > tbody > tr:hover > th,
body.dark-mode .nvr-crud-form .detail-view > table > tbody > tr:hover > th,
body.dark-mode .nvr-crud-form .kv-detail-view table > tbody > tr:hover > th,
body.dark-mode .nvr-crud-view table.detail-view > tbody > tr:hover > td,
body.dark-mode .nvr-crud-view .detail-view > table > tbody > tr:hover > td,
body.dark-mode .nvr-crud-view .kv-detail-view table > tbody > tr:hover > td,
body.dark-mode .nvr-crud-form table.detail-view > tbody > tr:hover > td,
body.dark-mode .nvr-crud-form .detail-view > table > tbody > tr:hover > td,
body.dark-mode .nvr-crud-form .kv-detail-view table > tbody > tr:hover > td {
  border-color: rgba(56, 189, 248, .36) !important;
  background: color-mix(in srgb, var(--nvr-primary, #38bdf8) 13%, rgba(15, 23, 42, .86)) !important;
}

@media (max-width: 767.98px) {
  .nvr-crud-view table.detail-view,
  .nvr-crud-view .detail-view > table,
  .nvr-crud-view .kv-detail-view table,
  .nvr-crud-form table.detail-view,
  .nvr-crud-form .detail-view > table,
  .nvr-crud-form .kv-detail-view table {
    border-spacing: 0 .7rem !important;
  }

  .nvr-crud-view table.detail-view > tbody > tr > th,
  .nvr-crud-view .detail-view > table > tbody > tr > th,
  .nvr-crud-view .kv-detail-view table > tbody > tr > th,
  .nvr-crud-form table.detail-view > tbody > tr > th,
  .nvr-crud-form .detail-view > table > tbody > tr > th,
  .nvr-crud-form .kv-detail-view table > tbody > tr > th,
  .nvr-crud-view table.detail-view > tbody > tr > td,
  .nvr-crud-view .detail-view > table > tbody > tr > td,
  .nvr-crud-view .kv-detail-view table > tbody > tr > td,
  .nvr-crud-form table.detail-view > tbody > tr > td,
  .nvr-crud-form .detail-view > table > tbody > tr > td,
  .nvr-crud-form .kv-detail-view table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-left: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 72%, transparent) !important;
    border-right: 1px solid color-mix(in srgb, var(--nvr-border, rgba(203, 213, 225, .82)) 72%, transparent) !important;
  }

  .nvr-crud-view table.detail-view > tbody > tr > th,
  .nvr-crud-view .detail-view > table > tbody > tr > th,
  .nvr-crud-view .kv-detail-view table > tbody > tr > th,
  .nvr-crud-form table.detail-view > tbody > tr > th,
  .nvr-crud-form .detail-view > table > tbody > tr > th,
  .nvr-crud-form .kv-detail-view table > tbody > tr > th {
    padding: .7rem .9rem .35rem !important;
    border-bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .nvr-crud-view table.detail-view > tbody > tr > td,
  .nvr-crud-view .detail-view > table > tbody > tr > td,
  .nvr-crud-view .kv-detail-view table > tbody > tr > td,
  .nvr-crud-form table.detail-view > tbody > tr > td,
  .nvr-crud-form .detail-view > table > tbody > tr > td,
  .nvr-crud-form .kv-detail-view table > tbody > tr > td {
    padding: .35rem .9rem .8rem !important;
    border-top: 0 !important;
    border-radius: 0 0 16px 16px !important;
  }
}

/* =========================================================
   GSensorDb ActiveForm settings layout v2
   Merapihkan susunan Geofencing, Alarm Flag, Priority,
   Tags, Notes, dan Advance Menu tanpa mengubah logic input.
   ========================================================= */
.nvr-modern-form .nvr-sensor-settings-row {
  display: block !important;
  margin: 1.1rem 0 1.3rem !important;
  padding: 1rem !important;
  overflow: visible !important;
}


.nvr-modern-form .nvr-sensor-settings-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .85rem;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.nvr-modern-form .nvr-sensor-setting-card {
  min-width: 0;
  min-height: 100%;
  padding: .85rem .9rem .9rem;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 76%, transparent);
  border-radius: 19px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 97%, var(--nvr-primary, #2563eb) 2%),
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 93%, transparent));
  box-shadow:
    0 12px 30px rgba(15, 23, 42, .055),
    inset 0 1px 0 rgba(255, 255, 255, .52);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.nvr-modern-form .nvr-sensor-setting-card:hover {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 28%, var(--nvr-border, #cbd5e1));
  box-shadow:
    0 16px 38px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255, 255, 255, .56);
  transform: translateY(-1px);
}

.nvr-modern-form .nvr-sensor-geofencing-field,
.nvr-modern-form .nvr-sensor-tags-col,
.nvr-modern-form .nvr-sensor-notes-col {
  grid-column: span 4;
}

.nvr-modern-form .nvr-sensor-alarm-field,
.nvr-modern-form .nvr-sensor-advance-col {
  grid-column: span 3;
}

.nvr-modern-form .nvr-sensor-priority-field {
  grid-column: span 6;
}

.nvr-modern-form .nvr-sensor-setting-card .form-group,
.nvr-modern-form .nvr-sensor-setting-card .mb-3,
.nvr-modern-form .nvr-sensor-setting-card .radioc-field {
  margin-bottom: 0 !important;
}

.nvr-modern-form .nvr-sensor-setting-card .control-label,
.nvr-modern-form .nvr-sensor-setting-card .form-label {
  min-height: 1.15rem;
  margin: 0 0 .52rem !important;
  color: var(--nvr-muted, #64748b) !important;
  font-size: .69rem !important;
  font-weight: 950 !important;
  letter-spacing: .075em;
  line-height: 1.15;
  text-transform: uppercase;
}

.nvr-modern-form .nvr-sensor-setting-card .select2-container,
.nvr-modern-form .nvr-sensor-setting-card .select2.select2-container {
  width: 100% !important;
  max-width: 100% !important;
}

.nvr-modern-form .nvr-sensor-setting-card .select2-selection,
.nvr-modern-form .nvr-sensor-setting-card .select2-container--krajee-bs5 .select2-selection,
.nvr-modern-form .nvr-sensor-setting-card .select2-container--krajee .select2-selection,
.nvr-modern-form .nvr-sensor-setting-card .select2-container--bootstrap4 .select2-selection,
.nvr-modern-form .nvr-sensor-setting-card .select2-container--bootstrap5 .select2-selection {
  min-height: 44px !important;
  border-radius: 15px !important;
}

.nvr-modern-form .nvr-sensor-setting-card .select2-selection--single .select2-selection__rendered {
  min-height: 42px !important;
  line-height: 42px !important;
  padding-left: .85rem !important;
  padding-right: 2.15rem !important;
}

.nvr-modern-form .nvr-sensor-setting-card .select2-selection--single .select2-selection__arrow {
  min-height: 42px !important;
}

.nvr-modern-form .nvr-sensor-tags-col .select2-selection--multiple {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: .24rem .55rem !important;
}

.nvr-modern-form .nvr-sensor-tags-col .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .28rem !important;
  width: 100% !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nvr-modern-form .nvr-sensor-tags-col .select2-search--inline,
.nvr-modern-form .nvr-sensor-tags-col .select2-search__field {
  min-width: 100% !important;
  width: 100% !important;
}

.nvr-modern-form .nvr-sensor-tags-col .select2-search__field {
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: .25rem .25rem !important;
  color: var(--nvr-text, #0f172a) !important;
  line-height: 1.35 !important;
}

.nvr-modern-form .nvr-sensor-notes-col textarea.form-control {
  min-height: 44px !important;
  padding-top: .62rem !important;
  padding-bottom: .62rem !important;
  resize: vertical;
}

.nvr-modern-form .nvr-sensor-radio-card .radioc-group {
  display: grid !important;
  gap: .45rem !important;
  width: 100% !important;
}

.nvr-modern-form .nvr-sensor-alarm-field .alarm-flag-group,
.nvr-modern-form .nvr-sensor-advance-col .advance-menu-group {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nvr-modern-form .nvr-sensor-priority-field .priority-group {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nvr-modern-form .nvr-sensor-radio-card .radioc-group > .btn,
.nvr-modern-form .nvr-sensor-radio-card .radioc-group > label.btn,
.nvr-modern-form .nvr-sensor-radio-card .btnlist {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: .58rem .72rem !important;
  border-radius: 15px !important;
  font-size: .78rem !important;
  font-weight: 850 !important;
  letter-spacing: .01em;
  white-space: nowrap;
}

.nvr-modern-form .nvr-sensor-radio-card .radioc-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.nvr-modern-form .nvr-sensor-setting-card .invalid-feedback,
.nvr-modern-form .nvr-sensor-setting-card .help-block {
  margin-top: .35rem !important;
  font-size: .74rem !important;
}

@media (max-width: 1199.98px) {
  .nvr-modern-form .nvr-sensor-geofencing-field,
  .nvr-modern-form .nvr-sensor-tags-col,
  .nvr-modern-form .nvr-sensor-alarm-field,
  .nvr-modern-form .nvr-sensor-advance-col {
    grid-column: span 6;
  }

  .nvr-modern-form .nvr-sensor-notes-col,
  .nvr-modern-form .nvr-sensor-priority-field {
    grid-column: span 12;
  }
}

@media (max-width: 767.98px) {
  .nvr-modern-form .nvr-sensor-settings-row {
    padding: .85rem !important;
    border-radius: 20px !important;
  }


  .nvr-modern-form .nvr-sensor-geofencing-field,
  .nvr-modern-form .nvr-sensor-tags-col,
  .nvr-modern-form .nvr-sensor-notes-col,
  .nvr-modern-form .nvr-sensor-alarm-field,
  .nvr-modern-form .nvr-sensor-priority-field,
  .nvr-modern-form .nvr-sensor-advance-col {
    grid-column: span 12;
  }
}

@media (max-width: 480px) {
  .nvr-modern-form .nvr-sensor-alarm-field .alarm-flag-group,
  .nvr-modern-form .nvr-sensor-priority-field .priority-group,
  .nvr-modern-form .nvr-sensor-advance-col .advance-menu-group {
    grid-template-columns: 1fr;
  }
}


html.dark .nvr-modern-form .nvr-sensor-setting-card,
body.dark-mode .nvr-modern-form .nvr-sensor-setting-card {
  border-color: rgba(148, 163, 184, .18);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .78), rgba(2, 6, 23, .54));
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .055);
}

html.dark .nvr-modern-form .nvr-sensor-setting-card:hover,
body.dark-mode .nvr-modern-form .nvr-sensor-setting-card:hover {
  border-color: rgba(56, 189, 248, .35);
  box-shadow:
    0 22px 56px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .075);
}

html.dark .nvr-modern-form .nvr-sensor-setting-card .control-label,
html.dark .nvr-modern-form .nvr-sensor-setting-card .form-label,
body.dark-mode .nvr-modern-form .nvr-sensor-setting-card .control-label,
body.dark-mode .nvr-modern-form .nvr-sensor-setting-card .form-label {
  color: #cbd5e1 !important;
}


/* F Sensor and F Sensor Detail modern polish */
.fsensor-index.nvr-crud-page,
.fsensor-detail-index.nvr-crud-page,
.fsensor-view.nvr-crud-view,
.fsensor-detail-view.nvr-crud-view,
.fsensor-form.nvr-crud-form,
.fsensor-detail-form.nvr-crud-form {
  width: 100%;
}

.nvr-fsensor-modern-form .nav-tabs,
.nvr-fsensor-detail-modern-form .nav-tabs,
.nvr-crud-view .nav-tabs {
  gap: .35rem;
  padding: .35rem;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 70%, transparent) !important;
  border-radius: 18px;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 82%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
}

.nvr-fsensor-modern-form .nav-tabs .nav-link,
.nvr-fsensor-detail-modern-form .nav-tabs .nav-link,
.nvr-crud-view .nav-tabs .nav-link {
  border: 0 !important;
  border-radius: 14px !important;
  color: var(--nvr-muted, #64748b) !important;
  font-weight: 800;
  padding: .68rem .9rem;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.nvr-fsensor-modern-form .nav-tabs .nav-link:hover,
.nvr-fsensor-detail-modern-form .nav-tabs .nav-link:hover,
.nvr-crud-view .nav-tabs .nav-link:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 9%, transparent) !important;
  color: var(--nvr-primary, #2563eb) !important;
}

.nvr-fsensor-modern-form .nav-tabs .nav-link.active,
.nvr-fsensor-detail-modern-form .nav-tabs .nav-link.active,
.nvr-crud-view .nav-tabs .nav-link.active {
  background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .24);
}

.nvr-fsensor-modern-form .tab-content,
.nvr-fsensor-detail-modern-form .tab-content,
.nvr-crud-view .tab-content {
  margin-top: .9rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 70%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 88%, transparent);
}

.nvr-fsensor-modern-form .border,
.nvr-fsensor-modern-form .borderx,
.nvr-fsensor-modern-form .nvr-script-card,
.nvr-fsensor-detail-modern-form .border,
.nvr-fsensor-detail-modern-form .borderx {
  border: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 75%, transparent) !important;
  border-radius: 20px !important;
  padding: 1rem !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 90%, transparent) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .07) !important;
}

.nvr-fsensor-modern-form legend,
.nvr-fsensor-detail-modern-form legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  margin: 0 0 .85rem;
  padding: 0 0 .65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 65%, transparent);
  color: var(--nvr-text, #0f172a);
  font-size: .96rem;
  font-weight: 900;
}

.nvr-fsensor-modern-form legend small,
.nvr-fsensor-detail-modern-form legend small {
  font-size: .9rem;
  font-weight: 900;
  color: inherit;
}

.nvr-fsensor-modern-form .CodeMirror,
.nvr-fsensor-modern-form .cm-s-default.CodeMirror,
.nvr-fsensor-detail-modern-form .CodeMirror,
.nvr-fsensor-detail-modern-form .cm-s-default.CodeMirror {
  min-height: 300px;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 72%, transparent) !important;
  border-radius: 18px !important;
  background: #0f172a !important;
  color: #e5e7eb !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 36px rgba(15,23,42,.14) !important;
  overflow: hidden;
}

.nvr-fsensor-modern-form .CodeMirror-gutters,
.nvr-fsensor-detail-modern-form .CodeMirror-gutters {
  background: rgba(2, 6, 23, .72) !important;
  border-right: 1px solid rgba(148, 163, 184, .18) !important;
}

.nvr-fsensor-modern-form .ex3,
.nvr-fsensor-detail-modern-form .ex3 {
  background: #020617 !important;
  color: #86efac !important;
  width: 100% !important;
  min-height: 200px;
  border-radius: 18px !important;
  border: 1px solid rgba(34, 197, 94, .28) !important;
  padding: .9rem 1rem !important;
  overflow: auto !important;
  white-space: pre-line;
  word-wrap: break-word;
  font-family: Consolas, Monaco, monospace !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px rgba(2,6,23,.18) !important;
}

.nvr-fsensor-modern-form .dropdown-menuview,
.nvr-fsensor-detail-modern-form .dropdown-menuview {
  min-width: 210px !important;
  max-height: 340px;
  overflow: auto;
  padding: .45rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 72%, transparent) !important;
  border-radius: 16px !important;
  background: var(--nvr-surface-solid, #fff) !important;
  box-shadow: 0 24px 60px rgba(15,23,42,.16) !important;
}

.nvr-fsensor-modern-form .btnsview,
.nvr-fsensor-detail-modern-form .btnsview {
  display: flex !important;
  align-items: center;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 38px;
  margin: 0 0 .25rem !important;
  padding: .55rem .75rem !important;
  border: 0 !important;
  border-radius: 12px !important;
  text-align: left !important;
  white-space: normal !important;
  color: var(--nvr-text, #0f172a) !important;
  background: transparent !important;
}

.nvr-fsensor-modern-form .btnsview:hover,
.nvr-fsensor-detail-modern-form .btnsview:hover {
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 10%, transparent) !important;
  color: var(--nvr-primary, #2563eb) !important;
}

.nvr-fsensor-modern-form .form-control,
.nvr-fsensor-detail-modern-form .form-control {
  height: auto !important;
}

.nvr-crud-view .nvr-action-menu .dropdown-menu,
.nvr-crud-view .nvr-action-menu .nvr-action-dropdown {
  left: auto !important;
  right: 0 !important;
  min-width: 190px !important;
  text-align: left !important;
  padding: .45rem !important;
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 72%, transparent) !important;
  background: var(--nvr-surface-solid, #fff) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .16) !important;
}

.nvr-crud-view .btns {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: 100% !important;
  min-height: 38px;
  margin: 0 0 .25rem !important;
  padding: .55rem .75rem !important;
  border-radius: 12px !important;
  border: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  color: var(--nvr-text, #0f172a) !important;
  background: transparent !important;
}

.nvr-crud-view .btns:hover {
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 10%, transparent) !important;
  color: var(--nvr-primary, #2563eb) !important;
}

.nvr-crud-view .btns.btn-danger,
.nvr-crud-view .btns.btn-danger:hover {
  color: #ef4444 !important;
}

.nvr-panel-after-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: .85rem 1rem !important;
}

html.dark .nvr-fsensor-modern-form .nav-tabs,
html.dark .nvr-fsensor-detail-modern-form .nav-tabs,
html.dark .nvr-crud-view .nav-tabs,
body.dark-mode .nvr-fsensor-modern-form .nav-tabs,
body.dark-mode .nvr-fsensor-detail-modern-form .nav-tabs,
body.dark-mode .nvr-crud-view .nav-tabs,
html.dark .nvr-fsensor-modern-form .tab-content,
html.dark .nvr-fsensor-detail-modern-form .tab-content,
html.dark .nvr-crud-view .tab-content,
body.dark-mode .nvr-fsensor-modern-form .tab-content,
body.dark-mode .nvr-fsensor-detail-modern-form .tab-content,
body.dark-mode .nvr-crud-view .tab-content,
html.dark .nvr-fsensor-modern-form .border,
html.dark .nvr-fsensor-modern-form .borderx,
html.dark .nvr-fsensor-modern-form .nvr-script-card,
html.dark .nvr-fsensor-detail-modern-form .border,
html.dark .nvr-fsensor-detail-modern-form .borderx,
body.dark-mode .nvr-fsensor-modern-form .border,
body.dark-mode .nvr-fsensor-modern-form .borderx,
body.dark-mode .nvr-fsensor-modern-form .nvr-script-card,
body.dark-mode .nvr-fsensor-detail-modern-form .border,
body.dark-mode .nvr-fsensor-detail-modern-form .borderx {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .76) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .32) !important;
}

html.dark .nvr-fsensor-modern-form .dropdown-menuview,
html.dark .nvr-fsensor-detail-modern-form .dropdown-menuview,
html.dark .nvr-crud-view .nvr-action-menu .dropdown-menu,
body.dark-mode .nvr-fsensor-modern-form .dropdown-menuview,
body.dark-mode .nvr-fsensor-detail-modern-form .dropdown-menuview,
body.dark-mode .nvr-crud-view .nvr-action-menu .dropdown-menu {
  background: #0f172a !important;
  border-color: rgba(148, 163, 184, .24) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .48) !important;
}

html.dark .nvr-fsensor-modern-form .btnsview,
html.dark .nvr-fsensor-detail-modern-form .btnsview,
html.dark .nvr-crud-view .btns,
body.dark-mode .nvr-fsensor-modern-form .btnsview,
body.dark-mode .nvr-fsensor-detail-modern-form .btnsview,
body.dark-mode .nvr-crud-view .btns {
  color: #e5e7eb !important;
}

html.dark .nvr-fsensor-modern-form legend,
html.dark .nvr-fsensor-detail-modern-form legend,
body.dark-mode .nvr-fsensor-modern-form legend,
body.dark-mode .nvr-fsensor-detail-modern-form legend {
  color: #f8fafc;
  border-color: rgba(148, 163, 184, .2);
}

@media (max-width: 767.98px) {
  .nvr-fsensor-modern-form legend,
  .nvr-fsensor-detail-modern-form legend {
    flex-direction: column;
    align-items: flex-start;
  }

  .nvr-fsensor-modern-form legend .btn-group,
  .nvr-fsensor-detail-modern-form legend .btn-group {
    width: 100%;
  }

  .nvr-fsensor-modern-form legend .dropdown-toggle,
  .nvr-fsensor-detail-modern-form legend .dropdown-toggle {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   F Sensor DetailView JSON field polish
   Scoped to f-sensor/_form.php and f-sensor-detail/_form.php only.
   ========================================================= */
.fsensor-view .nvr-fsensor-detailview-panel,
.fsensor-detail-view .nvr-fsensor-detailview-panel {
  overflow: visible !important;
}

.fsensor-view .nvr-fsensor-detailview-table,
.fsensor-detail-view .nvr-fsensor-detailview-table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 .55rem !important;
  background: transparent !important;
}

.fsensor-view .nvr-fsensor-detailview-table > tbody > tr > th,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr > th {
  width: 220px;
  min-width: 190px;
  padding: .85rem 1rem !important;
  border: 0 !important;
  border-radius: 16px 0 0 16px !important;
  background: color-mix(in srgb, var(--nvr-muted, #64748b) 8%, transparent) !important;
  color: var(--nvr-muted, #64748b) !important;
  font-size: .75rem !important;
  font-weight: 900 !important;
  letter-spacing: .045em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  vertical-align: top !important;
}

.fsensor-view .nvr-fsensor-detailview-table > tbody > tr > td,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr > td {
  padding: .85rem 1rem !important;
  border: 0 !important;
  border-radius: 0 16px 16px 0 !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 92%, transparent) !important;
  color: var(--nvr-text, #0f172a) !important;
  font-weight: 700 !important;
  vertical-align: top !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nvr-border, #cbd5e1) 58%, transparent) !important;
}

.fsensor-view .nvr-fsensor-detailview-table > tbody > tr:hover > th,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:hover > th,
.fsensor-view .nvr-fsensor-detailview-table > tbody > tr:hover > td,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:hover > td {
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 7%, var(--nvr-surface-solid, #fff) 90%) !important;
}

.fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row {
  display: table-row !important;
}

.fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > th,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > th {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 1rem 1rem .25rem !important;
  border-radius: 18px 18px 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .86rem !important;
  letter-spacing: .02em !important;
}

.fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > td,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > td {
  display: block !important;
  width: 100% !important;
  padding: .35rem 1rem 1.1rem !important;
  border-radius: 0 0 18px 18px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fsensor-view .nvr-detail-json-shell,
.fsensor-detail-view .nvr-detail-json-shell {
  width: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 72%, transparent);
  border-radius: 20px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 96%, var(--nvr-primary, #2563eb) 4%),
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 92%, transparent)
    );
  box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}

.fsensor-view .nvr-detail-json-shell-head,
.fsensor-detail-view .nvr-detail-json-shell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .78rem .95rem;
  border-bottom: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 68%, transparent);
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 6%, transparent);
}

.fsensor-view .nvr-detail-json-title,
.fsensor-detail-view .nvr-detail-json-title {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--nvr-text, #0f172a);
  font-size: .86rem;
  font-weight: 900;
  letter-spacing: .02em;
}

.fsensor-view .nvr-detail-json-title::before,
.fsensor-detail-view .nvr-detail-json-title::before {
  content: "\f121";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--nvr-primary, #2563eb), var(--nvr-primary-2, #06b6d4));
  color: #fff;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome, sans-serif;
  font-size: .74rem;
  font-weight: 900;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--nvr-primary, #2563eb) 24%, transparent);
}

.fsensor-view .nvr-detail-json-hint,
.fsensor-detail-view .nvr-detail-json-hint {
  color: var(--nvr-muted, #64748b);
  font-size: .74rem;
  font-weight: 800;
}

.fsensor-view .nvr-detail-json-editor,
.fsensor-detail-view .nvr-detail-json-editor {
  padding: .85rem;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 80%, transparent);
}

.fsensor-view .nvr-detail-json-editor .jsoneditor,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor {
  width: 100% !important;
  min-height: 260px !important;
  max-height: 430px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 70%, transparent) !important;
  border-radius: 16px !important;
  background: var(--nvr-surface-solid, #fff) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36) !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-outer,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-outer,
.fsensor-view .nvr-detail-json-editor .jsoneditor-tree,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-tree,
.fsensor-view .nvr-detail-json-editor .jsoneditor-values,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-values,
.fsensor-view .nvr-detail-json-editor .jsoneditor-readonly,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-readonly {
  background: transparent !important;
  color: var(--nvr-text, #0f172a) !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-outer,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-outer {
  max-height: 430px !important;
  overflow: auto !important;
}

.fsensor-view .nvr-detail-json-editor table,
.fsensor-detail-view .nvr-detail-json-editor table,
.fsensor-view .nvr-detail-json-editor tbody,
.fsensor-detail-view .nvr-detail-json-editor tbody,
.fsensor-view .nvr-detail-json-editor tr,
.fsensor-detail-view .nvr-detail-json-editor tr,
.fsensor-view .nvr-detail-json-editor td,
.fsensor-detail-view .nvr-detail-json-editor td,
.fsensor-view .nvr-detail-json-editor th,
.fsensor-detail-view .nvr-detail-json-editor th {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-field,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-field {
  color: color-mix(in srgb, var(--nvr-primary, #2563eb) 82%, var(--nvr-text, #0f172a)) !important;
  font-weight: 850 !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-string,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-string {
  color: #16a34a !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-number,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-number {
  color: #ea580c !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-boolean,
.fsensor-view .nvr-detail-json-editor .jsoneditor-null,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-boolean,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-null {
  color: #9333ea !important;
  font-weight: 850 !important;
}

html.dark .fsensor-view .nvr-fsensor-detailview-table > tbody > tr > th,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr > th,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-table > tbody > tr > th,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr > th {
  background: rgba(148, 163, 184, .08) !important;
  color: #cbd5e1 !important;
}

html.dark .fsensor-view .nvr-fsensor-detailview-table > tbody > tr > td,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr > td,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-table > tbody > tr > td,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr > td {
  background: rgba(15, 23, 42, .72) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .18) !important;
}

html.dark .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:hover > th,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:hover > th,
html.dark .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:hover > td,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:hover > td,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:hover > th,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:hover > th,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:hover > td,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:hover > td {
  background: rgba(30, 41, 59, .86) !important;
}

html.dark .fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > th,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > th,
html.dark .fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > td,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > td,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > th,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > th,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > td,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > td {
  background: transparent !important;
  box-shadow: none !important;
}

html.dark .fsensor-view .nvr-detail-json-shell,
html.dark .fsensor-detail-view .nvr-detail-json-shell,
body.dark-mode .fsensor-view .nvr-detail-json-shell,
body.dark-mode .fsensor-detail-view .nvr-detail-json-shell {
  border-color: rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(2, 6, 23, .88));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34);
}

html.dark .fsensor-view .nvr-detail-json-shell-head,
html.dark .fsensor-detail-view .nvr-detail-json-shell-head,
body.dark-mode .fsensor-view .nvr-detail-json-shell-head,
body.dark-mode .fsensor-detail-view .nvr-detail-json-shell-head {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(14, 165, 233, .10);
}

html.dark .fsensor-view .nvr-detail-json-title,
html.dark .fsensor-detail-view .nvr-detail-json-title,
body.dark-mode .fsensor-view .nvr-detail-json-title,
body.dark-mode .fsensor-detail-view .nvr-detail-json-title {
  color: #f8fafc;
}

html.dark .fsensor-view .nvr-detail-json-hint,
html.dark .fsensor-detail-view .nvr-detail-json-hint,
body.dark-mode .fsensor-view .nvr-detail-json-hint,
body.dark-mode .fsensor-detail-view .nvr-detail-json-hint {
  color: #94a3b8;
}

html.dark .fsensor-view .nvr-detail-json-editor,
html.dark .fsensor-detail-view .nvr-detail-json-editor,
body.dark-mode .fsensor-view .nvr-detail-json-editor,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor {
  background: rgba(2, 6, 23, .48);
}

html.dark .fsensor-view .nvr-detail-json-editor .jsoneditor,
html.dark .fsensor-detail-view .nvr-detail-json-editor .jsoneditor,
body.dark-mode .fsensor-view .nvr-detail-json-editor .jsoneditor,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor .jsoneditor {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(2, 6, 23, .72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

html.dark .fsensor-view .nvr-detail-json-editor .jsoneditor-outer,
html.dark .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-outer,
html.dark .fsensor-view .nvr-detail-json-editor .jsoneditor-tree,
html.dark .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-tree,
html.dark .fsensor-view .nvr-detail-json-editor .jsoneditor-values,
html.dark .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-values,
html.dark .fsensor-view .nvr-detail-json-editor .jsoneditor-readonly,
html.dark .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-readonly,
body.dark-mode .fsensor-view .nvr-detail-json-editor .jsoneditor-outer,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-outer,
body.dark-mode .fsensor-view .nvr-detail-json-editor .jsoneditor-tree,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-tree,
body.dark-mode .fsensor-view .nvr-detail-json-editor .jsoneditor-values,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-values,
body.dark-mode .fsensor-view .nvr-detail-json-editor .jsoneditor-readonly,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-readonly {
  color: #e5e7eb !important;
}

html.dark .fsensor-view .nvr-detail-json-editor .jsoneditor-field,
html.dark .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-field,
body.dark-mode .fsensor-view .nvr-detail-json-editor .jsoneditor-field,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-field {
  color: #7dd3fc !important;
}

html.dark .fsensor-view .nvr-detail-json-editor .jsoneditor-string,
html.dark .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-string,
body.dark-mode .fsensor-view .nvr-detail-json-editor .jsoneditor-string,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-string {
  color: #86efac !important;
}

html.dark .fsensor-view .nvr-detail-json-editor .jsoneditor-number,
html.dark .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-number,
body.dark-mode .fsensor-view .nvr-detail-json-editor .jsoneditor-number,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-number {
  color: #fdba74 !important;
}

html.dark .fsensor-view .nvr-detail-json-editor .jsoneditor-boolean,
html.dark .fsensor-view .nvr-detail-json-editor .jsoneditor-null,
html.dark .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-boolean,
html.dark .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-null,
body.dark-mode .fsensor-view .nvr-detail-json-editor .jsoneditor-boolean,
body.dark-mode .fsensor-view .nvr-detail-json-editor .jsoneditor-null,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-boolean,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-null {
  color: #c4b5fd !important;
}

@media (max-width: 767.98px) {
  .fsensor-view .nvr-fsensor-detailview-table,
  .fsensor-detail-view .nvr-fsensor-detailview-table,
  .fsensor-view .nvr-fsensor-detailview-table > tbody,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody,
  .fsensor-view .nvr-fsensor-detailview-table > tbody > tr,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr,
  .fsensor-view .nvr-fsensor-detailview-table > tbody > tr > th,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr > th,
  .fsensor-view .nvr-fsensor-detailview-table > tbody > tr > td,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
  }

  .fsensor-view .nvr-fsensor-detailview-table > tbody > tr,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr {
    margin-bottom: .7rem !important;
  }

  .fsensor-view .nvr-fsensor-detailview-table > tbody > tr > th,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr > th {
    border-radius: 16px 16px 0 0 !important;
    padding-bottom: .35rem !important;
  }

  .fsensor-view .nvr-fsensor-detailview-table > tbody > tr > td,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr > td {
    border-radius: 0 0 16px 16px !important;
    padding-top: .35rem !important;
  }

  .fsensor-view .nvr-detail-json-shell-head,
  .fsensor-detail-view .nvr-detail-json-shell-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .fsensor-view .nvr-detail-json-editor,
  .fsensor-detail-view .nvr-detail-json-editor {
    padding: .6rem;
  }

  .fsensor-view .nvr-detail-json-editor .jsoneditor,
  .fsensor-detail-view .nvr-detail-json-editor .jsoneditor {
    min-height: 220px !important;
    max-height: 360px !important;
  }
}

/* F Sensor DetailView JSON row fallback when DetailView ignores rowOptions. */
.fsensor-view .nvr-fsensor-detailview-table > tbody > tr:has(.nvr-detail-json-shell),
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:has(.nvr-detail-json-shell),
.fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row {
  display: block !important;
  width: 100% !important;
  margin: .75rem 0 1rem !important;
}

.fsensor-view .nvr-fsensor-detailview-table > tbody > tr:has(.nvr-detail-json-shell) > th,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:has(.nvr-detail-json-shell) > th,
.fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > th,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > th {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: .9rem 1rem .25rem !important;
  border-radius: 18px 18px 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fsensor-view .nvr-fsensor-detailview-table > tbody > tr:has(.nvr-detail-json-shell) > td,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:has(.nvr-detail-json-shell) > td,
.fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > td,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > td {
  display: block !important;
  width: 100% !important;
  padding: .35rem 1rem 1.1rem !important;
  border-radius: 0 0 18px 18px !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   F Sensor DetailView JSON editor v2 - compact read only tree
   Fixes DetailView left label gap and oversized JSONEditor cells.
   ========================================================= */
.fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > th,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > th,
.fsensor-view .nvr-fsensor-detailview-table > tbody > tr:has(.nvr-detail-json-shell) > th,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:has(.nvr-detail-json-shell) > th {
  display: none !important;
}

.fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > td,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row > td,
.fsensor-view .nvr-fsensor-detailview-table > tbody > tr:has(.nvr-detail-json-shell) > td,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:has(.nvr-detail-json-shell) > td {
  display: table-cell !important;
  width: 100% !important;
  padding: .65rem 0 1rem !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fsensor-view .nvr-detail-json-shell,
.fsensor-detail-view .nvr-detail-json-shell {
  border-radius: 22px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 68%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 96%, transparent) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .08) !important;
}

.fsensor-view .nvr-detail-json-shell-head,
.fsensor-detail-view .nvr-detail-json-shell-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .85rem !important;
  padding: .9rem 1rem !important;
  border-bottom: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 62%, transparent) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nvr-primary, #2563eb) 9%, transparent),
      color-mix(in srgb, var(--nvr-surface-solid, #fff) 94%, transparent)
    ) !important;
}

.fsensor-view .nvr-detail-json-title,
.fsensor-detail-view .nvr-detail-json-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  margin: 0 !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .92rem !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
}

.fsensor-view .nvr-detail-json-hint,
.fsensor-detail-view .nvr-detail-json-hint {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: .28rem .58rem !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 72%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 82%, transparent) !important;
  color: var(--nvr-muted, #64748b) !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
}

.fsensor-view .nvr-detail-json-editor,
.fsensor-detail-view .nvr-detail-json-editor {
  padding: .9rem !important;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--nvr-primary, #2563eb) 6%, transparent), transparent 34%),
    color-mix(in srgb, var(--nvr-surface-solid, #fff) 84%, transparent) !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor {
  min-height: 280px !important;
  max-height: 460px !important;
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 76%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 98%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.44) !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-outer,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-outer {
  max-height: 460px !important;
  overflow: auto !important;
  padding: .75rem !important;
  background: transparent !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-tree,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-tree,
.fsensor-view .nvr-detail-json-editor .jsoneditor-values,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-values,
.fsensor-view .nvr-detail-json-editor .jsoneditor-readonly,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-readonly {
  background: transparent !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .84rem !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-tree table,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-tree table {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 7px !important;
  background: transparent !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-tree tr,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-tree tr {
  height: auto !important;
  background: transparent !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-tree td,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-tree td,
.fsensor-view .nvr-detail-json-editor .jsoneditor-tree th,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-tree th {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: .18rem .24rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-tree td.jsoneditor-tree,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-tree td.jsoneditor-tree,
.fsensor-view .nvr-detail-json-editor .jsoneditor-tree td.jsoneditor-separator,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-tree td.jsoneditor-separator {
  width: 1% !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-field,
.fsensor-view .nvr-detail-json-editor .jsoneditor-value,
.fsensor-view .nvr-detail-json-editor .jsoneditor-readonly,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-field,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-value,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-readonly {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 28px !important;
  height: auto !important;
  padding: .32rem .58rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #cbd5e1) 58%, transparent) !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #fff) 91%, transparent) !important;
  box-shadow: none !important;
  line-height: 1.35 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: .8rem !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-field,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-field {
  color: color-mix(in srgb, var(--nvr-text, #0f172a) 86%, var(--nvr-primary, #2563eb)) !important;
  font-weight: 900 !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-value,
.fsensor-view .nvr-detail-json-editor .jsoneditor-readonly,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-value,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-readonly {
  color: var(--nvr-text, #0f172a) !important;
  font-weight: 760 !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-readonly:empty,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-readonly:empty {
  display: none !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-tree button,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-tree button {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border-radius: 8px !important;
}

.fsensor-view .nvr-detail-json-editor .jsoneditor-empty,
.fsensor-detail-view .nvr-detail-json-editor .jsoneditor-empty {
  color: var(--nvr-muted, #64748b) !important;
  opacity: .8 !important;
}

html.dark .fsensor-view .nvr-detail-json-shell,
html.dark .fsensor-detail-view .nvr-detail-json-shell,
body.dark-mode .fsensor-view .nvr-detail-json-shell,
body.dark-mode .fsensor-detail-view .nvr-detail-json-shell {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .84) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,.34) !important;
}

html.dark .fsensor-view .nvr-detail-json-shell-head,
html.dark .fsensor-detail-view .nvr-detail-json-shell-head,
body.dark-mode .fsensor-view .nvr-detail-json-shell-head,
body.dark-mode .fsensor-detail-view .nvr-detail-json-shell-head {
  border-color: rgba(148, 163, 184, .18) !important;
  background: linear-gradient(135deg, rgba(14, 165, 233, .13), rgba(15, 23, 42, .72)) !important;
}

html.dark .fsensor-view .nvr-detail-json-title,
html.dark .fsensor-detail-view .nvr-detail-json-title,
body.dark-mode .fsensor-view .nvr-detail-json-title,
body.dark-mode .fsensor-detail-view .nvr-detail-json-title {
  color: #f8fafc !important;
}

html.dark .fsensor-view .nvr-detail-json-hint,
html.dark .fsensor-detail-view .nvr-detail-json-hint,
body.dark-mode .fsensor-view .nvr-detail-json-hint,
body.dark-mode .fsensor-detail-view .nvr-detail-json-hint {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .75) !important;
  color: #cbd5e1 !important;
}

html.dark .fsensor-view .nvr-detail-json-editor,
html.dark .fsensor-detail-view .nvr-detail-json-editor,
body.dark-mode .fsensor-view .nvr-detail-json-editor,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor {
  background: rgba(2, 6, 23, .36) !important;
}

html.dark .fsensor-view .nvr-detail-json-editor .jsoneditor,
html.dark .fsensor-detail-view .nvr-detail-json-editor .jsoneditor,
body.dark-mode .fsensor-view .nvr-detail-json-editor .jsoneditor,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor .jsoneditor {
  border-color: rgba(148, 163, 184, .24) !important;
  background: rgba(2, 6, 23, .76) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html.dark .fsensor-view .nvr-detail-json-editor .jsoneditor-field,
html.dark .fsensor-view .nvr-detail-json-editor .jsoneditor-value,
html.dark .fsensor-view .nvr-detail-json-editor .jsoneditor-readonly,
html.dark .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-field,
html.dark .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-value,
html.dark .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-readonly,
body.dark-mode .fsensor-view .nvr-detail-json-editor .jsoneditor-field,
body.dark-mode .fsensor-view .nvr-detail-json-editor .jsoneditor-value,
body.dark-mode .fsensor-view .nvr-detail-json-editor .jsoneditor-readonly,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-field,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-value,
body.dark-mode .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-readonly {
  border-color: rgba(148, 163, 184, .18) !important;
  background: rgba(15, 23, 42, .74) !important;
  color: #e5e7eb !important;
}

@media (max-width: 767.98px) {
  .fsensor-view .nvr-detail-json-shell-head,
  .fsensor-detail-view .nvr-detail-json-shell-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .fsensor-view .nvr-detail-json-editor,
  .fsensor-detail-view .nvr-detail-json-editor {
    padding: .65rem !important;
  }

  .fsensor-view .nvr-detail-json-editor .jsoneditor,
  .fsensor-detail-view .nvr-detail-json-editor .jsoneditor {
    min-height: 230px !important;
    max-height: 360px !important;
  }

  .fsensor-view .nvr-detail-json-editor .jsoneditor-outer,
  .fsensor-detail-view .nvr-detail-json-editor .jsoneditor-outer {
    padding: .55rem !important;
  }
}


/* F Sensor client-friendly JSON summary cards */
.fsensor-view .nvr-detailview-json-row > th,
.fsensor-detail-view .nvr-detailview-json-row > th,
.fsensor-view .nvr-detailview-json-label,
.fsensor-detail-view .nvr-detailview-json-label {
  display: none !important;
}

.fsensor-view .nvr-detailview-json-row > td,
.fsensor-detail-view .nvr-detailview-json-row > td,
.fsensor-view .nvr-detailview-json-content,
.fsensor-detail-view .nvr-detailview-json-content {
  width: 100% !important;
  padding: .95rem .75rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fsensor-view .nvr-json-summary-shell,
.fsensor-detail-view .nvr-json-summary-shell {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .10), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .94));
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
  overflow: hidden;
}

.fsensor-view .nvr-json-summary-head,
.fsensor-detail-view .nvr-json-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 72%, transparent);
  background: rgba(255, 255, 255, .58);
}

.fsensor-view .nvr-json-summary-head-main,
.fsensor-detail-view .nvr-json-summary-head-main {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.fsensor-view .nvr-json-summary-icon,
.fsensor-detail-view .nvr-json-summary-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  box-shadow: 0 12px 24px rgba(37, 99, 235, .26);
}

.fsensor-view .nvr-json-summary-title-wrap,
.fsensor-detail-view .nvr-json-summary-title-wrap {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}

.fsensor-view .nvr-json-summary-title,
.fsensor-detail-view .nvr-json-summary-title {
  font-size: .98rem;
  font-weight: 900;
  color: var(--nvr-text, #0f172a);
  line-height: 1.2;
}

.fsensor-view .nvr-json-summary-subtitle,
.fsensor-detail-view .nvr-json-summary-subtitle {
  font-size: .74rem;
  font-weight: 800;
  color: var(--nvr-muted, #64748b);
}

.fsensor-view .nvr-json-summary-metrics,
.fsensor-detail-view .nvr-json-summary-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem;
}

.fsensor-view .nvr-json-summary-badge,
.fsensor-detail-view .nvr-json-summary-badge,
.fsensor-view .nvr-json-summary-metric,
.fsensor-detail-view .nvr-json-summary-metric {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 30px;
  padding: .38rem .68rem;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 78%, transparent);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: var(--nvr-muted, #64748b);
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
}

.fsensor-view .nvr-json-summary-badge.is-valid,
.fsensor-detail-view .nvr-json-summary-badge.is-valid,
.fsensor-view .nvr-json-summary-metric.is-filled,
.fsensor-detail-view .nvr-json-summary-metric.is-filled {
  color: #047857;
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .24);
}

.fsensor-view .nvr-json-summary-badge.is-warning,
.fsensor-detail-view .nvr-json-summary-badge.is-warning {
  color: #b45309;
  background: rgba(245, 158, 11, .13);
  border-color: rgba(245, 158, 11, .26);
}

.fsensor-view .nvr-json-summary-grid,
.fsensor-detail-view .nvr-json-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: .8rem;
  padding: 1rem;
}

.fsensor-view .nvr-json-summary-card,
.fsensor-detail-view .nvr-json-summary-card {
  position: relative;
  min-height: 118px;
  padding: .9rem .95rem;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 75%, transparent);
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .055);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fsensor-view .nvr-json-summary-card:hover,
.fsensor-detail-view .nvr-json-summary-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 38%, var(--nvr-border, #d7e1ee));
  box-shadow: 0 16px 34px rgba(15, 23, 42, .10);
}

.fsensor-view .nvr-json-summary-card-head,
.fsensor-detail-view .nvr-json-summary-card-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .7rem;
}

.fsensor-view .nvr-json-summary-card-icon,
.fsensor-detail-view .nvr-json-summary-card-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #2563eb;
  background: rgba(37, 99, 235, .10);
}

.fsensor-view .nvr-json-summary-card.is-array .nvr-json-summary-card-icon,
.fsensor-detail-view .nvr-json-summary-card.is-array .nvr-json-summary-card-icon {
  color: #7c3aed;
  background: rgba(124, 58, 237, .10);
}

.fsensor-view .nvr-json-summary-card.is-object .nvr-json-summary-card-icon,
.fsensor-detail-view .nvr-json-summary-card.is-object .nvr-json-summary-card-icon {
  color: #0284c7;
  background: rgba(14, 165, 233, .11);
}

.fsensor-view .nvr-json-summary-card.is-empty .nvr-json-summary-card-icon,
.fsensor-detail-view .nvr-json-summary-card.is-empty .nvr-json-summary-card-icon {
  color: #94a3b8;
  background: rgba(148, 163, 184, .12);
}

.fsensor-view .nvr-json-summary-card-label,
.fsensor-detail-view .nvr-json-summary-card-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--nvr-text, #0f172a);
  font-size: .82rem;
  font-weight: 900;
}

.fsensor-view .nvr-json-summary-card-value,
.fsensor-detail-view .nvr-json-summary-card-value {
  display: block;
  margin-bottom: .35rem;
  color: var(--nvr-text, #0f172a);
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1.25;
  word-break: break-word;
}

.fsensor-view .nvr-json-summary-card-hint,
.fsensor-detail-view .nvr-json-summary-card-hint {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--nvr-muted, #64748b);
  font-size: .74rem;
  font-weight: 750;
  line-height: 1.35;
}

.fsensor-view .nvr-json-summary-empty,
.fsensor-detail-view .nvr-json-summary-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 92px;
  padding: 1rem;
  border: 1px dashed color-mix(in srgb, var(--nvr-border, #d7e1ee) 90%, transparent);
  border-radius: 18px;
  background: rgba(248, 250, 252, .76);
}

.fsensor-view .nvr-json-summary-empty-icon,
.fsensor-detail-view .nvr-json-summary-empty-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 13px;
  color: #64748b;
  background: rgba(148, 163, 184, .14);
}

.fsensor-view .nvr-json-summary-empty-title,
.fsensor-detail-view .nvr-json-summary-empty-title {
  color: var(--nvr-text, #0f172a);
  font-weight: 900;
}

.fsensor-view .nvr-json-summary-empty-text,
.fsensor-detail-view .nvr-json-summary-empty-text {
  color: var(--nvr-muted, #64748b);
  font-size: .82rem;
  font-weight: 700;
}

.fsensor-view .nvr-json-raw-details,
.fsensor-detail-view .nvr-json-raw-details {
  margin: 0 1rem 1rem;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 74%, transparent);
  border-radius: 16px;
  background: rgba(15, 23, 42, .035);
  overflow: hidden;
}

.fsensor-view .nvr-json-raw-details > summary,
.fsensor-detail-view .nvr-json-raw-details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem .9rem;
  color: var(--nvr-muted, #64748b);
  font-size: .78rem;
  font-weight: 900;
  user-select: none;
}

.fsensor-view .nvr-json-raw-details > summary::-webkit-details-marker,
.fsensor-detail-view .nvr-json-raw-details > summary::-webkit-details-marker {
  display: none;
}

.fsensor-view .nvr-json-raw-details > summary::after,
.fsensor-detail-view .nvr-json-raw-details > summary::after {
  content: '\f107';
  font-family: FontAwesome;
  margin-left: auto;
  transition: transform .18s ease;
}

.fsensor-view .nvr-json-raw-details[open] > summary::after,
.fsensor-detail-view .nvr-json-raw-details[open] > summary::after {
  transform: rotate(180deg);
}

.fsensor-view .nvr-json-raw-details pre,
.fsensor-detail-view .nvr-json-raw-details pre {
  max-height: 320px;
  margin: 0;
  padding: .95rem;
  overflow: auto;
  border-top: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 74%, transparent);
  background: rgba(15, 23, 42, .92);
  color: #e2e8f0;
  font-size: .78rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

html.dark .fsensor-view .nvr-json-summary-shell,
html.dark .fsensor-detail-view .nvr-json-summary-shell,
body.dark-mode .fsensor-view .nvr-json-summary-shell,
body.dark-mode .fsensor-detail-view .nvr-json-summary-shell {
  border-color: rgba(148, 163, 184, .24);
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, .18), transparent 38%),
    linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .92));
  box-shadow: 0 22px 58px rgba(0, 0, 0, .34);
}

html.dark .fsensor-view .nvr-json-summary-head,
html.dark .fsensor-detail-view .nvr-json-summary-head,
body.dark-mode .fsensor-view .nvr-json-summary-head,
body.dark-mode .fsensor-detail-view .nvr-json-summary-head {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .52);
}

html.dark .fsensor-view .nvr-json-summary-title,
html.dark .fsensor-detail-view .nvr-json-summary-title,
html.dark .fsensor-view .nvr-json-summary-card-label,
html.dark .fsensor-detail-view .nvr-json-summary-card-label,
html.dark .fsensor-view .nvr-json-summary-card-value,
html.dark .fsensor-detail-view .nvr-json-summary-card-value,
html.dark .fsensor-view .nvr-json-summary-empty-title,
html.dark .fsensor-detail-view .nvr-json-summary-empty-title,
body.dark-mode .fsensor-view .nvr-json-summary-title,
body.dark-mode .fsensor-detail-view .nvr-json-summary-title,
body.dark-mode .fsensor-view .nvr-json-summary-card-label,
body.dark-mode .fsensor-detail-view .nvr-json-summary-card-label,
body.dark-mode .fsensor-view .nvr-json-summary-card-value,
body.dark-mode .fsensor-detail-view .nvr-json-summary-card-value,
body.dark-mode .fsensor-view .nvr-json-summary-empty-title,
body.dark-mode .fsensor-detail-view .nvr-json-summary-empty-title {
  color: #f8fafc;
}

html.dark .fsensor-view .nvr-json-summary-subtitle,
html.dark .fsensor-detail-view .nvr-json-summary-subtitle,
html.dark .fsensor-view .nvr-json-summary-card-hint,
html.dark .fsensor-detail-view .nvr-json-summary-card-hint,
html.dark .fsensor-view .nvr-json-summary-empty-text,
html.dark .fsensor-detail-view .nvr-json-summary-empty-text,
body.dark-mode .fsensor-view .nvr-json-summary-subtitle,
body.dark-mode .fsensor-detail-view .nvr-json-summary-subtitle,
body.dark-mode .fsensor-view .nvr-json-summary-card-hint,
body.dark-mode .fsensor-detail-view .nvr-json-summary-card-hint,
body.dark-mode .fsensor-view .nvr-json-summary-empty-text,
body.dark-mode .fsensor-detail-view .nvr-json-summary-empty-text {
  color: #cbd5e1;
}

html.dark .fsensor-view .nvr-json-summary-card,
html.dark .fsensor-detail-view .nvr-json-summary-card,
body.dark-mode .fsensor-view .nvr-json-summary-card,
body.dark-mode .fsensor-detail-view .nvr-json-summary-card {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .68);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
}

html.dark .fsensor-view .nvr-json-summary-badge,
html.dark .fsensor-detail-view .nvr-json-summary-badge,
html.dark .fsensor-view .nvr-json-summary-metric,
html.dark .fsensor-detail-view .nvr-json-summary-metric,
body.dark-mode .fsensor-view .nvr-json-summary-badge,
body.dark-mode .fsensor-detail-view .nvr-json-summary-badge,
body.dark-mode .fsensor-view .nvr-json-summary-metric,
body.dark-mode .fsensor-detail-view .nvr-json-summary-metric {
  border-color: rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .72);
  color: #cbd5e1;
}

html.dark .fsensor-view .nvr-json-summary-empty,
html.dark .fsensor-detail-view .nvr-json-summary-empty,
html.dark .fsensor-view .nvr-json-raw-details,
html.dark .fsensor-detail-view .nvr-json-raw-details,
body.dark-mode .fsensor-view .nvr-json-summary-empty,
body.dark-mode .fsensor-detail-view .nvr-json-summary-empty,
body.dark-mode .fsensor-view .nvr-json-raw-details,
body.dark-mode .fsensor-detail-view .nvr-json-raw-details {
  border-color: rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .58);
}

@media (max-width: 767.98px) {
  .fsensor-view .nvr-json-summary-head,
  .fsensor-detail-view .nvr-json-summary-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .fsensor-view .nvr-json-summary-metrics,
  .fsensor-detail-view .nvr-json-summary-metrics {
    width: 100%;
    justify-content: flex-start;
  }

  .fsensor-view .nvr-json-summary-grid,
  .fsensor-detail-view .nvr-json-summary-grid {
    grid-template-columns: 1fr;
    padding: .8rem;
  }

  .fsensor-view .nvr-json-raw-details,
  .fsensor-detail-view .nvr-json-raw-details {
    margin: 0 .8rem .8rem;
  }
}


/* F-Sensor DetailView raw JSON presentation */
.fsensor-view .nvr-detailview-json-row--raw > th,
.fsensor-detail-view .nvr-detailview-json-row--raw > th,
.fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > th,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > th {
  width: 20% !important;
  min-width: 180px;
  padding: 1.05rem 1rem !important;
  text-align: right !important;
  vertical-align: middle !important;
  color: var(--nvr-muted, #64748b) !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  letter-spacing: .055em;
  text-transform: uppercase;
  background: transparent !important;
  border: 0 !important;
}

.fsensor-view .nvr-detailview-json-row--raw > td,
.fsensor-detail-view .nvr-detailview-json-row--raw > td,
.fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > td,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > td {
  width: 80% !important;
  padding: .75rem 1rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.fsensor-view .nvr-json-raw-shell,
.fsensor-detail-view .nvr-json-raw-shell {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 78%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, .09), transparent 34%),
    color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 94%, transparent);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
}

.fsensor-view .nvr-json-raw-shell.is-empty,
.fsensor-detail-view .nvr-json-raw-shell.is-empty {
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, .10), transparent 34%),
    color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 95%, transparent);
}

.fsensor-view .nvr-json-raw-head,
.fsensor-detail-view .nvr-json-raw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 72%, transparent);
  background: rgba(248, 250, 252, .68);
}

.fsensor-view .nvr-json-raw-head-main,
.fsensor-detail-view .nvr-json-raw-head-main {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.fsensor-view .nvr-json-raw-icon,
.fsensor-detail-view .nvr-json-raw-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  box-shadow: 0 10px 22px rgba(37, 99, 235, .24);
}

.fsensor-view .nvr-json-raw-title-wrap,
.fsensor-detail-view .nvr-json-raw-title-wrap {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.fsensor-view .nvr-json-raw-title,
.fsensor-detail-view .nvr-json-raw-title {
  color: var(--nvr-text, #0f172a);
  font-size: .98rem;
  font-weight: 900;
  line-height: 1.2;
}

.fsensor-view .nvr-json-raw-attribute,
.fsensor-detail-view .nvr-json-raw-attribute {
  color: var(--nvr-muted, #64748b);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .72rem;
  font-weight: 800;
}

.fsensor-view .nvr-json-raw-actions,
.fsensor-detail-view .nvr-json-raw-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  flex-wrap: wrap;
}

.fsensor-view .nvr-json-raw-badge,
.fsensor-detail-view .nvr-json-raw-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2rem;
  padding: .38rem .68rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
  border: 1px solid transparent;
}

.fsensor-view .nvr-json-raw-badge.is-valid,
.fsensor-detail-view .nvr-json-raw-badge.is-valid {
  color: #047857;
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .24);
}

.fsensor-view .nvr-json-raw-badge.is-warning,
.fsensor-detail-view .nvr-json-raw-badge.is-warning {
  color: #b45309;
  background: rgba(245, 158, 11, .13);
  border-color: rgba(245, 158, 11, .28);
}

.fsensor-view .nvr-json-copy-btn,
.fsensor-detail-view .nvr-json-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2rem;
  padding: .42rem .75rem;
  border: 1px solid color-mix(in srgb, var(--nvr-primary, #2563eb) 32%, transparent);
  border-radius: 999px;
  color: var(--nvr-primary, #2563eb);
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 9%, #ffffff);
  font-size: .74rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}

.fsensor-view .nvr-json-copy-btn:hover,
.fsensor-detail-view .nvr-json-copy-btn:hover,
.fsensor-view .nvr-json-copy-btn:focus,
.fsensor-detail-view .nvr-json-copy-btn:focus {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 58%, transparent);
  box-shadow: 0 10px 22px rgba(37, 99, 235, .14);
  outline: none;
}

.fsensor-view .nvr-json-copy-btn.is-copied,
.fsensor-detail-view .nvr-json-copy-btn.is-copied {
  color: #047857;
  border-color: rgba(16, 185, 129, .32);
  background: rgba(16, 185, 129, .12);
}

.fsensor-view .nvr-json-raw-details,
.fsensor-detail-view .nvr-json-raw-details {
  margin: 0;
  border: 0;
  background: transparent;
}

.fsensor-view .nvr-json-raw-details > summary,
.fsensor-detail-view .nvr-json-raw-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1rem;
  color: var(--nvr-text, #0f172a);
  font-size: .84rem;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
  transition: background-color .16s ease, color .16s ease;
}

.fsensor-view .nvr-json-raw-details > summary:hover,
.fsensor-detail-view .nvr-json-raw-details > summary:hover {
  background: rgba(37, 99, 235, .055);
}

.fsensor-view .nvr-json-raw-details > summary::-webkit-details-marker,
.fsensor-detail-view .nvr-json-raw-details > summary::-webkit-details-marker {
  display: none;
}

.fsensor-view .nvr-json-raw-summary-text,
.fsensor-detail-view .nvr-json-raw-summary-text {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.fsensor-view .nvr-json-raw-summary-arrow,
.fsensor-detail-view .nvr-json-raw-summary-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  color: var(--nvr-muted, #64748b);
  background: rgba(148, 163, 184, .12);
  transition: transform .18s ease, background-color .18s ease;
}

.fsensor-view .nvr-json-raw-details[open] .nvr-json-raw-summary-arrow,
.fsensor-detail-view .nvr-json-raw-details[open] .nvr-json-raw-summary-arrow {
  transform: rotate(180deg);
}

.fsensor-view .nvr-json-raw-pre-wrap,
.fsensor-detail-view .nvr-json-raw-pre-wrap {
  padding: 0 1rem 1rem;
}

.fsensor-view .nvr-json-raw-pre-wrap pre,
.fsensor-detail-view .nvr-json-raw-pre-wrap pre,
.fsensor-view .nvr-json-raw-details pre,
.fsensor-detail-view .nvr-json-raw-details pre {
  max-height: 360px;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 16px;
  color: #dbeafe;
  background: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .82rem;
  line-height: 1.65;
  white-space: pre;
}

html.dark .fsensor-view .nvr-json-raw-shell,
html.dark .fsensor-detail-view .nvr-json-raw-shell,
body.dark-mode .fsensor-view .nvr-json-raw-shell,
body.dark-mode .fsensor-detail-view .nvr-json-raw-shell {
  border-color: rgba(148, 163, 184, .22);
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, .16), transparent 36%),
    rgba(15, 23, 42, .78);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .32);
}

html.dark .fsensor-view .nvr-json-raw-head,
html.dark .fsensor-detail-view .nvr-json-raw-head,
body.dark-mode .fsensor-view .nvr-json-raw-head,
body.dark-mode .fsensor-detail-view .nvr-json-raw-head {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(2, 6, 23, .38);
}

html.dark .fsensor-view .nvr-json-raw-title,
html.dark .fsensor-detail-view .nvr-json-raw-title,
html.dark .fsensor-view .nvr-json-raw-details > summary,
html.dark .fsensor-detail-view .nvr-json-raw-details > summary,
body.dark-mode .fsensor-view .nvr-json-raw-title,
body.dark-mode .fsensor-detail-view .nvr-json-raw-title,
body.dark-mode .fsensor-view .nvr-json-raw-details > summary,
body.dark-mode .fsensor-detail-view .nvr-json-raw-details > summary {
  color: #f8fafc;
}

html.dark .fsensor-view .nvr-json-raw-attribute,
html.dark .fsensor-detail-view .nvr-json-raw-attribute,
body.dark-mode .fsensor-view .nvr-json-raw-attribute,
body.dark-mode .fsensor-detail-view .nvr-json-raw-attribute {
  color: #cbd5e1;
}

html.dark .fsensor-view .nvr-json-copy-btn,
html.dark .fsensor-detail-view .nvr-json-copy-btn,
body.dark-mode .fsensor-view .nvr-json-copy-btn,
body.dark-mode .fsensor-detail-view .nvr-json-copy-btn {
  color: #93c5fd;
  border-color: rgba(147, 197, 253, .28);
  background: rgba(37, 99, 235, .18);
}

@media (max-width: 767.98px) {
  .fsensor-view .nvr-detailview-json-row--raw > th,
  .fsensor-detail-view .nvr-detailview-json-row--raw > th,
  .fsensor-view .nvr-detailview-json-row--raw > td,
  .fsensor-detail-view .nvr-detailview-json-row--raw > td {
    display: block !important;
    width: 100% !important;
    min-width: 0;
    text-align: left !important;
  }

  .fsensor-view .nvr-json-raw-head,
  .fsensor-detail-view .nvr-json-raw-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .fsensor-view .nvr-json-raw-actions,
  .fsensor-detail-view .nvr-json-raw-actions {
    justify-content: flex-start;
    width: 100%;
  }
}

/* F-Sensor DetailView integrated raw JSON rows */
.fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw {
  display: table-row !important;
}

.fsensor-view .nvr-detailview-json-row--raw > th,
.fsensor-detail-view .nvr-detailview-json-row--raw > th,
.fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > th,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > th,
.fsensor-view .nvr-detailview-json-label,
.fsensor-detail-view .nvr-detailview-json-label {
  display: table-cell !important;
  width: 20% !important;
  min-width: 190px !important;
  padding: .95rem 1rem !important;
  text-align: right !important;
  vertical-align: middle !important;
  color: var(--nvr-muted, #64748b) !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 92%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 72%, transparent) !important;
  border-right: 0 !important;
  border-radius: 18px 0 0 18px !important;
  box-shadow: none !important;
}

.fsensor-view .nvr-detailview-json-row--raw > td,
.fsensor-detail-view .nvr-detailview-json-row--raw > td,
.fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > td,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > td,
.fsensor-view .nvr-detailview-json-content,
.fsensor-detail-view .nvr-detailview-json-content {
  display: table-cell !important;
  width: 80% !important;
  padding: 0 !important;
  vertical-align: middle !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.fsensor-view .nvr-detailview-json-content > .kv-attribute,
.fsensor-detail-view .nvr-detailview-json-content > .kv-attribute,
.fsensor-view .nvr-detailview-json-row--raw td > .kv-attribute,
.fsensor-detail-view .nvr-detailview-json-row--raw td > .kv-attribute {
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
}

.fsensor-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated,
.fsensor-detail-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 72%, transparent) !important;
  border-left: 0 !important;
  border-radius: 0 18px 18px 0 !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 96%, transparent) !important;
  box-shadow: none !important;
}

.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-toolbar,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .75rem !important;
  min-height: 48px !important;
  padding: .55rem .75rem .55rem .9rem !important;
  border-bottom: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 64%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 4%, transparent) !important;
}

.fsensor-view .nvr-json-raw-meta,
.fsensor-detail-view .nvr-json-raw-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: .45rem !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

.fsensor-view .nvr-json-raw-attribute-pill,
.fsensor-detail-view .nvr-json-raw-attribute-pill {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  min-height: 1.75rem !important;
  padding: .28rem .58rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 82%, transparent) !important;
  border-radius: 999px !important;
  color: var(--nvr-muted, #64748b) !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 86%, transparent) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-actions,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .45rem !important;
  flex: 0 0 auto !important;
}

.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-badge,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-badge,
.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-copy-btn,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-copy-btn {
  min-height: 1.75rem !important;
  padding: .34rem .6rem !important;
  font-size: .72rem !important;
}

.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-details,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-details {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-details > summary,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-details > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .75rem !important;
  min-height: 44px !important;
  padding: .65rem .85rem !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .8rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
}

.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-details > summary:hover,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-details > summary:hover {
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 6%, transparent) !important;
}

.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-pre-wrap,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-pre-wrap {
  padding: 0 .85rem .85rem !important;
  background: transparent !important;
}

.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-pre-wrap pre,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-pre-wrap pre,
.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-details pre,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-details pre {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 260px !important;
  margin: 0 !important;
  padding: .9rem 1rem !important;
  overflow: auto !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 14px !important;
  color: #dbeafe !important;
  background: #0f172a !important;
  font-size: .8rem !important;
  line-height: 1.6 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

html.dark .fsensor-view .nvr-detailview-json-row--raw > th,
html.dark .fsensor-detail-view .nvr-detailview-json-row--raw > th,
html.dark .fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > th,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > th,
body.dark-mode .fsensor-view .nvr-detailview-json-row--raw > th,
body.dark-mode .fsensor-detail-view .nvr-detailview-json-row--raw > th,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > th,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > th {
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .72) !important;
}

html.dark .fsensor-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated,
html.dark .fsensor-detail-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated,
body.dark-mode .fsensor-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated,
body.dark-mode .fsensor-detail-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .62) !important;
}

html.dark .fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-toolbar,
html.dark .fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-toolbar,
body.dark-mode .fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-toolbar,
body.dark-mode .fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-toolbar {
  border-color: rgba(148, 163, 184, .16) !important;
  background: rgba(2, 6, 23, .28) !important;
}

html.dark .fsensor-view .nvr-json-raw-attribute-pill,
html.dark .fsensor-detail-view .nvr-json-raw-attribute-pill,
body.dark-mode .fsensor-view .nvr-json-raw-attribute-pill,
body.dark-mode .fsensor-detail-view .nvr-json-raw-attribute-pill {
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, .24) !important;
  background: rgba(15, 23, 42, .72) !important;
}

html.dark .fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-details > summary,
html.dark .fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-details > summary,
body.dark-mode .fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-details > summary,
body.dark-mode .fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-details > summary {
  color: #f8fafc !important;
}

@media (max-width: 767.98px) {
  .fsensor-view .nvr-detailview-json-row--raw > th,
  .fsensor-detail-view .nvr-detailview-json-row--raw > th,
  .fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > th,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > th,
  .fsensor-view .nvr-detailview-json-row--raw > td,
  .fsensor-detail-view .nvr-detailview-json-row--raw > td,
  .fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > td,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    border-radius: 18px !important;
    border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 72%, transparent) !important;
  }

  .fsensor-view .nvr-detailview-json-row--raw > th,
  .fsensor-detail-view .nvr-detailview-json-row--raw > th,
  .fsensor-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > th,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr.nvr-detailview-json-row--raw > th {
    margin-bottom: .35rem !important;
    padding: .75rem .9rem !important;
  }

  .fsensor-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated,
  .fsensor-detail-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated {
    border-left: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 72%, transparent) !important;
    border-radius: 18px !important;
  }

  .fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-toolbar,
  .fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-toolbar {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}


/* F-Sensor raw JSON simple toolbar (no status badge / attribute pill) */
.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-toolbar--simple,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-toolbar--simple {
  justify-content: flex-end !important;
  min-height: 44px !important;
  padding: .55rem .75rem !important;
}

.fsensor-view .nvr-json-raw-toolbar--simple .nvr-json-raw-actions,
.fsensor-detail-view .nvr-json-raw-toolbar--simple .nvr-json-raw-actions {
  width: auto !important;
  margin-left: auto !important;
}

@media (max-width: 767.98px) {
  .fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-toolbar--simple,
  .fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-toolbar--simple {
    align-items: flex-end !important;
    flex-direction: row !important;
  }
}


/* F-Sensor raw JSON details compact v2: copy button merged into details header */
.fsensor-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated,
.fsensor-detail-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-toolbar,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-toolbar {
  display: none !important;
}

.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nvr-primary, #2563eb) 3%, var(--nvr-surface-solid, #ffffff)),
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 97%, transparent)
    ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .75rem !important;
  min-height: 46px !important;
  padding: .55rem .6rem .55rem .82rem !important;
  border: 0 !important;
  color: var(--nvr-text, #0f172a) !important;
  background: transparent !important;
  cursor: pointer !important;
  list-style: none !important;
  transition: background-color .18s ease, border-color .18s ease !important;
}

.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy[open] > summary,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy[open] > summary {
  border-bottom: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 66%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 5%, transparent) !important;
}

.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary:hover,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary:hover {
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 7%, transparent) !important;
}

.fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary::after,
.fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary::after {
  content: none !important;
  display: none !important;
}

.fsensor-view .nvr-json-raw-details--with-copy > summary::-webkit-details-marker,
.fsensor-detail-view .nvr-json-raw-details--with-copy > summary::-webkit-details-marker {
  display: none !important;
}

.fsensor-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text,
.fsensor-detail-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text {
  display: inline-flex !important;
  align-items: center !important;
  gap: .45rem !important;
  min-width: 0 !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.fsensor-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text i,
.fsensor-detail-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.65rem !important;
  height: 1.65rem !important;
  border-radius: 999px !important;
  color: var(--nvr-primary, #2563eb) !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 10%, transparent) !important;
}

.fsensor-view .nvr-json-raw-summary-actions,
.fsensor-detail-view .nvr-json-raw-summary-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .42rem !important;
  flex: 0 0 auto !important;
}

.fsensor-view .nvr-json-copy-btn.nvr-json-copy-btn--inline,
.fsensor-detail-view .nvr-json-copy-btn.nvr-json-copy-btn--inline {
  min-height: 1.75rem !important;
  padding: .34rem .56rem !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  box-shadow: none !important;
}

.fsensor-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-arrow,
.fsensor-detail-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: 999px !important;
  color: var(--nvr-muted, #64748b) !important;
  background: color-mix(in srgb, var(--nvr-border, #d7e1ee) 48%, transparent) !important;
  transition: transform .18s ease, background-color .18s ease, color .18s ease !important;
}

.fsensor-view .nvr-json-raw-details--with-copy[open] .nvr-json-raw-summary-arrow,
.fsensor-detail-view .nvr-json-raw-details--with-copy[open] .nvr-json-raw-summary-arrow {
  transform: rotate(180deg) !important;
  color: var(--nvr-primary, #2563eb) !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 12%, transparent) !important;
}

.fsensor-view .nvr-json-raw-details--with-copy .nvr-json-raw-pre-wrap,
.fsensor-detail-view .nvr-json-raw-details--with-copy .nvr-json-raw-pre-wrap {
  padding: .75rem !important;
  background: transparent !important;
}

.fsensor-view .nvr-json-raw-details--with-copy .nvr-json-raw-pre-wrap pre,
.fsensor-detail-view .nvr-json-raw-details--with-copy .nvr-json-raw-pre-wrap pre {
  max-height: 280px !important;
  border-radius: 14px !important;
  border-color: rgba(148, 163, 184, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html.dark .fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy,
html.dark .fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy,
body.dark-mode .fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy,
body.dark-mode .fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy {
  border-color: rgba(148, 163, 184, .24) !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, .72), rgba(2, 6, 23, .55)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

html.dark .fsensor-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text,
html.dark .fsensor-detail-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text,
body.dark-mode .fsensor-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text,
body.dark-mode .fsensor-detail-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text {
  color: #f8fafc !important;
}

html.dark .fsensor-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text i,
html.dark .fsensor-detail-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text i,
body.dark-mode .fsensor-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text i,
body.dark-mode .fsensor-detail-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text i {
  color: #93c5fd !important;
  background: rgba(37, 99, 235, .18) !important;
}

html.dark .fsensor-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-arrow,
html.dark .fsensor-detail-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-arrow,
body.dark-mode .fsensor-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-arrow,
body.dark-mode .fsensor-detail-view .nvr-json-raw-details--with-copy .nvr-json-raw-summary-arrow {
  color: #cbd5e1 !important;
  background: rgba(148, 163, 184, .14) !important;
}

@media (max-width: 575.98px) {
  .fsensor-view .nvr-json-raw-details--with-copy > summary,
  .fsensor-detail-view .nvr-json-raw-details--with-copy > summary {
    gap: .5rem !important;
    padding: .52rem .52rem .52rem .65rem !important;
  }

  .fsensor-view .nvr-json-copy-btn.nvr-json-copy-btn--inline span,
  .fsensor-detail-view .nvr-json-copy-btn.nvr-json-copy-btn--inline span {
    display: none !important;
  }

  .fsensor-view .nvr-json-copy-btn.nvr-json-copy-btn--inline,
  .fsensor-detail-view .nvr-json-copy-btn.nvr-json-copy-btn--inline {
    width: 1.75rem !important;
    padding-inline: 0 !important;
    justify-content: center !important;
  }
}

/* =========================================================
   F-Sensor DetailView table modern v2
   Makes the whole DetailView panel feel consistent with the
   compact raw JSON details component.
   ========================================================= */
.fsensor-view .nvr-fsensor-detailview-panel,
.fsensor-detail-view .nvr-fsensor-detailview-panel {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 78%, transparent) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--nvr-primary, #2563eb) 8%, transparent), transparent 34%),
    color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 97%, transparent) !important;
  box-shadow:
    0 22px 64px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

.fsensor-view .nvr-fsensor-detailview-panel > .card,
.fsensor-detail-view .nvr-fsensor-detailview-panel > .card,
.fsensor-view .nvr-fsensor-detailview-panel > .panel,
.fsensor-detail-view .nvr-fsensor-detailview-panel > .panel,
.fsensor-view .nvr-fsensor-detailview-panel .card,
.fsensor-detail-view .nvr-fsensor-detailview-panel .card,
.fsensor-view .nvr-fsensor-detailview-panel .panel,
.fsensor-detail-view .nvr-fsensor-detailview-panel .panel {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fsensor-view .nvr-fsensor-detailview-panel .card-header,
.fsensor-detail-view .nvr-fsensor-detailview-panel .card-header,
.fsensor-view .nvr-fsensor-detailview-panel .panel-heading,
.fsensor-detail-view .nvr-fsensor-detailview-panel .panel-heading,
.fsensor-view .nvr-fsensor-detailview-panel .kv-panel-before,
.fsensor-detail-view .nvr-fsensor-detailview-panel .kv-panel-before {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nvr-primary, #2563eb) 88%, #0ea5e9 12%),
      color-mix(in srgb, var(--nvr-primary-2, #06b6d4) 86%, #14b8a6 14%)
    ) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14) !important;
}

.fsensor-view .nvr-fsensor-detailview-panel .card-header,
.fsensor-detail-view .nvr-fsensor-detailview-panel .card-header,
.fsensor-view .nvr-fsensor-detailview-panel .panel-heading,
.fsensor-detail-view .nvr-fsensor-detailview-panel .panel-heading {
  padding: .95rem 1.15rem !important;
}

.fsensor-view .nvr-fsensor-detailview-panel .nvr-detail-heading,
.fsensor-detail-view .nvr-fsensor-detailview-panel .nvr-detail-heading {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

.fsensor-view .nvr-fsensor-detailview-panel .nvr-detail-heading-title,
.fsensor-detail-view .nvr-fsensor-detailview-panel .nvr-detail-heading-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: .58rem !important;
  color: #ffffff !important;
  font-size: .98rem !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  line-height: 1.25 !important;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .14) !important;
}

.fsensor-view .nvr-fsensor-detailview-panel .nvr-detail-heading-title i,
.fsensor-detail-view .nvr-fsensor-detailview-panel .nvr-detail-heading-title i {
  width: 2rem !important;
  height: 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

.fsensor-view .nvr-fsensor-detailview-panel .card-body,
.fsensor-detail-view .nvr-fsensor-detailview-panel .card-body,
.fsensor-view .nvr-fsensor-detailview-panel .panel-body,
.fsensor-detail-view .nvr-fsensor-detailview-panel .panel-body,
.fsensor-view .nvr-fsensor-detailview-panel .kv-detail-view,
.fsensor-detail-view .nvr-fsensor-detailview-panel .kv-detail-view {
  border: 0 !important;
  background: transparent !important;
}

.fsensor-view .nvr-fsensor-detailview-panel .card-body,
.fsensor-detail-view .nvr-fsensor-detailview-panel .card-body,
.fsensor-view .nvr-fsensor-detailview-panel .panel-body {
  padding: 1rem 1rem 1.1rem !important;
}

.fsensor-detail-view .nvr-fsensor-detailview-panel .panel-body {
  padding: 1rem 1rem 1.1rem !important;
}

.fsensor-view .nvr-fsensor-detailview-table,
.fsensor-detail-view .nvr-fsensor-detailview-table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 .62rem !important;
  background: transparent !important;
}

.fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > th,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > th {
  width: 20% !important;
  min-width: 210px !important;
  padding: .95rem 1rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
  border-right: 0 !important;
  border-radius: 18px 0 0 18px !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 94%, transparent),
      color-mix(in srgb, var(--nvr-muted, #64748b) 5%, transparent)
    ) !important;
  color: var(--nvr-muted, #64748b) !important;
  font-size: .74rem !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  line-height: 1.25 !important;
  text-align: right !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

.fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td {
  padding: .95rem 1rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
  border-left: 0 !important;
  border-radius: 0 18px 18px 0 !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 98%, transparent),
      color-mix(in srgb, var(--nvr-primary, #2563eb) 2%, var(--nvr-surface-solid, #ffffff))
    ) !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  vertical-align: middle !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58) !important;
}

.fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw):hover > th,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw):hover > th,
.fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw):hover > td,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw):hover > td {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 34%, var(--nvr-border, #d7e1ee)) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--nvr-primary, #2563eb) 7%, var(--nvr-surface-solid, #ffffff)),
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 92%, transparent)
    ) !important;
}

.fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td a,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td a {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  color: var(--nvr-primary, #2563eb) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  word-break: break-word !important;
}

.fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td a:hover,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td a:hover {
  text-decoration: underline !important;
  text-underline-offset: .22em !important;
}

.fsensor-view .nvr-fsensor-detailview-table .empty,
.fsensor-detail-view .nvr-fsensor-detailview-table .empty,
.fsensor-view .nvr-fsensor-detailview-table > tbody > tr > td:empty::before,
.fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr > td:empty::before {
  content: "-";
  color: var(--nvr-muted, #64748b) !important;
  font-weight: 800 !important;
  opacity: .75 !important;
}

.fsensor-view .nvr-fsensor-detailview-panel .card-footer,
.fsensor-detail-view .nvr-fsensor-detailview-panel .card-footer,
.fsensor-view .nvr-fsensor-detailview-panel .panel-footer,
.fsensor-detail-view .nvr-fsensor-detailview-panel .panel-footer {
  border: 0 !important;
  border-radius: 0 0 24px 24px !important;
  background: color-mix(in srgb, var(--nvr-muted, #64748b) 5%, transparent) !important;
}

html.dark .fsensor-view .nvr-fsensor-detailview-panel,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-panel,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-panel,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-panel {
  border-color: rgba(148, 163, 184, .22) !important;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, .16), transparent 35%),
    rgba(15, 23, 42, .78) !important;
  box-shadow:
    0 24px 72px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

html.dark .fsensor-view .nvr-fsensor-detailview-panel .card-header,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-panel .card-header,
html.dark .fsensor-view .nvr-fsensor-detailview-panel .panel-heading,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-panel .panel-heading,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-panel .card-header,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-panel .card-header,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-panel .panel-heading,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-panel .panel-heading {
  background: linear-gradient(135deg, #0f766e, #0369a1) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .10) !important;
}

html.dark .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > th,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > th,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > th,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > th {
  border-color: rgba(148, 163, 184, .20) !important;
  background: rgba(15, 23, 42, .68) !important;
  color: #cbd5e1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html.dark .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td {
  border-color: rgba(148, 163, 184, .20) !important;
  background: rgba(2, 6, 23, .42) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html.dark .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw):hover > th,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw):hover > th,
html.dark .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw):hover > td,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw):hover > td,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw):hover > th,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw):hover > th,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw):hover > td,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw):hover > td {
  border-color: rgba(56, 189, 248, .34) !important;
  background: rgba(30, 41, 59, .76) !important;
}

html.dark .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td a,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td a,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td a,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td a {
  color: #93c5fd !important;
}

html.dark .fsensor-view .nvr-fsensor-detailview-panel .card-footer,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-panel .card-footer,
html.dark .fsensor-view .nvr-fsensor-detailview-panel .panel-footer,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-panel .panel-footer,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-panel .card-footer,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-panel .card-footer,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-panel .panel-footer,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-panel .panel-footer {
  background: rgba(15, 23, 42, .62) !important;
  color: #cbd5e1 !important;
}

@media (max-width: 767.98px) {
  .fsensor-view .nvr-fsensor-detailview-panel,
  .fsensor-detail-view .nvr-fsensor-detailview-panel,
  .fsensor-view .nvr-fsensor-detailview-panel > .card,
  .fsensor-detail-view .nvr-fsensor-detailview-panel > .card,
  .fsensor-view .nvr-fsensor-detailview-panel > .panel,
  .fsensor-detail-view .nvr-fsensor-detailview-panel > .panel {
    border-radius: 20px !important;
  }

  .fsensor-view .nvr-fsensor-detailview-panel .card-header,
  .fsensor-detail-view .nvr-fsensor-detailview-panel .card-header,
  .fsensor-view .nvr-fsensor-detailview-panel .panel-heading,
  .fsensor-detail-view .nvr-fsensor-detailview-panel .panel-heading {
    border-radius: 20px 20px 0 0 !important;
  }

  .fsensor-view .nvr-fsensor-detailview-panel .nvr-detail-heading,
  .fsensor-detail-view .nvr-fsensor-detailview-panel .nvr-detail-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .fsensor-view .nvr-fsensor-detailview-table,
  .fsensor-detail-view .nvr-fsensor-detailview-table,
  .fsensor-view .nvr-fsensor-detailview-table > tbody,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody,
  .fsensor-view .nvr-fsensor-detailview-table > tbody > tr,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr,
  .fsensor-view .nvr-fsensor-detailview-table > tbody > tr > th,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr > th,
  .fsensor-view .nvr-fsensor-detailview-table > tbody > tr > td,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > th,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > th,
  .fsensor-view .nvr-detailview-json-row--raw > th,
  .fsensor-detail-view .nvr-detailview-json-row--raw > th {
    border-right: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
    border-radius: 16px 16px 0 0 !important;
    text-align: left !important;
    padding: .78rem .88rem .38rem !important;
  }

  .fsensor-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td,
  .fsensor-detail-view .nvr-fsensor-detailview-table > tbody > tr:not(.nvr-detailview-json-row--raw) > td,
  .fsensor-view .nvr-detailview-json-row--raw > td,
  .fsensor-detail-view .nvr-detailview-json-row--raw > td {
    border-left: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
    border-radius: 0 0 16px 16px !important;
    padding: .52rem .88rem .88rem !important;
  }

  .fsensor-view .nvr-detailview-json-row--raw > td,
  .fsensor-detail-view .nvr-detailview-json-row--raw > td {
    padding: 0 !important;
  }

  .fsensor-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy,
  .fsensor-detail-view .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy {
    border-radius: 0 0 16px 16px !important;
  }
}

/* =========================================================
   F-Sensor DetailView kv-panel-before cleanup
   The kv-panel-before area only hosts Kartik alert containers.
   When alerts are hidden, it must not create an extra colored band
   between the header and the DetailView table.
   ========================================================= */
.fsensor-view .nvr-fsensor-detailview-panel .kv-panel-before,
.fsensor-detail-view .nvr-fsensor-detailview-panel .kv-panel-before {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fsensor-view .nvr-fsensor-detailview-panel .kv-panel-before .kv-alert-container,
.fsensor-detail-view .nvr-fsensor-detailview-panel .kv-panel-before .kv-alert-container {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fsensor-view .nvr-fsensor-detailview-panel .kv-panel-before .kv-alert-container[style*="display:none"],
.fsensor-view .nvr-fsensor-detailview-panel .kv-panel-before .kv-alert-container[style*="display: none"],
.fsensor-detail-view .nvr-fsensor-detailview-panel .kv-panel-before .kv-alert-container[style*="display:none"],
.fsensor-detail-view .nvr-fsensor-detailview-panel .kv-panel-before .kv-alert-container[style*="display: none"] {
  display: none !important;
  padding: 0 !important;
}

.fsensor-view .nvr-fsensor-detailview-panel .kv-panel-before:has(.kv-alert-container[style*="display:none"]),
.fsensor-view .nvr-fsensor-detailview-panel .kv-panel-before:has(.kv-alert-container[style*="display: none"]),
.fsensor-detail-view .nvr-fsensor-detailview-panel .kv-panel-before:has(.kv-alert-container[style*="display:none"]),
.fsensor-detail-view .nvr-fsensor-detailview-panel .kv-panel-before:has(.kv-alert-container[style*="display: none"]) {
  display: block !important;
  min-height: 0 !important;
  height: 0 !important;
}

.fsensor-view .nvr-fsensor-detailview-panel .kv-panel-before .alert,
.fsensor-detail-view .nvr-fsensor-detailview-panel .kv-panel-before .alert {
  margin: .85rem 1rem 0 !important;
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 70%, transparent) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
}

.fsensor-view .nvr-fsensor-detailview-panel .card-header + .kv-panel-before + .kv-detail-view,
.fsensor-detail-view .nvr-fsensor-detailview-panel .card-header + .kv-panel-before + .kv-detail-view,
.fsensor-view .nvr-fsensor-detailview-panel .panel-heading + .kv-panel-before + .kv-detail-view,
.fsensor-detail-view .nvr-fsensor-detailview-panel .panel-heading + .kv-panel-before + .kv-detail-view {
  margin-top: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 72%, transparent) !important;
}

html.dark .fsensor-view .nvr-fsensor-detailview-panel .card-header + .kv-panel-before + .kv-detail-view,
html.dark .fsensor-detail-view .nvr-fsensor-detailview-panel .card-header + .kv-panel-before + .kv-detail-view,
body.dark-mode .fsensor-view .nvr-fsensor-detailview-panel .card-header + .kv-panel-before + .kv-detail-view,
body.dark-mode .fsensor-detail-view .nvr-fsensor-detailview-panel .card-header + .kv-panel-before + .kv-detail-view {
  border-top-color: rgba(148, 163, 184, .22) !important;
}

/* =========================================================
   NVR Generic DetailView + Raw JSON component
   ---------------------------------------------------------
   This block intentionally targets generic DetailView wrappers so the
   same modern table, kv-panel-before cleanup, and raw JSON UI can be
   reused by g-customer, g-group, g-device, g-sensor-db,
   g-sensor-channel, f-sensor, and f-sensor-detail.
   Module specific classes such as .nvr-fsensor-detailview-* are kept
   as backward-compatible aliases only.
   ========================================================= */
.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 78%, transparent) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--nvr-primary, #2563eb) 8%, transparent), transparent 34%),
    color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 97%, transparent) !important;
  box-shadow:
    0 22px 64px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) > :is(.card, .panel) {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) > :is(.card, .panel) > :is(.card-header, .panel-heading) {
  overflow: visible !important;
  padding: .95rem 1.15rem !important;
  border: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nvr-primary, #2563eb) 88%, #0ea5e9 12%),
      color-mix(in srgb, var(--nvr-primary-2, #06b6d4) 86%, #14b8a6 14%)
    ) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14) !important;
}

.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) .nvr-detail-heading {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) .nvr-detail-heading-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: .58rem !important;
  color: #ffffff !important;
  font-size: .98rem !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  line-height: 1.25 !important;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .14) !important;
}

.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) .nvr-detail-heading-title i {
  width: 2rem !important;
  height: 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) :is(.card-body, .panel-body, .kv-detail-view) {
  border: 0 !important;
  background: transparent !important;
}

.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) :is(.card-body, .panel-body) {
  padding: 1rem 1rem 1.1rem !important;
}

.nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table),
.nvr-crud-view .kv-detail-view > table.detail-view {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 .62rem !important;
  background: transparent !important;
}

.nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr:not(.nvr-detailview-json-row--raw) > th,
.nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr:not(.nvr-detailview-json-row--raw) > th {
  width: 20% !important;
  min-width: 210px !important;
  padding: .95rem 1rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
  border-right: 0 !important;
  border-radius: 18px 0 0 18px !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 94%, transparent),
      color-mix(in srgb, var(--nvr-muted, #64748b) 5%, transparent)
    ) !important;
  color: var(--nvr-muted, #64748b) !important;
  font-size: .74rem !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  line-height: 1.25 !important;
  text-align: right !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

.nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr:not(.nvr-detailview-json-row--raw) > td,
.nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr:not(.nvr-detailview-json-row--raw) > td {
  padding: .95rem 1rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
  border-left: 0 !important;
  border-radius: 0 18px 18px 0 !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 98%, transparent),
      color-mix(in srgb, var(--nvr-primary, #2563eb) 2%, var(--nvr-surface-solid, #ffffff))
    ) !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  vertical-align: middle !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58) !important;
}

.nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr:not(.nvr-detailview-json-row--raw):hover > :is(th, td),
.nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr:not(.nvr-detailview-json-row--raw):hover > :is(th, td) {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 34%, var(--nvr-border, #d7e1ee)) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--nvr-primary, #2563eb) 7%, var(--nvr-surface-solid, #ffffff)),
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 92%, transparent)
    ) !important;
}

.nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr:not(.nvr-detailview-json-row--raw) > td a,
.nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr:not(.nvr-detailview-json-row--raw) > td a {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  color: var(--nvr-primary, #2563eb) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  word-break: break-word !important;
}

.nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr:not(.nvr-detailview-json-row--raw) > td a:hover,
.nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr:not(.nvr-detailview-json-row--raw) > td a:hover {
  text-decoration: underline !important;
  text-underline-offset: .22em !important;
}

.nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr > td:empty::before,
.nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr > td:empty::before {
  content: "-";
  color: var(--nvr-muted, #64748b) !important;
  font-weight: 800 !important;
  opacity: .75 !important;
}

.nvr-crud-view :is(.nvr-detailview-json-row--raw) > th,
.nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr.nvr-detailview-json-row--raw > th,
.nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr.nvr-detailview-json-row--raw > th {
  width: 20% !important;
  min-width: 210px !important;
  padding: .75rem 1rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
  border-right: 0 !important;
  border-radius: 18px 0 0 18px !important;
  background: color-mix(in srgb, var(--nvr-muted, #64748b) 5%, transparent) !important;
  color: var(--nvr-muted, #64748b) !important;
  font-size: .74rem !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  text-align: right !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
}

.nvr-crud-view :is(.nvr-detailview-json-row--raw) > td,
.nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr.nvr-detailview-json-row--raw > td,
.nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr.nvr-detailview-json-row--raw > td {
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
  border-left: 0 !important;
  border-radius: 0 18px 18px 0 !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 97%, transparent) !important;
  vertical-align: middle !important;
  overflow: hidden !important;
}

.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) :is(.card-footer, .panel-footer) {
  border: 0 !important;
  border-radius: 0 0 24px 24px !important;
  background: color-mix(in srgb, var(--nvr-muted, #64748b) 5%, transparent) !important;
}

.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) .kv-panel-before {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) .kv-panel-before .kv-alert-container {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) .kv-panel-before .kv-alert-container[style*="display:none"],
.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) .kv-panel-before .kv-alert-container[style*="display: none"] {
  display: none !important;
  padding: 0 !important;
}

.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) .kv-panel-before:has(.kv-alert-container[style*="display:none"]),
.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) .kv-panel-before:has(.kv-alert-container[style*="display: none"]) {
  display: block !important;
  min-height: 0 !important;
  height: 0 !important;
}

.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) .kv-panel-before .alert {
  margin: .85rem 1rem 0 !important;
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 70%, transparent) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
}

.nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) :is(.card-header, .panel-heading) + .kv-panel-before + .kv-detail-view {
  margin-top: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 72%, transparent) !important;
}

.nvr-json-raw-shell.nvr-json-raw-shell--integrated {
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.nvr-json-raw-shell--integrated .nvr-json-raw-toolbar {
  display: none !important;
}

.nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 18px 18px 0 !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nvr-primary, #2563eb) 3%, var(--nvr-surface-solid, #ffffff)),
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 97%, transparent)
    ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

.nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .75rem !important;
  min-height: 46px !important;
  padding: .55rem .6rem .55rem .82rem !important;
  border: 0 !important;
  color: var(--nvr-text, #0f172a) !important;
  background: transparent !important;
  cursor: pointer !important;
  list-style: none !important;
  transition: background-color .18s ease, border-color .18s ease !important;
}

.nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy[open] > summary {
  border-bottom: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 66%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 5%, transparent) !important;
}

.nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary:hover {
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 7%, transparent) !important;
}

.nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary::after,
.nvr-json-raw-details--with-copy > summary::-webkit-details-marker {
  content: none !important;
  display: none !important;
}

.nvr-json-raw-details--with-copy .nvr-json-raw-summary-text {
  display: inline-flex !important;
  align-items: center !important;
  gap: .45rem !important;
  min-width: 0 !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.nvr-json-raw-details--with-copy .nvr-json-raw-summary-text i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.65rem !important;
  height: 1.65rem !important;
  border-radius: 999px !important;
  color: var(--nvr-primary, #2563eb) !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 10%, transparent) !important;
}

.nvr-json-raw-summary-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .42rem !important;
  flex: 0 0 auto !important;
}

.nvr-json-copy-btn.nvr-json-copy-btn--inline {
  min-height: 1.75rem !important;
  padding: .34rem .56rem !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  box-shadow: none !important;
}

.nvr-json-raw-details--with-copy .nvr-json-raw-summary-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: 999px !important;
  color: var(--nvr-muted, #64748b) !important;
  background: color-mix(in srgb, var(--nvr-border, #d7e1ee) 48%, transparent) !important;
  transition: transform .18s ease, background-color .18s ease, color .18s ease !important;
}

.nvr-json-raw-details--with-copy[open] .nvr-json-raw-summary-arrow {
  transform: rotate(180deg) !important;
  color: var(--nvr-primary, #2563eb) !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 12%, transparent) !important;
}

.nvr-json-raw-details--with-copy .nvr-json-raw-pre-wrap {
  padding: .75rem !important;
  background: transparent !important;
}

.nvr-json-raw-details--with-copy .nvr-json-raw-pre-wrap pre,
.nvr-json-raw-details--with-copy pre {
  width: 100% !important;
  max-height: 280px !important;
  margin: 0 !important;
  overflow: auto !important;
  border-radius: 14px !important;
  border-color: rgba(148, 163, 184, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html.dark .nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode),
body.dark-mode .nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) {
  border-color: rgba(148, 163, 184, .22) !important;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, .16), transparent 35%),
    rgba(15, 23, 42, .78) !important;
  box-shadow:
    0 24px 72px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

html.dark .nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) > :is(.card, .panel) > :is(.card-header, .panel-heading),
body.dark-mode .nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) > :is(.card, .panel) > :is(.card-header, .panel-heading) {
  background: linear-gradient(135deg, #0f766e, #0369a1) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .10) !important;
}

html.dark .nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr:not(.nvr-detailview-json-row--raw) > th,
body.dark-mode .nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr:not(.nvr-detailview-json-row--raw) > th,
html.dark .nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr:not(.nvr-detailview-json-row--raw) > th,
body.dark-mode .nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr:not(.nvr-detailview-json-row--raw) > th {
  border-color: rgba(148, 163, 184, .20) !important;
  background: rgba(15, 23, 42, .68) !important;
  color: #cbd5e1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html.dark .nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr:not(.nvr-detailview-json-row--raw) > td,
body.dark-mode .nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr:not(.nvr-detailview-json-row--raw) > td,
html.dark .nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr:not(.nvr-detailview-json-row--raw) > td,
body.dark-mode .nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr:not(.nvr-detailview-json-row--raw) > td {
  border-color: rgba(148, 163, 184, .20) !important;
  background: rgba(2, 6, 23, .42) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html.dark .nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr:not(.nvr-detailview-json-row--raw):hover > :is(th, td),
body.dark-mode .nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr:not(.nvr-detailview-json-row--raw):hover > :is(th, td),
html.dark .nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr:not(.nvr-detailview-json-row--raw):hover > :is(th, td),
body.dark-mode .nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr:not(.nvr-detailview-json-row--raw):hover > :is(th, td) {
  border-color: rgba(56, 189, 248, .34) !important;
  background: rgba(30, 41, 59, .76) !important;
}

html.dark .nvr-crud-view :is(.nvr-detailview-json-row--raw) > :is(th, td),
body.dark-mode .nvr-crud-view :is(.nvr-detailview-json-row--raw) > :is(th, td),
html.dark .nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr.nvr-detailview-json-row--raw > :is(th, td),
body.dark-mode .nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr.nvr-detailview-json-row--raw > :is(th, td) {
  border-color: rgba(148, 163, 184, .20) !important;
  background: rgba(15, 23, 42, .58) !important;
  color: #cbd5e1 !important;
}

html.dark .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy,
body.dark-mode .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy {
  border-color: rgba(148, 163, 184, .24) !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, .72), rgba(2, 6, 23, .55)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

html.dark .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text,
body.dark-mode .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text {
  color: #f8fafc !important;
}

html.dark .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text i,
body.dark-mode .nvr-json-raw-details--with-copy .nvr-json-raw-summary-text i {
  color: #93c5fd !important;
  background: rgba(37, 99, 235, .18) !important;
}

html.dark .nvr-json-raw-details--with-copy .nvr-json-raw-summary-arrow,
body.dark-mode .nvr-json-raw-details--with-copy .nvr-json-raw-summary-arrow {
  color: #cbd5e1 !important;
  background: rgba(148, 163, 184, .14) !important;
}

html.dark .nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) :is(.card-footer, .panel-footer),
body.dark-mode .nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) :is(.card-footer, .panel-footer) {
  background: rgba(15, 23, 42, .62) !important;
  color: #cbd5e1 !important;
}

html.dark .nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) :is(.card-header, .panel-heading) + .kv-panel-before + .kv-detail-view,
body.dark-mode .nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) :is(.card-header, .panel-heading) + .kv-panel-before + .kv-detail-view {
  border-top-color: rgba(148, 163, 184, .22) !important;
}

@media (max-width: 767.98px) {
  .nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode),
  .nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) > :is(.card, .panel) {
    border-radius: 20px !important;
  }

  .nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) > :is(.card, .panel) > :is(.card-header, .panel-heading) {
    border-radius: 20px 20px 0 0 !important;
  }

  .nvr-crud-view :is(.nvr-detailview-panel, .nvr-fsensor-detailview-panel, .kv-container-bs3.kv-view-mode, .kv-container-bs4.kv-view-mode, .kv-container-bs5.kv-view-mode) .nvr-detail-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table),
  .nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody,
  .nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr,
  .nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr > th,
  .nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr > td,
  .nvr-crud-view .kv-detail-view > table.detail-view,
  .nvr-crud-view .kv-detail-view > table.detail-view > tbody,
  .nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr,
  .nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr > th,
  .nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr:not(.nvr-detailview-json-row--raw) > th,
  .nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr:not(.nvr-detailview-json-row--raw) > th,
  .nvr-crud-view .nvr-detailview-json-row--raw > th {
    border-right: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
    border-radius: 16px 16px 0 0 !important;
    text-align: left !important;
    padding: .78rem .88rem .38rem !important;
  }

  .nvr-crud-view :is(.nvr-detailview-table, .nvr-fsensor-detailview-table) > tbody > tr:not(.nvr-detailview-json-row--raw) > td,
  .nvr-crud-view .kv-detail-view > table.detail-view > tbody > tr:not(.nvr-detailview-json-row--raw) > td,
  .nvr-crud-view .nvr-detailview-json-row--raw > td {
    border-left: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
    border-radius: 0 0 16px 16px !important;
    padding: .52rem .88rem .88rem !important;
  }

  .nvr-crud-view .nvr-detailview-json-row--raw > td {
    padding: 0 !important;
  }

  .nvr-json-raw-shell--integrated .nvr-json-raw-details.nvr-json-raw-details--with-copy {
    border-radius: 0 0 16px 16px !important;
  }
}

@media (max-width: 575.98px) {
  .nvr-json-raw-details--with-copy > summary {
    gap: .5rem !important;
    padding: .52rem .52rem .52rem .65rem !important;
  }

  .nvr-json-copy-btn.nvr-json-copy-btn--inline span {
    display: none !important;
  }

  .nvr-json-copy-btn.nvr-json-copy-btn--inline {
    width: 1.75rem !important;
    padding-inline: 0 !important;
    justify-content: center !important;
  }
}

/* =========================================================
   Universal DetailView modern surface v3
   Applies the f-sensor DetailView polish to all modernized
   G/F modules, including legacy wrapper classes that do not
   use .nvr-crud-view.
   ========================================================= */
.gcustomer-view .kv-container-bs4.kv-view-mode,
.ggroup-view .kv-container-bs4.kv-view-mode,
.gdevice-view .kv-container-bs4.kv-view-mode,
.gsensor-db-view .kv-container-bs4.kv-view-mode,
.gsensor-channel-view .kv-container-bs4.kv-view-mode,
.fsensor-view .kv-container-bs4.kv-view-mode,
.fsensor-detail-view .kv-container-bs4.kv-view-mode,
.nvr-crud-view .kv-container-bs4.kv-view-mode,
.nvr-detailview-panel {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 78%, transparent) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--nvr-primary, #2563eb) 7%, transparent), transparent 34%),
    color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 97%, transparent) !important;
  box-shadow:
    0 22px 64px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode > .card,
.ggroup-view .kv-container-bs4.kv-view-mode > .card,
.gdevice-view .kv-container-bs4.kv-view-mode > .card,
.gsensor-db-view .kv-container-bs4.kv-view-mode > .card,
.gsensor-channel-view .kv-container-bs4.kv-view-mode > .card,
.fsensor-view .kv-container-bs4.kv-view-mode > .card,
.fsensor-detail-view .kv-container-bs4.kv-view-mode > .card,
.nvr-crud-view .kv-container-bs4.kv-view-mode > .card,
.gcustomer-view .kv-container-bs4.kv-view-mode > .panel,
.ggroup-view .kv-container-bs4.kv-view-mode > .panel,
.gdevice-view .kv-container-bs4.kv-view-mode > .panel,
.gsensor-db-view .kv-container-bs4.kv-view-mode > .panel,
.gsensor-channel-view .kv-container-bs4.kv-view-mode > .panel,
.fsensor-view .kv-container-bs4.kv-view-mode > .panel,
.fsensor-detail-view .kv-container-bs4.kv-view-mode > .panel,
.nvr-crud-view .kv-container-bs4.kv-view-mode > .panel,
.nvr-detailview-panel > .card,
.nvr-detailview-panel > .panel {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode .card-header,
.ggroup-view .kv-container-bs4.kv-view-mode .card-header,
.gdevice-view .kv-container-bs4.kv-view-mode .card-header,
.gsensor-db-view .kv-container-bs4.kv-view-mode .card-header,
.gsensor-channel-view .kv-container-bs4.kv-view-mode .card-header,
.fsensor-view .kv-container-bs4.kv-view-mode .card-header,
.fsensor-detail-view .kv-container-bs4.kv-view-mode .card-header,
.nvr-crud-view .kv-container-bs4.kv-view-mode .card-header,
.gcustomer-view .kv-container-bs4.kv-view-mode .panel-heading,
.ggroup-view .kv-container-bs4.kv-view-mode .panel-heading,
.gdevice-view .kv-container-bs4.kv-view-mode .panel-heading,
.gsensor-db-view .kv-container-bs4.kv-view-mode .panel-heading,
.gsensor-channel-view .kv-container-bs4.kv-view-mode .panel-heading,
.fsensor-view .kv-container-bs4.kv-view-mode .panel-heading,
.fsensor-detail-view .kv-container-bs4.kv-view-mode .panel-heading,
.nvr-crud-view .kv-container-bs4.kv-view-mode .panel-heading,
.nvr-detailview-panel .card-header,
.nvr-detailview-panel .panel-heading {
  overflow: visible !important;
  padding: .95rem 1.15rem !important;
  border: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  color: #ffffff !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nvr-primary, #2563eb) 88%, #0ea5e9 12%),
      color-mix(in srgb, var(--nvr-primary-2, #06b6d4) 86%, #14b8a6 14%)
    ) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14) !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode .card-header h5,
.ggroup-view .kv-container-bs4.kv-view-mode .card-header h5,
.gdevice-view .kv-container-bs4.kv-view-mode .card-header h5,
.gsensor-db-view .kv-container-bs4.kv-view-mode .card-header h5,
.gsensor-channel-view .kv-container-bs4.kv-view-mode .card-header h5,
.fsensor-view .kv-container-bs4.kv-view-mode .card-header h5,
.fsensor-detail-view .kv-container-bs4.kv-view-mode .card-header h5,
.nvr-crud-view .kv-container-bs4.kv-view-mode .card-header h5,
.nvr-detailview-panel .card-header h5 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: .98rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode .nvr-detail-heading,
.ggroup-view .kv-container-bs4.kv-view-mode .nvr-detail-heading,
.gdevice-view .kv-container-bs4.kv-view-mode .nvr-detail-heading,
.gsensor-db-view .kv-container-bs4.kv-view-mode .nvr-detail-heading,
.gsensor-channel-view .kv-container-bs4.kv-view-mode .nvr-detail-heading,
.fsensor-view .kv-container-bs4.kv-view-mode .nvr-detail-heading,
.fsensor-detail-view .kv-container-bs4.kv-view-mode .nvr-detail-heading,
.nvr-crud-view .kv-container-bs4.kv-view-mode .nvr-detail-heading,
.nvr-detailview-panel .nvr-detail-heading {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title,
.ggroup-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title,
.gdevice-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title,
.gsensor-db-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title,
.gsensor-channel-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title,
.fsensor-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title,
.fsensor-detail-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title,
.nvr-crud-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title,
.nvr-detailview-panel .nvr-detail-heading-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: .58rem !important;
  color: #ffffff !important;
  font-size: .98rem !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  line-height: 1.25 !important;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .14) !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title i,
.ggroup-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title i,
.gdevice-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title i,
.gsensor-db-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title i,
.gsensor-channel-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title i,
.fsensor-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title i,
.fsensor-detail-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title i,
.nvr-crud-view .kv-container-bs4.kv-view-mode .nvr-detail-heading-title i,
.nvr-detailview-panel .nvr-detail-heading-title i {
  width: 2rem !important;
  height: 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode .kv-panel-before,
.ggroup-view .kv-container-bs4.kv-view-mode .kv-panel-before,
.gdevice-view .kv-container-bs4.kv-view-mode .kv-panel-before,
.gsensor-db-view .kv-container-bs4.kv-view-mode .kv-panel-before,
.gsensor-channel-view .kv-container-bs4.kv-view-mode .kv-panel-before,
.fsensor-view .kv-container-bs4.kv-view-mode .kv-panel-before,
.fsensor-detail-view .kv-container-bs4.kv-view-mode .kv-panel-before,
.nvr-crud-view .kv-container-bs4.kv-view-mode .kv-panel-before,
.nvr-detailview-panel .kv-panel-before {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode .kv-panel-before .kv-alert-container[style*="display:none"],
.gcustomer-view .kv-container-bs4.kv-view-mode .kv-panel-before .kv-alert-container[style*="display: none"],
.ggroup-view .kv-container-bs4.kv-view-mode .kv-panel-before .kv-alert-container[style*="display:none"],
.ggroup-view .kv-container-bs4.kv-view-mode .kv-panel-before .kv-alert-container[style*="display: none"],
.gdevice-view .kv-container-bs4.kv-view-mode .kv-panel-before .kv-alert-container[style*="display:none"],
.gdevice-view .kv-container-bs4.kv-view-mode .kv-panel-before .kv-alert-container[style*="display: none"],
.gsensor-db-view .kv-container-bs4.kv-view-mode .kv-panel-before .kv-alert-container[style*="display:none"],
.gsensor-db-view .kv-container-bs4.kv-view-mode .kv-panel-before .kv-alert-container[style*="display: none"],
.gsensor-channel-view .kv-container-bs4.kv-view-mode .kv-panel-before .kv-alert-container[style*="display:none"],
.gsensor-channel-view .kv-container-bs4.kv-view-mode .kv-panel-before .kv-alert-container[style*="display: none"],
.fsensor-view .kv-container-bs4.kv-view-mode .kv-panel-before .kv-alert-container[style*="display:none"],
.fsensor-view .kv-container-bs4.kv-view-mode .kv-panel-before .kv-alert-container[style*="display: none"],
.fsensor-detail-view .kv-container-bs4.kv-view-mode .kv-panel-before .kv-alert-container[style*="display:none"],
.fsensor-detail-view .kv-container-bs4.kv-view-mode .kv-panel-before .kv-alert-container[style*="display: none"] {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode .kv-panel-before:has(.kv-alert-container[style*="display:none"]),
.gcustomer-view .kv-container-bs4.kv-view-mode .kv-panel-before:has(.kv-alert-container[style*="display: none"]),
.ggroup-view .kv-container-bs4.kv-view-mode .kv-panel-before:has(.kv-alert-container[style*="display:none"]),
.ggroup-view .kv-container-bs4.kv-view-mode .kv-panel-before:has(.kv-alert-container[style*="display: none"]),
.gdevice-view .kv-container-bs4.kv-view-mode .kv-panel-before:has(.kv-alert-container[style*="display:none"]),
.gdevice-view .kv-container-bs4.kv-view-mode .kv-panel-before:has(.kv-alert-container[style*="display: none"]),
.gsensor-db-view .kv-container-bs4.kv-view-mode .kv-panel-before:has(.kv-alert-container[style*="display:none"]),
.gsensor-db-view .kv-container-bs4.kv-view-mode .kv-panel-before:has(.kv-alert-container[style*="display: none"]),
.gsensor-channel-view .kv-container-bs4.kv-view-mode .kv-panel-before:has(.kv-alert-container[style*="display:none"]),
.gsensor-channel-view .kv-container-bs4.kv-view-mode .kv-panel-before:has(.kv-alert-container[style*="display: none"]),
.fsensor-view .kv-container-bs4.kv-view-mode .kv-panel-before:has(.kv-alert-container[style*="display:none"]),
.fsensor-view .kv-container-bs4.kv-view-mode .kv-panel-before:has(.kv-alert-container[style*="display: none"]),
.fsensor-detail-view .kv-container-bs4.kv-view-mode .kv-panel-before:has(.kv-alert-container[style*="display:none"]),
.fsensor-detail-view .kv-container-bs4.kv-view-mode .kv-panel-before:has(.kv-alert-container[style*="display: none"]) {
  display: block !important;
  height: 0 !important;
  min-height: 0 !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode .kv-detail-view,
.ggroup-view .kv-container-bs4.kv-view-mode .kv-detail-view,
.gdevice-view .kv-container-bs4.kv-view-mode .kv-detail-view,
.gsensor-db-view .kv-container-bs4.kv-view-mode .kv-detail-view,
.gsensor-channel-view .kv-container-bs4.kv-view-mode .kv-detail-view,
.fsensor-view .kv-container-bs4.kv-view-mode .kv-detail-view,
.fsensor-detail-view .kv-container-bs4.kv-view-mode .kv-detail-view,
.nvr-crud-view .kv-container-bs4.kv-view-mode .kv-detail-view,
.nvr-detailview-panel .kv-detail-view {
  padding: .25rem .25rem .75rem !important;
  border: 0 !important;
  background: transparent !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view,
.ggroup-view .kv-container-bs4.kv-view-mode table.detail-view,
.gdevice-view .kv-container-bs4.kv-view-mode table.detail-view,
.gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view,
.gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view,
.fsensor-view .kv-container-bs4.kv-view-mode table.detail-view,
.fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view,
.nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view,
.nvr-detailview-table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 .62rem !important;
  background: transparent !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
.ggroup-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
.gdevice-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
.gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
.gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
.fsensor-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
.fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
.nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
.nvr-detailview-table > tbody > tr > th {
  width: 20% !important;
  min-width: 210px !important;
  padding: .9rem 1rem !important;
  vertical-align: middle !important;
  text-align: right !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
  border-right: 0 !important;
  border-radius: 18px 0 0 18px !important;
  color: var(--nvr-muted, #64748b) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 92%, transparent),
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 86%, var(--nvr-border, #d7e1ee) 8%)
    ) !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
.ggroup-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
.gdevice-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
.gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
.gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
.fsensor-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
.fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
.nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
.nvr-detailview-table > tbody > tr > td {
  padding: .9rem 1rem !important;
  vertical-align: middle !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
  border-left: 0 !important;
  border-radius: 0 18px 18px 0 !important;
  color: var(--nvr-text, #0f172a) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 96%, transparent),
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 90%, var(--nvr-primary, #2563eb) 3%)
    ) !important;
  font-size: .86rem !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > th,
.ggroup-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > th,
.gdevice-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > th,
.gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > th,
.gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > th,
.fsensor-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > th,
.fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > th,
.gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > td,
.ggroup-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > td,
.gdevice-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > td,
.gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > td,
.gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > td,
.fsensor-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > td,
.fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > td,
.nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > th,
.nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr:hover > td,
.nvr-detailview-table > tbody > tr:hover > th,
.nvr-detailview-table > tbody > tr:hover > td {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 28%, var(--nvr-border, #d7e1ee)) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07) !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view td a,
.ggroup-view .kv-container-bs4.kv-view-mode table.detail-view td a,
.gdevice-view .kv-container-bs4.kv-view-mode table.detail-view td a,
.gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view td a,
.gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view td a,
.fsensor-view .kv-container-bs4.kv-view-mode table.detail-view td a,
.fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view td a,
.nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view td a,
.nvr-detailview-table td a {
  color: var(--nvr-primary, #2563eb) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view td a:hover,
.ggroup-view .kv-container-bs4.kv-view-mode table.detail-view td a:hover,
.gdevice-view .kv-container-bs4.kv-view-mode table.detail-view td a:hover,
.gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view td a:hover,
.gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view td a:hover,
.fsensor-view .kv-container-bs4.kv-view-mode table.detail-view td a:hover,
.fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view td a:hover,
.nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view td a:hover,
.nvr-detailview-table td a:hover {
  text-decoration: underline !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode .card-footer,
.ggroup-view .kv-container-bs4.kv-view-mode .card-footer,
.gdevice-view .kv-container-bs4.kv-view-mode .card-footer,
.gsensor-db-view .kv-container-bs4.kv-view-mode .card-footer,
.gsensor-channel-view .kv-container-bs4.kv-view-mode .card-footer,
.fsensor-view .kv-container-bs4.kv-view-mode .card-footer,
.fsensor-detail-view .kv-container-bs4.kv-view-mode .card-footer,
.nvr-crud-view .kv-container-bs4.kv-view-mode .card-footer,
.nvr-detailview-panel .card-footer,
.nvr-detailview-panel .panel-footer {
  border: 0 !important;
  border-radius: 0 0 24px 24px !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 95%, transparent) !important;
}

/* Universal raw JSON details used by read-only DetailView fields */
.gcustomer-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated,
.ggroup-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated,
.gdevice-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated,
.gsensor-db-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated,
.gsensor-channel-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated,
.fsensor-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated,
.fsensor-detail-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated,
.nvr-crud-view .nvr-json-raw-shell.nvr-json-raw-shell--integrated {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.gcustomer-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
.ggroup-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
.gdevice-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
.gsensor-db-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
.gsensor-channel-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
.fsensor-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
.fsensor-detail-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
.nvr-crud-view .nvr-json-raw-details.nvr-json-raw-details--with-copy {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nvr-primary, #2563eb) 3%, var(--nvr-surface-solid, #ffffff)),
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 97%, transparent)
    ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

.gcustomer-view .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary,
.ggroup-view .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary,
.gdevice-view .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary,
.gsensor-db-view .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary,
.gsensor-channel-view .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary,
.fsensor-view .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary,
.fsensor-detail-view .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary,
.nvr-crud-view .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .75rem !important;
  min-height: 46px !important;
  padding: .55rem .6rem .55rem .82rem !important;
  border: 0 !important;
  color: var(--nvr-text, #0f172a) !important;
  background: transparent !important;
  cursor: pointer !important;
  list-style: none !important;
}

.gcustomer-view .nvr-json-raw-summary-text,
.ggroup-view .nvr-json-raw-summary-text,
.gdevice-view .nvr-json-raw-summary-text,
.gsensor-db-view .nvr-json-raw-summary-text,
.gsensor-channel-view .nvr-json-raw-summary-text,
.fsensor-view .nvr-json-raw-summary-text,
.fsensor-detail-view .nvr-json-raw-summary-text,
.nvr-crud-view .nvr-json-raw-summary-text {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .52rem !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
}

.gcustomer-view .nvr-json-raw-summary-text i,
.ggroup-view .nvr-json-raw-summary-text i,
.gdevice-view .nvr-json-raw-summary-text i,
.gsensor-db-view .nvr-json-raw-summary-text i,
.gsensor-channel-view .nvr-json-raw-summary-text i,
.fsensor-view .nvr-json-raw-summary-text i,
.fsensor-detail-view .nvr-json-raw-summary-text i,
.nvr-crud-view .nvr-json-raw-summary-text i {
  width: 1.78rem !important;
  height: 1.78rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: var(--nvr-primary, #2563eb) !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 10%, transparent) !important;
}

.gcustomer-view .nvr-json-raw-summary-actions,
.ggroup-view .nvr-json-raw-summary-actions,
.gdevice-view .nvr-json-raw-summary-actions,
.gsensor-db-view .nvr-json-raw-summary-actions,
.gsensor-channel-view .nvr-json-raw-summary-actions,
.fsensor-view .nvr-json-raw-summary-actions,
.fsensor-detail-view .nvr-json-raw-summary-actions,
.nvr-crud-view .nvr-json-raw-summary-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .42rem !important;
  flex: 0 0 auto !important;
}

.gcustomer-view .nvr-json-copy-btn.nvr-json-copy-btn--inline,
.ggroup-view .nvr-json-copy-btn.nvr-json-copy-btn--inline,
.gdevice-view .nvr-json-copy-btn.nvr-json-copy-btn--inline,
.gsensor-db-view .nvr-json-copy-btn.nvr-json-copy-btn--inline,
.gsensor-channel-view .nvr-json-copy-btn.nvr-json-copy-btn--inline,
.fsensor-view .nvr-json-copy-btn.nvr-json-copy-btn--inline,
.fsensor-detail-view .nvr-json-copy-btn.nvr-json-copy-btn--inline,
.nvr-crud-view .nvr-json-copy-btn.nvr-json-copy-btn--inline {
  min-height: 1.75rem !important;
  padding: .34rem .56rem !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  box-shadow: none !important;
}

.gcustomer-view .nvr-json-raw-summary-arrow,
.ggroup-view .nvr-json-raw-summary-arrow,
.gdevice-view .nvr-json-raw-summary-arrow,
.gsensor-db-view .nvr-json-raw-summary-arrow,
.gsensor-channel-view .nvr-json-raw-summary-arrow,
.fsensor-view .nvr-json-raw-summary-arrow,
.fsensor-detail-view .nvr-json-raw-summary-arrow,
.nvr-crud-view .nvr-json-raw-summary-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: 999px !important;
  color: var(--nvr-muted, #64748b) !important;
  background: color-mix(in srgb, var(--nvr-border, #d7e1ee) 48%, transparent) !important;
  transition: transform .18s ease, background-color .18s ease, color .18s ease !important;
}

.gcustomer-view .nvr-json-raw-details--with-copy[open] .nvr-json-raw-summary-arrow,
.ggroup-view .nvr-json-raw-details--with-copy[open] .nvr-json-raw-summary-arrow,
.gdevice-view .nvr-json-raw-details--with-copy[open] .nvr-json-raw-summary-arrow,
.gsensor-db-view .nvr-json-raw-details--with-copy[open] .nvr-json-raw-summary-arrow,
.gsensor-channel-view .nvr-json-raw-details--with-copy[open] .nvr-json-raw-summary-arrow,
.fsensor-view .nvr-json-raw-details--with-copy[open] .nvr-json-raw-summary-arrow,
.fsensor-detail-view .nvr-json-raw-details--with-copy[open] .nvr-json-raw-summary-arrow,
.nvr-crud-view .nvr-json-raw-details--with-copy[open] .nvr-json-raw-summary-arrow {
  transform: rotate(180deg) !important;
  color: var(--nvr-primary, #2563eb) !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 12%, transparent) !important;
}

.gcustomer-view .nvr-json-raw-pre-wrap,
.ggroup-view .nvr-json-raw-pre-wrap,
.gdevice-view .nvr-json-raw-pre-wrap,
.gsensor-db-view .nvr-json-raw-pre-wrap,
.gsensor-channel-view .nvr-json-raw-pre-wrap,
.fsensor-view .nvr-json-raw-pre-wrap,
.fsensor-detail-view .nvr-json-raw-pre-wrap,
.nvr-crud-view .nvr-json-raw-pre-wrap {
  padding: .75rem !important;
  background: transparent !important;
}

.gcustomer-view .nvr-json-raw-pre-wrap pre,
.ggroup-view .nvr-json-raw-pre-wrap pre,
.gdevice-view .nvr-json-raw-pre-wrap pre,
.gsensor-db-view .nvr-json-raw-pre-wrap pre,
.gsensor-channel-view .nvr-json-raw-pre-wrap pre,
.fsensor-view .nvr-json-raw-pre-wrap pre,
.fsensor-detail-view .nvr-json-raw-pre-wrap pre,
.nvr-crud-view .nvr-json-raw-pre-wrap pre {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 280px !important;
  margin: 0 !important;
  padding: .9rem 1rem !important;
  overflow: auto !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 14px !important;
  color: #dbeafe !important;
  background: #0f172a !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: .8rem !important;
  line-height: 1.6 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

/* JSONEditor inside DetailView: generic read-only visual polish */
.gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
.ggroup-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
.gdevice-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
.gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
.gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
.fsensor-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
.fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
.nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor {
  width: 100% !important;
  min-height: 160px !important;
  max-height: 380px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 96%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48) !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-outer,
.ggroup-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-outer,
.gdevice-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-outer,
.gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-outer,
.gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-outer,
.fsensor-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-outer,
.fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-outer,
.nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-outer {
  max-height: 380px !important;
  overflow: auto !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-tree,
.ggroup-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-tree,
.gdevice-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-tree,
.gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-tree,
.gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-tree,
.fsensor-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-tree,
.fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-tree,
.nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-tree {
  padding: .8rem !important;
}

.gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-field,
.ggroup-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-field,
.gdevice-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-field,
.gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-field,
.gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-field,
.fsensor-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-field,
.fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-field,
.nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-field,
.gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-value,
.ggroup-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-value,
.gdevice-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-value,
.gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-value,
.gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-value,
.fsensor-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-value,
.fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-value,
.nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor-value {
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 68%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 88%, transparent) !important;
  color: var(--nvr-text, #0f172a) !important;
  font-weight: 800 !important;
}

html.dark .gcustomer-view .kv-container-bs4.kv-view-mode,
html.dark .ggroup-view .kv-container-bs4.kv-view-mode,
html.dark .gdevice-view .kv-container-bs4.kv-view-mode,
html.dark .gsensor-db-view .kv-container-bs4.kv-view-mode,
html.dark .gsensor-channel-view .kv-container-bs4.kv-view-mode,
html.dark .fsensor-view .kv-container-bs4.kv-view-mode,
html.dark .fsensor-detail-view .kv-container-bs4.kv-view-mode,
html.dark .nvr-crud-view .kv-container-bs4.kv-view-mode,
body.dark-mode .gcustomer-view .kv-container-bs4.kv-view-mode,
body.dark-mode .ggroup-view .kv-container-bs4.kv-view-mode,
body.dark-mode .gdevice-view .kv-container-bs4.kv-view-mode,
body.dark-mode .gsensor-db-view .kv-container-bs4.kv-view-mode,
body.dark-mode .gsensor-channel-view .kv-container-bs4.kv-view-mode,
body.dark-mode .fsensor-view .kv-container-bs4.kv-view-mode,
body.dark-mode .fsensor-detail-view .kv-container-bs4.kv-view-mode,
body.dark-mode .nvr-crud-view .kv-container-bs4.kv-view-mode,
html.dark .nvr-detailview-panel,
body.dark-mode .nvr-detailview-panel {
  border-color: rgba(148, 163, 184, .24) !important;
  background: radial-gradient(circle at top right, rgba(37, 99, 235, .12), transparent 34%), rgba(2, 6, 23, .72) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

html.dark .gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
html.dark .ggroup-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
html.dark .gdevice-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
html.dark .gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
html.dark .gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
html.dark .fsensor-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
html.dark .fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
html.dark .nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
body.dark-mode .gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
body.dark-mode .ggroup-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
body.dark-mode .gdevice-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
body.dark-mode .gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
body.dark-mode .gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
body.dark-mode .fsensor-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
body.dark-mode .fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
body.dark-mode .nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
html.dark .nvr-detailview-table > tbody > tr > th,
body.dark-mode .nvr-detailview-table > tbody > tr > th {
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .72) !important;
}

html.dark .gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
html.dark .ggroup-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
html.dark .gdevice-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
html.dark .gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
html.dark .gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
html.dark .fsensor-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
html.dark .fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
html.dark .nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
body.dark-mode .gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
body.dark-mode .ggroup-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
body.dark-mode .gdevice-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
body.dark-mode .gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
body.dark-mode .gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
body.dark-mode .fsensor-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
body.dark-mode .fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
body.dark-mode .nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
html.dark .nvr-detailview-table > tbody > tr > td,
body.dark-mode .nvr-detailview-table > tbody > tr > td {
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .58) !important;
}

html.dark .gcustomer-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
html.dark .ggroup-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
html.dark .gdevice-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
html.dark .gsensor-db-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
html.dark .gsensor-channel-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
html.dark .fsensor-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
html.dark .fsensor-detail-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
body.dark-mode .gcustomer-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
body.dark-mode .ggroup-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
body.dark-mode .gdevice-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
body.dark-mode .gsensor-db-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
body.dark-mode .gsensor-channel-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
body.dark-mode .fsensor-view .nvr-json-raw-details.nvr-json-raw-details--with-copy,
body.dark-mode .fsensor-detail-view .nvr-json-raw-details.nvr-json-raw-details--with-copy {
  border-color: rgba(148, 163, 184, .24) !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, .72), rgba(2, 6, 23, .55)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

html.dark .gcustomer-view .nvr-json-raw-summary-text,
html.dark .ggroup-view .nvr-json-raw-summary-text,
html.dark .gdevice-view .nvr-json-raw-summary-text,
html.dark .gsensor-db-view .nvr-json-raw-summary-text,
html.dark .gsensor-channel-view .nvr-json-raw-summary-text,
html.dark .fsensor-view .nvr-json-raw-summary-text,
html.dark .fsensor-detail-view .nvr-json-raw-summary-text,
body.dark-mode .gcustomer-view .nvr-json-raw-summary-text,
body.dark-mode .ggroup-view .nvr-json-raw-summary-text,
body.dark-mode .gdevice-view .nvr-json-raw-summary-text,
body.dark-mode .gsensor-db-view .nvr-json-raw-summary-text,
body.dark-mode .gsensor-channel-view .nvr-json-raw-summary-text,
body.dark-mode .fsensor-view .nvr-json-raw-summary-text,
body.dark-mode .fsensor-detail-view .nvr-json-raw-summary-text {
  color: #f8fafc !important;
}

html.dark .gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
html.dark .ggroup-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
html.dark .gdevice-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
html.dark .gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
html.dark .gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
html.dark .fsensor-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
html.dark .fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
body.dark-mode .gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
body.dark-mode .ggroup-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
body.dark-mode .gdevice-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
body.dark-mode .gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
body.dark-mode .gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
body.dark-mode .fsensor-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor,
body.dark-mode .fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view td .jsoneditor {
  border-color: rgba(148, 163, 184, .24) !important;
  background: rgba(15, 23, 42, .58) !important;
}

@media (max-width: 767.98px) {
  .gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view,
  .ggroup-view .kv-container-bs4.kv-view-mode table.detail-view,
  .gdevice-view .kv-container-bs4.kv-view-mode table.detail-view,
  .gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view,
  .gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view,
  .fsensor-view .kv-container-bs4.kv-view-mode table.detail-view,
  .fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view,
  .nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view,
  .nvr-detailview-table,
  .gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view > tbody,
  .ggroup-view .kv-container-bs4.kv-view-mode table.detail-view > tbody,
  .gdevice-view .kv-container-bs4.kv-view-mode table.detail-view > tbody,
  .gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view > tbody,
  .gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view > tbody,
  .fsensor-view .kv-container-bs4.kv-view-mode table.detail-view > tbody,
  .fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view > tbody,
  .nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view > tbody,
  .nvr-detailview-table > tbody,
  .gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr,
  .ggroup-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr,
  .gdevice-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr,
  .gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr,
  .gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr,
  .fsensor-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr,
  .fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr,
  .nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr,
  .nvr-detailview-table > tbody > tr,
  .gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .ggroup-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .gdevice-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .fsensor-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .nvr-detailview-table > tbody > tr > th,
  .gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .ggroup-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .gdevice-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .fsensor-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .nvr-detailview-table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .ggroup-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .gdevice-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .fsensor-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > th,
  .nvr-detailview-table > tbody > tr > th {
    border-right: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
    border-radius: 18px 18px 0 0 !important;
    padding: .75rem .9rem .35rem !important;
  }

  .gcustomer-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .ggroup-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .gdevice-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .gsensor-db-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .gsensor-channel-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .fsensor-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .fsensor-detail-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .nvr-crud-view .kv-container-bs4.kv-view-mode table.detail-view > tbody > tr > td,
  .nvr-detailview-table > tbody > tr > td {
    border-left: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
    border-radius: 0 0 18px 18px !important;
    padding: .35rem .9rem .8rem !important;
  }
}

/* Global DetailView raw JSON control polish: keep Copy button consistent across all modules */
.kv-detail-view .nvr-detailview-json-row .nvr-detailview-json-content,
.kv-container-bs4.kv-view-mode .nvr-detailview-json-row .nvr-detailview-json-content,
table.detail-view .nvr-detailview-json-row .nvr-detailview-json-content {
  padding-top: .48rem !important;
  padding-bottom: .48rem !important;
}

.nvr-detailview-json-row .nvr-json-raw-shell.nvr-json-raw-shell--integrated {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nvr-detailview-json-row .nvr-json-raw-details.nvr-json-raw-details--with-copy {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 76%, transparent) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--nvr-primary, #2563eb) 3%, var(--nvr-surface-solid, #ffffff)),
    color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 97%, transparent)
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

.nvr-detailview-json-row .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .75rem !important;
  min-height: 46px !important;
  padding: .55rem .6rem .55rem .82rem !important;
  border: 0 !important;
  color: var(--nvr-text, #0f172a) !important;
  background: transparent !important;
  cursor: pointer !important;
  list-style: none !important;
}

.nvr-detailview-json-row .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary::-webkit-details-marker {
  display: none !important;
}

.nvr-detailview-json-row .nvr-json-raw-summary-text {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .52rem !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
}

.nvr-detailview-json-row .nvr-json-raw-summary-text i {
  width: 1.78rem !important;
  height: 1.78rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: var(--nvr-primary, #2563eb) !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 10%, transparent) !important;
}

.nvr-detailview-json-row .nvr-json-raw-summary-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .42rem !important;
  flex: 0 0 auto !important;
}

.nvr-detailview-json-row .nvr-json-copy-btn.nvr-json-copy-btn--inline {
  appearance: none !important;
  min-height: 1.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .32rem !important;
  padding: .34rem .56rem !important;
  border: 1px solid color-mix(in srgb, var(--nvr-primary, #2563eb) 36%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 8%, #ffffff) !important;
  color: var(--nvr-primary, #2563eb) !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.nvr-detailview-json-row .nvr-json-copy-btn.nvr-json-copy-btn--inline:hover,
.nvr-detailview-json-row .nvr-json-copy-btn.nvr-json-copy-btn--inline.is-copied {
  background: var(--nvr-primary, #2563eb) !important;
  color: #ffffff !important;
  border-color: var(--nvr-primary, #2563eb) !important;
}

.nvr-detailview-json-row .nvr-json-raw-summary-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: 999px !important;
  color: var(--nvr-muted, #64748b) !important;
  background: color-mix(in srgb, var(--nvr-border, #d7e1ee) 48%, transparent) !important;
  transition: transform .18s ease, background-color .18s ease, color .18s ease !important;
}

.nvr-detailview-json-row .nvr-json-raw-details--with-copy[open] .nvr-json-raw-summary-arrow {
  transform: rotate(180deg) !important;
  color: var(--nvr-primary, #2563eb) !important;
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 12%, transparent) !important;
}

.nvr-detailview-json-row .nvr-json-raw-pre-wrap {
  padding: .75rem !important;
  background: transparent !important;
}

.nvr-detailview-json-row .nvr-json-raw-pre-wrap pre {
  max-height: 360px !important;
  margin: 0 !important;
  padding: .95rem 1rem !important;
  overflow: auto !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  border-radius: 14px !important;
  background: #0f172a !important;
  color: #e5eefc !important;
  font-size: .78rem !important;
  line-height: 1.6 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

html.dark .nvr-detailview-json-row .nvr-json-raw-details.nvr-json-raw-details--with-copy,
body.dark-mode .nvr-detailview-json-row .nvr-json-raw-details.nvr-json-raw-details--with-copy {
  border-color: rgba(148, 163, 184, .22) !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, .84), rgba(2, 6, 23, .72)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html.dark .nvr-detailview-json-row .nvr-json-raw-summary-text,
body.dark-mode .nvr-detailview-json-row .nvr-json-raw-summary-text {
  color: #f8fafc !important;
}

html.dark .nvr-detailview-json-row .nvr-json-copy-btn.nvr-json-copy-btn--inline,
body.dark-mode .nvr-detailview-json-row .nvr-json-copy-btn.nvr-json-copy-btn--inline {
  background: rgba(37, 99, 235, .16) !important;
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, .35) !important;
}

html.dark .nvr-detailview-json-row .nvr-json-copy-btn.nvr-json-copy-btn--inline:hover,
html.dark .nvr-detailview-json-row .nvr-json-copy-btn.nvr-json-copy-btn--inline.is-copied,
body.dark-mode .nvr-detailview-json-row .nvr-json-copy-btn.nvr-json-copy-btn--inline:hover,
body.dark-mode .nvr-detailview-json-row .nvr-json-copy-btn.nvr-json-copy-btn--inline.is-copied {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #60a5fa !important;
}

@media (max-width: 575.98px) {
  .nvr-detailview-json-row .nvr-json-raw-details.nvr-json-raw-details--with-copy > summary {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .nvr-detailview-json-row .nvr-json-raw-summary-actions {
    width: 100% !important;
    justify-content: space-between !important;
  }
}

/* Global modern modal and Krajee Dialog polish */
:root {
  --nvr-modal-radius: 24px;
  --nvr-modal-radius-sm: 18px;
  --nvr-modal-shadow: 0 28px 90px rgba(15, 23, 42, .24);
  --nvr-modal-overlay: rgba(15, 23, 42, .54);
}

.modal-backdrop.show {
  opacity: 1 !important;
  background: var(--nvr-modal-overlay, rgba(15, 23, 42, .54)) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal,
.bootstrap-dialog,
.krajee-dialog {
  z-index: 1055;
}

.modal.fade .modal-dialog,
.bootstrap-dialog.fade .modal-dialog,
.krajee-dialog.fade .modal-dialog {
  transform: translateY(18px) scale(.98) !important;
  transition: transform .24s ease, opacity .24s ease !important;
}

.modal.show .modal-dialog,
.bootstrap-dialog.show .modal-dialog,
.krajee-dialog.show .modal-dialog,
.modal.in .modal-dialog,
.bootstrap-dialog.in .modal-dialog,
.krajee-dialog.in .modal-dialog {
  transform: translateY(0) scale(1) !important;
}

.modal-dialog {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.modal-dialog-centered {
  min-height: calc(100% - 3rem);
}

.modal-content,
.bootstrap-dialog .modal-content,
.krajee-dialog .modal-content {
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 72%, transparent) !important;
  border-radius: var(--nvr-modal-radius, 24px) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 94%, var(--nvr-primary, #2563eb) 4%),
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 97%, transparent)
    ) !important;
  color: var(--nvr-text, #0f172a) !important;
  box-shadow: var(--nvr-modal-shadow, 0 28px 90px rgba(15, 23, 42, .24)) !important;
}

.modal-header,
.bootstrap-dialog .modal-header,
.krajee-dialog .modal-header {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  min-height: 64px;
  padding: 1rem 1.25rem !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 68%, transparent) !important;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--nvr-primary, #2563eb) 12%, transparent), transparent 38%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--nvr-primary, #2563eb) 7%, var(--nvr-surface-solid, #ffffff)),
      color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 96%, transparent)
    ) !important;
}

.modal-title,
.bootstrap-dialog-title,
.krajee-dialog .modal-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: .6rem !important;
  margin: 0 !important;
  color: var(--nvr-text, #0f172a) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  letter-spacing: -.01em;
  line-height: 1.25 !important;
}

.modal-title i,
.bootstrap-dialog-title i,
.krajee-dialog .modal-title i {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--nvr-primary, #2563eb);
  background: color-mix(in srgb, var(--nvr-primary, #2563eb) 10%, transparent);
}

.modal-header .btn-close,
.modal-header .close,
.bootstrap-dialog-close-button .btn-close,
.bootstrap-dialog-close-button .close,
.krajee-dialog .btn-close,
.krajee-dialog .close {
  flex: 0 0 auto !important;
  width: 2rem !important;
  height: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 72%, transparent) !important;
  border-radius: 999px !important;
  background-color: color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 86%, transparent) !important;
  color: var(--nvr-muted, #64748b) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease !important;
}

.modal-header .btn-close:hover,
.modal-header .close:hover,
.bootstrap-dialog-close-button .btn-close:hover,
.bootstrap-dialog-close-button .close:hover,
.krajee-dialog .btn-close:hover,
.krajee-dialog .close:hover {
  transform: translateY(-1px);
  color: #ffffff !important;
  border-color: color-mix(in srgb, var(--nvr-danger, #ef4444) 70%, transparent) !important;
  background-color: var(--nvr-danger, #ef4444) !important;
}

.modal-body,
.bootstrap-dialog .modal-body,
.krajee-dialog .modal-body {
  padding: 1.15rem 1.25rem !important;
  color: var(--nvr-text, #0f172a) !important;
  background: transparent !important;
}

.bootstrap-dialog-message,
.krajee-dialog .bootstrap-dialog-message {
  color: var(--nvr-text, #0f172a) !important;
  font-size: .92rem;
  line-height: 1.65;
}

.modal-footer,
.bootstrap-dialog .modal-footer,
.krajee-dialog .modal-footer {
  gap: .65rem !important;
  padding: .95rem 1.25rem 1.15rem !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--nvr-border, #d7e1ee) 64%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 82%, transparent) !important;
}

.bootstrap-dialog-footer-buttons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .65rem !important;
  flex-wrap: wrap !important;
}


.modal-footer > *,
.bootstrap-dialog-footer-buttons > *,
.krajee-dialog .modal-footer > * {
  margin: 0 !important;
}

.modal .btn,
.bootstrap-dialog .btn,
.krajee-dialog .btn {
  border-radius: 999px !important;
  font-weight: 850 !important;
  letter-spacing: .01em;
}

.modal .btn-primary,
.bootstrap-dialog .btn-primary,
.krajee-dialog .btn-primary,
.bootstrap-dialog-footer-buttons .btn-primary {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 92%, #000000 4%) !important;
  background: linear-gradient(135deg, var(--nvr-primary, #2563eb), color-mix(in srgb, var(--nvr-primary, #2563eb) 78%, #7c3aed)) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--nvr-primary, #2563eb) 22%, transparent) !important;
}

.modal .btn-secondary,
.modal .btn-default,
.bootstrap-dialog .btn-secondary,
.bootstrap-dialog .btn-default,
.krajee-dialog .btn-secondary,
.krajee-dialog .btn-default,
.bootstrap-dialog-footer-buttons .btn-secondary,
.bootstrap-dialog-footer-buttons .btn-default {
  border-color: color-mix(in srgb, var(--nvr-border, #d7e1ee) 82%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 88%, transparent) !important;
  color: var(--nvr-text, #0f172a) !important;
}

.modal .btn-danger,
.bootstrap-dialog .btn-danger,
.krajee-dialog .btn-danger,
.bootstrap-dialog-footer-buttons .btn-danger {
  border-color: color-mix(in srgb, var(--nvr-danger, #ef4444) 88%, transparent) !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(239, 68, 68, .22) !important;
}

.modal .btn-success,
.bootstrap-dialog .btn-success,
.krajee-dialog .btn-success,
.bootstrap-dialog-footer-buttons .btn-success {
  border-color: color-mix(in srgb, var(--nvr-success, #22c55e) 88%, transparent) !important;
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(34, 197, 94, .20) !important;
}

.modal .btn-warning,
.bootstrap-dialog .btn-warning,
.krajee-dialog .btn-warning,
.bootstrap-dialog-footer-buttons .btn-warning {
  border-color: color-mix(in srgb, var(--nvr-warning, #f59e0b) 86%, transparent) !important;
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #422006 !important;
  box-shadow: 0 12px 28px rgba(245, 158, 11, .20) !important;
}

.modal .form-control,
.modal .form-select,
.modal textarea.form-control,
.bootstrap-dialog .form-control,
.bootstrap-dialog .form-select,
.bootstrap-dialog textarea.form-control,
.krajee-dialog .form-control,
.krajee-dialog .form-select,
.krajee-dialog textarea.form-control {
  min-height: 42px;
  border-radius: 14px !important;
  border-color: color-mix(in srgb, var(--nvr-border, #d7e1ee) 84%, transparent) !important;
  background: color-mix(in srgb, var(--nvr-surface-solid, #ffffff) 90%, transparent) !important;
  color: var(--nvr-text, #0f172a) !important;
  box-shadow: none !important;
}

.modal .form-control:focus,
.modal .form-select:focus,
.bootstrap-dialog .form-control:focus,
.bootstrap-dialog .form-select:focus,
.krajee-dialog .form-control:focus,
.krajee-dialog .form-select:focus {
  border-color: color-mix(in srgb, var(--nvr-primary, #2563eb) 72%, transparent) !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--nvr-primary, #2563eb) 14%, transparent) !important;
}

.modal .select2-container,
.bootstrap-dialog .select2-container,
.krajee-dialog .select2-container {
  width: 100% !important;
}

.modal .select2-container--krajee-bs5 .select2-selection,
.modal .select2-container--krajee-bs4 .select2-selection,
.modal .select2-container--krajee .select2-selection,
.bootstrap-dialog .select2-container--krajee-bs5 .select2-selection,
.bootstrap-dialog .select2-container--krajee-bs4 .select2-selection,
.bootstrap-dialog .select2-container--krajee .select2-selection,
.krajee-dialog .select2-container--krajee-bs5 .select2-selection,
.krajee-dialog .select2-container--krajee-bs4 .select2-selection,
.krajee-dialog .select2-container--krajee .select2-selection {
  min-height: 42px !important;
  border-radius: 14px !important;
}

.modal-open .select2-container--open,
.modal-open .select2-dropdown,
.modal-open .krajee-default.file-preview-frame {
  z-index: 3060 !important;
}

.bootstrap-dialog.type-primary .modal-header,
.krajee-dialog.type-primary .modal-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--nvr-primary, #2563eb) 14%, #ffffff), #ffffff) !important;
}

.bootstrap-dialog.type-success .modal-header,
.krajee-dialog.type-success .modal-header {
  background: linear-gradient(135deg, rgba(34, 197, 94, .16), #ffffff) !important;
}

.bootstrap-dialog.type-danger .modal-header,
.krajee-dialog.type-danger .modal-header {
  background: linear-gradient(135deg, rgba(239, 68, 68, .16), #ffffff) !important;
}

.bootstrap-dialog.type-warning .modal-header,
.krajee-dialog.type-warning .modal-header {
  background: linear-gradient(135deg, rgba(245, 158, 11, .18), #ffffff) !important;
}

.bootstrap-dialog.type-info .modal-header,
.krajee-dialog.type-info .modal-header {
  background: linear-gradient(135deg, rgba(14, 165, 233, .16), #ffffff) !important;
}

.bootstrap-dialog.type-success .bootstrap-dialog-title i,
.krajee-dialog.type-success .modal-title i {
  color: #16a34a;
  background: rgba(34, 197, 94, .12);
}

.bootstrap-dialog.type-danger .bootstrap-dialog-title i,
.krajee-dialog.type-danger .modal-title i {
  color: #dc2626;
  background: rgba(239, 68, 68, .12);
}

.bootstrap-dialog.type-warning .bootstrap-dialog-title i,
.krajee-dialog.type-warning .modal-title i {
  color: #d97706;
  background: rgba(245, 158, 11, .14);
}

.bootstrap-dialog.type-info .bootstrap-dialog-title i,
.krajee-dialog.type-info .modal-title i {
  color: #0284c7;
  background: rgba(14, 165, 233, .12);
}

html.dark .modal-backdrop.show,
body.dark-mode .modal-backdrop.show {
  --nvr-modal-overlay: rgba(2, 6, 23, .72);
}

html.dark .modal-content,
html.dark .bootstrap-dialog .modal-content,
html.dark .krajee-dialog .modal-content,
body.dark-mode .modal-content,
body.dark-mode .bootstrap-dialog .modal-content,
body.dark-mode .krajee-dialog .modal-content {
  border-color: rgba(148, 163, 184, .22) !important;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .97), rgba(2, 6, 23, .94)) !important;
  color: #f8fafc !important;
  box-shadow: 0 32px 100px rgba(0, 0, 0, .55) !important;
}

html.dark .modal-header,
html.dark .bootstrap-dialog .modal-header,
html.dark .krajee-dialog .modal-header,
body.dark-mode .modal-header,
body.dark-mode .bootstrap-dialog .modal-header,
body.dark-mode .krajee-dialog .modal-header {
  border-bottom-color: rgba(148, 163, 184, .18) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(59, 130, 246, .22), transparent 42%),
    linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .92)) !important;
}

html.dark .modal-title,
html.dark .bootstrap-dialog-title,
html.dark .krajee-dialog .modal-title,
html.dark .bootstrap-dialog-message,
body.dark-mode .modal-title,
body.dark-mode .bootstrap-dialog-title,
body.dark-mode .krajee-dialog .modal-title,
body.dark-mode .bootstrap-dialog-message {
  color: #f8fafc !important;
}

html.dark .modal-footer,
html.dark .bootstrap-dialog .modal-footer,
html.dark .krajee-dialog .modal-footer,
body.dark-mode .modal-footer,
body.dark-mode .bootstrap-dialog .modal-footer,
body.dark-mode .krajee-dialog .modal-footer {
  border-top-color: rgba(148, 163, 184, .16) !important;
  background: rgba(15, 23, 42, .72) !important;
}

html.dark .modal-header .btn-close,
html.dark .modal-header .close,
html.dark .bootstrap-dialog-close-button .btn-close,
html.dark .bootstrap-dialog-close-button .close,
body.dark-mode .modal-header .btn-close,
body.dark-mode .modal-header .close,
body.dark-mode .bootstrap-dialog-close-button .btn-close,
body.dark-mode .bootstrap-dialog-close-button .close {
  border-color: rgba(148, 163, 184, .24) !important;
  background-color: rgba(15, 23, 42, .78) !important;
  color: #cbd5e1 !important;
  filter: invert(1) grayscale(100%) brightness(165%);
}

html.dark .modal .form-control,
html.dark .modal .form-select,
html.dark .bootstrap-dialog .form-control,
html.dark .bootstrap-dialog .form-select,
html.dark .krajee-dialog .form-control,
html.dark .krajee-dialog .form-select,
body.dark-mode .modal .form-control,
body.dark-mode .modal .form-select,
body.dark-mode .bootstrap-dialog .form-control,
body.dark-mode .bootstrap-dialog .form-select,
body.dark-mode .krajee-dialog .form-control,
body.dark-mode .krajee-dialog .form-select {
  border-color: rgba(148, 163, 184, .26) !important;
  background: rgba(15, 23, 42, .76) !important;
  color: #f8fafc !important;
}

html.dark .modal .btn-secondary,
html.dark .modal .btn-default,
html.dark .bootstrap-dialog .btn-secondary,
html.dark .bootstrap-dialog .btn-default,
body.dark-mode .modal .btn-secondary,
body.dark-mode .modal .btn-default,
body.dark-mode .bootstrap-dialog .btn-secondary,
body.dark-mode .bootstrap-dialog .btn-default {
  border-color: rgba(148, 163, 184, .24) !important;
  background: rgba(15, 23, 42, .82) !important;
  color: #f8fafc !important;
}

html.dark .bootstrap-dialog.type-primary .modal-header,
html.dark .krajee-dialog.type-primary .modal-header,
body.dark-mode .bootstrap-dialog.type-primary .modal-header,
body.dark-mode .krajee-dialog.type-primary .modal-header {
  background: linear-gradient(135deg, rgba(37, 99, 235, .22), rgba(15, 23, 42, .96)) !important;
}

html.dark .bootstrap-dialog.type-success .modal-header,
html.dark .krajee-dialog.type-success .modal-header,
body.dark-mode .bootstrap-dialog.type-success .modal-header,
body.dark-mode .krajee-dialog.type-success .modal-header {
  background: linear-gradient(135deg, rgba(34, 197, 94, .20), rgba(15, 23, 42, .96)) !important;
}

html.dark .bootstrap-dialog.type-danger .modal-header,
html.dark .krajee-dialog.type-danger .modal-header,
body.dark-mode .bootstrap-dialog.type-danger .modal-header,
body.dark-mode .krajee-dialog.type-danger .modal-header {
  background: linear-gradient(135deg, rgba(239, 68, 68, .20), rgba(15, 23, 42, .96)) !important;
}

html.dark .bootstrap-dialog.type-warning .modal-header,
html.dark .krajee-dialog.type-warning .modal-header,
body.dark-mode .bootstrap-dialog.type-warning .modal-header,
body.dark-mode .krajee-dialog.type-warning .modal-header {
  background: linear-gradient(135deg, rgba(245, 158, 11, .22), rgba(15, 23, 42, .96)) !important;
}

html.dark .bootstrap-dialog.type-info .modal-header,
html.dark .krajee-dialog.type-info .modal-header,
body.dark-mode .bootstrap-dialog.type-info .modal-header,
body.dark-mode .krajee-dialog.type-info .modal-header {
  background: linear-gradient(135deg, rgba(14, 165, 233, .20), rgba(15, 23, 42, .96)) !important;
}

@media (max-width: 575.98px) {
  .modal-dialog {
    margin: .75rem;
  }

  .modal-content,
  .bootstrap-dialog .modal-content,
  .krajee-dialog .modal-content {
    border-radius: 18px !important;
  }

  .modal-header,
  .bootstrap-dialog .modal-header,
  .krajee-dialog .modal-header {
    min-height: 56px;
    padding: .85rem 1rem !important;
  }

  .modal-body,
  .bootstrap-dialog .modal-body,
  .krajee-dialog .modal-body,
  .modal-footer,
  .bootstrap-dialog .modal-footer,
  .krajee-dialog .modal-footer {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .modal-footer,
  .bootstrap-dialog .modal-footer,
  .krajee-dialog .modal-footer {
    align-items: stretch !important;
  }

  .modal-footer .btn,
  .bootstrap-dialog-footer-buttons .btn,
  .krajee-dialog .modal-footer .btn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog,
  .bootstrap-dialog.fade .modal-dialog,
  .krajee-dialog.fade .modal-dialog,
  .modal-header .btn-close,
  .modal-header .close,
  .bootstrap-dialog-close-button .btn-close,
  .bootstrap-dialog-close-button .close {
    transition: none !important;
  }
}