/*Dashboard Header styling*/
.header-with-actions {
  background-color: #fafdfb !important;
  color: #262626 !important;
}

/*Main Navigation bar styling*/
#main-menu,
#main-menu .ant-menu.main-nav,
#main-menu .ant-menu,
.navbar-brand {
  background-color: white !important;
  color: white !important;

  a,
  .ant-menu-submenu,
  .ant-menu-submenu svg,
  .fa-plus {
    color: black;
  }

  a:hover,
  .ant-menu-submenu:hover {
    background-color: white;
    color: #005934;
    border-bottom: none !important;

    svg,
    .fa-plus {
      color: #005934;
    }

    .ant-menu-horizontal > .ant-menu-item,
    .ant-menu-item-active::after {
      border-bottom: none;
    }
  }
}


/* Active navbar tab text */
#main-menu .ant-menu-item-selected a,
#main-menu .ant-menu-item-active a {
    color: #005934 !important;
    font-weight: 600 !important;
}

#main-menu .ant-menu-item-selected::after,
#main-menu .ant-menu-item-active::after {
    border-bottom: 3px solid #005934 !important;
}

#main-menu .ant-menu-item:hover a,
#main-menu .ant-menu-submenu:hover a {
    color: #005934 !important;
}

/* Hover underline */
#main-menu .ant-menu-item:hover::after {
    border-bottom: 3px solid #005934 !important;
}


/* Responsive grid layout */
/* 1. hide all top-level <li> in your menu */
/*.ant-menu.main-nav > li {*/
/*  display: none !important;*/
/*}*/

/* 2. show only the one with an <img> inside */
/*.ant-menu.main-nav > li:has(img) {*/
/*  display: list-item !important;*/
/*}*/

/* Navbar logo size */
#main-menu .ant-image {
    height: 72.95px !important;
}

#main-menu .ant-image img {
    height: 72px !important;
    width: auto !important;
    max-height: none !important;
}

/*Exception for dashboard title text in editing mode*/
.dynamic-title-input {
  background: none;
}

@media only screen and (max-device-width: 768px) {
  /*Set the timeseries bar chart height in mobile devices*/
  .echarts_timeseries_bar > div:last-child {
    & > div {
      height: 240px !important;

      canvas {
        height: 250px !important;
      }
    }
  }

  /*Consistent chart text sizes*/
  .header-line {
    font-size: 54px !important;
  }

  .header-controls {
    flex-direction: row !important;
  }

  /*Add min height to chart container*/
  .chart-slice {
    min-height: 140px !important;
  }

  body {
    font-size: 16px !important;

    h3 {
      font-size: 20px !important;
    }
    .editable-title {
      font-size: 18px !important;
    }
  }

  #app {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
  }

  #app > div {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;

    & > div:nth-child(1) {
      order: 2;
      & > div {
        height: auto;
        width: 100% !important;
        position: static;
        max-width: 100%;

        .open {
          display: flex;
        }
      }
    }

    & > div:nth-child(2) {
      order: 3;
      padding: 25px;

      & > div > div > .open[role="button"] {
        display: flex;
        flex-direction: row;
        height: unset;
        align-items: baseline;

        svg {
          width: 30px;
          height: 30px;
        }
      }

      & > div > .open > .open {
        display: flex;
        flex-direction: column;
        height: unset;

        & > div:nth-child(2) {
          /*Make the form elements into two columns*/
          & > div {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;

            & > div:nth-child(6) {
              /* Make the heading div span across both columns */
              grid-column: span 2;
            }
          }
        }

        & > div:nth-child(3) {
          display: flex;
          flex-direction: row-reverse;
          gap: 30px;
          align-items: baseline;
          padding: 10px 30px;
        }
      }
    }

    & > div:nth-child(3) {
      order: 1;
      z-index: 200 !important;

      & > div {
        margin-left: 0 !important;
      }
    }

    & > div:nth-child(4) {
      order: 4;
    }
  }

  #app > div > div {
    grid-area: unset !important;
    width: 100% !important;
    z-index: 0;

    & > div {
      position: static;
      width: 100%;
      flex: 0 1 auto;
    }

    .open {
      width: 100% !important;
    }

    .open > .open {
      display: flex;
      flex-direction: column;
      position: static;

      & > div {
        height: auto;
        overflow: scroll;
        overscroll-behavior: auto;
        position: inherit;
        width: 100%;
        z-index: 0;
      }
    }
  }

  .dashboard-content > .grid-container {
    margin: 24px 32px;
  }

  .dashboard-content > .grid-container {
    [class*="ant-"] *,
    [class^="ant-"] * {
      flex-direction: column !important;
    }

    .dashboard-component > div:nth-child(2) > div {
      flex-direction: row !important;
    }

    .dragdroppable-column {
      width: 100% !important;
    }

    /* Make resizable containers full width */
    .resizable-container {
      min-width: 100% !important;
      width: 100% !important;
      margin-top: 15px;
      height: fit-content !important;
    }

    .chart-container {
      width: 100% !important;

      .slice_container {
        div {
          width: 100% !important;
        }

        .dupa {
          width: auto !important;
        }

        .subheader-line {
          text-align: center;
        }

        canvas {
          width: 100% !important;
        }
      }
    }
  }
}

/* Animated gradient background */
body {
  /*background: linear-gradient(-45deg, #f5f7fa, #c3cfe2, #a1c4fd, #badaff);*/
  background-color: #e1f1e7;
  animation: gradientBG 15s ease infinite;
  min-height: 100vh;
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* changing the main dash background */
/*d9e7df or dae6df or ebefed*/
/* .dashboard-content{
  background-color: #d9e7df;
} */

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Card styling with hover effects */
.grid-content
  .dragdroppable-row
  .dragdroppable-column
  .dashboard-component-chart-holder {
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(112, 128, 144, 0.3);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

/* Hover effect for cards */
.grid-content
  .dragdroppable-row
  .dragdroppable-column
  .dashboard-component-chart-holder:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(112, 128, 144, 0.4);
}

/* Subtle pulse animation for cards */
@keyframes subtlePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.005);
  }
  100% {
    transform: scale(1);
  }
}

.grid-content
  .dragdroppable-row
  .dragdroppable-column
  .dashboard-component-chart-holder {
  animation: subtlePulse 8s ease-in-out infinite;
}

/* Glow effect for active elements */
.grid-content
  .dragdroppable-row
  .dragdroppable-column
  .dashboard-component-chart-holder:active {
  box-shadow: 0 0 20px 5px rgba(186, 218, 255, 0.6);
}

/* Header styling (if your dashboard has headers) */
.dashboard-header {
  color: #2c3e50;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}

/* changing the title bar background and text color */
/* note that the title text looks goofy in edit mode */
.header-with-actions {
  background-color: #00744b;
  color: white;
}

/* Add some floating particles in the background (visual interest) */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      circle at 20% 30%,
      rgba(255, 255, 255, 0.2) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(255, 255, 255, 0.2) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 40% 60%,
      rgba(255, 255, 255, 0.2) 1px,
      transparent 1px
    );
  background-size: 200px 200px;
  z-index: -1;
  animation: float 20s linear infinite;
}

@keyframes float {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-50px) translateX(50px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

.dashboard-markdown {
  border-radius: 20px;
}

/* Smooth transitions for all elements */
* {
  transition: background-color 0.5s ease, box-shadow 0.3s ease;
}

/* 1. hide all top-level <li> in your menu */
/*.ant-menu.main-nav > li {*/
/*  display: none !important;*/
/*}*/