:root {
  /* Common colors */
  --border-color: #e6e6e8;
  --border-sidebar-color: #80839029;
  --white-color: #fff;
  --text-color: #444050;
  --hover-bg-color: #f3f2f3;
  --subtext-color: #6d6b77;
  --selected-color: #2d99ff;
  --selected-bg-color: #2d99ff29;
  --placeholder-text-color: #acaab1;
  --sidebar-text-color: #cfcce4;

  /* Common CSS */
  --x-sidebar-expanded-width: 260px;
  --x-sidebar-collapsed-width: 70px;
  --border-radius-md: 6px;
  --dropdown-shadow: 0 4px 18px 0 #2f2b3d29;
  --font-family: "Hiragino Kaku Gothic ProN";
}

#app-wrapper-content {
  #app-header {
    font-family: var(--font-family) !important;
    color: var(--text-color) !important;
  }
  .body {
    padding-left: calc(var(--x-sidebar-collapsed-width) + 16px) !important;
    padding-top: 136px !important;
  }
}

/* Sidebar */
.x-sidebar {
  width: var(--x-sidebar-collapsed-width);
  height: 100vh;
  background-color: #2f3349;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 0;
  transition: margin-left 0.15s, box-shadow 0.075s, transform 0.15s, width 0.15s,
    z-index 0s ease 0.15s;
  z-index: 10002;
  border-bottom: 1px solid var(--border-sidebar-color);
  overflow-x: hidden;

  .sidebar-logo {
    border-bottom: 1px solid var(--border-sidebar-color);
    height: 70px;
    display: flex;
    align-items: center;
    padding-left: 21px;

    /* logo img */
    #growme-logo-icon {
      width: 28px;
      transition: all 0.2s ease-in-out;
    }
    #growme-logo-icon.expandSize {
      width: 35px;
    }

    #growme-logo-text {
      opacity: 0;
      transition: all 0.2s ease-in-out;
    }

    #growme-logo-text.expandSize {
      opacity: 1;
      padding-left: 5px;
    }
  }

  .sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-inline: 6px;
    padding-top: 12px;
    overflow-x: hidden;
    max-height: calc(100vh - 150px);

    .sidebar-item-group {
      list-style-type: none;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    .sidebar-item-group.groupExpanded {
      display: flex;
      align-items: start;
    }

    .group-items {
      padding-inline-start: 16px !important;
      margin-bottom: 0 !important;
      display: none;
      opacity: 0;
      transition: all 0.15s;
      width: 100%;

      .subitem {
        margin-top: 4px;
        justify-content: start !important;
        padding: 8px 0px 8px 12px !important;
      }
    }

    .subitem:hover {
      background: var(--border-sidebar-color);
      border-radius: 6px;
    }

    .active {
      border-radius: 6px;
      background: #2d99ff;
      list-style-type: none;

      .subitem {
        color: var(--white-color) !important;
      }
      .subicon {
        filter: brightness(0) saturate(100%) invert(99%) sepia(2%)
          saturate(1095%) hue-rotate(201deg) brightness(118%) contrast(100%);
      }
    }
    /* Thêm ... cho text (ellipsis) */
    .subtext {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .group-items.sidebarExpanded {
      display: block;
      opacity: 1;
    }

    .sidebar-item,
    .subitem {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;

      font-size: 14px;
      font-weight: 300;
      line-height: 21px;
      color: var(--sidebar-text-color);
      white-space: nowrap;
      padding: 8px 12px;
      transition: all 0.15s;
      cursor: pointer;
      user-select: none;
    }

    .sidebar-item {
      width: 46px;
      margin-top: 4px;
    }

    .subitem.sidebarExpanded,
    .sidebar-item.sidebarExpanded {
      justify-content: start;
      width: 100%;
    }
    .sidebar-item.active {
      color: var(--selected-color) !important;
      background: var(--border-sidebar-color);
      border-radius: 6px;

      #expand-item.groupExpanded,
      img {
        filter: brightness(0) saturate(100%) invert(46%) sepia(95%)
          saturate(421%) hue-rotate(184deg) brightness(92%) contrast(98%);
      }
    }
    .item-text {
      display: none;
      opacity: 0;
      width: -webkit-fill-available;
      justify-content: space-between;
      /* Thêm ... cho text (ellipsis) */
      .text-content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 175px;
      }
    }
    .item-text.sidebarExpanded {
      display: flex;
      opacity: 1;
    }
    .sidebar-empty {
      display: flex;
      justify-content: center;
      gap: 8px;

      color: var(--sidebar-text-color);
      font-weight: 300;
      font-size: 16px;
      width: 100%;
    }
  }

  .search-sidebar {
    position: relative;
    padding: 12px 8px 0 8px;
    transition: all 0.2s ease-in-out;

    #sidebar-search-input {
      height: 38px;
      background: transparent;
      border: 1px solid #666a87;
      border-radius: 6px;
      width: 100%;
      padding-left: 14px;
      outline: none !important;
      color: #e1def5;
    }
    #sidebar-search-input::placeholder {
      font-size: 14px !important;
      font-weight: 300;
      line-height: 21px; /* common lại */
      color: #8285a0;
    }
  }
  .search-icon {
    position: absolute;
    right: 22px;
    top: 23px;
  }
  /* Chặn kéo img bằng chuột (Sidebar) */
  img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
  }
}
.x-sidebar:hover {
  width: var(--x-sidebar-expanded-width);
  transition: all 0.2s ease-in-out;
}
.x-sidebar.expanded {
  margin-left: 0;
  width: var(--x-sidebar-expanded-width);
}

.header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  background-color: var(--white-color);

  /* Header */
  .x-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    position: sticky;
    padding: 0px 30px 0px calc(var(--x-sidebar-collapsed-width) + 24px);
    height: 70px;
    transition: padding 0.15s;
    background-color: var(--white-color);
    border-bottom: 1px solid var(--border-color);

    .icon-content,
    .function-icon {
      display: flex;
      align-items: center;
      gap: 13px;
    }
    .function-icon .ficon {
      display: flex;
      align-items: center;
      justify-content: center;

      height: 38px;
      width: 38px;
      cursor: pointer;

      img {
        margin-right: 0.5px;
      }
    }
    .function-icon .ficon:hover {
      background-color: var(--hover-bg-color);
      border-radius: 50%;
    }
    .header-left-content {
      display: flex;
      align-items: center;

      .sidebar-toggle {
        display: flex;
        align-items: center;

        cursor: pointer;
        border-right: 1px solid var(--border-color);
        padding-right: 22px;
        height: 38px;
      }
      .select-site-wrapper {
        padding-left: 20px;

        .select-content {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;

          min-width: 180px;
          padding: 8px;
          border-radius: var(--border-radius-md);
          cursor: pointer;
          border: 1px solid transparent;

          .site-selected {
            text-align: left;
            font-size: 15px;
            font-weight: 600;
            max-width: 250px;

            .site-name {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .site-code {
              font-size: 10px;
              font-weight: 300;
              color: var(--subtext-color);
            }
          }
          .placeholder-text {
            padding-top: 2px;
            font-weight: 300;
            color: var(--placeholder-text-color) !important;
          }
        }
        .select-content.isFocus {
          border: 1px solid var(--selected-color);
        }
      }
      .selectSiteDropdown {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: absolute;
        background: var(--white-color);
        border-radius: var(--border-radius-md);
        box-shadow: var(--dropdown-shadow);
        font-weight: 300;
        font-size: 13px;
        max-height: 300px;
        width: 337px;
        max-width: 340px;
        overflow-y: auto;
        padding: 8px;
        left: 163px;
        top: 63px;

        .option-wrapper {
          display: flex;
          flex-direction: column;
          gap: 2px;
          overflow-y: auto;

          #option {
            display: flex;
            align-items: center;
            justify-content: space-between;

            height: 60px;
            font-size: 16px;
            cursor: pointer;
            padding: 14px 16px;
            border-radius: var(--border-radius-md);
          }
          .option-context {
            font-size: 17px;
            font-weight: 300;
            text-align: left;

            .site-name,
            .site-code {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 255px;
            }
            .site-code {
              font-size: 12px;
              font-weight: 300;
              color: #8d8a94;
            }
          }
          #option.isSelected {
            background: var(--selected-bg-color) !important;
            color: var(--selected-color) !important;
          }
          #option:hover {
            background: var(--hover-bg-color);
          }
          .no-data-founded {
            text-align: center;
            padding: 14px 16px;
            color: #8d8a94;
            font-size: 16px;
            font-weight: 300;
            color: var(--subtext-color);
          }
        }

        .siteSearchInput {
          min-height: 40px;
          border: 1px solid #d1d0d4;
          padding-left: 16px;
          border-radius: var(--border-radius-md);
        }
        .siteSearchInput:focus {
          outline: none;
        }
      }
      .selectSiteDropdown.isSidebarExpanded {
        left: calc(var(--x-sidebar-expanded-width) + 93px);
      }
    }
    .header-right-content {
      .lang-select {
        display: flex;
        align-items: center;
        gap: 6px;

        width: 100%;
        border: none;
        background-color: white;
        font-weight: 300;
        font-size: 13px;
        cursor: pointer;
      }
      .flag-selected {
        width: 28px;
        height: 20px;
      }
      .lang-selected {
        min-width: 28px;
      }
      .language-select-box {
        position: relative;
        display: flex;
        .i-chevron {
          font-size: 16px;
        }
      }
      /* Language Dropdown styles */
      .languageDropdown {
        display: flex;
        flex-direction: column;
        gap: 2px;

        position: absolute;
        background: white;
        border-radius: var(--border-radius-md);
        box-shadow: var(--dropdown-shadow);
        font-weight: 300;
        font-size: 13px;
        max-height: 150px;
        overflow-y: auto;
        padding: 8px;
        right: 0;
        top: 25px;

        #option {
          display: flex;
          align-items: center;
          justify-content: space-between;

          width: 192px;
          height: 60px;
          padding: 14px 16px;
          border-radius: var(--border-radius-md);
          font-size: 16px;
        }
        .option-context {
          display: flex;
          align-items: center;
          gap: 8px;
        }
        #option.isSelected {
          background: var(--selected-bg-color) !important;
          color: var(--selected-color) !important;
        }
        .flag-option {
          width: 22px;
          height: 16px;
        }
      }
      .languageDropdown div {
        padding: 8px;
        cursor: pointer;
      }
      .languageDropdown #option:hover {
        background: var(--hover-bg-color);
      }
      /* Profile Dropdown styles */
      .profileDropdown {
        position: absolute;
        background: white;
        border-radius: var(--border-radius-md);
        box-shadow: var(--dropdown-shadow);
        font-weight: 300;
        font-size: 13px;
        min-height: 206px;
        min-width: 282px;
        max-width: 350px;
        overflow-y: auto;
        right: 25px;
        top: 60px;

        #option {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 14px 16px;
          border-radius: var(--border-radius-md);
          font-size: 16px;
          cursor: pointer;
        }
        .option-context {
          display: flex;
          align-items: center;
          gap: 8px;
        }
        #option.isSelected {
          background: var(--selected-bg-color) !important;
          color: var(--selected-color) !important;
        }
        #avatar {
          width: 40px;
          height: 40px;
        }
        .user-info {
          /* Flex group */
          display: flex;
          align-items: center;
          gap: 8px;

          /* Other */
          padding: 18px 24px;
          border-bottom: 1px solid var(--border-color);

          .username {
            font-size: 20px;
            font-weight: 600;
          }
          .user-email {
            font-size: 12px;
            font-weight: 300;
            color: var(--subtext-color);
            margin: 0 !important;
          }
        }
        .option-wrapper {
          padding: 8px;
        }
        a {
          color: var(--text-color) !important;
        }
      }
      .profileDropdown #option:hover {
        background-color: var(--hover-bg-color);
      }
    }
    .language-section {
      /* Flex group */
      display: flex;
      align-items: center;
      gap: 8px;

      /* Other */
      padding: 0px 13px 0px 24px;
      border-inline: 1px solid var(--border-color);
      min-height: 38px;
    }
    .profile-section {
      display: flex;
      align-items: center;
    }
    #avatar {
      width: 36px;
      height: 36px;
      cursor: pointer;
    }
  }
  .x-header.headerLogout {
    padding-left: 24px;
  }

  /* Chặn kéo img bằng chuột (Header) */
  img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
  }
}

/* Breadcrumb */
.x-breadcrumb {
  display: flex;
  align-items: center;

  background-color: var(--white-color);
  border-bottom: 1px solid var(--border-color);
  height: 48px;
  padding-left: calc(var(--x-sidebar-collapsed-width) + 24px);
  margin: 70px 0 24px 0;
  transition: padding 0.15s;
  font-size: 15px;
  font-weight: 300;
  position: fixed;
  width: 100%;
  z-index: 10000;

  li {
    list-style-type: none;
  }
  /* Đè màu lên màu core Vuexy (thẻ <a>) */
  .breadcrumb-item {
    a {
      color: var(--selected-color) !important;
    }
  }
  .breadcrumb-item.active {
    color: var(--text-color) !important;
  }
}

.x-header.sidebarExpanded,
.x-breadcrumb.sidebarExpanded {
  padding-left: calc(var(--x-sidebar-expanded-width) + 24px);
}

.footer-wrapper {
  display: flex;
  justify-content: space-between;

  font-size: 14px;
  font-weight: 300;
  background-color: transparent !important;
  padding: 12.5px 24px 12.5px calc(var(--x-sidebar-collapsed-width) + 24px);
  border-top: 1px solid var(--border-color);

  .symbol-copyright {
    color: #8d8a94;
  }
  .year-develop,
  .powered-by {
    color: var(--text-color);
  }
  .link {
    color: var(--selected-color);
  }
}
.footer-wrapper.footerLogout {
  padding: 12.5px 24px;
}

/* handle logout header */
.isLogout {
  display: none !important;
}

.wrapper,
#app-wrapper-content {
  overflow: visible !important;
}

.tooltip {
  z-index: 10006 !important;
}

/* x-cloak: tránh bị 'blip' các popup theo toggle của alpinejs */
[x-cloak] {
  display: none !important;
}