

:root {
  --layout-safe-inset-top: env(safe-area-inset-top, 0px);
  --layout-safe-inset-right: env(safe-area-inset-right, 0px);
  --layout-safe-inset-bottom: env(safe-area-inset-bottom, 0px);
  --layout-safe-inset-left: env(safe-area-inset-left, 0px);
}

html,
body {
  min-height: var(--app-viewport-height);
}

#app {
  min-height: 100%;
}

.main-content {
  margin: 0;
  max-width: none;
  min-height: calc(100dvh - 10rem);
  padding: var(--layout-gutter) 0;
  width: 100%;
}

body.auth-page::before,
app-shell.auth-page .bg-mesh {
  display: none;
}

body.auth-page app-shell,
app-shell.auth-page {
  --touch-target-min: var(--touch-target-min-mobile);
  min-height: var(--app-viewport-height, 100dvh);
}

app-shell.auth-page > main {
  min-height: 0;
}

.main-content .d-flex > * {
  min-width: 0;
}

body.auth-page,
body.auth-page app-shell,
app-shell.auth-page,
app-shell.auth-page > main,
:is(body.auth-page, app-shell.auth-page) .main-content {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

app-shell.auth-page .main-content > :is(login-form, register-form, password-reset-form, logout-handler) {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
}

.main-content.forbidden-route-active,
.main-content[data-pending-route-tag="forbidden-page"],
.main-content:has(> forbidden-page) {
  min-height: 0;
  padding-top: var(--forbidden-route-block-pad-mobile);
  padding-bottom: var(--forbidden-route-block-pad-mobile);
}

.main-content.forbidden-route-active.forbidden-sheet-open {
  position: relative;
  z-index: var(--z-boundary-backdrop);
}

.main-content.not-found-route-active {
  min-height: 0;
  padding-top: var(--not-found-route-block-pad-mobile);
  padding-bottom: var(--not-found-route-block-pad-mobile);
}

@media (width < 768px) {
  .main-content.not-found-route-active {
    align-content: start;
    justify-content: stretch;
  }
}

.container-fluid-safe,
.container-max,
.responsive-container {
  min-width: 0;
}

.single-gutter,
.container-fluid-safe,
.container-max {
  padding-inline-start: max(var(--layout-gutter), var(--layout-safe-inset-left));
  padding-inline-end: max(var(--layout-gutter), var(--layout-safe-inset-right));
}

.main-content > .container-fluid,
.main-content > .container-max,
.main-content > .responsive-container {
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.safe-top {
  padding-top: var(--layout-safe-inset-top);
}

.safe-bottom {
  padding-bottom: var(--layout-safe-inset-bottom);
}

.text-wrap-safe {
  overflow-wrap: break-word;
  word-break: break-word;
}

.table-card-label {
  min-height: var(--touch-target-min);
}

@media (width >= 768px) {
  :root {
    --layout-gutter: clamp(1rem, 2vw, 1.75rem);
  }

  .main-content {
    min-height: calc(100dvh - 11rem);
    padding: var(--layout-gutter-lg) 0;
  }

  .main-content.forbidden-route-active,
  .main-content[data-pending-route-tag="forbidden-page"],
  .main-content:has(> forbidden-page) {
    padding-top: var(--forbidden-route-block-pad-tablet);
    padding-bottom: var(--forbidden-route-block-pad-tablet);
  }

  .main-content.not-found-route-active {
    padding-top: var(--not-found-route-block-pad-tablet);
    padding-bottom: var(--not-found-route-block-pad-tablet);
  }
}

@media (width >= 1366px) {
  :root {
    --layout-gutter: clamp(1.25rem, 1.7vw, 2rem);
  }

  .main-content.forbidden-route-active,
  .main-content[data-pending-route-tag="forbidden-page"],
  .main-content:has(> forbidden-page) {
    padding-top: var(--forbidden-route-block-pad-laptop);
    padding-bottom: var(--forbidden-route-block-pad-laptop);
  }

  .main-content.not-found-route-active {
    padding-top: var(--not-found-route-block-pad-laptop);
    padding-bottom: var(--not-found-route-block-pad-laptop);
  }
}

@media (width >= 1920px) {
  .main-content.forbidden-route-active,
  .main-content[data-pending-route-tag="forbidden-page"],
  .main-content:has(> forbidden-page) {
    padding-top: var(--forbidden-route-block-pad-desktop);
    padding-bottom: var(--forbidden-route-block-pad-desktop);
  }

  .main-content.not-found-route-active {
    padding-top: var(--not-found-route-block-pad-desktop);
    padding-bottom: var(--not-found-route-block-pad-desktop);
  }
}

@media (width >= 1920px) {
  :root {
    --layout-gutter: clamp(1.5rem, 1.5vw, 2.25rem);
  }
}


html {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  max-width: 100vw;
  overflow-x: hidden;
}

img:not([width]):not([height]):not(.cloud-preview-image):not(.cloud-tile__thumb) {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
}

[loading="lazy"] {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

:root {
  --app-viewport-height: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --app-viewport-height: 100dvh;
  }
}

.max-width-safe,
main:not(.overlay-backdrop, .modal, .modal-backdrop),
section:not(.overlay-backdrop, .modal, .modal-backdrop),
article:not(.overlay-backdrop, .modal, .modal-backdrop),
div:not(.overlay-backdrop, .modal, .modal-backdrop, .dropdown-menu, .popover, .tooltip) {
  max-width: 100%;
}


.touch-target,
button,
.btn,
a[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
.nav-link,
.dropdown-item,
.list-group-item-action {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}

.touch-target,
.btn.touch-target,
button.touch-target,
a.touch-target {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}

.touch-target-min,
.btn.touch-target-min,
button.touch-target-min,
a.touch-target-min {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}

.touch-target {
  padding: 0 var(--space-1);
  touch-action: manipulation;
}

.touch-target:not(input):not(select):not(textarea) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
}

.touch-target-min:not(input):not(select):not(textarea) {
  display: inline-flex;
  align-items: center;
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  min-height: var(--touch-target-min);
}

input[type="checkbox"],
input[type="radio"],
.form-check-input {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

input.visually-hidden,
.visually-hidden {
  min-width: 1px;
  min-height: 1px;
  opacity: 0;
}

.input-group .btn,
.input-group button {
  flex-shrink: 0;
}

.pagination .page-link {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (width < 768px) {
  .btn-sm.p-0:not(.touch-target):not(.touch-target-min),
  .btn-link.btn-sm:not(.touch-target):not(.touch-target-min) {
    position: relative;
  }

  .btn-sm.p-0:not(.touch-target):not(.touch-target-min)::after,
  .btn-link.btn-sm:not(.touch-target):not(.touch-target-min)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    z-index: var(--z-deep);
  }
}


.flex-stack-mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (width >= 768px) {
  .flex-stack-mobile {
    flex-direction: row;
    align-items: center;
  }
}

.flex-between-mobile {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

@media (width >= 768px) {
  .flex-between-mobile {
    flex-direction: row;
    justify-content: space-between;
  }
}

.flex-center-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.flex-wrap-mobile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

@media (width >= 768px) {
  .flex-wrap-mobile {
    flex-wrap: nowrap;
  }
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.gap-responsive {
  gap: var(--space-2);
}

@media (width >= 768px) {
  .gap-responsive {
    gap: var(--space-3);
  }
}

@media (width >= 1366px) {
  .gap-responsive {
    gap: var(--space-4);
  }
}


.table-responsive-cards {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  container-type: inline-size;
  container-name: table-cards;
}

.cq-table,
.cq-sidebar .table-responsive-cards,
[class*="sidebar"] .table-responsive-cards,
.offcanvas-body .table-responsive-cards {
  container-type: inline-size;
  container-name: table-cards;
}

@media (width < 768px) {
  .table-responsive-cards table {
    display: block;
    width: 100%;
  }

  .table-responsive-cards thead {
    display: none;
  }

  .table-responsive-cards tbody {
    display: block;
    width: 100%;
  }

  .table-responsive-cards tr {
    display: flex;
    flex-direction: column;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
    gap: var(--space-2);
  }

  .table-responsive-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border: none;
    gap: var(--space-3);
  }

  .table-responsive-cards td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
    min-width: var(--width-col-sm);
  }

  .table-responsive-cards td:empty {
    display: none;
  }

  .table-responsive-cards td.actions::before {
    display: none;
  }
}

@container table-cards (width < 768px) {
  .table-responsive-cards table {
    display: block;
    width: 100%;
  }

  .table-responsive-cards thead {
    display: none;
  }

  .table-responsive-cards tbody {
    display: block;
    width: 100%;
  }

  .table-responsive-cards tr {
    display: flex;
    flex-direction: column;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
    gap: var(--space-2);
  }

  .table-responsive-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border: none;
    gap: var(--space-3);
  }

  .table-responsive-cards td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
    min-width: var(--width-col-sm);
  }

  .table-responsive-cards td:empty {
    display: none;
  }

  .table-responsive-cards td.actions::before {
    display: none;
  }
}


.text-safe {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}

.text-truncate-safe {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}

.responsive-heading {
  font-size: var(--font-size-lg);
  line-height: 1.2;
}

@media (width >= 768px) {
  .responsive-heading {
    font-size: var(--font-size-xl);
  }
}

@media (width >= 1366px) {
  .responsive-heading {
    font-size: var(--font-size-2xl);
  }
}

@media (width >= 1920px) {
  .responsive-heading {
    font-size: var(--font-size-3xl);
  }
}

.responsive-text {
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

@media (width >= 768px) {
  .responsive-text {
    font-size: var(--font-size-base);
  }
}

@media (width >= 1366px) {
  .responsive-text {
    font-size: var(--font-size-lg);
  }
}


.hide-mobile {
  display: none;
}

@media (width >= 768px) {
  .hide-mobile {
    display: block;
  }
}


.container {
  max-width: var(--container-mobile);
}

.responsive-container {
  width: 100%;
  min-width: 0;
}

@media (width >= 768px) {
  .container {
    max-width: var(--container-tablet);
  }
}

@media (width >= 1366px) {
  .container {
    max-width: var(--container-laptop);
  }
}

@media (width >= 1920px) {
  .container {
    max-width: var(--container-desktop);
  }
}


@media (width < 768px) {
  .form-control,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: var(--font-size-lg);
  }
}


.overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--app-viewport-height);
  min-height: var(--app-viewport-height);
  max-height: var(--app-viewport-height);
  background: var(--color-surface-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-normal) var(--ease-out),
              visibility 0s linear var(--dur-normal);
}

.overlay-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

#cmdBackdrop.overlay-backdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--layout-gutter);
  padding-block: var(--layout-gutter);
  z-index: var(--z-popover);
  transition: none;
}

#cmdBackdrop.overlay-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#cmdBackdrop.overlay-backdrop.active > *,
#cmdBackdrop.overlay-backdrop.active #cmdInput {
  visibility: visible;
}

#cmdBackdrop.overlay-backdrop > .w-100 {
  width: min(100%, var(--container-md));
  margin-inline: auto;
}

@media (width < 768px) {
  #cmdBackdrop.overlay-backdrop {
    align-items: flex-end;
    padding-top: var(--layout-gutter);
    padding-inline-start: max(var(--layout-gutter), env(safe-area-inset-left));
    padding-inline-end: max(var(--layout-gutter), env(safe-area-inset-right));
    padding-bottom: max(var(--layout-gutter), env(safe-area-inset-bottom));
  }

  #cmdBackdrop.overlay-backdrop > .w-100 {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  #cmdBackdrop.overlay-backdrop > .w-100 > .card {
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    max-height: min(82vh, calc(var(--app-viewport-height) - var(--space-12)));
    overflow: auto;
  }
}


[class*="col-bp3-"],
[class*="col-bp4-"] {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

.modal-bp2-lg {
  max-width: min(96vw, var(--container-md));
}

.modal-bp3-xl {
  max-width: min(96vw, var(--container-lg));
}

@media (width >= 1366px) {
  .d-bp3-none {
    display: none;
  }

  .d-bp3-block {
    display: block;
  }

  .d-bp3-inline-flex {
    display: inline-flex;
  }

  .d-bp3-flex {
    display: flex;
  }

  .mb-bp3-0 {
    margin-bottom: 0;
  }

  .col-bp3-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-bp3-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-bp3-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-bp3-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .col-bp3-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .modal-bp3-xl {
    max-width: min(92vw, var(--container-xl));
  }

  .navbar-expand-bp3 {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-bp3 .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-bp3 .navbar-collapse {
    display: flex;
    flex-basis: auto;
  }

  .navbar-expand-bp3 .navbar-toggler {
    display: none;
  }
}

@media (width >= 1920px) {
  .mb-bp4-0 {
    margin-bottom: 0;
  }

  .col-bp4-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
}



@media print {
  .overlay-backdrop {
    display: none;
  }

  body {
    overflow: visible;
  }

  .table-responsive-cards table {
    display: table;
  }

  .table-responsive-cards thead {
    display: table-header-group;
  }

  .table-responsive-cards tbody {
    display: table-row-group;
  }

  .table-responsive-cards tr {
    display: table-row;
  }

  .table-responsive-cards td,
  .table-responsive-cards th {
    display: table-cell;
  }
}


.navbar,
nav[aria-label] {
  min-height: var(--navbar-height-mobile);
  contain-intrinsic-block-size: var(--navbar-height-mobile);
}

@media (width >= 768px) {
  .navbar,
  nav[aria-label] {
    min-height: var(--navbar-height);
    contain-intrinsic-block-size: var(--navbar-height);
  }
}

.tab-content {
  min-height: var(--height-xs);
}

.tab-content:empty,
.tab-content:has(.tab-pane:empty) {
  min-height: var(--height-sm);
  contain-intrinsic-block-size: var(--height-sm);
}

.card-grid:empty,
.card-deck:empty,
.row:has(> [class*="col"]):empty {
  min-height: var(--height-md);
  contain-intrinsic-block-size: var(--height-md);
}

.table-responsive-cards:empty,
.table-responsive:empty {
  min-height: var(--height-sm);
  contain-intrinsic-block-size: var(--height-sm);
}

[aria-busy="true"] {
  min-height: var(--touch-target-min);
  contain-intrinsic-block-size: auto var(--height-xs);
}


.cq-sidebar,
.offcanvas-body,
[class*="sidebar"],
aside {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (width < 400px) {
  .card,
  .cq-card {
    padding: var(--space-2);
  }

  .card-header,
  .card-footer {
    padding: var(--space-2) var(--space-3);
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
}

@container sidebar (width >= 400px) and (width < 768px) {
  .card,
  .cq-card {
    padding: var(--space-3);
  }
}

@media (width < 1024px) {
  lead-list[data-active-tab="list"] .lead-table tr.lead-row > td.table-card-generated-cell {
    padding: var(--space-2) var(--space-3);
  }

  lead-list[data-active-tab="list"] .table-card-generated-details {
    min-inline-size: 0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
  }

  lead-list[data-active-tab="list"] .table-card-generated-details__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-block-size: var(--touch-target-min);
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    list-style: none;
  }

  lead-list[data-active-tab="list"] .table-card-generated-details__summary::-webkit-details-marker {
    display: none;
  }

  lead-list[data-active-tab="list"] .table-card-generated-details__summary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--space-1);
  }

  lead-list[data-active-tab="list"] .table-card-generated-details__summary:hover {
    background: var(--color-surface-hover);
  }

  lead-list[data-active-tab="list"] .table-card-generated-details__summary:active {
    background: var(--color-surface-active);
  }

  lead-list[data-active-tab="list"] .table-card-generated-details__summary-copy {
    display: grid;
    gap: var(--space-0-75);
    min-inline-size: 0;
  }

  lead-list[data-active-tab="list"] .table-card-generated-details__summary-hint {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
  }

  lead-list[data-active-tab="list"] .table-card-generated-details__summary-icon {
    flex: 0 0 auto;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  lead-list[data-active-tab="list"] .table-card-generated-details[open] .table-card-generated-details__summary-icon {
    transform: rotate(180deg);
  }

  lead-list[data-active-tab="list"] .table-card-generated-details__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0 var(--space-3) var(--space-3);
  }

  lead-list[data-active-tab="list"] .table-card-generated-details__list > div {
    display: grid;
    gap: var(--space-0-75);
    min-inline-size: 0;
  }

  lead-list[data-active-tab="list"] .table-card-generated-details__list > div + div {
    border-block-start: 1px solid var(--color-border-light);
    padding-block-start: var(--space-2);
  }

  lead-list[data-active-tab="list"] .table-card-generated-details__list dt {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
  }

  lead-list[data-active-tab="list"] .table-card-generated-details__list dd {
    min-inline-size: 0;
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
    overflow-wrap: break-word;
    word-break: normal;
  }
}
