/* Left Sidebar Styling */
#leftSidebar {
  background-color: #b1b1b1; /* Dark background for a sleek look */
  color: #ffffff;
  height: 100vh; /* Full viewport height */
  padding: 20px;
  top: 0;
  left: 0;
  width: 250px; /* Fixed width for the sidebar */
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

#leftSidebar .nav {
  margin-top: 20px;
}

#leftSidebar .nav .nav-item {
  margin-bottom: 10px;
}

#leftSidebar .nav .dropdown-item {
  display: block;
  padding: 10px 15px;
  border-radius: 4px;
  color: #ffffff;
  background-color: transparent;
  transition: background-color 0.3s, color 0.3s;
}

#leftSidebar .nav .dropdown-item:hover,
#leftSidebar .nav .dropdown-item:focus {
  background-color: #495057;
  color: #ffffff;
  text-decoration: none;
}

#leftSidebar .nav .dropdown-item.disabled {
  color: #6c757d;
  cursor: not-allowed;
}

/* Adjust main content to account for the fixed sidebar */
#mainContent {
  padding: 20px;
}

#aiAccountantBtn {
    border: 1px solid #ff6000;
}

#aiAccountantBtn:hover {
    background: #371602;
    color:#ffffff;
}




/* ----------------------------Breadcrumb styling */
.breadcrumbs {
}
.breadcrumbs nav {
    margin-left:5px;
  font-size: 0.7rem;
  color: #555;
}
.breadcrumb-link {
  color: #796f6c;
  text-decoration: none;
  
}
.breadcrumb-link:hover {
  text-decoration: underline;
}
.breadcrumb-current {
  /*color: #333;*/
  color: #f1f1f1;
  font-weight: bold;
}
.breadcrumb-current a {
    text-decoration:none !important;
}

/* ---------------------------- Hero section */
.solution-hero {
  display: flex;
  align-items: stretch;
  min-height: 70vh;
  
}
.hero-content,
.hero-media {
  /* let each side flex/grow as needed */
  flex: 1;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index:2;
  width:50%;
}
.solution-hero .hero-media {
  /*  flex: 1 1 50%;
      display:flex; flex-direction:column;
      align-items:center; */
      
  position: relative;
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Background globe */
.background-globe {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.background-globe canvas {
  width: 150% !important;
  height: 150% !important;
  display: block;
  pointer-events: none;
  overflow: hidden;
}




/*.solution-hero .hero-content {
  flex: 1 1 50%;
}*/
.hero-title {
  font-size: 2.5rem;
  line-height: 1.1;
}
.hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.5;
  color: #444;
}

@media (max-width: 768px) {
  .solution-hero {
    flex-direction: column;
    text-align: center;
  }
  .solution-hero .hero-media,
  .solution-hero .hero-content {
    flex: unset;
    width: 100%;
    margin: 0 !important;
  }
  .hero-content { margin-top: 1.5rem; }
}


/* ---------------- FRONT_PAGE */
/*
   * { margin:0; padding:0; box-sizing:border-box; }
    :root {
      /*--background: #060608;
      --color: rgb(182,146,123);
    }
    .container {
      color: var(--color);
      display:flex; flex-direction:column;
      align-items:center;
    }
    */
    .stack {
      display:grid;
      grid-template-columns:1fr;
      color: #317BD0;
      font-family: 'Courier New', monospace;
      
      /*color: rgb(182,146,123);
      /* 3 slices: */
    }
    .stack span {
      font-weight:bold;
      font-size:4rem;
      grid-row-start:1;
      grid-column-start:1;
      --color: rgb(182,146,123);

      --stack-height: calc(100% / var(--stacks) - 1px);
      --inverse-index: calc(calc(var(--stacks)-1) - var(--index));
      --clip-top:    calc(var(--stack-height) * var(--index));
      --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
      clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);

      animation:
        stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index)*120ms),
        glitch 2s ease infinite 2s alternate-reverse;
    }
    .stack span:nth-child(odd)  { --glitch-translate: 8px; }
    .stack span:nth-child(even) { --glitch-translate: -8px; }

    @keyframes stack {
      0%   { opacity:0; transform:translateX(-50%); text-shadow:-2px 3px 0 red, 2px -3px 0 blue; }
      60%  { opacity:0.5; transform:translateX(50%); }
      80%  { transform:none; opacity:1; text-shadow:2px -3px 0 red, -2px 3px 0 blue; }
      100% { text-shadow:none; }
    }
    @keyframes glitch {
      0%   { text-shadow:-2px 3px 0 red, 2px -3px 0 blue; transform:translate(var(--glitch-translate)); }
      2%   { text-shadow:2px -3px 0 red, -2px 3px 0 blue; }
      4%,100% { text-shadow:none; transform:none; }
    }
    
    
    
    /* Section background*/
    
.colorful-hills {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(to bottom, #eef3f7, #dbe9f1);
  overflow: hidden;
  z-index: 0;
  box-shadow: 0 6px 6px -2px rgb(0 0 0 / 80%);
}

/* Hills Layer */
.colorful-hills::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('/assets/svg/hills-background.svg') no-repeat center bottom;
  background-size: cover;
  animation: waveMotion 15s ease-in-out infinite alternate;
  z-index: 0;
}

/* Stronger mist overlay */
.colorful-hills::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 180px;
  /*background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);*/
  background: linear-gradient(to bottom, rgba(189,186,186,1) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Gentle wave animation */
@keyframes waveMotion {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(20px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* ----------------------- Section Partners */
.CustomerLogoSection {
  background: #f9fafb;
  padding: 80px 0;
  overflow: hidden;
  position: relative;
}

.CustomerLogoSection__container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
}

.CustomerLogoCarousel {
  overflow: hidden;
  white-space: nowrap;
  margin: 20px 0;
  position: relative;
}

.CustomerLogoCarousel__track {
  display: flex;
  gap: 220px;
  align-items: center;
  will-change: transform;
}

.CustomerLogoCarousel__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 80px;
  opacity: 0.5;
  transition: opacity 0.4s ease;
}

.CustomerLogoCarousel__logo img {
  width: 100%;
  height: auto;
  max-height: 60px;
  object-fit: contain;
}

/* Hover Smooth Fade */
.CustomerLogoCarousel__logo:hover {
  opacity: 1;
}

/* Scroll Animations */
@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

/* Row specific animation */
.CustomerLogoCarousel--row1 .CustomerLogoCarousel__track {
  animation: scrollLeft 40s linear infinite;
}

.CustomerLogoCarousel--row2 .CustomerLogoCarousel__track {
  animation: scrollRight 60s linear infinite;
}


@media (max-width: 768px) {
.CustomerLogoCarousel__track {
  gap: 30px;
}
.stack {
      color: #fff;
}
}


/* ============================
   Financial Planning Module
   ============================ */
.planning-wrap .planning-grid-wrap {
  overflow: auto;
  max-height: calc(100vh - 240px);
}

.planning-grid thead th {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 2;
  border-bottom: 1px solid #e9ecef;
}

.planning-grid td, .planning-grid th {
  vertical-align: middle;
}

.planning-grid .pl-actions {
  width: 120px;
}

.planning-grid .pl-expander {
  width: 34px;
  height: 26px;
  padding: 0;
  line-height: 1;
}

.planning-grid .pl-editor {
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 6px;
}

.planning-grid .pl-editor:focus {
  border-color: #86b7fe;
  background: #fff;
  box-shadow: 0 0 0 .15rem rgba(13,110,253,.12);
}

.pl-active-cell {
  outline: 2px solid rgba(49, 123, 208, 0.25);
  outline-offset: -2px;
}

.pl-flash {
  animation: plFlash 0.6s ease-in-out;
}

@keyframes plFlash {
  0% { background: rgba(255, 193, 7, 0.35); }
  100% { background: transparent; }
}

.planning-kpis .kpi {
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 12px;
  padding: 10px 12px;
  backdrop-filter: blur(6px);
  background: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.30));
}

.planning-kpis .kpi-label {
  font-size: 0.75rem;
  color: #555;
}

.planning-kpis .kpi-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #111;
}

/* Planning grid: horizontal + vertical scroll */
.planning-grid-wrap {
  overflow: auto;              /* horizontal + vertical */
  max-height: calc(100vh - 260px);
  width: 100%;
}

/* Ensure table can exceed container width for horizontal scroll */
.planning-grid {
  min-width: 1600px;           /* tune as needed */
}

.planning-grid thead th {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 3;
  border-bottom: 1px solid #e9ecef;
}

.planning-grid .pl-inline {
  min-width: 240px;
}

.planning-grid .pl-editor {
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 6px;
}

.planning-grid .pl-editor:focus {
  border-color: #86b7fe;
  background: #fff;
  box-shadow: 0 0 0 .15rem rgba(13,110,253,.12);
}

.pl-flash {
  animation: plFlash 0.6s ease-in-out;
}

@keyframes plFlash {
  0% { background: rgba(255, 193, 7, 0.35); }
  100% { background: transparent; }
}