:root {
  --forest-start: #0b3d2e;
  --forest-end: #1f8e4d;
  --evergreen-start: #0f2f24;
  --evergreen-end: #174f3c;
  --moss-start: #1f4529;
  --moss-end: #4f9c2c;
  --meadow-start: #2a633b;
  --meadow-end: #63b56b;
  --fern-start: #3a7d44;
  --fern-end: #8cd867;
  --citrus-start: #4c9a2a;
  --citrus-end: #c0e218;
}

/* Remap Material gradients to nature greens */
.bg-gradient-primary,
.sidenav[data-color="primary"] .nav-link.active,
.sidenav[data-color="primary"] .nav-link:focus {
  background-image: linear-gradient(135deg, var(--forest-start), var(--forest-end)) !important;
}
.shadow-primary { box-shadow: 0 20px 27px rgba(11, 61, 46, 0.35) !important; }

.bg-gradient-dark,
.sidenav[data-color="dark"] .nav-link.active,
.sidenav[data-color="dark"] .nav-link:focus {
  background-image: linear-gradient(135deg, var(--evergreen-start), var(--evergreen-end)) !important;
}
.shadow-dark { box-shadow: 0 20px 27px rgba(15, 47, 36, 0.35) !important; }

.bg-gradient-info,
.sidenav[data-color="info"] .nav-link.active,
.sidenav[data-color="info"] .nav-link:focus {
  background-image: linear-gradient(135deg, var(--moss-start), var(--moss-end)) !important;
}
.shadow-info { box-shadow: 0 20px 27px rgba(31, 69, 41, 0.3) !important; }

.bg-gradient-success,
.sidenav[data-color="success"] .nav-link.active,
.sidenav[data-color="success"] .nav-link:focus {
  background-image: linear-gradient(135deg, var(--meadow-start), var(--meadow-end)) !important;
}
.shadow-success { box-shadow: 0 20px 27px rgba(42, 99, 59, 0.28) !important; }

.bg-gradient-warning,
.sidenav[data-color="warning"] .nav-link.active,
.sidenav[data-color="warning"] .nav-link:focus {
  background-image: linear-gradient(135deg, var(--fern-start), var(--fern-end)) !important;
}
.shadow-warning { box-shadow: 0 20px 27px rgba(58, 125, 68, 0.28) !important; }

.bg-gradient-danger,
.sidenav[data-color="danger"] .nav-link.active,
.sidenav[data-color="danger"] .nav-link:focus {
  background-image: linear-gradient(135deg, var(--citrus-start), var(--citrus-end)) !important;
}
.shadow-danger { box-shadow: 0 20px 27px rgba(76, 154, 42, 0.28) !important; }

.badge.filter.bg-gradient-primary,
.badge.filter.bg-gradient-info,
.badge.filter.bg-gradient-success,
.badge.filter.bg-gradient-warning,
.badge.filter.bg-gradient-danger,
.badge.filter.bg-gradient-dark {
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Ensure text/icons stay legible when gradients are active */
.icon-shape[class*="bg-gradient-"],
.icon-shape[class*="bg-gradient-"] i,
.icon-shape[class*="bg-gradient-"] .material-symbols-rounded,
.btn[class*="bg-gradient-"],
.btn[class*="bg-gradient-"] i,
.btn[class*="bg-gradient-"] .material-symbols-rounded,
.badge[class*="bg-gradient-"],
.badge[class*="bg-gradient-"] i,
.badge[class*="bg-gradient-"] .material-symbols-rounded,
.dynamic-element[class*="bg-gradient-"] .nav-link-text {
  color: #fff !important;
}

#sidenav-main .nav-link[class*="bg-gradient-"],
#sidenav-main .nav-link[class*="bg-gradient-"] .material-symbols-rounded,
#sidenav-main .nav-link[class*="bg-gradient-"] .nav-link-text,
#sidenav-main .nav-link[class*="bg-gradient-"] i {
  color: #fff !important;
  opacity: 1 !important;
}

.sidenav[data-color] .nav-link,
.sidenav[data-color] .nav-link .nav-link-text,
.sidenav[data-color] .nav-link .material-symbols-rounded,
.sidenav[data-color] .nav-link i,
.sidenav[data-color] .navbar-brand span,
.sidenav[data-color] .navbar-brand i,
.sidenav[data-color] .sidenav-header,
.sidenav[data-color] .sidenav-header .material-symbols-rounded {
  color: rgba(255, 255, 255, 0.92) !important;
}

.sidenav[data-color] .nav-link .material-symbols-rounded.opacity-5,
.sidenav[data-color] .nav-link i.opacity-5 {
  opacity: 0.85 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.sidenav[data-color] .nav-link { opacity: 0.82; }
.sidenav[data-color] .nav-link:hover,
.sidenav[data-color] .nav-link:focus {
  opacity: 1;
}

/* Workflow loading overlay */
.workflow-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 20, 15, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.workflow-loading-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

body.workflow-loading-active {
  overflow: hidden;
}

body.workflow-loading-active .workflow-loading-overlay {
  opacity: 1;
  pointer-events: all;
}

.workflow-loading-content {
  text-align: center;
  color: #fff;
}

.sprout {
  position: relative;
  width: 120px;
  height: 160px;
  margin: 0 auto 1rem;
  overflow: visible;
}

.sprout-plant-container {
  position: absolute;
  bottom: 42px;
  left: 50%;
  width: 10px;
  transform: translateX(-50%);
  height: 60px;
  animation: plantGrow 2.5s ease-in-out infinite alternate;
}

.sprout-stem {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #6edc8c, #228b4a);
  border-radius: 999px;
}

.sprout-flower {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.sprout-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #f6d18b 0%, #d58a2b 90%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.sprout-petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 30px;
  background: radial-gradient(circle, #ffefd2 0%, #f4bd7b 100%);
  border-radius: 50%;
  transform-origin: center bottom;
  z-index: 1;
  margin-top: -30px;
  margin-left: -10px;
}

.sprout-petal:nth-child(1) { transform: rotate(0deg) translateY(-12px); }
.sprout-petal:nth-child(2) { transform: rotate(72deg) translateY(-12px); }
.sprout-petal:nth-child(3) { transform: rotate(144deg) translateY(-12px); }
.sprout-petal:nth-child(4) { transform: rotate(216deg) translateY(-12px); }
.sprout-petal:nth-child(5) { transform: rotate(288deg) translateY(-12px); }

.sprout-leaf {
  position: absolute;
  width: 30px;
  height: 15px;
  background: linear-gradient(135deg, #2bb673, #7df27a);
  border-radius: 0 50% 50% 0;
}

.sprout-leaf-left {
  top: 40%;
  right: 100%;
  transform-origin: right center;
  transform: rotate(-15deg);
  border-radius: 50% 0 0 50%;
}

.sprout-leaf-right {
  top: 60%;
  left: 100%;
  transform-origin: left center;
  transform: rotate(15deg);
}

.sprout-pot {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 46px;
  margin-left: -45px;
  background: linear-gradient(180deg, #5c3b23, #2f1d12);
  border-radius: 12px 12px 6px 6px;
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.35);
  animation: potPulse 1.6s ease-in-out infinite;
}

.workflow-loading-status {
  font-weight: 600;
  letter-spacing: 0.02em;
}

@keyframes plantGrow {
  0% {
    height: 60px;
  }
  100% {
    height: 110px;
  }
}

@keyframes potPulse {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-3px);
  }
}

.workflow-form-wrapper {
  position: relative;
}

.workflow-form-wrapper .inline-sprout-loader {
  display: none;
  text-align: center;
  margin-top: 1rem;
  color: #1f4529;
}

.workflow-form-wrapper .sprout.sprout-sm {
  transform: scale(0.65);
}

.workflow-form-wrapper.is-loading form {
  opacity: 0.35;
  pointer-events: none;
}

.workflow-form-wrapper.is-loading .inline-sprout-loader {
  display: block;
}

.workflow-runner-frame {
  display: none;
  width: 0;
  height: 0;
  border: 0;
}

/* Sticky Footer Fix */
.main-content > .container-fluid {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 110px) !important;
}

.main-content > .container-fluid > .footer {
  margin-top: auto !important;
}

/* Sidebar H6 and Brand Color Logic */
.sidenav.bg-gradient-dark h6,
.sidenav.bg-gradient-dark .navbar-brand span,
.sidenav.bg-gradient-dark .sidenav-footer span {
  color: #ffffff !important;
}

.sidenav.bg-white h6,
.sidenav.bg-white .navbar-brand span,
.sidenav.bg-white .sidenav-footer span,
.sidenav.bg-transparent h6,
.sidenav.bg-transparent .navbar-brand span,
.sidenav.bg-transparent .sidenav-footer span {
  color: var(--forest-start) !important;
}