/*==== PAGE: MOBILE ONLY ===*/
/*==========================*/
/*==========================*/

body.mobile {
  padding: 0;
  background: var(--main-tertiary-200);
}

/* :Page definition */
body.mobile .page-frame.layout.gap,
body.mobile .page-body.gap {
  gap: 0;
}

body.mobile .page-frame.page-top.no-root .page-back {
  display: flex;
}

body.mobile .page-frame .page-context,
body.mobile .page-frame .page-header {
  border-bottom: 1px solid var(--main-tertiary-200);
}

/* :Page actions */
body.mobile .page-frame.root .page-header-actions-main {
  display: flex;
}

body.mobile .page-frame.show-detail .page-header-actions-detail {
  display: flex;
}

body.mobile .page-frame.show-side .page-header-actions-side {
  display: flex;
}

body.mobile .page-frame .page-header-actions .page-action-add {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1000;
  width: 40px !important;
  height: 40px;
  background-color: var(--main-primary-500);
  color: var(--white-pure);
  border: none;
  border-radius: 20px;
}

/* :Page title */
body.mobile .page-frame.root.w-titl-main .page-head-root-title,
body.mobile .page-frame.show-detail.w-titl-detail .page-head-root-title,
body.mobile .page-frame.show-side.w-titl-side .page-head-root-title {
  display: none;
}

body.mobile .page-frame.root.w-titl-main .page-head-section-main-title {
  display: flex;
}

body.mobile .page-frame.show-detail.w-titl-detail .page-head-section-detail-title {
  display: flex;
}

body.mobile .page-frame.show-side.w-titl-side .page-head-section-side-title {
  display: flex;
}

/* :Page header avatar */
body.mobile .page-frame .page-header-avatar-name {
  display: none;
}

body.mobile .page-frame.show-detail .page-header-avatar {
  display: none;
}

body.mobile .page-frame.show-side .page-header-avatar {
  display: none;
}

/* :Page header context */
body.mobile .page-frame .page-context .page-base-context {
  display: none;
}

body.mobile .page-frame.root.no-ctx-main .page-context .page-base-context {
  display: block;
}

body.mobile .page-frame.show-detail.no-ctx-detail.no-ctx-main .page-context .page-base-context {
  display: block;
}

body.mobile .page-frame.show-detail.no-ctx-detail.ctx-main .page-context .page-main-context {
  display: block;
}

body.mobile.page-frame.show-side.no-ctx-side.no-ctx-detail.no-ctx-main .page-context .page-base-context {
  display: block;
}

body.mobile .page-frame.show-side.no-ctx-side.ctx-detail .page-context .page-detail-context {
  display: block;
}

body.mobile .page-frame.show-side.no-ctx-detail.ctx-main .page-context .page-main-context {
  display: block;
}

body.mobile .page-frame.root.ctx-main .page-context .page-main-context {
  display: block;
}

body.mobile .page-frame.show-detail.ctx-detail .page-context .page-detail-context {
  display: block;
}

body.mobile .page-frame.show-side.ctx-side .page-context .page-side-context {
  display: block;
}

body.mobile .page-frame .page-body {
  position: relative;
  overflow: hidden;
}

body.mobile .page-frame .page-section {
  border-radius: 0;
  width: 100%;
}

body.mobile .page-frame .page-section-header {
  display: none;
}

body.mobile .page-frame .page-body-sectiongroup,
body.mobile .page-frame .page-section-side {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transition: left 200ms ease-in-out;
}

body.mobile .page-frame.hidding-detail .page-body-sectiongroup,
body.mobile .page-frame .page-section-side.hidding,
body.mobile .page-frame.root .page-body-sectiongroup,
body.mobile .page-frame.root .page-section-side {
  left: 100%;
}

body.mobile .page-frame .page-body-sectiongroup {
  z-index: 100;
}

body.mobile .page-frame .page-section-side {
  z-index: 200;
}

/*==== PAGE: TABLET ONLY ===*/
/*=========================*/
/*=========================*/

body.tablet {
  padding: 0 8px;
}

/* :Page definition */
body.tablet .page-frame .page-header-frame {
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}

body.tablet .page-frame .page-section.page-section-side .page-section-header.without-header {
  display: flex;
}

body.tablet .page-frame .page-section.page-section-side .page-section-back {
  display: flex;
}

body.tablet .page-frame .page-section.page-section-side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  left: 0;
  transition: left 200ms ease-in-out;
}

body.tablet .page-frame .page-section.page-section-side.hidding {
  left: 100%;
}

/*==== PAGE: TABLET & MOBILE ===*/
/*==============================*/
/*==============================*/

body.handheld #topbar {
  display: none;
}

/* :Page definition */
body.handheld .page-frame .page-header {
  border-radius: 0;
  padding: 8px 16px;
  height: 56px;
}

body.handheld .page-frame .page-breadcrumbs {
  display: none;
}

body.handheld .page-frame .page-header-context {
  display: none;
}

body.handheld .page-frame .page-header-lock-warning,
body.handheld .page-frame .page-header-lock-refresh {
  display: none;
}

body.handheld .page-frame .page-header-avatar {
  display: inherit;
}

body.handheld .page-frame .page-header-actions .button-control {
  width: 40px;
  border: 0px;
  
}

body.handheld .page-frame .page-header-actions .button-control .indicator-dot {
  top: 6px;
  right: 6px;
}


body.handheld .page-frame .page-actions .button-control .button-text,
body.handheld .page-frame .page-header-actions .button-control .button-text {
  display: none;
}

body.handheld .page-frame .page-context {
  display: flex;
  background: var(--main-tertiary-50);
  justify-content: center;
  padding: 4px;
}



body.handheld .page-frame.locked:not(.do-refresh) .page-lock-warning {
  display: flex;
  background: var(--semantic-warning-100);
  color: var(--semantic-warning-900);
  padding: 2px 8px;
  justify-content: center;
  gap: 4px;

  .user-lock-name {
    color: var(--alias-main-text);
    padding: 0px 4px;
  }

  .chip-text {
    text-align: center;
  }
}

body.handheld .page-frame.do-refresh .page-lock-refresh {
  display: flex;
  background: var(--semantic-correct-50);
  color: var(--semantic-correct-900);
  padding: 2px 8px;
  justify-content: center;
  gap: 4px;

  .chip-text {
    text-align: center;
  }
}

body.handheld .page-frame .page-context .page-main-context,
body.handheld .page-frame .page-context .page-detail-context,
body.handheld .page-frame .page-context .page-side-context,
body.handheld .page-frame:not(.locked) .page-lock-warning,
body.handheld .page-frame:not(.do-refresh) .page-lock-refresh,
body.handheld .page-frame.do-refresh .page-lock-warning {
  display: none;
}

/* :MENU-SIDEBAR */
body.handheld #sidebar {
  order: 2;
  border-radius: 0 0 12px 12px;
  border-top: var(--main-tertiary-200, #E0E6EB) solid 1px;
  width: 100%;
  padding: 0px 16px 0px 16px;
  flex-wrap: nowrap;
  height: 4rem;
  max-height: 4rem;
  transition: max-heght 0.3s ease-in-out;
  flex-direction: row;
}

body.tablet.handheld #sidebar {
  margin-top: 8px;
  border-radius: 12px 12px 0 0;
  border-top: none;
}

body.mobile.handheld #sidebar {
  border-radius: 0px;

}

body.handheld #sidebar.secondary {
  display: none;
}

body.handheld #sidebar.mobile-expanded {
  flex-wrap: wrap;
  height: fit-content;
  max-height: 12rem;
  transition: max-height 0.3s ease-in-out;

}

body.handheld #sidebar.mobile-expanded .button-more {
  display: none;
}

body.handheld #sidebar .sidebar-bar {
  flex-direction: column;
  gap: 2px;
  min-width: 48px;
  width: 100%;
  height: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  overflow: visible;
}

body.handheld #sidebar.mobile-expanded .sidebar-bar {
  flex-direction: column;
  gap: 2px;
  min-width: 70px;
  width: 100%;
  height: 60px;
  padding-top: 8px;
  padding-bottom: 8px;
}

body.handheld .button-log {
  border-radius: 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  justify-content: flex-start;
  flex: 1;
  height: 100%;
  position: relative;
  min-width: 48px;
}

body.handheld .button-more {
  height: 100%;
}

body.handheld #sidebar .button-more .sidebar-bar {
  justify-content: center;
}

body.handheld #sidebar .button-log {
  border-radius: 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  justify-content: flex-start;
  flex: 1;
  height: 100%;
  position: relative;
}

body.handheld #sidebar .sidebar-bar.active-button::before {
  content: '';
  width: 100%;
  height: 100%;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: circleSidebar 0.7s ease-in forwards;
  clip-path: circle(0%);
}

@keyframes circleSidebar {
  0% {
    clip-path: circle(0%);
    background-color: var(--main-tertiary-100);
  }

  100% {
    clip-path: circle(75%);
    background-color: transparent;
  }
}

body.handheld .sidebar-icon {
  height: 20px;
  width: 20px;
  font-weight: 100;
  padding: 0;
  overflow: visible;
}

body.handheld .sidebar-icon .badge-notification .elipseCount {
  right: -8px;
  top: -6px;
}

body.handheld #sidebar .sidebar-bar .sidebar-text {
  display: block;
  text-align: left;
  font: var(--text-style-b3, 400 0.875rem/1.125rem 'Figtree', sans-serif);
  font-size: 11px;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  width: inherit;
  text-align: center;
}

body.handheld #sidebar .sidebar-bar.active-button {
  color: black;
  background-color: var(--white-pure);
  transition: all 0.3s ease-in;
}

body.handheld #sidebar .sidebar-bar.active-button .sidebar-icon {
  font-weight: 125;
  color: var(--main-primary-500, #339DFF);
  border: 0px;
  transition: all 0.3s ease-in;
}

body.handheld #sidebar .sidebar-bar.active-button .sidebar-text {
  font: var(--text-style-b3, 400 0.875rem/1.125rem 'Figtree', sans-serif);
  font-size: 11px;
  transition: all 0.3s ease-in;
}

body.handheld #sidebar .sidebar-bar:not(.active-button):hover {
  color: var(--main-tertiary-300, #9DB5C8);
  background-color: var(--white-pure);
}

body.handheld #sidebar .sidebar-bar:not(.active-button):hover .sidebar-icon {
  font-weight: 100;
  color: var(--main-tertiary-300, #9DB5C8);
  font-size: 18px;
  border: 0px;
}

body.handheld #sidebar .sidebar-bar.active-button:hover .sidebar-icon {
  font-size: 18px;
}

body.handheld #sidebar .sidebar-bar:not(.active-button):hover .sidebar-text {
  font: var(--text-style-b3, 400 0.875rem/1.125rem 'Figtree', sans-serif);
  font-size: 11px;
}

body.handheld #content {
  order: 1;
  border-radius: 12px 12px 0 0;
}

body.handheld #activities-list {
  border-radius: 12px 12px 0 0;
}

/*==== DIALOG ====*/
/*================*/
/*================*/
body.handheld .nextsus-dialog {
  position: absolute;
  width: 100%;
  bottom: -100%;
  left: 50%;
  max-height: 80%;
  transform: translateX(-50%);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out, bottom 0.3s ease-out;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

body.handheld .nextsus-dialog.show-dialog {
  bottom: 0;
  transform: translateX(-50%);
  opacity: 1;
}

body.handheld .nextsus-dialog-body {
  min-height: 0;
  flex: 1;
}

body.handheld .nextsus-dialog-footer {
  justify-content: center;
}

/*==== NOTIFICATIONS ====*/
/*=======================*/
/*=======================*/
body.handheld .notification-page {
  width: 100%;
}

/*==== CONTEXT MENU ====*/
/*======================*/
/*======================*/
body.handheld .nextsus-context-menu-popup-body button {
  border: 0;
  width: 32px;
  padding: 0px 5px;
  width: 100%;
  justify-content: flex-start;
}


/*==== LIST ====*/
/*==============*/
/*==============*/

body.mobile {
  .list .list-row {
    display: flex;
    flex-direction: column;

    .data-block {
      min-width: fit-content;
    }

    .main-info {
      width: 100%;
      max-width: none;
      display: flex;
      flex-direction: row-reverse;
    }

    .main-info .label {
      text-wrap: wrap;
    }

    .main-info .main-info-block {
      flex: 1;
    }

    .data-wrapper {
      display: flex;
    }

    .actions {
      display: none;
    }

    .main-status {
      justify-content: flex-end;
    }

  }

  .list .list-full-row[ischild="true"].show {
    border-top: 1px dashed var(--main-tertiary-200);
    display: flex;
  }

  .list .list-full-row:not([isparent="true"]) {
    margin-left: 0px;

    .action-icon {
      display: none;
    }

    .data-wrapper {
      margin-left: 0px;
    }
  }

  .list .list-full-row[withcustomchild="true"] .custom-child {
    margin-left: 0;
  }
}

body.tablet {
  .list .list-row {
    .actions {
      justify-content: center;
    }

    .actions .actions-container {
      display: none;
    }

    .status-and-actions {
      flex-direction: column-reverse;
      justify-content: space-between;

      .actions:has(> :nth-child(2)) {
        display: none;
      }

      .actions:not(:has(> :nth-child(2)))+.actions-ellipsis {
        display: none;
      }

      .actions:has(> :nth-child(2))+.actions-ellipsis {
        display: flex;
        width: fit-content;
        align-self: center;
      }
    }

    .status-and-actions:not(:has(.badge-status)) {
      justify-content: flex-end;
    }

    .data-block {
      min-width: fit-content;
    }
  }
}

body.handheld {
  .list .list-full-row.expanded .list-row::after {
    content: "";
    position: absolute;
    left: 0px;
    top: calc(100% + 16px);
    width: 1px;
    height: calc(var(--child-height, 0px) - 56px);
    background-color: var(--main-primary-200);
  }

  .list .list-row .status-and-actions {
    .main-status {
      justify-self: flex-end;
      width: fit-content;
      align-self: center;
    }
  }

}

/*==== CALENDAR ====*/
/*=========================*/
/*=========================*/

body.handheld .calendar,
body.desktop .calendar {
  container-type: inline-size;
}

@container (max-width: 767px) {
  .calendar .event-card {
    border: 0;
    align-items: center;
    justify-content: center;
  }

  .calendar .event-card .title div,
  .calendar .event-card .subtitle {
    display: none;
  }

  .calendar .day-cell,
  .calendar .day-cell-off-end,
  .calendar .day-cell-off-start {
    min-height: 48px;
  }

  .calendar .headers .header .dayOfWeek {
    white-space: pre-line;
  }

  .calendar #nav-header {
    display: none;
  }
}

@container (min-width: 768px) {
  .calendar .mobile-nav {
    display: none;
  }
}

body.desktop .videocall:not(.desktop-resize) .button.full-screen {
  display: none;
}

body.desktop .videocall:not(.desktop-resize) .buttons-footer .resize-handle {
  display: none;
}