/*
 * Portal adapter for the licensed Vuexy HTML template.
 *
 * The framework bundles remain the visual authority.  This file only adapts
 * portal-specific SSR hooks, accessible native interactions and ANPR surfaces
 * that do not exist in Vuexy. Its named layer follows shared and route styles;
 * keep its layout contracts consistent with the route components it adapts.
 */

/* Vuexy's colors bundle marks semantic color utilities as !important. In the
   important cascade, earlier layers win, so these narrowly scoped dynamic
   color bridges live in the deliberately first layer. */
@layer vuexy-important-overrides {
  @media (max-width: 575.98px) {
    body.v2-body .customizer.v2-theme-customizer {
      display: block !important;
    }
  }

  body.v2-body .customizer.v2-theme-customizer .customizer-toggle {
    left: -44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  @media (min-width: 1200px) {
    body.v2-body.menu-collapsed .header-navbar .navbar-nav.d-xl-none {
      display: flex !important;
    }

    body.v2-body.menu-collapsed .main-menu:not(.expanded) .navbar-header .nav-toggle {
      display: none !important;
    }
  }

  @media (max-width: 648px) {
    body.v2-body .breadcrumbs-top .content-header-title {
      display: block !important;
      min-width: 0 !important;
      max-width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }
  }

  body.v2-body .btn-primary,
  body.v2-body .btn-primary:focus,
  body.v2-body .btn-primary:hover,
  body.v2-body .btn-primary:not(:disabled):not(.disabled):active {
    border-color: var(--v2-accent) !important;
    color: var(--v2-on-accent) !important;
    background-color: var(--v2-accent) !important;
  }

  body.v2-body .btn-outline-primary,
  body.v2-body .btn-flat-primary {
    border-color: var(--v2-accent-border) !important;
    color: var(--v2-accent-text) !important;
    background-color: transparent !important;
  }

  body.v2-body .btn-outline-primary:hover,
  body.v2-body .btn-flat-primary:hover {
    border-color: var(--v2-accent) !important;
    color: var(--v2-on-accent) !important;
    background-color: var(--v2-accent) !important;
  }

  body.v2-body .text-primary {
    color: var(--v2-accent-text) !important;
  }

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

  body.v2-body .bg-primary,
  body.v2-body .badge-primary {
    color: var(--v2-on-accent) !important;
    background-color: var(--v2-accent) !important;
  }

  body.v2-body .badge-light-primary {
    color: var(--v2-accent-text) !important;
    background-color: color-mix(in srgb, var(--v2-accent) 14%, transparent) !important;
  }

  body.v2-body .badge-light-success,
  body.v2-body .bg-light-success {
    color: var(--v2-success-text) !important;
    background-color: color-mix(in srgb, var(--v2-success) 14%, transparent) !important;
  }

  body.v2-body .badge-light-warning,
  body.v2-body .bg-light-warning {
    color: var(--v2-warning-text) !important;
    background-color: color-mix(in srgb, var(--v2-warning) 14%, transparent) !important;
  }

  body.v2-body .badge-light-danger,
  body.v2-body .bg-light-danger {
    color: var(--v2-danger-text) !important;
    background-color: color-mix(in srgb, var(--v2-danger) 14%, transparent) !important;
  }

  body.v2-body .badge-light-info,
  body.v2-body .bg-light-info {
    color: var(--v2-info-text) !important;
    background-color: color-mix(in srgb, var(--v2-info) 14%, transparent) !important;
  }

  body.v2-body .badge-light-secondary,
  body.v2-body .bg-light-secondary {
    color: var(--v2-muted) !important;
    background-color: color-mix(in srgb, var(--v2-muted) 12%, transparent) !important;
  }

  body.v2-body :is(.recorder-panel-stage, .recorder-playback-stage) .v2-badge--accent {
    color: var(--v2-stage-accent-text, #f7df4f) !important;
    background-color: color-mix(in srgb, var(--v2-stage-accent-text, #f7df4f) 12%, transparent) !important;
  }

  body.v2-body :is(.recorder-panel-stage, .recorder-playback-stage) .v2-badge--success {
    color: var(--v2-stage-success-text, #69e8a0) !important;
    background-color: color-mix(in srgb, var(--v2-stage-success-text, #69e8a0) 12%, transparent) !important;
  }

  body.v2-body :is(.recorder-panel-stage, .recorder-playback-stage) .v2-badge--warning {
    color: var(--v2-stage-warning-text, #ffc17e) !important;
    background-color: color-mix(in srgb, var(--v2-stage-warning-text, #ffc17e) 12%, transparent) !important;
  }

  body.v2-body :is(.recorder-panel-stage, .recorder-playback-stage) .v2-badge--danger {
    color: var(--v2-stage-danger-text, #ff9293) !important;
    background-color: color-mix(in srgb, var(--v2-stage-danger-text, #ff9293) 12%, transparent) !important;
  }

  body.v2-body :is(.recorder-panel-stage, .recorder-playback-stage) .v2-badge--info {
    color: var(--v2-stage-info-text, #69e8f5) !important;
    background-color: color-mix(in srgb, var(--v2-stage-info-text, #69e8f5) 12%, transparent) !important;
  }

  body.v2-body :is(.recorder-panel-stage, .recorder-playback-stage) .v2-badge--muted {
    color: var(--v2-stage-muted-text, #c5c8d0) !important;
    background-color: color-mix(in srgb, var(--v2-stage-muted-text, #c5c8d0) 10%, transparent) !important;
  }

  body.v2-body .v2-button--danger.btn-danger,
  body.v2-body .v2-button--danger.btn-danger:focus,
  body.v2-body .v2-button--danger.btn-danger:hover {
    border-color: var(--v2-danger-text) !important;
    color: var(--v2-danger-text) !important;
    background-color: color-mix(in srgb, var(--v2-danger) 14%, transparent) !important;
  }

  body.v2-body .v2-alert--success.alert-success {
    border-color: color-mix(in srgb, var(--v2-success-text) 42%, transparent) !important;
    color: var(--v2-success-text) !important;
    background-color: color-mix(in srgb, var(--v2-success) 14%, transparent) !important;
  }

  body.v2-body .v2-alert--warning.alert-warning {
    border-color: color-mix(in srgb, var(--v2-warning-text) 42%, transparent) !important;
    color: var(--v2-warning-text) !important;
    background-color: color-mix(in srgb, var(--v2-warning) 14%, transparent) !important;
  }

  body.v2-body .v2-alert--danger.alert-danger,
  body.v2-body.v2-auth-body .auth-v2-alert.alert-danger {
    border-color: color-mix(in srgb, var(--v2-danger-text) 42%, transparent) !important;
    color: var(--v2-danger-text) !important;
    background-color: color-mix(in srgb, var(--v2-danger) 14%, transparent) !important;
  }

  body.v2-body .v2-alert--info.alert-info {
    border-color: color-mix(in srgb, var(--v2-info-text) 42%, transparent) !important;
    color: var(--v2-info-text) !important;
    background-color: color-mix(in srgb, var(--v2-info) 14%, transparent) !important;
  }

  body.v2-body .border-primary {
    border-color: var(--v2-accent) !important;
  }

  body.v2-body .main-menu .navigation > li.active > a .menu-title,
  body.v2-body .main-menu .navigation > li.active > a i,
  body.v2-body .main-menu .navigation > li.active > button .menu-title,
  body.v2-body .main-menu .navigation > li.active > button i,
  body.v2-body .main-menu .navigation > li.is-active > a .menu-title,
  body.v2-body .main-menu .navigation > li.is-active > a i,
  body.v2-body .main-menu .navigation > li.is-active > button .menu-title,
  body.v2-body .main-menu .navigation > li.is-active > button i {
    color: var(--v2-on-accent) !important;
  }

  body.v2-body.v2-auth-body .auth-v2-submit.btn-primary {
    border-color: var(--auth-brand-accent, var(--v2-accent)) !important;
    color: var(--auth-brand-accent-text, var(--v2-on-accent)) !important;
    background-color: var(--auth-brand-accent, var(--v2-accent)) !important;
  }
}

/* Vuexy modal and overlay contract ------------------------------------
   Product dialogs use the same hierarchy as the licensed Vuexy bundle:
   .modal > .modal-dialog > .modal-content. Route styles may compose the
   body content, but geometry, stacking, scrolling and chrome live here. */
@layer vuexy-modal-system {
  body.v2-body {
    --v2-z-modal: 1050;
    --v2-z-modal-nested: 1060;
    --v2-z-modal-priority: 1070;
    --v2-z-toast: 1080;
    --v2-z-command: 1090;
    --v2-modal-gutter: 1.75rem;
    --v2-modal-max-height: calc(100dvh - (var(--v2-modal-gutter) * 2));
  }

  body.v2-body:is(
    .v2-modal-open,
    .v2-overlay-open,
    .v2-event-lightbox-open,
    .v2-has-confirm-dialog,
    .fleet-modal-open,
    .v2-command-open,
    .v2-help-open,
    .v2-tour-open
  ) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.v2-body .v2-modal-overlay,
  body.v2-body .v2-overlay.v2-modal-overlay {
    position: fixed;
    z-index: var(--v2-z-modal);
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: var(--v2-modal-gutter);
    overflow-x: hidden;
    overflow-y: auto;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: rgb(34 41 47 / 50%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    overscroll-behavior: contain;
  }

  body.v2-body .v2-modal-overlay[hidden],
  body.v2-body .v2-event-lightbox[hidden],
  body.v2-body .v2-overlay.v2-modal-overlay[hidden] {
    display: none !important;
  }

  body.v2-body .v2-photo-modal-overlay--stacked {
    z-index: var(--v2-z-modal-nested);
  }

  body.v2-body .v2-event-lightbox {
    z-index: var(--v2-z-modal-priority);
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.v2-body .v2-event-lightbox__backdrop {
    position: absolute;
    z-index: 0;
    inset: 0;
    border: 0;
    background: rgb(34 41 47 / 50%);
    backdrop-filter: none;
  }

  body.v2-body .v2-modal-dialog,
  body.v2-body .v2-overlay__dialog.v2-modal-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(500px, calc(100vw - (var(--v2-modal-gutter) * 2)));
    max-width: none;
    max-height: var(--v2-modal-max-height);
    margin: auto;
    flex: 0 1 auto;
    align-items: stretch;
    overflow: visible;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }

  body.v2-body .v2-modal-dialog.modal-sm,
  body.v2-body .v2-modal__dialog--sm {
    width: min(400px, calc(100vw - (var(--v2-modal-gutter) * 2)));
  }

  body.v2-body .v2-modal-dialog.modal-lg,
  body.v2-body .v2-modal__dialog--lg,
  body.v2-body .v2-background-check-dialog {
    width: min(800px, calc(100vw - (var(--v2-modal-gutter) * 2)));
  }

  body.v2-body .v2-modal-dialog.modal-xl,
  body.v2-body .v2-modal__dialog--xl {
    width: min(1140px, 94vw, calc(100vw - (var(--v2-modal-gutter) * 2)));
  }

  body.v2-body .photo-dialog {
    width: min(1152px, 94vw, calc(100vw - (var(--v2-modal-gutter) * 2)));
  }

  body.v2-body .v2-modal-dialog.photo-dialog--reading,
  body.v2-body .v2-modal-dialog.photo-dialog--dashboard {
    width: min(2240px, calc(100vw - (var(--v2-modal-gutter) * 2)));
  }

  body.v2-body .v2-modal-dialog.photo-dialog--reading {
    height: auto;
    min-height: 0;
  }

  body.v2-body .photo-dialog--naming,
  body.v2-body .v2-recorder-rename-dialog {
    width: min(400px, calc(100vw - (var(--v2-modal-gutter) * 2)));
  }

  body.v2-body .photo-dialog--lookup-topup {
    width: min(1088px, 94vw, calc(100vw - (var(--v2-modal-gutter) * 2)));
  }

  body.v2-body .v2-modal-dialog--player {
    width: min(1344px, 94vw, calc(100vw - (var(--v2-modal-gutter) * 2)));
  }

  body.v2-body .v2-event-lightbox__dialog {
    width: min(1472px, 94vw, calc(100vw - (var(--v2-modal-gutter) * 2)));
  }

  body.v2-body .v2-modal.modal-content,
  body.v2-body .v2-modal-dialog > .v2-modal.modal-content,
  body.v2-body .v2-overlay__dialog > .v2-modal.modal-content {
    display: flex;
    width: 100%;
    max-width: none;
    min-width: 0;
    max-height: inherit;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 0.428rem;
    color: var(--v2-text);
    background: var(--v2-surface);
    box-shadow: 0 5px 20px 0 rgb(34 41 47 / 18%);
    pointer-events: auto;
  }

  body.v2-body .v2-modal__header.modal-header,
  body.v2-body .v2-overlay__header.v2-modal__header,
  body.v2-body .fleet-management-dialog__header.v2-modal__header {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 4.25rem;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1.4rem;
    border: 0;
    border-radius: 0.428rem 0.428rem 0 0;
    background: var(--v2-page);
  }

  body.v2-body .v2-modal__header > :first-child,
  body.v2-body .v2-modal__heading {
    min-width: 0;
    flex: 1 1 auto;
  }

  body.v2-body .v2-modal__header :is(h2, h3, h4, .modal-title),
  body.v2-body .v2-confirm-dialog__copy strong,
  body.v2-body .v2-event-lightbox__dialog strong {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--v2-heading);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.35;
  }

  body.v2-body .v2-modal__header p {
    max-width: 64rem;
    margin: 0.2rem 0 0;
    overflow-wrap: anywhere;
    color: var(--v2-muted);
    font-size: 0.857rem;
    line-height: 1.45;
  }

  body.v2-body .v2-modal__eyebrow,
  body.v2-body .v2-confirm-dialog__copy small {
    display: block;
    margin: 0 0 0.14rem;
    color: var(--v2-accent-text);
    font-size: 0.714rem;
    font-weight: 600;
    letter-spacing: 0.055em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  body.v2-body .v2-modal__close.close,
  body.v2-body .v2-event-lightbox__close.v2-modal__close,
  body.v2-body .fleet-management-dialog__close.v2-modal__close {
    position: relative;
    float: none;
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: -0.35rem -0.85rem 0 auto;
    padding: 0;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.357rem;
    color: var(--v2-heading);
    background: var(--v2-surface);
    box-shadow: 0 5px 20px 0 rgb(34 41 47 / 18%);
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    text-shadow: none;
    opacity: 1;
    transform: translate(0.2rem, -0.1rem);
    transition: transform 150ms ease, box-shadow 150ms ease, color 150ms ease;
  }

  body.v2-body .v2-modal__close.close:hover,
  body.v2-body .v2-event-lightbox__close.v2-modal__close:hover,
  body.v2-body .fleet-management-dialog__close.v2-modal__close:hover {
    color: var(--v2-accent-text);
    box-shadow: none;
    opacity: 1;
    transform: translate(0, 0);
  }

  body.v2-body .v2-modal__close.close:focus-visible,
  body.v2-body .v2-event-lightbox__close.v2-modal__close:focus-visible,
  body.v2-body .fleet-management-dialog__close.v2-modal__close:focus-visible {
    outline: 3px solid var(--v2-focus-ring);
    outline-offset: 2px;
  }

  body.v2-body .v2-modal__body.modal-body,
  body.v2-body .v2-overlay__body.v2-modal__body,
  body.v2-body .fleet-management-dialog__body.v2-modal__body {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 1.4rem;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--v2-text);
    background: var(--v2-surface);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body.v2-body .v2-modal__body--media.modal-body,
  body.v2-body .photo-dialog > .v2-modal > .modal-body {
    padding: 0;
  }

  body.v2-body .v2-modal__form {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    margin: 0;
  }

  body.v2-body .v2-recorder-rename-form.v2-modal__form {
    padding: 0;
  }

  body.v2-body .v2-modal__form > .photo-name-form.modal-body {
    padding: 1rem;
  }

  body.v2-body .v2-modal__footer.modal-footer,
  body.v2-body .v2-overlay__footer.v2-modal__footer {
    display: flex;
    min-width: 0;
    min-height: 3.75rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    padding: 0.8rem 1.4rem;
    border: 0;
    border-radius: 0 0 0.428rem 0.428rem;
    color: var(--v2-text);
    background: var(--v2-surface);
  }

  body.v2-body .v2-modal-overlay .v2-modal__window-actions,
  body.v2-body .v2-modal-overlay .v2-modal__footer .v2-action-row {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  body.v2-body .v2-dashboard .v2-modal__footer .v2-modal__window-actions {
    width: 100%;
    justify-content: space-between;
  }

  body.v2-body .v2-modal-overlay .v2-modal__action {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.85rem;
    border-radius: 0.357rem;
    font-size: 0.857rem;
    font-weight: 500;
    text-decoration: none;
  }

  body.v2-body .dashboard-photo-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    padding: 0.8rem 1.1rem;
  }

  body.v2-body .v2-dashboard .photo-dialog__media {
    min-height: 0;
  }

  body.v2-body .photo-dialog__lookup--advanced-modal {
    max-height: none;
    overflow: visible;
  }

  body.v2-body .v2-event-lightbox__surface {
    display: grid;
    width: 100%;
    min-width: 0;
    max-height: inherit;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  body.v2-body .v2-event-lightbox__stage.v2-modal__body {
    display: grid;
    padding: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    overflow: hidden;
    background: var(--v2-shell);
  }

  body.v2-body .v2-event-lightbox__canvas {
    width: 100%;
    height: auto;
    min-height: min(60dvh, 38rem);
    max-height: 100%;
  }

  body.v2-body .v2-event-lightbox__dialog > header,
  body.v2-body .v2-event-lightbox__dialog > footer {
    display: initial;
  }

  body.v2-body .v2-event-lightbox__surface > :is(header, footer) {
    display: flex;
  }

  body.v2-body dialog.v2-native-modal,
  body.v2-body dialog.fleet-management-dialog {
    max-width: none;
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0.428rem;
    color: var(--v2-text);
    background: transparent;
    box-shadow: none;
  }

  body.v2-body dialog.v2-native-modal::backdrop,
  body.v2-body dialog.fleet-management-dialog::backdrop {
    background: rgb(34 41 47 / 50%);
    backdrop-filter: none;
  }

  body.v2-body .fleet-management-dialog {
    width: min(62rem, calc(100vw - 2rem));
  }

  body.v2-body .fleet-management-dialog__surface.v2-modal {
    display: flex;
    width: 100%;
    max-height: calc(100dvh - 2rem);
    flex-direction: column;
  }

  body.v2-body .v2-confirm-dialog.v2-native-modal {
    width: min(30rem, calc(100vw - 2rem));
  }

  body.v2-body .v2-confirm-dialog__surface.v2-modal {
    display: flex;
    width: 100%;
    max-height: calc(100dvh - 2rem);
    padding: 0;
    flex-direction: column;
    gap: 0;
    background: var(--v2-surface);
  }

  body.v2-body .v2-confirm-dialog__head.v2-modal__header {
    align-items: center;
  }

  body.v2-body .v2-confirm-dialog__body {
    padding-block: 1.15rem;
  }

  body.v2-body .v2-confirm-dialog__actions.v2-modal__footer {
    justify-content: flex-end;
  }

  body.v2-body .v2-confirm-dialog__icon {
    border-radius: 0.357rem;
  }

  html[data-theme-skin="bordered"] body.v2-body .v2-modal.modal-content,
  html.bordered-layout body.v2-body .v2-modal.modal-content {
    border: 1px solid var(--v2-border);
    box-shadow: none;
  }

  body.v2-body .v2-command-palette {
    z-index: var(--v2-z-command);
  }

  body.v2-body .v2-command-palette__backdrop,
  body.v2-body .v2-help-center__backdrop {
    background: rgb(34 41 47 / 50%);
    backdrop-filter: none;
  }

  body.v2-body .v2-command-palette__dialog {
    max-height: min(46rem, calc(100dvh - 3.5rem));
    border: 0;
    border-radius: 0.428rem;
    background: var(--v2-surface);
    box-shadow: 0 5px 20px 0 rgb(34 41 47 / 18%);
  }

  body.v2-body .v2-command-palette__header,
  body.v2-body .v2-help-center__header {
    padding: 0.8rem 1.4rem;
    border: 0;
    background: var(--v2-page);
  }

  body.v2-body .v2-help-center__drawer {
    width: min(30rem, 100vw);
    border: 0;
    background: var(--v2-surface);
    box-shadow: 0 5px 20px 0 rgb(34 41 47 / 18%);
  }

  body.v2-body .customizer-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 0;
    background: var(--v2-surface);
    box-shadow: 0 5px 20px 0 rgb(34 41 47 / 18%);
  }

  body.v2-body .v2-guided-tour__tooltip {
    border: 0;
    border-radius: 0.428rem;
    background: var(--v2-surface);
    box-shadow: 0 5px 20px 0 rgb(34 41 47 / 18%);
  }

  body.v2-body .customizer-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  body.v2-body .v2-drawer.modal-slide-in {
    position: fixed;
    z-index: var(--v2-z-modal);
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    padding: 0;
    overflow: hidden;
    align-items: stretch;
    justify-content: flex-end;
    background: rgb(34 41 47 / 50%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.v2-body .v2-drawer--left.modal-slide-in {
    justify-content: flex-start;
  }

  body.v2-body .v2-drawer--right.is-closing .v2-drawer__dialog {
    animation: none;
    transform: translateX(100%);
    transition: transform 300ms ease;
  }

  body.v2-body .v2-drawer--left.is-closing .v2-drawer__dialog {
    animation: none;
    transform: translateX(-100%);
    transition: transform 300ms ease;
  }

  body.v2-body .v2-drawer.modal-slide-in[hidden] {
    display: none !important;
  }

  body.v2-body .v2-drawer__dialog.modal-dialog {
    position: relative;
    display: flex;
    width: min(30rem, 100vw);
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }

  body.v2-body .v2-drawer__surface.modal-content {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: var(--v2-text);
    background: var(--v2-surface);
    box-shadow: 0 5px 20px 0 rgb(34 41 47 / 18%);
    pointer-events: auto;
  }

  body.v2-body .v2-drawer__header.modal-header {
    min-height: 4.25rem;
    padding: 0.8rem 1.4rem;
    border: 0;
    background: var(--v2-page);
  }

  body.v2-body .v2-drawer__header > div {
    min-width: 0;
  }

  body.v2-body .v2-drawer__header :is(h2, .modal-title) {
    margin: 0;
    color: var(--v2-heading);
    font-size: 1.1rem;
    font-weight: 500;
  }

  body.v2-body .v2-drawer__header p {
    margin: 0.2rem 0 0;
    color: var(--v2-muted);
    font-size: 0.857rem;
    line-height: 1.45;
  }

  body.v2-body .v2-drawer__close.close {
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: -0.35rem -0.85rem 0 auto;
    padding: 0;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.357rem;
    color: var(--v2-heading);
    background: var(--v2-surface);
    box-shadow: 0 5px 20px 0 rgb(34 41 47 / 18%);
    opacity: 1;
  }

  body.v2-body .v2-drawer__close.close svg {
    width: 1rem;
    height: 1rem;
  }

  body.v2-body .v2-drawer__body.modal-body {
    min-width: 0;
    min-height: 0;
    padding: 1.4rem;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  body.v2-body .v2-drawer__footer.modal-footer {
    flex: 0 0 auto;
    padding: 0.8rem 1.4rem;
    border: 0;
  }

  body.v2-body .v2-monitoring__catalog-drawer .v2-drawer__dialog,
  body.v2-body .v2-plate-editor .v2-drawer__dialog {
    width: min(30rem, 100vw);
  }

  body.v2-body .v2-monitoring__catalog-drawer .v2-drawer__body {
    padding: 0;
  }

  body.v2-body .v2-monitoring__catalog-drawer .monitoring-select-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  @media (prefers-reduced-motion: no-preference) {
    body.v2-body .v2-drawer--right:not([hidden]) .v2-drawer__dialog {
      animation: v2-vuexy-drawer-right 220ms ease-out both;
    }

    body.v2-body .v2-drawer--left:not([hidden]) .v2-drawer__dialog {
      animation: v2-vuexy-drawer-left 220ms ease-out both;
    }
  }

  @keyframes v2-vuexy-drawer-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }

  @keyframes v2-vuexy-drawer-left {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }

  @media (max-width: 575.98px) {
    body.v2-body {
      --v2-modal-gutter: 0.75rem;
    }

    body.v2-body .customizer.v2-theme-customizer {
      --vuexy-customizer-width: 100%;
      right: -100%;
      width: 100%;
      max-width: 100%;
    }

    body.v2-body .customizer.v2-theme-customizer.open {
      right: 0;
    }

    body.v2-body .customizer.v2-theme-customizer .customizer-content {
      width: 100%;
      max-width: 100%;
    }

    body.v2-body .v2-modal-dialog,
    body.v2-body .v2-modal-dialog.modal-sm,
    body.v2-body .v2-modal-dialog.modal-lg,
    body.v2-body .v2-modal-dialog.modal-xl,
    body.v2-body .photo-dialog,
    body.v2-body .photo-dialog--naming,
    body.v2-body .photo-dialog--lookup-topup,
    body.v2-body .v2-recorder-rename-dialog,
    body.v2-body .v2-modal-dialog--player,
    body.v2-body .v2-event-lightbox__dialog {
      width: 100%;
      max-height: calc(100dvh - 1.5rem);
      margin: auto;
    }

    body.v2-body .v2-modal__header.modal-header,
    body.v2-body .v2-overlay__header.v2-modal__header,
    body.v2-body .fleet-management-dialog__header.v2-modal__header {
      min-height: 3.9rem;
      flex-direction: row;
      align-items: flex-start;
      gap: 0.65rem;
      padding: 0.75rem 1rem;
    }

    body.v2-body .v2-modal__header p {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    body.v2-body .v2-modal__close.close,
    body.v2-body .v2-event-lightbox__close.v2-modal__close,
    body.v2-body .fleet-management-dialog__close.v2-modal__close {
      margin: -0.3rem -0.55rem 0 auto;
    }

    body.v2-body .v2-modal__body.modal-body,
    body.v2-body .v2-overlay__body.v2-modal__body,
    body.v2-body .fleet-management-dialog__body.v2-modal__body {
      padding: 1rem;
      scrollbar-gutter: auto;
    }

    body.v2-body .v2-modal__body--media.modal-body,
    body.v2-body .photo-dialog > .v2-modal > .modal-body {
      padding: 0;
    }

    body.v2-body .v2-modal__footer.modal-footer,
    body.v2-body .v2-overlay__footer.v2-modal__footer {
      min-height: 3.5rem;
      padding: 0.7rem 1rem;
    }

    body.v2-body .v2-dashboard .v2-modal__header {
      flex-direction: row;
      align-items: flex-start;
    }

    body.v2-body .dashboard-photo-facts {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.4rem;
      padding: 0.65rem 0.75rem;
    }

    body.v2-body .dashboard-photo-fact > :is(span, strong) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    body.v2-body .v2-dashboard .photo-dialog__media {
      min-height: 0;
    }

    body.v2-body .photo-dialog__media {
      min-height: min(42dvh, 18rem);
      margin: 0.75rem 0.75rem 0;
    }

    body.v2-body .photo-dialog__viewer-controls,
    body.v2-body .photo-dialog__actions {
      align-items: stretch;
      flex-direction: column;
      padding-inline: 0.75rem;
    }

    body.v2-body .photo-dialog__viewer-navigation,
    body.v2-body .photo-dialog__zoom-controls {
      width: 100%;
      justify-content: center;
    }

    body.v2-body .photo-dialog__keyboard-hint,
    body.v2-body .photo-dialog__filmstrip,
    body.v2-body .photo-dialog__lookup,
    body.v2-body .photo-name-form {
      margin-inline: 0.75rem;
    }

    body.v2-body .photo-dialog__lookup-topup-layout,
    body.v2-body .photo-dialog__lookup-options,
    body.v2-body .lookup-topup-grid,
    body.v2-body .photo-dialog__lookup-topup-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    body.v2-body .v2-event-lightbox__stage.v2-modal__body {
      padding: 0.45rem;
      grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem;
      gap: 0.35rem;
    }

    body.v2-body .v2-event-lightbox__canvas {
      min-height: min(48dvh, 22rem);
    }

    body.v2-body .v2-event-lightbox__surface > footer {
      align-items: stretch;
      flex-direction: column;
    }

    body.v2-body .v2-event-lightbox__surface > footer .v2-action-row,
    body.v2-body .v2-confirm-dialog__actions {
      width: 100%;
    }

    body.v2-body .v2-confirm-dialog__actions > button {
      flex: 1 1 0;
    }

    body.v2-body dialog.v2-native-modal,
    body.v2-body dialog.fleet-management-dialog,
    body.v2-body .v2-confirm-dialog.v2-native-modal {
      width: calc(100vw - 1.5rem);
      max-height: calc(100dvh - 1.5rem);
    }

    body.v2-body .fleet-management-dialog__surface.v2-modal,
    body.v2-body .v2-confirm-dialog__surface.v2-modal {
      max-height: calc(100dvh - 1.5rem);
    }

    body.v2-body .v2-command-palette__dialog {
      width: calc(100vw - 1.5rem);
      max-height: calc(100dvh - 1.5rem);
    }
  }

  @media (max-height: 520px) and (orientation: landscape) {
    body.v2-body {
      --v2-modal-gutter: 0.5rem;
    }

    body.v2-body .v2-modal-dialog,
    body.v2-body .v2-modal-dialog.modal-sm,
    body.v2-body .v2-modal-dialog.modal-lg,
    body.v2-body .v2-modal-dialog.modal-xl {
      max-height: calc(100dvh - 1rem);
    }

    body.v2-body .v2-modal__header.modal-header {
      min-height: 3.35rem;
      padding-block: 0.55rem;
    }

    body.v2-body .v2-modal__header p {
      display: none;
    }

    body.v2-body .v2-modal__footer.modal-footer {
      min-height: 3rem;
      padding-block: 0.5rem;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    body.v2-body .v2-modal-overlay:not([hidden]) > .v2-modal-dialog,
    body.v2-body .v2-event-lightbox:not([hidden]) > .v2-modal-dialog {
      animation: v2-vuexy-modal-enter 180ms ease-out both;
    }
  }

  @keyframes v2-vuexy-modal-enter {
    from { opacity: 0; transform: translateY(-1rem); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@layer vuexy-canonical {
  body.v2-body .main-menu .navigation > li.navigation-header {
    color: var(--vuexy-muted);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  body.v2-body .main-menu .navigation .v2-nav__group.open > .v2-nav__children {
    animation: vuexy-nav-children-enter 0.18s ease both;
  }

  body.v2-body .v2-command-palette[hidden],
  body.v2-body .v2-command-item[hidden],
  body.v2-body .v2-notification-item[hidden],
  body.v2-body .v2-notification-filter-empty[hidden],
  body.v2-body .v2-customizer-backdrop[hidden] {
    display: none !important;
  }

  body.v2-body .v2-command-palette__dialog,
  body.v2-body .v2-command-palette__search {
    border-color: var(--vuexy-border);
    color: var(--vuexy-text);
    background: var(--vuexy-card);
  }

  body.v2-body .v2-command-palette__search {
    background: var(--v2-soft);
  }

  body.v2-body .v2-command-palette__header h2,
  body.v2-body .v2-command-palette__search input,
  body.v2-body .v2-command-item__copy strong,
  body.v2-body .v2-command-palette__empty strong {
    color: var(--vuexy-heading);
  }

  body.v2-body .v2-command-palette__header p,
  body.v2-body .v2-command-palette__section-title,
  body.v2-body .v2-command-palette__section-title small,
  body.v2-body .v2-command-item__copy small,
  body.v2-body .v2-command-palette__empty span,
  body.v2-body .v2-command-palette__footer {
    color: var(--vuexy-muted);
  }

  body.v2-body .v2-notification-filters,
  body.v2-body .v2-command-palette__footer {
    border-color: var(--vuexy-border);
  }

  body.v2-body .v2-customizer-backdrop {
    z-index: 1040;
  }

  body.v2-body .customizer.v2-theme-customizer {
    z-index: 1045;
  }

  @keyframes vuexy-nav-children-enter {
    from { opacity: 0; transform: translateY(-0.25rem); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (max-width: 767.98px) {
    body.v2-body .v2-popover--notifications {
      display: flex;
      overflow: hidden;
      flex-direction: column;
    }

    body.v2-body .v2-notification-list {
      min-height: 0;
      flex: 1 1 auto;
    }
  }

  @media (max-width: 575.98px) {
    body.v2-body .customizer.v2-theme-customizer {
      display: none !important;
    }

    body.v2-body .customizer.v2-theme-customizer .customizer-toggle {
      top: auto;
      bottom: max(1rem, env(safe-area-inset-bottom));
    }

    body.v2-body .breadcrumbs-top .content-header-title {
      width: 100%;
      max-width: 100%;
      padding-right: 0;
      border-right: 0;
    }

    body.v2-body .breadcrumb-wrapper {
      display: block;
      max-width: 100%;
    }

    body.v2-body .breadcrumb {
      margin-bottom: 0;
      white-space: nowrap;
    }
  }
}

@layer vuexy-canonical {

:root {
  --vuexy-primary: #d6bb18;
  --vuexy-primary-soft: rgba(214, 187, 24, 0.14);
  --vuexy-success: #28c76f;
  --vuexy-info: #00cfe8;
  --vuexy-warning: #ff9f43;
  --vuexy-danger: #ea5455;
  --vuexy-page: #f8f8f8;
  --vuexy-card: #ffffff;
  --vuexy-heading: #5e5873;
  --vuexy-text: #6e6b7b;
  --vuexy-muted: #625f6e;
  --vuexy-border: #ebe9f1;
  --vuexy-radius: 0.357rem;
  --vuexy-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
}

html {
  font-size: 14px;
  max-width: 100%;
  overflow-x: clip;
}

body.v2-body {
  --vuexy-primary: var(--v2-accent, #d6bb18);
  --vuexy-primary-soft: color-mix(in srgb, var(--v2-accent, #d6bb18) 14%, transparent);
  --vuexy-page: var(--v2-page, #f8f8f8);
  --vuexy-card: var(--v2-surface, #ffffff);
  --vuexy-heading: var(--v2-heading, #2f2b3d);
  --vuexy-text: var(--v2-text, #5e5873);
  --vuexy-muted: var(--v2-muted, #625f6e);
  --vuexy-border: var(--v2-border, #ebe9f1);
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--vuexy-text);
  background: var(--vuexy-page);
}

/* Operational overlays are server-rendered on every authenticated page. Keep
   their explicit hidden state above the unlayered Vuexy vendor reset. */
body.v2-body [hidden],
body.v2-body .v2-playback-download-dock.is-hidden,
body.v2-body [data-notification-count].is-hidden,
body.v2-body .v2-modal-overlay[hidden] {
  display: none !important;
}

body.v2-body button,
body.v2-body input,
body.v2-body select,
body.v2-body textarea {
  font-family: Montserrat, Helvetica, Arial, sans-serif;
}

body.v2-body .btn-primary,
body.v2-body .btn-primary:focus {
  color: var(--v2-on-accent);
  border-color: var(--vuexy-primary);
  background-color: var(--vuexy-primary);
}

body.v2-body .btn-primary:hover,
body.v2-body .btn-primary:not(:disabled):not(.disabled):active {
  color: var(--v2-on-accent);
  border-color: color-mix(in srgb, var(--vuexy-primary) 82%, #000);
  background-color: color-mix(in srgb, var(--vuexy-primary) 88%, #000);
}

body.v2-body .btn-outline-primary,
body.v2-body .btn-flat-primary {
  border-color: var(--v2-accent-border);
  color: var(--v2-accent-text);
}

body.v2-body .btn-outline-primary:hover,
body.v2-body .btn-flat-primary:hover {
  border-color: var(--vuexy-primary);
  color: var(--v2-on-accent);
  background-color: var(--vuexy-primary);
}

body.v2-body .text-primary {
  color: var(--v2-accent-text) !important;
}

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

body.v2-body .bg-primary,
body.v2-body .badge-primary {
  color: var(--v2-on-accent) !important;
  background-color: var(--vuexy-primary) !important;
}

body.v2-body .badge-light-primary {
  color: var(--v2-accent-text) !important;
  background-color: var(--vuexy-primary-soft) !important;
}

body.v2-body .border-primary {
  border-color: var(--vuexy-primary) !important;
}

body.v2-body .v2-skip-link {
  position: fixed;
  z-index: 2000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--vuexy-radius);
  color: var(--v2-on-accent);
  background: var(--vuexy-primary);
  box-shadow: var(--vuexy-shadow);
  transform: translateY(-160%);
}

body.v2-body .v2-skip-link:focus {
  transform: translateY(0);
}

/* Vuexy shell ----------------------------------------------------------- */

body.v2-body .header-navbar .nav-link,
body.v2-body .main-menu .nav-link,
body.v2-body .main-menu .navigation button {
  border: 0;
  background: transparent;
}

body.v2-body .header-navbar .navbar-container {
  min-height: 4.45rem;
}

body.v2-body .header-navbar.v2-topbar {
  padding-right: 0;
  padding-left: 0;
}

body.v2-body .header-navbar .nav-link {
  display: flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--vuexy-text);
}

body.v2-body .header-navbar .nav .modern-nav-toggle {
  margin: 0;
}

body.v2-body .header-navbar .nav-link .ficon {
  font-size: 1.45rem;
}

body.v2-body .main-menu .navbar-header .navbar-brand {
  min-width: 0;
}

body.v2-body .main-menu .navbar-header {
  position: relative;
  z-index: 4;
}

body.v2-body .main-menu .navbar-header > .navbar-nav {
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
}

body.v2-body .main-menu .navbar-header > .navbar-nav > .mr-auto {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

body.v2-body .main-menu .navbar-header .navbar-brand {
  width: 100%;
  overflow: hidden;
}

body.v2-body .main-menu .navbar-header .nav-toggle {
  width: 2rem;
  min-width: 2rem;
  flex: 0 0 2rem;
  margin-left: 0.25rem;
}

body.v2-body .main-menu .navbar-header .nav-toggle .nav-link {
  width: 2rem;
  min-width: 2rem;
  padding: 0;
}

body.v2-body .main-menu .navbar-header .nav-toggle,
body.v2-body .main-menu .navbar-header [data-shell-menu-toggle] {
  position: relative;
  z-index: 5;
}

body.v2-body .main-menu .main-menu-content {
  position: relative;
  z-index: 1;
  background: inherit;
}

body.v2-body .main-menu .brand-logo {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  padding: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--vuexy-radius);
}

body.v2-body .main-menu .brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.v2-body .main-menu .navbar-brand {
  gap: 0.65rem;
}

body.v2-body .main-menu .brand-text {
  min-width: 0;
  max-width: none;
  margin-left: 0;
  overflow: hidden;
  color: var(--v2-accent-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: normal;
}

body.v2-body .main-menu .navigation {
  align-items: stretch;
  padding-right: 0;
  padding-left: 0;
  background: transparent;
}

body.v2-body .main-menu .navigation > li > button,
body.v2-body .main-menu .navigation > li > a {
  display: flex;
  width: calc(100% - 30px);
  min-height: 39px;
  margin: 0 15px;
  padding: 10px 15px;
  align-items: center;
  border-radius: 4px;
  color: var(--vuexy-text);
  line-height: 1.45;
  text-align: left;
}

body.v2-body .main-menu .navigation > li > button > *,
body.v2-body .main-menu .navigation > li > a > * {
  transition: transform 0.25s ease;
}

body.v2-body .main-menu .navigation > li > button:hover > *,
body.v2-body .main-menu .navigation > li > a:hover > * {
  transform: translateX(5px);
}

body.v2-body .main-menu .navigation > li.active > button,
body.v2-body .main-menu .navigation > li.active > a,
body.v2-body .main-menu .navigation > li.is-active > button,
body.v2-body .main-menu .navigation > li.is-active > a {
  color: var(--v2-on-accent);
  background: var(--vuexy-primary);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--vuexy-primary) 52%, transparent);
}

body.v2-body .main-menu .navigation .v2-nav__icon,
body.v2-body .main-menu .navigation .v2-nav__icon i {
  width: 20px;
  flex: 0 0 20px;
  margin-right: 0;
  font-size: 1.45rem;
}

body.v2-body .main-menu .navigation > li.navigation-header {
  margin: calc(2rem + 0.286rem) 0 0.8rem 2.2rem;
}

body.v2-body .main-menu .navigation .v2-nav__label {
  margin-left: 1.1rem;
}

body.v2-body .main-menu .navigation .v2-nav__group-label::after {
  position: absolute;
  right: 2rem;
  font-family: feather;
  content: "\e844";
  transition: transform 0.25s ease;
}

body.v2-body .main-menu .navigation .v2-nav__group.open > .v2-nav__group-label::after {
  transform: rotate(90deg);
}

body.v2-body .main-menu .navigation .v2-nav__children {
  display: none;
}

body.v2-body .main-menu .navigation .v2-nav__group.open > .v2-nav__children {
  display: block;
}

body.v2-body .main-menu .navigation .v2-nav__child {
  display: flex;
  margin: 0 15px;
  padding: 10px 15px 10px 53px;
  align-items: center;
  color: inherit;
}

body.v2-body .content-header-title {
  max-width: min(52vw, 38rem);
  overflow: hidden;
  font-size: 1.2rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-body .v2-content__inner {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

html[data-navbar-mode="floating"] body.v2-body .app-content.v2-content {
  padding-top: calc(var(--v2-topbar-offset) + var(--v2-topbar-height) + 2rem);
}

html[data-navbar-mode="hidden"] body.v2-body .app-content.v2-content,
html[data-navbar-mode="static"] body.v2-body .app-content.v2-content {
  padding-top: 2rem;
}

html[data-navbar-mode="sticky"] body.v2-body .app-content.v2-content {
  padding-top: calc(var(--v2-topbar-height) + 2rem);
}

html[data-navbar-mode="sticky"] body.v2-body .header-navbar.v2-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: auto;
  margin: 0;
  border-radius: 0;
}

html[data-navbar-mode="static"] body.v2-body .header-navbar.v2-topbar {
  position: relative;
  top: 0;
  right: auto;
  left: auto;
  width: auto;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

body.v2-body .v2-content__inner > [data-ui-v2-page],
body.v2-body .v2-content__inner > [data-v2-page],
body.v2-body .v2-content__inner > .v2-page-stack,
body.v2-body .v2-content__inner > .v2-dashboard {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

body.v2-body .v2-footer .feather {
  display: inline-block;
  color: var(--vuexy-danger);
}

body.v2-body .scroll-top.show,
body.v2-body .scroll-top[data-visible="true"] {
  display: inline-flex;
}

/* Native details used as accessible Vuexy dropdowns -------------------- */

body.v2-body details.v2-popover-menu {
  position: relative;
}

body.v2-body details.v2-popover-menu > summary {
  list-style: none;
}

body.v2-body details.v2-popover-menu > summary::-webkit-details-marker {
  display: none;
}

body.v2-body .v2-notification-button,
body.v2-body .v2-account-button {
  cursor: pointer;
}

body.v2-body .v2-notification-button__badge {
  position: absolute;
  top: 0.25rem;
  right: 0.15rem;
  display: inline-flex;
  min-width: 1.15rem;
  min-height: 1.15rem;
  padding: 0 0.25rem;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 10rem;
  color: #fff;
  background: var(--vuexy-danger);
  font-size: 0.7rem;
  font-weight: 600;
}

body.v2-body .v2-account-button__copy {
  display: flex;
  margin-right: 0.75rem;
  flex-direction: column;
  text-align: right;
}

body.v2-body .v2-account-button__copy strong {
  max-width: 13rem;
  overflow: hidden;
  color: var(--vuexy-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-body .v2-account-button__copy small {
  color: var(--vuexy-muted);
  font-size: 0.8rem;
}

body.v2-body .v2-account-button__chevron {
  display: none;
}

body.v2-body .v2-account-button .v2-avatar,
body.v2-body .v2-account-button .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

body.v2-body .v2-popover {
  position: absolute;
  z-index: 1050;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(26rem, calc(100vw - 2rem));
  overflow: hidden;
  border: 1px solid var(--vuexy-border);
  border-radius: var(--vuexy-radius);
  color: var(--vuexy-text);
  background: var(--vuexy-card);
  box-shadow: var(--vuexy-shadow);
}

body.v2-body .v2-popover--account {
  width: min(22rem, calc(100vw - 2rem));
}

body.v2-body .v2-popover-menu[open] > .v2-popover--account {
  display: grid;
}

body.v2-body .v2-popover--notifications {
  width: min(30rem, calc(100vw - 2rem));
}

body.v2-body .v2-popover-menu[open] > .v2-popover--notifications {
  display: flex;
  flex-direction: column;
  max-height: min(40rem, calc(100dvh - 7rem));
}

body.v2-body .v2-popover--notifications > :not(.v2-notification-list) {
  flex: 0 0 auto;
}

body.v2-body .v2-popover--notifications .v2-notification-list {
  min-height: 0;
  flex: 0 1 auto;
  overscroll-behavior: contain;
}

body.v2-body .v2-popover__header,
body.v2-body .v2-account-popover__header {
  display: flex;
  padding: 1.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--vuexy-border);
}

body.v2-body .v2-account-popover__header > div:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

body.v2-body .v2-account-popover__links,
body.v2-body .v2-notification-list {
  display: flex;
  max-height: min(28rem, 65vh);
  overflow: auto;
  flex-direction: column;
}

body.v2-body .v2-account-popover__link {
  display: flex;
  width: 100%;
  min-height: 44px;
  padding: 0.85rem 1.25rem;
  border: 0;
  align-items: center;
  color: var(--vuexy-text);
  background: transparent;
  text-align: left;
}

body.v2-body .v2-notification-item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: start;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--vuexy-border);
  border-left: 3px solid transparent;
  color: var(--vuexy-text);
  background: transparent;
  text-align: left;
}

body.v2-body .v2-notification-item--unread {
  border-left-color: var(--v2-accent);
  background: var(--vuexy-primary-soft);
}

body.v2-body .v2-notification-item__title {
  min-width: 0;
  color: var(--vuexy-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: break-word;
}

body.v2-body .v2-notification-item__body,
body.v2-body .v2-notification-item__meta {
  min-width: 0;
  line-height: 1.5;
  overflow-wrap: break-word;
}

body.v2-body .v2-notification-item__body {
  font-size: 0.95rem;
}

body.v2-body .v2-notification-item__meta {
  color: var(--vuexy-muted);
  font-size: 0.86rem;
}

body.v2-body .v2-popover--notifications .v2-popover__header {
  align-items: flex-start;
}

body.v2-body .v2-popover--notifications .v2-popover__header > div {
  min-width: 0;
}

body.v2-body .v2-popover--notifications .v2-popover__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

body.v2-body .v2-account-popover__link:hover,
body.v2-body .v2-notification-item:hover {
  color: var(--v2-accent-text);
  background: var(--vuexy-primary-soft);
}

body.v2-body .v2-account-popover__logout,
body.v2-body .v2-popover__footer {
  padding: 0.75rem 1.25rem 1.25rem;
  border-top: 1px solid var(--vuexy-border);
}

/* Vuexy customizer drawer ---------------------------------------------- */

body.v2-body .customizer {
  --vuexy-customizer-width: 400px;
  position: fixed;
  z-index: 1051;
  top: 0;
  right: calc(0px - var(--vuexy-customizer-width));
  bottom: 0;
  width: var(--vuexy-customizer-width);
  height: auto;
  padding: 0;
  background: transparent;
  pointer-events: none;
  transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

body.v2-body .customizer.open {
  right: 0;
  border-left: 1px solid var(--vuexy-border);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}

body.v2-body .customizer-toggle {
  position: absolute;
  top: 50%;
  left: -39px;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 0.357rem 0 0 0.357rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}

body.v2-body.v2-popover-open .customizer.v2-theme-customizer .customizer-toggle {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body.v2-body .customizer-toggle .spinner {
  font-size: 1.45rem;
  animation: vuexy-customizer-spin 2s linear infinite;
}

body.v2-body .customizer-content {
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0s linear 0.4s;
}

body.v2-body .customizer.open .customizer-content {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

body.v2-body .customizer-header p,
body.v2-body .customizer-actions [data-theme-save-status] {
  color: var(--vuexy-muted);
  font-size: 0.86rem;
}

body.v2-body .customizer-body hr,
body.v2-body .customizer hr {
  border-color: var(--vuexy-border);
}

body.v2-body .v2-theme-customizer__group {
  min-width: 0;
  margin: 0;
  padding: 1rem 0;
  border: 0;
}

body.v2-body .v2-theme-customizer__group + .v2-theme-customizer__group {
  border-top: 1px solid var(--vuexy-border);
}

body.v2-body .v2-theme-customizer__group legend {
  width: auto;
  margin: 0 0 0.75rem;
  color: var(--vuexy-heading);
  font-size: 1rem;
  font-weight: 500;
}

body.v2-body .v2-theme-customizer__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

body.v2-body .v2-theme-option {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 4.3rem;
  margin: 0;
  padding: 0.75rem;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--vuexy-border);
  border-radius: var(--vuexy-radius);
  cursor: pointer;
}

body.v2-body .v2-theme-option > .custom-control-label {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  padding-left: 0;
  cursor: pointer;
}

body.v2-body .v2-theme-option > .custom-control-label::before,
body.v2-body .v2-theme-option > .custom-control-label::after {
  display: none;
}

body.v2-body .v2-theme-option:has(input:checked) {
  border-color: var(--v2-accent-border);
  color: var(--v2-accent-text);
  background: var(--vuexy-primary-soft);
}

body.v2-body .v2-theme-option:focus-within {
  outline: 3px solid var(--v2-focus-ring);
  outline-offset: 2px;
}

body.v2-body .v2-theme-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body.v2-body .v2-theme-option > .custom-control-label > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

body.v2-body .v2-theme-option strong,
body.v2-body .v2-theme-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2-body .v2-theme-option small {
  color: var(--vuexy-muted);
  font-size: 0.72rem;
}

body.v2-body .v2-theme-option__preview {
  position: relative;
  display: grid;
  width: 2.25rem;
  height: 1.6rem;
  flex: 0 0 2.25rem;
  overflow: hidden;
  grid-template-columns: 0.7rem 1fr;
  grid-template-rows: 0.45rem 1fr;
  border: 1px solid #d8d6de;
  border-radius: 0.2rem;
  background: #f8f8f8;
}

body.v2-body .v2-theme-option__preview i:first-child {
  grid-row: 1 / 3;
  background: var(--vuexy-primary);
}

body.v2-body .v2-theme-option__preview i:nth-child(2) {
  background: #fff;
}

body.v2-body .v2-theme-option__preview i:nth-child(3) {
  margin: 0.2rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(34, 41, 47, 0.16);
}

body.v2-body .v2-theme-option__preview--dark,
body.v2-body .v2-theme-option__preview--semi-dark {
  border-color: #3b4253;
  background: #161d31;
}

body.v2-body .v2-theme-option__preview--dark i:nth-child(2),
body.v2-body .v2-theme-option__preview--dark i:nth-child(3),
body.v2-body .v2-theme-option__preview--semi-dark i:first-child,
body.v2-body .v2-theme-option__preview--semi-dark i:nth-child(3) {
  background: #283046;
}

body.v2-body .customizer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@keyframes vuexy-customizer-spin {
  to { transform: rotate(360deg); }
}

/* Shared portal components rendered with Vuexy contracts --------------- */

body.v2-body .fleet-view-nav.nav-pills {
  display: flex;
  width: 100%;
  margin: 0 0 2rem;
  padding: 0;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.5rem;
  border: 0;
  background: transparent;
}

body.v2-body .fleet-view-nav.nav-pills .nav-link {
  display: flex;
  width: auto;
  min-width: 10rem;
  min-height: 3.2rem;
  margin: 0;
  padding: 0.65rem 1rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 0;
  border-radius: var(--vuexy-radius);
  color: var(--vuexy-text);
  background: var(--vuexy-card);
  box-shadow: var(--vuexy-shadow);
}

body.v2-body .fleet-view-nav.nav-pills .nav-link small {
  color: var(--vuexy-muted);
  font-size: 0.72rem;
  font-weight: 400;
}

body.v2-body .fleet-view-nav.nav-pills .nav-link.active {
  color: var(--v2-on-accent);
  background: var(--vuexy-primary);
}

body.v2-body .fleet-view-nav.nav-pills .nav-link.active small {
  color: var(--v2-on-accent);
}

body.v2-body .v2-settings-layout,
body.v2-body .v2-account-layout {
  align-items: flex-start;
}

body.v2-body .v2-settings-tabs.nav-pills,
body.v2-body .v2-account-nav.nav-pills {
  position: static;
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  grid-template-columns: none;
  gap: 0.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.v2-body .v2-settings-tabs.nav-pills::before,
body.v2-body .v2-account-nav.nav-pills::before {
  display: none;
}

body.v2-body .v2-settings-tabs.nav-pills .nav-link,
body.v2-body .v2-account-nav.nav-pills .nav-link {
  display: block;
  width: 100%;
  min-height: auto;
  margin: 0;
  padding: 0.8rem 1rem;
  border: 0;
  color: var(--vuexy-text);
  background: transparent;
  text-align: left;
}

body.v2-body .v2-settings-tabs.nav-pills .nav-link small {
  margin-top: 0.2rem;
  color: var(--vuexy-muted);
  font-size: 0.72rem;
}

body.v2-body .v2-settings-tabs.nav-pills .nav-link.active,
body.v2-body .v2-account-nav.nav-pills .nav-link.active {
  color: var(--v2-on-accent);
  background: var(--vuexy-primary);
  box-shadow: 0 4px 18px -4px color-mix(in srgb, var(--vuexy-primary) 65%, transparent);
}

body.v2-body .v2-settings-tabs.nav-pills .nav-link.active small {
  color: var(--v2-on-accent);
}

body.v2-body .v2-settings-content > .v2-settings-panel.card,
body.v2-body .v2-account-content > .v2-account-panel.card {
  margin-bottom: 0;
}

body.v2-body .photo-gallery-panel.card {
  padding: 0;
  border: 0;
  background: var(--vuexy-card);
  box-shadow: var(--vuexy-shadow);
}

body.v2-body .photo-gallery-panel.card > .card-header {
  margin: 0;
  padding: 1.5rem 1.5rem 0;
  border: 0;
}

body.v2-body .photo-gallery-panel.card > .card-body {
  padding: 1.5rem;
}

body.v2-body .photo-card.card.ecommerce-card {
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--vuexy-card);
  box-shadow: 0 2px 14px 0 rgba(34, 41, 47, 0.1);
}

body.v2-body .photo-card.card .card-img-top {
  width: 100%;
  border: 0;
  border-radius: var(--vuexy-radius) var(--vuexy-radius) 0 0;
  background: #f8f8f8;
}

body.v2-body .photo-card.card > .card-body {
  padding: 1rem;
  background: transparent;
}

body.v2-body .photo-card__chips {
  display: flex;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.35rem;
}

body.v2-body .photo-card__chip {
  display: inline-flex;
  padding: 0.25rem 0.55rem;
  border: 0;
  border-radius: 10rem;
  font-size: 0.72rem;
  font-weight: 500;
}

body.v2-body .photo-card__title {
  margin: 0 0 0.25rem;
  color: var(--vuexy-heading);
  font-size: 1.05rem;
  font-weight: 500;
}

body.v2-body .photo-card__subtitle,
body.v2-body .photo-card__fact small,
body.v2-body .photo-card__fact span {
  color: var(--vuexy-muted);
  font-size: 0.78rem;
}

body.v2-body .alarm-card__selector {
  display: grid;
}

body.v2-body .alarm-checkbox__visual {
  display: block;
  width: 20px;
  height: 20px;
}

body.v2-body .recorder-panel-shell.card {
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--vuexy-card);
  box-shadow: var(--vuexy-shadow);
}

body.v2-body .recorder-panel-shell.card > .card-header {
  margin: 0;
  padding: 1.5rem 1.5rem 0;
  border: 0;
  background: transparent;
}

body.v2-body .recorder-panel-shell.card > .card-body {
  padding: 1.5rem;
}

body.v2-body .v2-page-header {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 0;
  padding: 0;
  margin-bottom: 1rem;
  border-radius: var(--vuexy-radius);
}

body.v2-body .v2-page-stack > .v2-page-header {
  margin-bottom: 0;
}

body.v2-body .v2-page-header__body {
  display: flex;
  padding: 1.25rem 1.5rem;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

body.v2-body .v2-page-header__copy {
  flex: 1 1 24rem;
  min-width: 0;
}

body.v2-body .v2-page-header__eyebrow {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--v2-accent-text);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.v2-body .v2-page-header__title {
  margin: 0;
  color: var(--vuexy-heading);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: break-word;
}

body.v2-body .v2-page-header__description {
  max-width: 56rem;
  margin: 0.45rem 0 0;
  color: var(--vuexy-text);
}

body.v2-body .v2-page-header__summary {
  max-width: 56rem;
  margin: 0.35rem 0 0;
  color: var(--vuexy-muted);
  font-size: 0.86rem;
}

body.v2-body .v2-page-header__footer {
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--vuexy-border);
  background: transparent;
}

body.v2-body .v2-page-header__badges,
body.v2-body .v2-page-header__actions {
  gap: 0.5rem;
}

body.v2-body .page-command-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

body.v2-body .content-header--breadcrumb-only .breadcrumb {
  padding-left: 0;
}

body.v2-body .v2-page-header__aside {
  display: grid;
  min-width: min(100%, 28rem);
  flex: 1 1 34rem;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.75rem;
}

body.v2-body .v2-page-header__aside .v2-kpi {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  align-items: center;
  background: transparent;
  box-shadow: none;
}

body.v2-body .v2-page-header__aside .v2-kpi .media-body {
  min-width: 0;
}

body.v2-body .v2-page-header__aside .v2-kpi .media-body > span,
body.v2-body .v2-page-header__aside .v2-kpi .media-body > strong,
body.v2-body .v2-page-header__aside .v2-kpi .media-body > small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.v2-body .v2-page-header__aside .v2-kpi .media-body > span,
body.v2-body .v2-page-header__aside .v2-kpi .media-body > small {
  color: var(--vuexy-muted);
  font-size: 0.72rem;
}

body.v2-body .v2-page-header__aside .v2-kpi .media-body > strong {
  color: var(--vuexy-heading);
  font-size: 1.05rem;
  font-weight: 600;
}

body.v2-body .v2-page-header__aside .v2-kpi > span,
body.v2-body .v2-page-header__aside .v2-kpi > small {
  display: block;
  color: var(--vuexy-muted);
  font-size: 0.8rem;
}

body.v2-body .v2-page-header__aside .v2-kpi > strong {
  display: block;
  color: var(--vuexy-heading);
  font-size: 1.35rem;
  font-weight: 600;
}

body.v2-body .v2-panel-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem;
}

body.v2-body .v2-panel-grid > * {
  grid-column: span 12;
  min-width: 0;
}

body.v2-body .v2-panel-grid--two > * {
  grid-column: span 6;
}

body.v2-body .v2-panel-grid--three > * {
  grid-column: auto;
}

body.v2-body .v2-panel-grid .v2-panel--span-full {
  grid-column: 1 / -1;
}

body.v2-body .v2-panel.card,
body.v2-body .v2-card.card,
body.v2-body .v2-surface-card.card {
  margin-bottom: 0;
}

body.v2-body .v2-card.card:has(> .card-body) {
  padding: 0;
}

body.v2-body .v2-panel__header.card-header,
body.v2-body .v2-card__header.card-header {
  margin-bottom: 0;
  border-bottom: 0;
}

body.v2-body .v2-panel__header--between,
body.v2-body .v2-card__header--between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

body.v2-body .v2-badge.badge {
  font-weight: 500;
}

body.v2-body .v2-alert.alert {
  padding: 0.9rem 1rem;
}

body.v2-body .v2-empty.card {
  min-height: 10rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body.v2-body .v2-empty.card p {
  margin: 0.5rem 0 0;
  color: var(--vuexy-muted);
}

body.v2-body .v2-table-wrap.table-responsive {
  border-radius: var(--vuexy-radius);
}

body.v2-body table.table thead th {
  white-space: nowrap;
}

body.v2-body table.table td,
body.v2-body table.table th {
  vertical-align: middle;
}

body.v2-body .v2-field.form-group > label,
body.v2-body .v2-field__label.form-label {
  color: var(--vuexy-heading);
  font-size: 0.857rem;
  font-weight: 400;
}

body.v2-body .v2-modal-overlay {
  position: fixed;
  z-index: 1060;
  inset: 0;
  display: flex;
  padding: 1rem;
  align-items: center;
  justify-content: center;
  background: rgba(34, 41, 47, 0.5);
}

body.v2-body .v2-modal-overlay[hidden] {
  display: none;
}

body.v2-body .v2-modal.modal-content {
  width: min(48rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
}

body.v2-body .v2-modal__close.close {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
}

/* Dashboard eCommerce composition ------------------------------------- */

body.v2-body .v2-dashboard-context {
  display: flex;
  margin: 0;
  align-items: center;
  gap: 0.75rem;
  color: var(--vuexy-muted);
  font-size: 0.86rem;
}

body.v2-body #dashboard-ecommerce > .row > [class*="col-"] {
  min-width: 0;
}

body.v2-body #dashboard-ecommerce > .row > [class*="col-"] > .card:not(.is-v2-card-fullscreen) {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin-bottom: 0;
}

body.v2-body .dashboard-command-card {
  height: auto;
  min-height: 0;
}

body.v2-body .dashboard-command-card__top {
  display: block;
}

body.v2-body .dashboard-command-card__eyebrow {
  grid-column: 1;
  color: var(--vuexy-muted);
  font-size: 0.857rem;
}

body.v2-body .dashboard-command-card__copy .card-title {
  grid-column: 1;
  margin: 0;
  color: var(--vuexy-heading);
  font-size: 1.285rem;
  font-weight: 500;
}

body.v2-body .dashboard-command-card__lede {
  grid-column: 1;
  margin: 0;
  color: var(--vuexy-text);
  font-size: 0.857rem;
}

body.v2-body .dashboard-command-card__live-dot {
  width: 0.65rem;
  height: 0.65rem;
  flex: 0 0 0.65rem;
  border-radius: 50%;
  background: var(--vuexy-success);
  box-shadow: 0 0 0 0.35rem rgba(40, 199, 111, 0.12);
}

body.v2-body .dashboard-command-card__live[data-tone="warning"] .dashboard-command-card__live-dot {
  background: var(--vuexy-warning);
  box-shadow: 0 0 0 0.35rem rgba(255, 159, 67, 0.12);
}

body.v2-body .dashboard-command-card__live[data-tone="danger"] .dashboard-command-card__live-dot {
  background: var(--vuexy-danger);
  box-shadow: 0 0 0 0.35rem rgba(234, 84, 85, 0.12);
}

body.v2-body .dashboard-command-card__live-copy {
  display: flex;
  flex-direction: column;
}

body.v2-body .dashboard-command-card__live-copy strong {
  color: var(--vuexy-heading);
  font-size: 0.9rem;
}

body.v2-body .dashboard-command-card__live-copy small {
  color: var(--vuexy-muted);
  font-size: 0.72rem;
}

body.v2-body .dashboard-command-card__refresh svg {
  width: 1rem;
  height: 1rem;
  margin-right: 0.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

body.v2-body .dashboard-command-card__stats {
  margin: 0;
}

body.v2-body #dashboard-ecommerce .v2-panel.card {
  padding: 0;
}

body.v2-body #dashboard-ecommerce .v2-panel__header.card-header {
  min-height: 0;
  margin-bottom: 0;
  padding: 1.25rem 1.5rem;
}

body.v2-body #dashboard-ecommerce .v2-panel > .card-body {
  padding: 1.25rem 1.5rem;
}

body.v2-body .dashboard-command-card__stat {
  min-width: 0;
  margin: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.v2-body .dashboard-command-card__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.v2-body .dashboard-command-card__stat-icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

body.v2-body .dashboard-command-card__stat-copy > span,
body.v2-body .dashboard-command-card__stat-copy > small {
  display: block;
  color: var(--vuexy-muted);
  font-size: 0.78rem;
}

body.v2-body .dashboard-command-card__stat-copy > strong {
  display: block;
  color: var(--vuexy-heading);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.25;
}

body.v2-body .dashboard-reading-showcase,
body.v2-body .dashboard-reading-card--portfolio {
  overflow: hidden;
}

body.v2-body .dashboard-reading-showcase__head,
body.v2-body .dashboard-reading-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

body.v2-body .dashboard-reading-showcase__head h2,
body.v2-body .dashboard-reading-card__plate {
  margin: 0;
  color: var(--vuexy-heading);
  font-size: 1.2rem;
  font-weight: 500;
}

body.v2-body .dashboard-reading-showcase__head p,
body.v2-body .dashboard-reading-card__meta,
body.v2-body .dashboard-reading-card__name {
  margin: 0.25rem 0 0;
  color: var(--vuexy-muted);
  font-size: 0.78rem;
}

body.v2-body .dashboard-reading-card__eyebrow {
  color: var(--v2-accent-text);
  font-size: 0.78rem;
  font-weight: 500;
}

body.v2-body .dashboard-reading-showcase__item {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--vuexy-border);
  border-radius: var(--vuexy-radius);
  background: #fff;
}

body.v2-body .dashboard-reading-showcase__media {
  padding: 0;
  border-bottom: 1px solid var(--vuexy-border);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f8f8f8;
}

body.v2-body .dashboard-reading-showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.v2-body .dashboard-reading-showcase__body {
  min-width: 0;
  padding: 0.85rem;
}

body.v2-body .dashboard-reading-showcase__titleline,
body.v2-body .dashboard-reading-showcase__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

body.v2-body .dashboard-reading-showcase__titleline strong {
  color: var(--vuexy-heading);
  font-size: 1.1rem;
}

body.v2-body .dashboard-reading-showcase__facts {
  margin: 0.65rem 0;
}

body.v2-body .dashboard-reading-showcase__facts div {
  min-width: 0;
  gap: 0.75rem;
}

body.v2-body .dashboard-reading-showcase__facts dt,
body.v2-body .dashboard-reading-showcase__facts dd,
body.v2-body .dashboard-reading-showcase__footer {
  margin: 0;
  color: var(--vuexy-muted);
  font-size: 0.857rem;
}

body.v2-body .dashboard-reading-showcase__footer a {
  color: var(--v2-accent-text);
}

body.v2-body .dashboard-weather-inline {
  margin-bottom: 2rem;
}

body.v2-body .dashboard-command-weather .dashboard-weather-inline {
  margin-bottom: 0;
}

body.v2-body .dashboard-weather-inline__identity,
body.v2-body .dashboard-weather-inline__summary,
body.v2-body .dashboard-weather-inline__pill-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

body.v2-body .dashboard-weather-inline__head {
  justify-content: space-between;
}

body.v2-body .dashboard-weather-inline__current-icon,
body.v2-body .dashboard-weather-inline__pill-row > svg {
  color: var(--vuexy-warning);
}

body.v2-body .dashboard-weather-inline__current-icon svg {
  width: 2.5rem;
  height: 2.5rem;
}

body.v2-body .dashboard-weather-inline__eyebrow,
body.v2-body .dashboard-weather-inline__meta,
body.v2-body .dashboard-weather-inline__updated,
body.v2-body .dashboard-weather-inline__fact span,
body.v2-body .dashboard-weather-inline__pill-copy small {
  color: var(--vuexy-muted);
  font-size: 0.78rem;
}

body.v2-body .dashboard-weather-inline__title,
body.v2-body .dashboard-weather-inline__fact strong {
  color: var(--vuexy-heading);
  font-weight: 500;
}

body.v2-body .dashboard-weather-inline__fact,
body.v2-body .dashboard-weather-inline__pill {
  padding: 0.85rem;
  border: 1px solid var(--vuexy-border);
  border-radius: var(--vuexy-radius);
  background: transparent;
  text-align: left;
}

body.v2-body .dashboard-weather-inline__rail {
  grid-template-columns: 1fr;
}

body.v2-body .dashboard-weather-inline__pill.is-active {
  border-color: var(--v2-accent-border);
  color: var(--v2-accent-text);
  background: var(--vuexy-primary-soft);
}

body.v2-body .dashboard-weather-inline__rotation {
  min-height: 2.5rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--vuexy-border);
  border-radius: var(--vuexy-radius);
  color: var(--v2-accent-text);
  background: transparent;
}

.dark-layout body.v2-body .dashboard-command-card__copy h1,
.dark-layout body.v2-body .dashboard-command-card__live-copy strong,
.dark-layout body.v2-body .dashboard-command-card__stat-copy > strong,
.dark-layout body.v2-body .dashboard-reading-showcase__head h2,
.dark-layout body.v2-body .dashboard-reading-card__plate,
.dark-layout body.v2-body .dashboard-reading-showcase__titleline strong,
.dark-layout body.v2-body .dashboard-weather-inline__title,
.dark-layout body.v2-body .dashboard-weather-inline__fact strong {
  color: #d0d2d6;
}

.dark-layout body.v2-body .dashboard-reading-showcase__item {
  border-color: #3b4253;
  background: #283046;
}

.dark-layout body.v2-body .dashboard-reading-showcase__media {
  background: #161d31;
}

/* Dark and semi-dark parity -------------------------------------------- */

.dark-layout body.v2-body,
html.dark-layout body.v2-body {
  --vuexy-page: var(--v2-page, #161d31);
  --vuexy-card: var(--v2-surface, #283046);
  --vuexy-heading: var(--v2-heading, #f3f4f8);
  --vuexy-text: var(--v2-text, #d0d2d6);
  --vuexy-muted: var(--v2-muted, #b4b7bd);
  --vuexy-border: var(--v2-border, #3b4253);
}

.dark-layout body.v2-body .header-navbar .nav-link,
.dark-layout body.v2-body .v2-account-button__copy strong {
  color: #d0d2d6;
}

.dark-layout body.v2-body .v2-popover,
.dark-layout body.v2-body .customizer-content,
.dark-layout body.v2-body .v2-page-header {
  color: #b4b7bd;
  border-color: #3b4253;
  background: #283046;
}

.dark-layout body.v2-body .v2-page-header__title,
.dark-layout body.v2-body .v2-page-header__aside .v2-kpi > strong,
.dark-layout body.v2-body .v2-theme-customizer__group legend,
.dark-layout body.v2-body .v2-field.form-group > label,
.dark-layout body.v2-body .v2-field__label.form-label {
  color: #d0d2d6;
}

.dark-layout body.v2-body .v2-page-header__description,
.dark-layout body.v2-body .v2-account-popover__link,
.dark-layout body.v2-body .v2-notification-item {
  color: #b4b7bd;
}

.dark-layout body.v2-body .v2-theme-option,
.dark-layout body.v2-body .v2-popover__header,
.dark-layout body.v2-body .v2-account-popover__header,
.dark-layout body.v2-body .v2-account-popover__logout,
.dark-layout body.v2-body .v2-popover__footer,
.dark-layout body.v2-body .customizer-actions,
.dark-layout body.v2-body .v2-theme-customizer__group + .v2-theme-customizer__group {
  border-color: #3b4253;
}

.semi-dark-layout body.v2-body .main-menu,
.semi-dark-layout body.v2-body .main-menu .navigation {
  color: #d0d2d6;
  background: #283046;
}

.semi-dark-layout body.v2-body .main-menu .navigation > li > a,
.semi-dark-layout body.v2-body .main-menu .navigation > li > button {
  color: #d0d2d6;
}

/* Compact density changes the rendered Vuexy shell and its shared controls,
   not only spacing tokens that fixed vendor declarations never consume. */
html[data-theme-density="compact"] body.v2-body .header-navbar.v2-topbar,
html[data-theme-density="compact"] body.v2-body .header-navbar .navbar-container,
html[data-theme-density="compact"] body.v2-body .main-menu .navbar-header {
  min-height: 3.85rem;
}

html[data-theme-density="compact"] body.v2-body .header-navbar .nav-link {
  min-width: 40px;
  min-height: 40px;
}

html[data-theme-density="compact"] body.v2-body .main-menu .navigation > li > button,
html[data-theme-density="compact"] body.v2-body .main-menu .navigation > li > a {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
}

html[data-theme-density="compact"] body.v2-body .main-menu .navigation .v2-nav__child {
  padding-top: 7px;
  padding-bottom: 7px;
}

html[data-theme-density="compact"] body.v2-body .card-header,
html[data-theme-density="compact"] body.v2-body .v2-panel__header.card-header,
html[data-theme-density="compact"] body.v2-body .v2-card__header.card-header {
  min-height: 3rem;
  padding: 0.9rem 1.1rem;
}

html[data-theme-density="compact"] body.v2-body .card-body{
  padding: 1.1rem;
}

html[data-theme-density="compact"] body.v2-body .v2-page-header {
  margin-bottom: 1.25rem;
}

html[data-theme-density="compact"] body.v2-body .v2-dashboard {
  gap: 1rem;
}

html[data-theme-density="compact"] body.v2-body table.table th,
html[data-theme-density="compact"] body.v2-body table.table td {
  padding: 0.7rem 0.8rem;
}

html[data-theme-density="compact"] body.v2-body .form-control,
html[data-theme-density="compact"] body.v2-body .btn {
  min-height: 2.45rem;
}

/* Compact density must not shrink touch targets, including landscape phones
   and expanded submenu links. Keep desktop mouse density unchanged. */
@media (max-width: 1199.98px), (pointer: coarse) {
  body.v2-body .main-menu .navigation > li > :is(a, button),
  body.v2-body .main-menu .navigation .v2-nav__child,
  html[data-theme-density="compact"] body.v2-body .main-menu .navigation > li > :is(a, button),
  html[data-theme-density="compact"] body.v2-body .main-menu .navigation .v2-nav__child,
  body.v2-body .header-navbar .nav-link,
  html[data-theme-density="compact"] body.v2-body .header-navbar .nav-link {
    min-width: 44px;
    min-height: 44px;
  }

  html[data-theme-density="compact"] body.v2-body :is(.form-control, .btn) {
    min-height: 44px;
  }
}

/* Link-based filters and tabs need the same touch area as Vuexy buttons.
   Keep this after route layers so their compact chips cannot override it. */
@media (max-width: 900px), (pointer: coarse) {
  html body.v2-body .v2-account-nav.nav-pills .nav-link,
  html body.v2-body :is(
    a.v2-filter-chip,
    a.v2-range-chip,
    a.photo-library-active-filters__clear,
    a.v2-exports-filter,
    a.v2-exports-clear,
    a.v2-events-filter-chip,
    a.v2-events-filter-clear,
    a.recorder-panel-chip,
    .v2-account-nav__link,
    .recorders-app-toolbar__nav .btn,
    .monitoring-fit-controls a,
    .monitoring-mode-switch a,
    .v2-content__inner summary,
    .v2-skip-link
  ) {
    min-width: 44px;
    min-height: 44px;
  }

  html body.v2-body :is(.recorder-playback-filter, .diagnostic-log-follow, #notification-sound-volume) {
    min-height: 44px;
  }

  html body.v2-body .btn.btn-icon {
    min-width: 44px;
    min-height: 44px;
  }

  html body .auth-v2-social {
    min-height: 44px;
  }
}

/* Cross-page responsive contract ------------------------------------
   These constraints keep every route inside the Vuexy workspace while
   preserving intentional horizontal scrolling inside technical tables. */
body.v2-body :where(.app-content, .content-wrapper, .content-body, .v2-content__inner, [data-ui-v2-page], [data-v2-page], .v2-page-stack, .v2-dashboard, .card, form) {
  min-width: 0;
}

body.v2-body :where(img, video, canvas) {
  max-width: 100%;
}

body.v2-body :where(input, select, textarea) {
  max-width: 100%;
}

body.v2-body .table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Responsive behavior mirrors Vuexy's vertical menu breakpoints -------- */

@media (min-width: 1200px) {
  body.v2-body {
    --vuexy-sidebar-offset: 260px;
  }

  body.v2-body.menu-collapsed {
    --vuexy-sidebar-offset: 80px;
  }

  body.v2-body.menu-collapsed .main-menu.expanded,
  body.v2-body.menu-collapsed .main-menu.expanded .navbar-header {
    width: 260px;
  }

  body.v2-body.menu-collapsed .main-menu.expanded .brand-text,
  body.v2-body.menu-collapsed .main-menu.expanded .menu-title,
  body.v2-body.menu-collapsed .main-menu.expanded .v2-nav__label {
    display: block;
  }

  body.v2-body.menu-collapsed .main-menu.expanded .brand-text {
    display: inline-block;
  }

  body.v2-body.menu-collapsed .main-menu.expanded .navigation-header {
    display: block;
  }

  body.v2-body.menu-collapsed .main-menu.expanded .navbar-header {
    justify-content: flex-start;
    padding-inline: 1rem;
  }

  body.v2-body.menu-collapsed .main-menu.expanded .navbar-brand {
    justify-content: flex-start;
  }

  body.v2-body.menu-collapsed .main-menu.expanded .navigation-main {
    padding-right: 0;
    padding-left: 0;
  }

  body.v2-body.menu-collapsed .main-menu.expanded .navigation-main > li > a,
  body.v2-body.menu-collapsed .main-menu.expanded .navigation-main > li > button {
    justify-content: flex-start;
    padding: 10px 15px;
  }

  body.v2-body.menu-collapsed .main-menu.expanded .v2-nav__icon {
    margin-right: 0;
  }

  body.v2-body.menu-collapsed .main-menu:not(.expanded) .v2-nav__children,
  body.v2-body.menu-collapsed .main-menu:not(.expanded) .v2-nav__group-label::after {
    display: none;
  }

  body.v2-body.menu-collapsed .main-menu.expanded .v2-nav__group-label::after {
    display: block;
  }

  body.v2-body .app-content.v2-content {
    width: calc(100% - var(--vuexy-sidebar-offset));
    margin-left: var(--vuexy-sidebar-offset);
  }

  html[data-navbar-mode="floating"] body.v2-body .header-navbar.v2-topbar {
    position: fixed;
    top: var(--v2-topbar-offset);
    right: 2rem;
    left: calc(var(--vuexy-sidebar-offset) + 2rem);
    width: auto;
    margin: 0;
  }

  html[data-navbar-mode="static"] body.v2-body .header-navbar.v2-topbar {
    margin-right: 0;
    margin-left: var(--vuexy-sidebar-offset);
  }

  html[data-navbar-mode="sticky"] body.v2-body .header-navbar.v2-topbar {
    right: 0;
    left: var(--vuexy-sidebar-offset);
    margin: 0;
  }

  body.v2-body .footer.v2-footer {
    width: calc(100% - var(--vuexy-sidebar-offset));
    margin-left: var(--vuexy-sidebar-offset) !important;
  }

}

@media (max-width: 1199.98px) {
  html[data-navbar-mode="floating"] body.v2-body .header-navbar.v2-topbar {
    position: fixed;
    right: 1rem;
    left: 1rem;
    width: auto;
    margin: 0;
  }

  html[data-navbar-mode="sticky"] body.v2-body .header-navbar.v2-topbar {
    right: 0;
    left: 0;
    margin: 0;
  }

  body.v2-body .main-menu {
    width: min(260px, calc(100vw - 42px));
    transform: translate3d(-260px, 0, 0) !important;
    transition: transform 0.35s ease;
  }

  html.shell-nav-open body.v2-body .main-menu {
    transform: translate3d(0, 0, 0) !important;
  }

  html.shell-nav-open body.v2-body .sidenav-overlay {
    visibility: visible;
    opacity: 1;
  }

  body.v2-body .v2-footer {
    width: auto;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.v2-body .v2-panel-grid--two > *,
  body.v2-body .v2-panel-grid--three > * {
    grid-column: span 12;
  }
}

@media (max-width: 767.98px) {
  html[data-navbar-mode="floating"] body.v2-body .header-navbar.v2-topbar {
    right: max(1rem, env(safe-area-inset-right));
    left: max(1rem, env(safe-area-inset-left));
  }

  body.v2-body .app-content.v2-content {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  body.v2-body :where(.content-wrapper, .content-body, .v2-content__inner, [data-ui-v2-page], [data-v2-page], .v2-page-stack, .v2-dashboard, .v2-page-header, .card, form, .v2-toolbar, .v2-action-row) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.v2-body .row > [class*="col-"] {
    min-width: 0;
    max-width: 100%;
  }

  /* Let one-column mobile grids use the real track instead of creating
     implicit twelve-column overflow from the desktop span contract. */
  body.v2-body .v2-panel-grid--two,
  body.v2-body .v2-panel-grid--three {
    grid-template-columns: minmax(0, 1fr);
  }

  body.v2-body .v2-panel-grid--two > *,
  body.v2-body .v2-panel-grid--three > * {
    grid-column: auto !important;
  }

  body.v2-body :where(.card-header, .v2-panel__header, .v2-card__header) {
    min-width: 0;
    flex-wrap: wrap;
  }

  body.v2-body :where(.card-header, .v2-panel__header, .v2-card__header) > * {
    min-width: 0;
    max-width: 100%;
  }

  body.v2-body .main-menu .navigation > li > :is(a, button),
  html[data-theme-density="compact"] body.v2-body .main-menu .navigation > li > :is(a, button),
  body.v2-body .v2-pagination :is(a, button),
  body.v2-body :is(.v2-pagination__control, .v2-pagination__page) {
    min-width: 44px;
    min-height: 44px;
  }

  body.v2-body .v2-popover {
    position: fixed;
    top: 5.35rem;
    right: 1rem;
    left: 1rem;
    width: auto;
    max-width: none;
  }

  body.v2-body .table-responsive:not(.v2-table-wrap--mobile-cards) > table.table {
    display: table;
    min-width: 48rem;
  }

  body.v2-body .table-responsive:not(.v2-table-wrap--mobile-cards) > table.table > thead {
    display: table-header-group;
  }

  body.v2-body .table-responsive:not(.v2-table-wrap--mobile-cards) > table.table > tbody {
    display: table-row-group;
  }

  body.v2-body .table-responsive:not(.v2-table-wrap--mobile-cards) > table.table tr {
    display: table-row;
  }

  body.v2-body .table-responsive:not(.v2-table-wrap--mobile-cards) > table.table th,
  body.v2-body .table-responsive:not(.v2-table-wrap--mobile-cards) > table.table td {
    display: table-cell;
    width: auto;
  }

  body.v2-body .table-responsive:not(.v2-table-wrap--mobile-cards) > table.table td::before {
    display: none;
  }

  body.v2-body .v2-account-button__copy,
  body.v2-body .bookmark-icons {
    display: none;
  }

  body.v2-body .v2-page-header {
    margin-bottom: 1rem;
  }

  body.v2-body .v2-page-header__body {
    padding: 1.1rem;
    align-items: flex-start;
    flex-direction: column;
  }

  body.v2-body .v2-page-header__footer {
    padding: 0.85rem 1.1rem;
  }

  body.v2-body .v2-page-header__copy,
  body.v2-body .v2-page-header__aside {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }

  body.v2-body .v2-page-header__aside {
    width: 100%;
    justify-content: flex-start;
  }

  body.v2-body .v2-page-header__aside .v2-kpi {
    min-width: calc(50% - 0.5rem);
  }
}

@media (max-width: 575.98px) {
  body.v2-body .customizer {
    display: none !important;
  }

  body.v2-body .v2-help-trigger--topbar {
    display: none !important;
  }

  html[data-theme-density="compact"] body.v2-body .header-navbar .nav-link {
    min-width: 44px;
    min-height: 44px;
  }

  body.v2-body .content-header-title {
    max-width: 100%;
    border-right: 0;
  }

  body.v2-body .app-content.v2-content {
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-left: max(0.75rem, env(safe-area-inset-left));
  }

  body.v2-body .breadcrumb-wrapper {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    overflow-x: auto;
  }

  body.v2-body .v2-page-header {
    margin-bottom: 1.25rem;
  }

  body.v2-body .v2-page-header__aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  body.v2-body .v2-page-header__aside .v2-kpi {
    min-width: 0;
  }

  body.v2-body .dashboard-command-card__stat {
    margin-bottom: 0.75rem;
  }

  body.v2-body .dashboard-reading-showcase__facts div {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.1rem;
  }

}

body.v2-body [data-v2-card].is-v2-card-fullscreen {
  position: fixed;
  z-index: calc(var(--v2-z-modal, 1050) - 1);
  inset: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  display: flex;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
  flex-direction: column;
  animation: none;
  transform: none;
}

body.v2-body [data-v2-card].is-v2-card-fullscreen > .v2-card__body {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
}

@media (prefers-reduced-motion: reduce) {
  body.v2-body .customizer,
  body.v2-body .customizer-content,
  body.v2-body .customizer-toggle {
    transition-delay: 0s !important;
  }

  body.v2-body *,
  body.v2-body *::before,
  body.v2-body *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

}