@charset "UTF-8";
/*
Template Name: Adminto - Responsive Bootstrap 5 Admin Dashboard
Version: 6.0.0
Author: Coderthemes
Email: support@coderthemes.com
File: App Css File
*/
:root {
  --sidebar-gradient-light: linear-gradient(
    143deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(245, 245, 245, 1) 100%
  );
  --sidebar-gradient-dark: linear-gradient(
    143deg,
    rgba(31, 32, 41, 1) 0%,
    rgba(32, 46, 56, 1) 99%
  );
}

/* Base sidebar */
.sidebar-gradient {
  background: var(--sidebar-gradient-light);
}

/* Dark mode override */
.dark .sidebar-gradient {
  background: var(--sidebar-gradient-dark);
}


.vistar-ico {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
  transition: background-color 0.3s ease;
}



.vistar-dashboard {
  -webkit-mask-image: url("../images/icons/vector.svg");
  mask-image: url("../images/icons/vector.svg");
}
.vistar-message {
  -webkit-mask-image: url("../images/icons/message.svg");
  mask-image: url("../images/icons/message.svg");
}

.vistar-ico {
  background-color: currentColor;   /* icon follows text color */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
  .rupee-box {
    display: inline-flex;
    height: 28px; width: 28px;
    align-items: center;
    justify-content: center;
    background: var(--ct-light);;
    color: var(--ct-dark);
    font-size: 16px;
    font-weight: 300;
    border-radius: 6px;
    padding: 4px 8px;}

    .card {
    -webkit-box-shadow: var(--ct-box-shadow);
    box-shadow: var(--ct-box-shadow);
    margin-bottom: 1.2rem;
}


.ell, #ai {
	fill: none;
  
}




.vistar-h { height: 86vh;}


.vistar-bg {
  position: relative;
  background-image: linear-gradient(
    to top,
    #153842,
    #143039,
    #122930,
    #102128,
    #0e1a1f,
    #0d181c,
    #0c1519,
    #0a1216,
    #0d1417,
    #0f1518,
    #111719,
    #13181a
  );
  

  border-radius: 10px;

  
}

.vistar-bg::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%; /* glowing zone at bottom */
  background: linear-gradient(to top, rgba(21,56,66,0.6), transparent);
  animation: breathingGlow 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes breathingGlow {
  0%, 100% {
    opacity: 0.35;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.55;
    transform: scaleY(1.02);
  }
}

/*---------bg animation option 1  ------*/
 .vistar-bg-animation {
  position: relative;
 
  
  animation: textColor 10s ease infinite;
}
.vistar-bg-animation:after {
  position: absolute;
  content: "";
  top: 5vw;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.75);
  -webkit-filter: blur(5vw);
  -moz-filter: blur(5vw);
  -ms-filter: blur(5vw);
  filter: blur(5vw);
  background: linear-gradient(270deg, #0fffc1, rgb(0, 85, 253));
  background-size: 200% 200%;
  animation: animateGlow 10s ease infinite;
}
@keyframes animateGlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes textColor {
  0% {
    color: #7e0fff;
  }
  50% {
    color: #0fffc1;
  }
  100% {
    color: #7e0fff;
  }
} -----*/


/*---------bg animation option 2  ------*/





  
  

.gradient-border {
  --borderWidth: 2px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidth);
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}


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



/*---------bg animation option 3  ------*/



/*---
.media-object {
  --border-width: 1px;
  --radius: 10px;

  position: relative;
  border-radius: var(--radius);
  border: var(--border-width) solid transparent;
}

.media-object::before {
  content: " ";
  position: absolute;
  inset: calc(var(--border-width) * -1);
  z-index: -1;
  border: inherit;
  border-radius: inherit;
  background-image: conic-gradient(from var(--angle), #37394d 80%, #4BDD74 88%, #30A952 92%, #37394d 100%);
  background-origin: border-box;
  -webkit-mask:
    linear-gradient(black, black) content-box,
    linear-gradient(black, black);  
  mask: linear-gradient(black, black),
        linear-gradient(black, black);
  -webkit-mask-clip: content-box, border-box;  
  mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;  
  mask-composite: exclude;
  animation: spin 3s linear infinite;
}

@supports not (background: paint(something)) {
  .media-object::before {
background-image: conic-gradient(#37394d 80%, #4BDD74 88%, #30A952 92%, #37394d 100%);    
  }
}

.media-object:hover::before {
  animation-play-state: paused;
}

@property --angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

@keyframes spin {
  to {
    --angle: 1turn;
  }
}








.media-object {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 0px;
  gap: 24px;
} ---*/


/* Base setup */
.media-object {
  --border-width: 1px;
  --radius: 10px;
  position: relative;
  border-radius: var(--radius);
  border: var(--border-width) solid transparent;
  display:'' ;
  justify-content: space-between;
  align-items: end;
  padding: 0px;
  gap: 24px;
  
}

/* Default border animation (light fallback) */
.media-object::before {
  content: "";
  position: absolute;
  inset: calc(var(--border-width) * -1);
  z-index: -1;
  border: inherit;
  border-radius: inherit;
  background-image: conic-gradient(
    from var(--angle),
    #e0e0e0 80%,  /* light grey base */
    #4BDD74 88%,  /* green highlight */
    #30A952 92%,
    #e0e0e0 100%
  );
  background-origin: border-box;
  -webkit-mask: linear-gradient(black, black) content-box,
                linear-gradient(black, black);
  mask: linear-gradient(black, black), linear-gradient(black, black);
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin 3s linear infinite;
}

/* Dark mode adjustment */
html[data-bs-theme="dark"] .media-object::before {
  background-image: conic-gradient(
    from var(--angle),
    #37394d 80%,  /* dark grey base */
    #4BDD74 88%,
    #30A952 92%,
    #37394d 100%
  );
}

@supports not (background: paint(something)) {
  .media-object::before {
    background-image: conic-gradient(#e0e0e0 80%, #4BDD74 88%, #30A952 92%, #e0e0e0 100%);
  }
  html[data-bs-theme="dark"] .media-object::before {
    background-image: conic-gradient(#37394d 80%, #4BDD74 88%, #30A952 92%, #37394d 100%);
  }
}

/* Pause animation on hover */
.media-object:hover::before {
  animation-play-state: paused;
}

/* Animate the angle */
@property --angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

@keyframes spin {
  to {
    --angle: 1turn;
  }
}






/*--------- ai icon------*/

.sonaro-ai-icon {
  display: inline-block;
  position: relative;
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #0DBC99;
  &:before,
  &:after {
    display: block;
    position: absolute;
    content: "\2726";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: 100%;
    transition: transform .16s ease, opacity .16s ease;
  }
  &:before {
    opacity: 0.75;
    transform: translate(50%, -50%) scale(.5);
  }
  &.anim {
    &:before,
    &:after {
      opacity: 0;
      animation: ai-star 1.5s ease infinite;
    }
    &:after {
      animation-delay: 0.75s;
    }
  }
}

@keyframes ai-star {
  0% {
    opacity: 0;
    transform: translate(-35%, 35%) scale(0);
  }
  50% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(35%, -35%) scale(0);
  }
}


/* .prognosticbtn { position: absolute; margin-left:-40px; z-index: 9999; } */

/*
 * PrognosticIQ panel — Figma Vistar01.AI tokens (e.g. #1E2028, #16728F, 8px radius, shadow)
 * Node ref: 40000174:270 region / spend widget + panel spec
 */
.prognostic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background-color: #0c0d10;
  border-radius: 8px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.card.prognostic-card {
  background-color: #0c0d10;
}

/* Legacy layer (optional decorative); PNG background removed — panel uses theme tokens in src/css/PrognosticWidget.css */
.prognostic-widget-ellipse-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.prognostic-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

.prognostic-ellipse {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  user-select: none;
  pointer-events: none;
  object-fit: contain;
}

/*
 * Ellipse 8 — light grey/white, wide, top: fills ~upper half, soft halo
 * Ellipse 7 — green, right edge, mid / slightly below
 * Ellipse 9 — green, left edge, lower (bottom-left quadrant)
 */
.prognostic-ellipse--8 {
  top: -42%;
  left: 50%;
  transform: translateX(-50%);
  width: 168%;
  min-width: 400px;
  opacity: 0.26;
  filter: blur(36px);
  z-index: 0;
}

.prognostic-ellipse--7 {
  left: auto;
  right: -36%;
  top: 52%;
  transform: translateY(-50%);
  width: 58%;
  max-width: 360px;
  opacity: 0.38;
  filter: blur(26px);
  z-index: 1;
}

.prognostic-ellipse--9 {
  left: -40%;
  right: auto;
  top: auto;
  bottom: 4%;
  transform: none;
  width: 90%;
  opacity: 0.34;
  filter: blur(28px);
  z-index: 1;
}

.prognostic-widget-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: transparent;
}

.prognostic {
  background: transparent;
}

.prognostic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 18px 16px;
  background-color: transparent;
}

.prognostic-title {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  min-width: 0;
}

.prognostic-header .prognostic-sparkle {
  flex-shrink: 0;
  color: #4fd1c5;
}

.prognostic-title-text {
  font-size: 15px;
  line-height: 1.35;
}

.prognostic .prognostic-brand {
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

.prognostic .prognostic-powered {
  font-weight: 400;
  font-size: 13px;
  color: #9ba3af;
  white-space: nowrap;
}

.prognostic-header-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid #4b5563;
  background: rgba(30, 32, 40, 0.6);
  color: #ffffff;
  flex-shrink: 0;
}

.prognostic-header-btn:hover {
  background: rgba(42, 45, 55, 0.9);
  border-color: #6b7280;
  color: #ffffff;
}

.prognostic-tabbar {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  /* background-color: rgba(12, 13, 16, 0.55); */
  /* border-top: 1px solid rgba(255, 255, 255, 0.06); */
  border-bottom: 1px solid #898989;
}

.prognostic-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 14px 10px 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #9ba3af;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.prognostic-tab:hover {
  color: #cfd5de;
}

.prognostic-tab.active {
  color: #ffffff;
  border-bottom-color: #0052ff;
}

.prognostic-body {
  background-color: transparent;
  padding: 16px 12px 16px 16px;
}

.card.prognostic-card .card-body.prognostic-body {
  background-color: transparent;
}

/* PrognosticIQ accordion heading + details background */
.prognostic-widget .accordion-item,
.prognostic-widget .accordion-header,
.prognostic-widget .accordion,
.prognostic-widget .accordion-button,
.prognostic-widget .accordion-body,
.prognostic-widget .accordion-collapse {
  background-color: #0F0F13 !important;
}

.prognostic-widget .accordion-button {
  color: #d6e7e6 !important;
  background-color: #0F0F13 !important;

}

.prognostic-widget .accordion-body {
  color: #cfd5de !important;
}

/* Remove the blue scrollbar inside the PrognosticIQ widget */
.prognostic-widget [data-simplebar-primary] .simplebar-scrollbar:before,
.prognostic-widget [data-simplebar-primary] .simplebar-scrollbar.simplebar-visible:before {
  background: #0F0F13 !important;
  opacity: 1 !important;
}

.prognostic-widget [data-simplebar-primary] .simplebar-track {
  background: transparent !important;
}

/* Recommendation block inside PrognosticIQ accordion */
.prognostic-recommendation-card {
  width: 100%;
  border: 1px solid #15FFAB;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* background: #898989; */
}

.prognostic-recommendation-title {
  margin: 0;
  /* color: #15ffab; */
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.prognostic-recommendation-text {
  margin: 0;
  color: #d6e7e6;
  font-size: 13px;
  line-height: 1.35;
}

/* Sidebar stays fixed on the right */
.prognostic-widget {
  position: fixed;
  top: 80px;
  right: 0px;
  height: 86vh;
  width: 396px;          /* or whatever width you prefer */
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 1030;         /* above main content, below navbars if any */
  overflow-y: none;      /* scroll only inside sidebar if needed */
}

/* When active, slide in */
.prognostic-widget.active {
  transform: translateX(0);
}

/* Main content takes remaining space and scrolls */
.main-content {
  transition: margin-right 0.3s ease;
  margin-right: 0;
  
  overflow-y: auto;      /* ✅ scrolls only main content */
}

/* Push effect when sidebar active */
.prognostic-widget.active ~ .main-content {
  margin-right: 304px;
}





/* Mobile behavior: overlay like offcanvas */
@media (max-width: 991.98px) {
  .prognostic-widget {
    width: 100%;               /* full width overlay */
    max-width: 100%;           /* no fixed 400px */
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1050;             /* above content */
    
  }


  .vistar-h {
    height: 100vh;
}
  .prognostic-widget.active {
    transform: translateX(0);  /* slide over content */
  }

  /* On mobile, don't push main content */
  .prognostic-widget.active ~ .main-content {
    margin-right: 0;
  }
}




    .ai-button {
      position: relative;
      padding: .6em 2em;
      border: none;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      color: white;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      overflow: hidden;
      transition: transform 0.25s ease, box-shadow 0.3s ease;
      z-index: 0;
    }

    .ai-button::before {
      content: "";
      position: absolute;
      top: -30%;
      left: -30%;
      width: 160%;
      height: 160%;
      background: conic-gradient(
        from 0deg,
        red,
        orange,
        yellow,
        lime,
        cyan,
        blue,
        violet,
        red
      );
      filter: blur(30px);
      opacity: 0.6;
      z-index: -1;
      animation: spinButton 6s linear infinite;
      border-radius: 50%;
    }

    .ai-button::after {
      content: "";
      position: absolute;
      inset: 0;
      background: inherit;
      border-radius: inherit;
      z-index: -1;
      box-shadow: inset 0 0 0.5em rgba(255, 255, 255, 0.1);
    }

    .ai-button:hover {
      transform: scale(1.05);
    }

    .ai-button span {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 0.5em;
    }

@keyframes spinButton {
  to {
    transform: rotate(360deg);
  }
}



/* Reusable animated gradient border (global) */
.animated-gradient-border,
.horizontal-card-animated-border {
  --agd-radius: 14px;
  --agd-padding: 2px;
  --agd-duration: 3.5s;
  --agd-inner-bg: #121418;
  --agd-line-color: #15FFAB;
  /* Width of the moving border "line" (independent from padding thickness) */
  --agd-line-band: 1px;

  /* Highlight arc position on the border */
  --agd-line-start: 80%;
  --agd-line-end: 84%;

  /* Wider arc for the trailing glow */
  --agd-line-trail-start: calc(var(--agd-line-start) - 6%);
  --agd-line-trail-end: calc(var(--agd-line-end) + 6%);

  position: relative;
  border-radius: var(--agd-radius);
  padding: var(--agd-padding);
  overflow: hidden;
  isolation: isolate;
}

.animated-gradient-border::before,
.horizontal-card-animated-border::before,
.animated-gradient-border::after,
.horizontal-card-animated-border::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;

  /* Show only a thin outer band (not full padding thickness) */
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--agd-line-band)),
    #000 calc(100% - var(--agd-line-band)),
    #000 100%
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--agd-line-band)),
    #000 calc(100% - var(--agd-line-band)),
    #000 100%
  );

  animation: agd-spin var(--agd-duration) linear infinite;
}

.animated-gradient-border::before,
.horizontal-card-animated-border::before {
  /* Bright, thin moving segment */
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent var(--agd-line-start),
    var(--agd-line-color) var(--agd-line-start),
    var(--agd-line-color) var(--agd-line-end),
    transparent var(--agd-line-end),
    transparent 100%
  );
  filter: drop-shadow(0 0 4px rgba(21, 255, 171, 0.65));
}

.animated-gradient-border::after,
.horizontal-card-animated-border::after {
  /* Softer trailing glow segment */
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent var(--agd-line-trail-start),
    var(--agd-line-color) var(--agd-line-trail-start),
    var(--agd-line-color) var(--agd-line-trail-end),
    transparent var(--agd-line-trail-end),
    transparent 100%
  );
  opacity: 0.35;
  filter: blur(1px);
}

.animated-gradient-border__inner,
.horizontal-card-animated-border__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: calc(var(--agd-radius) - var(--agd-padding));
  background: var(--agd-inner-bg);
}

@keyframes agd-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Static blue -> cyan -> green gradient outline border */
.gradient-outline-border {
  --gob-radius: 12px;
  --gob-padding: 2px;
  --gob-inner-bg: rgba(10, 18, 25, 0.78);
  --gob-gradient: linear-gradient(90deg, #0055FD 0%, #06D7F6 48%, #15FFAB 100%);

  position: relative;
  border-radius: var(--gob-radius);
  padding: var(--gob-padding);
  overflow: hidden;
  isolation: isolate;
  background: var(--gob-gradient);
}

.gradient-outline-border__inner {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--gob-radius) - var(--gob-padding));
  background: var(--gob-inner-bg);
  position: relative;
  z-index: 1;
}