/********** This CSS file is for all User Dashboard UI elements. File is loaded to both editor and front end **********/

/********** User Dashboard Layout **********/

/* ensure 100vh on columns */

.user-dashboard-columns {
  max-height: calc(
    100vh - var(--header-height-desktop) - var(--wp-topbar-height)
  );
  height: 100vh;
  overflow-y: hidden;
  max-width: 100%;
  overflow-x: hidden;
}

/* Allow for wp admin bar with columns */
body.admin-bar .user-dashboard-columns {
  max-height: calc(
    100vh - var(--header-height-desktop) - var(--wp-topbar-height) - 32px
  );
  height: 100vh;
}

/********** User Sidebar Layout **********/

.user-sidebar-column {
  overflow: auto;
}

/* Allows for sidebar space between */
.user-sidebar-inner-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/********** User Content Layout **********/

/* Makes the user content scrollable on desktop */
.user-outer-wrapper {
  height: 100%;
}

/* User page title wrapper */

.user-page-title {
  top: 0px !important;
  z-index: 1 !important;
  max-height: 45px;
}

.user-page-title h2 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif !important;
}

.user-inner-container {
  height: calc(100% - 45px) !important;
  overflow: auto !important;
}

/* User Dashboard Menu Trigger Wrapper */

.user-dashboard-menu-trigger-wrapper {
  transition: all 0.3s ease-in-out !important;
}

.user-dashboard-menu-trigger-wrapper :hover {
  background-color: var(--wp--preset--color--base-3);
  transition: all 0.3s ease-in-out !important;
}

/* Adds height to template part for editor and front end */

.user-sidebar-template-part {
  height: 100%;
}

/* List */
.user-sidebar-menu ul {
  width: 100%;
}

/* Block navigation item */
.user-sidebar-menu .wp-block-navigation-item {
  width: 100%;
  display: flex;
}

/* Link */
.user-sidebar-menu .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 5px 10px 5px 10px;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

/* Link */
.user-sidebar-menu .wp-block-navigation-item__content:hover {
  background-color: var(--wp--preset--color--base-2);
  transition: all 0.3s ease-in-out;
}

/* Active Link Based on Current Page */
.user-sidebar-menu .current-menu-item .wp-block-navigation-item__content,
.user-sidebar-menu .current_page_item .wp-block-navigation-item__content {
  background-color: var(--wp--preset--color--base-2) !important;
}

/* Span Tag */
.user-sidebar-menu .wp-block-navigation-item__label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/********** Sidebar Menu buttons **********/

.user-sidebar-button .wp-block-button__link {
  display: flex !important;
  gap: 10px !important;
  padding: 5px 5px 5px 5px !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  background-color: var(--wp--preset--color--base);
  transition: all 0.3s ease-in-out;
}

.user-sidebar-button .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--base-2) !important;
}

.current-page-button {
  background-color: var(--wp--preset--color--base-2) !important;
}

/* Styling for icon */

.user-sidebar-button a::before {
  content: '';
  display: inline-block;
  width: 22px; /* Adjust the size of the icon if needed */
  height: 22px;
  background-color: var(
    --wp--preset--color--contrast-3
  ); /* Apply the preset color */
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  position: relative;
}

/* Dashboard Icon */
.button-dashboard a::before {
  -webkit-mask-image: url('../icons/squares-four.svg');
  mask-image: url('../icons/squares-four.svg');
}

/* Profile Icon */
.button-profile a::before {
  -webkit-mask-image: url('../icons/user-circle.svg');
  mask-image: url('../icons/user-circle.svg');
}

/* Subscription Icon */
.button-subscription a::before {
  -webkit-mask-image: url('../icons/credit-card.svg');
  mask-image: url('../icons/credit-card.svg');
}

/* Helpdesk Icon */
.button-helpdesk a::before {
  -webkit-mask-image: url('../icons/lifebuoy.svg');
  mask-image: url('../icons/lifebuoy.svg');
}

/* Log out Icon - Horizontal Flip */
.button-logout a::before {
  -webkit-mask-image: url('../icons/sign-out.svg');
  mask-image: url('../icons/sign-out.svg');
}

/* Common icon styling for all links */
.user-sidebar-link-dashboard a::before,
.user-sidebar-link-profile a::before,
.user-sidebar-link-subscription a::before,
.user-sidebar-link-helpdesk a::before,
.user-sidebar-link-logout a::before {
  content: '';
  display: inline-block;
  width: 22px; /* Adjust the size of the icon if needed */
  height: 22px;
  margin-right: 10px;
  vertical-align: middle; /* Ensures the icon is aligned with the text */
  background-color: var(
    --wp--preset--color--contrast-3
  ); /* Apply the preset color */
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  position: relative;
  top: 2px; /* Adjust this value slightly to fine-tune the alignment */
}

/* Dashboard Icon */
.user-sidebar-link-dashboard a::before {
  -webkit-mask-image: url('../icons/squares-four.svg');
  mask-image: url('../icons/squares-four.svg');
}

/* Profile Icon */
.user-sidebar-link-profile a::before {
  -webkit-mask-image: url('../icons/user-circle.svg');
  mask-image: url('../icons/user-circle.svg');
}

/* Subscription Icon */
.user-sidebar-link-subscription a::before {
  -webkit-mask-image: url('../icons/credit-card.svg');
  mask-image: url('../icons/credit-card.svg');
}

/* Helpdesk Icon */
.user-sidebar-link-helpdesk a::before {
  -webkit-mask-image: url('../icons/lifebuoy.svg');
  mask-image: url('../icons/lifebuoy.svg');
}

/* Log out Icon - Horizontal Flip */
.user-sidebar-link-logout a::before {
  -webkit-mask-image: url('../icons/sign-out.svg');
  mask-image: url('../icons/sign-out.svg');
}

/******************** User Popup Menu ********************/

/* Base styling for user popup - JavaScript will override positioning dynamically */
#tecology-user-popup
  .tecology-popup-container.tecology-popup-frontend
  .tecology-popup-overlay {
  justify-content: flex-end;
  align-items: flex-start;
  position: fixed;
  top: var(--header-height-desktop);
  right: var(--wp--preset--spacing--10);
  left: auto;
  bottom: auto;
  transform: none;
}

/* Fallback positioning for when JavaScript hasn't loaded yet */
/* Allow for wp admin bar */
body.admin-bar
  #tecology-user-popup
  .tecology-popup-container.tecology-popup-frontend
  .tecology-popup-overlay {
  top: calc(var(--header-height-desktop) + var(--wp-topbar-height) + 32px);
}

/* Allow for wp admin bar responsive */
@media screen and (max-width: 782px) {
  body.admin-bar
    #tecology-user-popup
    .tecology-popup-container.tecology-popup-frontend
    .tecology-popup-overlay {
    top: calc(var(--header-height-desktop) + var(--wp-topbar-height));
  }
}

/* Enhanced positioning for user menu popup */
#tecology-user-popup
  .tecology-popup-container.user-menu-popup
  .tecology-popup-overlay {
  /* Will be overridden by JavaScript for dynamic positioning */
  z-index: 9999;
  background-color: transparent !important;
  pointer-events: all;
}

/* Ensure the inner container can be positioned within the overlay */
#tecology-user-popup
  .tecology-popup-container.user-menu-popup
  .tecology-popup-inner-container {
  position: relative;
  width: var(--tecology-popup-overlay-content-width, 300px);
  height: auto;
}

/* Ensure popup content has proper styling */
#tecology-user-popup
  .tecology-popup-container.user-menu-popup
  .tecology-popup-content {
  background: var(--wp--preset--color--base);
  border-radius: 7px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  min-width: 280px;
  max-width: 320px;
}

/* Mobile responsive adjustments for user popup */
@media screen and (max-width: 767px) {
  #tecology-user-popup
    .tecology-popup-container.user-menu-popup
    .tecology-popup-content {
    min-width: 260px;
    max-width: calc(100vw - 20px);
    margin: 0 10px;
  }

  /* Ensure popup is visible on small screens */
  #tecology-user-popup
    .tecology-popup-container.user-menu-popup
    .tecology-popup-overlay {
    padding: 10px;
  }
}

/******************** User Off Canvas Menu ********************/

#user-off-canvas .tecology-off-canvas-button-wrapper {
  display: none;
}

@media screen and (max-width: 1199px) {
  #user-sidebar-scroll {
    overflow: auto !important;
    max-height: 100% !important;
  }
}

@media screen and (max-width: 767px) {
  #user-sidebar-scroll {
    overflow: auto !important;
    max-height: 470 !important;
  }
}