/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');

/* assets/custom.css - En başına ekleyin */

/* Dash container'ını sıfırla */
._dash-loading {
  visibility: hidden;
}

.container-fluid {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  padding-top: 15px !important; /* Reduced padding */
}

/* Keep the dash content wrapper close to Luxembourg header */
.dash-content-wrapper {
  margin-top: 0px !important;
}

/* Ensure no conflicting padding interferes with our layout */
div[data-dash-renderer="true"] {
  padding-top: 0px !important;
}

/* Dash'in varsayılan margin/padding'ini sıfırla */
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* HTML sayfaları için normal CSS */
/* Buraya static/style.css içeriğini kopyalayın */

/* === RESET & BASE STYLES === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: transparent;
  color: #333;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* === BODY MARGIN FALLBACK === */
body {
  margin: 0;
}


/* === HEADER / NAVBAR === */
.navbar {
  background-color: #2AACFD;
  padding: 15px 80px;
  padding-right: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  margin: 0 !important;
}

.navbar-left {
  display: flex;
  align-items: center;
}

.logo1 {
  height: 45px;
}

.separator {
  width: 2px;
  height: 40px;
  background-color: white;
  margin: 0 8px;
}

.logo2 {
  height: 40px;
  margin: 4px;
}

.logo3 {
  height: 50px;
  margin: 2px;
}


/* Base styling */
.navbar-links {
  display: flex;
  align-items: center;
  gap: 15px;
}

.navbar-links a,
.nav-item .pilot-btn {
  position: relative;
  text-decoration: none;
  color: white;
  font-weight: 500;
  padding: 8px 12px;
}

/* Hover underline effect */
.navbar-links a,
.nav-item .pilot-btn {
  position: relative;
  text-decoration: none;
  color: white;
  font-weight: 500;
  padding: 8px 12px;
}

.navbar-links a::after,
.nav-item .pilot-btn::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 80%;
  height: 2px;
  background-color: white;
  transition: transform 0.3s ease;
}

.navbar-links a:hover::after,
.nav-item .pilot-btn:hover::after {
  transform: translateX(-50%) scaleX(1);
}


/* Pilot dropdown container */
.nav-item.dropdown {
  position: relative;
}

/* Hide menu by default */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  flex-direction: column;
  background: white;
  border-radius: 8px;
  padding: 8px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 20;
  min-width: 180px;
}

/* Show menu on hover */
.nav-item.dropdown:hover .dropdown-menu {
  display: flex;
}

/* Pilot names in dropdown */
.pilot-name {
  position: relative;
}

.pilot-name > a {
  display: block;
  padding: 8px 16px;
  color: #3d3d3d;
  text-decoration: none;
}

/* OLD: triggers submenu on full width hover */
.pilot-name:hover .pilot-submenu {
  display: flex;
}

.pilot-submenu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background: white;
  border-radius: 8px;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  min-width: 140px;
  padding: 8px 0;
}

.pilot-submenu a {
  padding: 8px 12px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}
.pilot-submenu a:hover {
  background-color: #f0f0f0;
}


/* Arrow icon */
.arrow-icon {
  margin-left: 4px;
  width: 24px;
  height: auto;
  vertical-align: middle;
}

/* === COLUMN LAYOUT GUIDES === */
.page-container {
  position: relative;
  width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.column-guides {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.column-guides .col {
  background-color: rgba(255, 0, 0, 0.0); /* Subtle layout guide color */
}

/* === SECTIONS (Generic) === */
section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  position: relative;
  background-color: transparent;
}


.logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  /* Maybe relax this so children can shrink more */ 
  max-width: 100vw;  
}

.logo-main {
  height: auto;
  max-width: clamp(800px, 30vw, 500px);
  margin-right: clamp(-20px, -8vw, -16px);
  margin-left: clamp(60px, 8vw, 16px);
  align-self: center;
}

.logo-x {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 500;
  color: #2AACFD;
  line-height: 1;
  opacity: 0;
  flex-shrink: 0;
  align-self: center;
  margin: 0 clamp(24px, -2vw, -8px);
}

.logo-second {
  height: auto;
  max-width: clamp(5px, 25vw, 200px);
  margin-left: clamp(40px, 2vw, 30px);
  opacity: 0;
}



@media (max-width: 1024px) {
  .logo-main {
    max-width: clamp(120px, 40vw, 450px);
  }
  .logo-second {
    max-width: clamp(80px, 30vw, 200px);
  }
}

@media (max-width: 768px) {
  .logo-wrapper {
    flex-direction: column;
    gap: clamp(12px, 3vh, 24px);
    max-width: 95vw;
    align-items: center;
  }

  .logo-main {
    max-width: clamp(100px, 60vw, 400px);
  }
  .logo-second {
    max-width: clamp(80px, 50vw, 300px);
  }
  .logo-x {
    font-size: clamp(20px, 5vw, 40px);
    padding: clamp(8px, 2vh, 16px) clamp(8px, 1vw, 16px);
    align-self: center;
  }
}

@media (max-width: 480px) {
  .logo-main {
    max-width: clamp(80px, 75vw, 250px);
  }
  .logo-second {
    max-width: clamp(60px, 70vw, 200px);
  }
}



/* === SCROLL CHEVRON INDICATOR === */
/*
.scroll-text {
  font-family: 'Silkscreen', sans-serif;
  font-size: 14px;
  color: #2AACFD;
  opacity: 0;
  animation: fade-in-text 0.5s ease forwards;
  animation-delay: 1s;
}

@keyframes fade-in-text {
  to {
    opacity: 1;
  }
}

*/
.scroll-chevron-pixel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 40px;
  left: 0;
  z-index: 5;
  pointer-events: none;
}

.scroll-chevron-pixel {
  width: 30px;
  height: auto;
  image-rendering: pixelated;
  animation: move-chevron 1.5s ease-out infinite;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  transform: scale(0.2);
}

.scroll-chevron-pixel:nth-child(1) {
  animation-delay: 0s;
}
.scroll-chevron-pixel:nth-child(2) {
  animation-delay: 0.5s;
}
.scroll-chevron-pixel:nth-child(3) {
  animation-delay: 1s;
}

@keyframes move-chevron {
  25% {
    opacity: 1;
    transform: translateY(0.1rem) scale(1);
  }
  66.6% {
    opacity: 1;
    transform: translateY(1rem) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(2rem) scale(0.5);
  }
}

.scroll-chevron-pixel-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.section-one{
  height: calc(100vh - 85px);
}

.container{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin: auto;
    align-items: center;
    max-width: 1200px;
}

.left-side{
    justify-self: flex-start;
}

.right-side{
    justify-self: flex-end;
}

.pilot-cover{
  height: 600px;
  width: 600px;
  object-fit: cover;
  border-radius: 8px;
}
.title{
    line-height: 1.2;
}
.title h1.silkscreen {
  font-family: 'Silkscreen', sans-serif;
  text-transform: capitalize;
  font-size: 64px;
  margin-left: -0.3rem;
  margin-bottom: 0.5rem;
  color: #2AACFD;
  font-weight: bold;
  text-align: left; 
}
  

p{
  font-family: 'Poppins', sans-serif;
  color: #3d3d3d;
  font-size: 14px;
  font-weight: 600;
  max-width: 400px;
}

.p{
  padding: 2rem 0;
}

.button-group button {
  padding: 10px 20px;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease; /* smooth hover effect */
}

/* Applies to both button and anchor elements with these classes */
.primary-button,
.secondary-button {
  display: inline-block;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;
}

/* Primary button style */
.primary-button {
  background-color: #2AACFD;
  color: #fff;
  border: none;
  padding: 1rem 2rem;
}

.secondary-button {
  background-color: transparent;
  color: #3d3d3d;
  border: 2px solid #2AACFD;
  padding: calc(1rem - 2px) calc(2rem - 2px); /* compensate for border */
}


/* Hover effects */
.primary-button:hover {
  background-color: #007bb5;
}

.secondary-button:hover {
  background-color: #007bb5;
  color: #ffffff;
  border-color: #007bb5;
}


.title h2{
    font-size: 20px;
    opacity: .5;
    font-family: 'Poppins', sans-serif;
}

/* === ABOUT LEGOFIT SECTION === */

.about-legofit-wrapper {
  background-color: #f5f5f5;
  padding: 0 80px;
  padding-top: 0px; /* height of fixed navbar to avoid overlap */
  height: auto;
}

.page-wrapper {
  background-color: #ffffff;
  padding: 0 80px;
  display: flex;
  align-items: start;
}


.about-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto; /* allow content to define height */
  text-align: center;
  position: relative;
}

.logo {
  margin-top: 160px;
  max-width: 500px;
  height: auto;
  margin-bottom: 20px;
}

.tagline-holder {
  text-align: center;
  margin-top: 20px;
}

.tagline {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 0;
  line-height: 1.6;
  color: #111;
  max-width: 100%;
}

.column-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
  align-items: center;
  justify-items: center;
  margin-top: 60px;
}

.col-span-3 {
  grid-column: 2 / span 3; /* spans columns 2, 3, 4 */
  display: flex;
  justify-content: center;
}

.logo-holder img.logo {
  max-width: 100%;
  height: auto;
}

.funding-info {
  grid-column: 2 / span 3; /* aligns with the 3 center columns */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -40px;
  gap: 20px;
}

.funding-text {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #111;
  flex: 1;
}

.eu-logo {
  height: 200px;
  flex-shrink: 0;
  padding-left: 80px;
}


.partner-ribbon {
  position: relative;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 5;
  display: flex;
  align-items: center;
  margin-top: 0px;
  background-color: #ffffff;
  color: #F29F05;
  overflow: hidden;
}


.ribbon-label {
  font-weight: 500;
  font-size: 20px;
  white-space: nowrap;
  margin-right: 10px;
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
}

.ribbon-separator {
  width: 12px;
  height: 40px;
  background-color: #F29F05;
  margin: 0 8px;

}

.ribbon-track {
  overflow: hidden;
  flex-grow: 1;
  position: relative;
  white-space: nowrap;
}

.ribbon-content {
  display: flex;
  gap: 40px;
  animation: 15s slideLeft infinite linear;
}

.ribbon-content img {
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;

  /*filter: brightness(0) saturate(100%) invert(24%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(97%) contrast(85%);
  opacity: 1;*/
}

/* Slide animation */
@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* About Project layout */
.about-project-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
  margin-top: 40px;
  align-items: start;
  margin-bottom: 0px;
}

/* "ABOUT PROJECT" title */
.about-project-grid .title-wrapper {
  grid-column: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ensures left alignment */
}

.about-project-grid .title-wrapper .title {
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  font-size: 96px;
  color: #F29F05;
  margin: 0;
  line-height: 1;
  align-items: start;
  text-align: left;
}
.about-project-grid .title-wrapper .underline {
  width: calc((100% - 20px) /2); /* exactly 1 column */
  height: 24px;
  background-color: #F29F05;
  margin-top: 8px;
}

/* Description aligned to columns 3,4,5 */
.about-project-grid .description {
  grid-column: 3 / span 3;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #3d3d3d;
  line-height: 1.8;
  text-align: justify;
  margin: 0;
}

.about-project-grid .description > p {
  max-width: 100%;
  width: 100%;
}

.about-project-grid .description ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  text-align: justify;
}

.about-project-grid .description li {
  margin-bottom: 12px;
  padding-left: 40px;
  position: relative;
}
.about-project-grid .description li::before {
  content: '';
  position: absolute;
  left: 10px; top: 5px;
  width: 16px; height: 16px;
  background: url("logo/arrow_outward.svg") no-repeat center/contain;
  background-color: #2AACFD;
  border-radius: 16px;
}

/* Bordered container for the image (spans all columns) */
.methodology-diagram-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
  padding: 40px 0;
  margin-bottom: 10px;
  margin-top: -120px;
}

/* Center image in middle 3 columns */
.methodology-diagram-inner {
  grid-column: 2 / span 3;
  display: flex;
  justify-content: center;
  margin-top: 0px;  /* Reduce this from maybe 60px or higher */
  margin-bottom: 40px;
}

/* Image dimensions */
.mcdm-diagram {
  max-height: 600px;
  width: auto;
  display: block;
  outline: 4px dashed #F29F05;
  outline-offset: 30px;
  border-radius: 16px;
}

/* Title wrapper aligned right to col 4+5 */
.methodology-title-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
  margin-top: 40px;
}

.methodology-title-wrapper .methodology-title {
  grid-column: 3 / span 3;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  font-size: 96px;
  color: #F29F05;
  margin: 0;
  line-height: 1;
  text-align: right;
  max-width: 100%;
}

.methodology-underline {
  grid-column: 5 / span 1;
  width: 100%;
  height: 24px;
  background-color: #F29F05;
  margin-top: 8px;
}

.learn-more-section {
  margin-top: 80px;
  position: relative;
  background-color: #d9d9d9;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.overlay-pattern {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: url('About/legofit_overlay.png') repeat;
  background-size: 1200px; /* Let it tile naturally */
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}


.centered-box {
  position: relative;
  background: #f5f5f5;
  padding: 40px 60px;
  width: 600px;
  height: 300px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  z-index: 2;
  text-align: center;

  /* Flexbox centering */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.learn-title {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #1a1a1a;
}

.learn-btn {
  padding: 10px 20px;
  background-color: #2AACFD;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.learn-btn:hover {
  background-color: #007bb5;
}



/* === PILOT DETAILS === */

.pilot-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 80px;
  overflow: hidden;
  color: white;
}

.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.pilot-label {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: bold;
  color: white;

}

.pilot-details-name {
  font-family: 'Silkscreen', cursive;
  font-size: 80px;
  margin: 0 0 20px;
  margin-left: -8px;
  font-weight: normal;
}

.pilot-description {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  margin-bottom: 32px;
  color: #ddd;
  font-weight: normal;
  max-width: 600px;
}


.action-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
}

.pilot-hero-action {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.pilot-dot-extended-line {
  width: 310px;
  height: 2px;
  background-color: white;
  position: relative;
  margin-right: 0; /* ensure no gap */
  flex-shrink: 0;
}

.pilot-dot-extended-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: -5px;
  width: 12px;
  height: 12px;
  background-color: white;
  border-radius: 50%;
}

.solution-btn-pilot {
  display: flex;
  align-items: center;
  justify-content: space-between; /* push arrow container to far right */
  padding: 10px 20px;
  border: 1px solid white;
  border-radius: 24px;
  text-decoration: none;
  font-size: 14px;
  color: white;
  font-family: 'Poppins', sans-serif;
  transition: background 0.3s ease, color 0.3s ease;
  background-color: transparent;
  gap: 16px; /* optional extra breathing room */
  min-width: 180px; /* optional: sets button to a stable width */
}

.solution-btn-pilot:hover {
  background-color: white;
  color: #2AACFD;
}

.solution-btn-pilot .arrow-icon-container {
  width: 28px;
  height: 28px;
  background-color: #2AACFD;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: -8px;
  overflow: hidden;
}

.btn-circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: white;
}

.solution-btn-pilot .arrow-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  margin: 0; /* remove any inherited spacing */
  color: white;
}

.solution-btn-pilot:hover {
  background-color: white;
  color: #2AACFD;
}


/* === FOOTER === */

.footer {
  background-color: #2AACFD;
  color: white;
  font-family: 'Poppins', sans-serif;
}

/* === EU Funding Section === */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  padding: 40px 40px 20px;
  margin: auto;
  flex-wrap: wrap;
}

.footer-top p {
  flex: 1 1 60%;
  font-size: 14px;
  line-height: 1.5;
  color: white;
  font-weight: normal;
}

.eu-logo-footer {
  height: 75px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}

/* === Divider Line === */
.footer-separator {
  height: 1px;
  background-color: white;
  opacity: 0.3;
  border: none;
  margin: 0 auto 20px;
  max-width: 1400px;
}

/* === Footer Columns Grid === */
.footer-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 40px;
}

.footer-column {
  display: flex;
  flex-direction: column;
}

/* Single h3 style – cleaned */
.footer-column h3 {
  font-size: 16px;
  margin-bottom: 14px;
  font-weight: 600;
  padding-top: 16px;
}

/* Aligned contact text + logo */
.footer-column h4 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 14px;
  margin: 6px 0;
  line-height: 1.6;
}

/* Logo image style */
.footer-column h4 img.icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 3px; /* align with multi-line text */
  background: transparent; /* remove bg issues */
}

/* Link list */
.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin: 6px 0;
}

.footer-column ul li a {
  color: white;
  text-decoration: none;
  font-size: 14px;
}

.footer-column ul li a:hover {
  text-decoration: underline;
}

/* === Newsletter Box === */
.newsletter {
  background-color: rgba(255, 255, 255, 0.15);
  padding: 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.newsletter h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
  padding-top: 0;
}

.newsletter form {
  display: flex;
  margin-bottom: 8px;
}

.newsletter input[type="email"] {
  padding: 10px;
  border: none;
  border-radius: 4px 0 0 4px;
  flex: 1;
  font-family: 'Poppins', sans-serif;
}

.newsletter button {
  padding: 10px 16px;
  border: none;
  background-color: #015d91;
  color: white;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

.newsletter .disclaimer {
  font-size: 12px;
  color: white;
  font-weight: normal;
}

/* === Bottom Bar === */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  color: #2AACFD;
  font-size: 12px;
  padding: 12px 40px;
  font-weight: 500;
  flex-wrap: wrap;
}

/* === CONTACT === */

/* === Icon Placeholders === */

.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  margin-right: 8px;
  vertical-align: middle;
  background-color: transparent;
}

.contact-section {
  padding: 80px 40px;
  background-color: #ffffff;
  font-family: 'Poppins', sans-serif;
}

.contact-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 8fr;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* === Contact Info Box === */
.contact-info {
  background-color: #2AACFD;
  color: white;
  padding: 40px;
}

.contact-info h2 {
  margin-bottom: 30px;
  font-size: 22px;
  font-weight: 600;
}

.contact-info p {
  margin: 16px 0;
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  color: #ffffff;
  font-weight: normal;
}

.contact-info .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  margin-right: 12px;
  margin-top: 2px; /* aligns the icon with first text line */
}

.contact-info p span.icon + br {
  display: none; /* Avoid line breaks directly after icon */
}

.icon.phone {
  background-image: url('logo/phone.svg');
}
.icon.mail {
  background-image: url('logo/mail.svg');
}
.icon.location {
  background-image: url('logo/pin.svg');
}

/* === Contact Form === */
.contact-form {
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
}

.contact-form h1 {
  font-size: 28px;
  margin-bottom: 6px;
}

.contact-form .subtitle {
  color: #868585;
  font-size: 14px;
  margin-bottom: 30px;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.form-group label {
  font-size: 13px;
  color: #222;
  margin-bottom: 6px;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  border: none;
  border-bottom: 1px solid #aaa;
  padding: 8px 0;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  background: transparent;
  outline: none;
  resize: none;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 8px;
}

.radio-group label {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.form-group.full {
  width: 100%;
  margin-bottom: 20px;
}

.align-right {
  display: flex;
  justify-content: flex-end;
}

/* === Button === */
.primary-button {
  background-color: #2AACFD;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.primary-button:hover {
  background-color: #037ECB;
}

/* === CONTRIBUTORS === */
/* === Regular Cards === */
.contributors-legofit-wrapper {
  background-color: #ffffff;
  padding: 0 80px;
  padding-top: 0px; /* height of fixed navbar to avoid overlap */
  height: auto;
  margin-top: 120px;
}

.contributors-section {
  background: white;
  padding: 120px 0 80px;
}

.contributors-top {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 80px;
}

.team-box {
  grid-column: 1 / span 3;
  height: 332px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.team-photo {
  width: 100%;
  height: 260px;
  border-radius: 6px;
  object-fit: cover;
}

.lab-link {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #F29F05;
  text-decoration: none;
  margin-top: 12px;
  text-align: center;
  display: block;
  font-weight: 500;
}

.lab-link:hover {
  text-decoration: underline;
}

.team-heading {
  grid-column: 4 / span 2;
  display: flex;
  flex-direction: column;
  justify-content: top;
}

.team-heading h1 {
  font: bold 96px/1 'Poppins';
  color: #F29F05;
  margin: 0 0 10px;
}
.heading-line {
  height: 20px;
  width: calc((100% - 20px) / 2);
  background: #F29F05;
}
.contributors-grid-area {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  row-gap: 40px;
  padding-bottom: 40px;
}

.name {
  font: 600 16px 'Poppins';
  color: #3d3d3d;
  margin-bottom: 8px;
  margin-top: 8px;
}
.role {
  font: italic 14px 'Poppins';
  color: #666;
}

.person-card {
  position: relative;
  width: 100%;
  height: 440px; /* allows space for image + badge + 3 lines of text */
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Top-aligned */
  text-align: center;
}

.badge-dot {
  position: absolute;
  top: -20px;
  left: 10px;
  width: 40px;
  height: 40px;
  background-color: #2AACFD;
  border-radius: 50%;
  box-shadow: 4px 4px 16px rgba(42, 172, 253, 1);
}

.profile-img {
  display: block;
  width: calc(100% - 20px);  /* 20px left + right */
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  margin-top: 16px;
  margin-bottom: 16px;
  flex-shrink: 0;
}




/* === PILOT INFO NUMBERS SECTION === */
.pilots-legofit-wrapper {
  background-color: #ffffff;
  padding: 0 80px;
  height: auto;
  margin-top: 20px;
  margin-bottom: 40px;
  min-height: auto;
  display: block;
  align-items: unset;
  justify-content: unset;
}

@media (max-width: 1079px) {
  .contributors-legofit-wrapper {
    padding: 0 40px;
    margin-top: 100px;
  }

  .contributors-top {
    gap: 16px;
  }

  .team-box {
    grid-column: 1 / span 3;
  }

  .team-heading {
    grid-column: 4 / span 2;
  }

  .team-heading h1 {
    font-size: 72px;
  }

  .heading-line {
    height: 16px;
    width: 60px;
  }

  .contributors-grid-area {
    gap: 16px;
    row-gap: 32px;
  }

  .person-card {
    height: 300px;
    padding: 16px;
  }

  .name {
    font-size: 15px;
  }

  .role {
    font-size: 13px;
  }
}

.pilots-section {
  background: white;
  padding: 120px 0 80px;
}
.pilot-info-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
  margin-top: 40px;
  margin-bottom: 0px;
}

.pilot-section {
  background: white;
  padding-top: 0px; /* reduced gap */
  position: relative;
}

.pilot-grid-area {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  row-gap: 40px;
  margin-top: 80px;
  padding-bottom: 40px;
}

/* Images (2 columns wide) */
.pilot-img {
  grid-column: span 2;
}

.pilot-img img {
  width: 100%;
  height:100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Text block (2 columns wide) */
.pilot-exp-text {
  grid-column: 4 / span 2;
  font-family: 'Poppins', sans-serif;
}

.pilot-exp-subtitle {
  color: #2AACFD;
  font-weight: bold;
  font-size: 24px;
  margin: 0 0 8px;
}

.pilot-exp-title {
  font-size: 36px;
  margin: 0 0 16px;
  font-weight: bold;
  color: #111;
}

.pilot-exp-text p {
  font-size: 14px;
  max-width: none;
  width: 100%;
  line-height: 1.6;
  color: #3d3d3d;
  margin: 0;
  text-align: justify;
}

/* Solutions blocks (1 column wide) */
.solutions {
  font-family: 'Poppins', sans-serif;
  grid-column: span 1;
}

.solutions h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #111;
}

.solutions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.solutions li {
  background: #f5f5f5;
  padding: 8px 16px 8px 36px; /* left padding for checkmark */
  margin-bottom: 8px;
  border-radius: 8px;
  font-size: 14px;
  color: #555;
  position: relative;
  display: flex;
  align-items: center;
}

.solutions li::before {
  content: "";
  background: url('logo/check.svg') no-repeat center;
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 12px;
}


/* Second image: move 1 column right */
.pilot-img.second {
  grid-column: 2 / span 2; 
}

/* Passive solutions next to second image */
.solutions.passive {
  grid-column: 4 / span 1;
}

/* Active solutions */
.solutions.active {
  grid-column: 5 / span 1;
}


.pilot-numbers-title {
  font-family: 'Poppins', sans-serif;
  font-size: 28px;
  font-weight: 700;
  font-weight: bold;
  color: #111;
  grid-column: 1 / -1;
  margin-bottom: 40px;
}

/* Grid layout - 5 columns like pilots section */
.pilot-numbers-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* Card styling */
.pilot-number-card {
  position: relative;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 40px 20px 20px;
  height: 310px;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Dot styling (top with shadow) */
.pilot-number-card .dot {
  position: absolute;
  top: -20px;
  left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.15);
}

/* Dot colors (easy to change) */
.pilot-number-card .dot.blue {
  background: #2AACFD;
  box-shadow: 4px 4px 16px rgba(42, 172, 253, 0.6);
}

.pilot-number-card .dot.orange {
  background: #F29F05;
  box-shadow: 4px 4px 16px rgba(242, 159, 5, 0.6);
}

.pilot-number-card .dot.red {
  background: #E53935;
  box-shadow: 4px 4px 16px rgba(229, 57, 53, 0.6);
}

/* Headings and text */
.pilot-number-card h3 {
  font-size: 24px;
  font-weight: bold;
  color: #111;
  margin-bottom: 12px;
}

.pilot-number-card p {
  font-size: 14px;
  color: #3d3d3d;
  font-weight: normal;
  line-height: 1.5;
}

.other-pilots-wrapper {
  background: #fff;
  padding: 80px 80px;
  margin-top: 40px;

  display: block;
  min-height: auto;
}

.other-pilots-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: start;
}

/* Title in first column */
.other-pilots-title {
  grid-column: 1 / span 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.other-pilots-title h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 28px;
  color: #111;
  margin-bottom: 12px;
}

.other-pilots-title .underline {
  width: 100%;
  height: 20px;
  background: #2AACFD;
}

/* Pilot cards (columns 2–5) */
.pilot-card {
  grid-column: span 1;
  position: relative;
  height: 340px;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.pilot-card img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Center name */
.pilot-card .pilot-name {
  position: relative;
  z-index: 2;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.pilot-card:hover {
  transform: translateY(-8px);
}

/* === Diagrams Section === */

.pilot-section-title {
  grid-column: 1 / span 1;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
  display: flex;
  align-items: flex-start;
  margin-top: 40px;
}

.diagram-description {
  grid-column: 2 / span 2;
  margin-top: 40px;
}

.diagram-image {
  grid-column: 4 / span 2;
}

.diagram-description ul {
  list-style: none;
  padding-left: 4px;
  margin: 0;
}

.diagram-description li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #111;
}

.diagram-description li div {
  flex: 1;
}

.color-box {
  display: inline-block;
  width: 20px;
  height: 0.5em; /* Visible height matching line */
  margin-top: 0.4em;
  border-radius: 0px;
  flex-shrink: 0;
}

/* Color Swatches */
.color-box.blue-light { background-color: #7ACCF4; }
.color-box.blue       { background-color: #2aacfd; }
.color-box.red        { background-color: #D92C04; }
.color-box.maroon     { background-color: #891806; }
.color-box.gold       { background-color: #E8B76A; }
.color-box.orange      { background-color: #F29F05; }

/* ✅ Scoped to the photo section only */
.pilot-photo-section .pilot-photo-row1 {
  grid-column: 1 / span 2;
}

.pilot-photo-section .pilot-photo-text {
  grid-column: 4 / span 2;
  font-family: 'Poppins', sans-serif;
}

.pilot-photo-section .pilot-photo-text h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #111;
}

.pilot-photo-section .pilot-photo-text p {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  max-width: none;
  font-weight: 200;
  width: 100%;
  color: #111;
  margin: 0;
  text-align: justify;
}

.pilot-photo-section .photo-spacer {
  grid-column: 3 / span 1;
}

.pilot-photo-section .bottom-spacer {
  grid-row: 2;
  grid-column: 1 / span 1;
}

.pilot-photo-section .image-left {
  grid-row: 2;
  grid-column: 2 / span 2;
}

.pilot-photo-section .image-right {
  grid-row: 2;
  grid-column: 4 / span 2;
}

/* 🔥 Apply cropping only to photo images */
.pilot-photo-section .pilot-img img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .pilot-section-title,
  .diagram-description,
  .diagram-image {
    grid-column: 1 / -1;
  }

  .diagram-image img {
    width: 100%;
    height: auto;
  }

  .pilot-section-title {
    margin-bottom: 20px;
  }
}


@media (max-width: 1200px) {
  .other-pilots-grid {
    grid-template-columns: repeat(5, 1fr);
    /* still 5 columns — so title stays at column 1 and cards at 2–5 */
  }

  .other-pilots-title, .pilot-card {
    /* reinforce column placements */
    grid-column: span 1;
  }
}

@media (max-width: 800px) {
  .other-pilots-grid {
    grid-template-columns: 1fr; /* stack all vertically */
  }

  .other-pilots-title {
    grid-column: 1;
    text-align: left;
  }

  .pilot-card {
    grid-column: 1;
  }
}




/* Navigation link styling for navbar */
.nav-link-styled {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 100% !important;
    letter-spacing: 0% !important;
    background: #FFFFFFBF !important;
    box-shadow: 0px 4px 4px 0px #00000040 !important;
    color: #2C3E50 !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    margin: 0 4px !important;
    text-decoration: none !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.nav-link-styled:hover {
    background: #FFFFFF !important;
    color: #2C3E50 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0px 6px 8px 0px #00000060 !important;
}

.nav-link-styled:active,
.nav-link-styled.active {
    background: #2AACFD !important;
    color: white !important;
}

/* Rest of your existing CSS... */

/* Optimized CSS with performance improvements */

/* Tab container styling */
/* ─── OUTER PILL ─────────────────────────────────────────── */
.tabs-group {
    background-color: #FFFFFF !important;      /* white background */
    border: 1px solid #2AACFD;                /* blue outline */
    border-radius: 30px;                      /* fully rounded pill */
    display: inline-flex;                     /* children side by side */
    overflow: hidden;                         /* clip corners */
    padding: 4px;                             /* thickness of outline */
  }

/* Inactive tabs = black text */
.tabs-group .grouped-nav-link {
    color: #000 !important;
    font-weight: 400 !important;  /* keep them "normal" weight */
  }
  
  /* Active tab = blue background, white text, semi-bold */
  .tabs-group .grouped-nav-link.active {
    background-color: #2AACFD !important;
    color: #fff !important;
    font-weight: 400 !important;  /* semi-bold, not full-bold */
  }
  
/* ─── INDIVIDUAL TABS ───────────────────────────────────── */
/* default: dark text for all tabs */
/* Individual tab styling */

.grouped-nav-link {
    color: #2AACFD !important;
    background: transparent !important;
    flex: 1;
    padding: 2px 24px !important;
    text-align: center !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    border-radius: 46px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    border: none !important;
    margin: 0 2px 0 2px !important;
    min-width: 120px;
}

/* hover on any tab */
/* Hover effect */
.grouped-nav-link:hover {
    background-color: #2AACFD80 !important;
    color: #2AACFD !important;
    transform: none !important;
}

/* Active tab - blue background with white text */
.grouped-nav-link.active {
    background-color: #2AACFD !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

/* Remove focus outline */
.grouped-nav-link:focus,
.grouped-nav-link:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Apply border radius to first tab */
.tabs-group .grouped-nav-link:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* Apply border radius to last tab */
.tabs-group .grouped-nav-link:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Loading animation container */
#loading-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Optimize graph rendering */
.js-plotly-plot {
    will-change: transform;
    transform: translateZ(0);
}

/* Improve DataTable styling */
.dash-table-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: #f8f9fa;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid #dee2e6;
}

.dash-cell-value {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Improve table selection appearance */
.dash-spreadsheet tr.selected {
    background-color: #e2f0fd !important;
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    .tabs-group {
        width: 100%;
    }
    
    .grouped-nav-link {
        padding: 8px 15px;
        font-size: 14px;
    }
}

.Select-menu-outer {
    background-color: white !important;
    color: black !important;
}

.Select-option {
    color: black !important;
}

.Select-control {
    background-color: white !important;
    color: black !important;
    border-radius: 8px !important;
    font-weight: bold;
}

/* ===== INSTANCE COMPARISON SECTION STYLING ===== */

/* Instance comparison container styling */
.instance-comparison-container {
    display: flex;
    gap: 20px;
    align-items: stretch;
    height: 100%;
}

/* 1) Kartın gölgesini ve farklı katman efektini tamamen kaldırıyoruz */
.instance-comparison-card {
    background: rgb(245, 245, 245) !important;  /* Kartın kendi arka planını transparan yap */
    border: none !important;             /* Kart kenarlığını kaldırabiliriz */
    box-shadow: none !important;         /* Kirli gölge efektini tamamen kaldır */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Instance comparison content card styling */
.instance-comparison-card {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Parameter cards styling */
.parameter-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.parameter-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

/* Parameter labels */
.parameter-label {
    font-weight: 600;
    font-size: 11px;  /* önceki 12px idi, biraz küçülttük */
    color: #666;
    display: block;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Make parameter names smaller and fix layout */
.parameter-name {
  font-size: 12px !important;  /* Reduced from 14px */
  font-weight: 400 !important;
  color: #333 !important;
  margin-bottom: 2px !important;
}

.parameter-value-text {
  font-size: 12px !important;  /* Reduced from 14px */
  font-weight: 600 !important;
  color: #333 !important;
}

/* Parameter values */
.parameter-value {
    font-size: 11px;  /* önceki 18px idi */
    font-weight: 600;
    color: #2C3E50;
    margin-bottom: 8px;
    display: block;
}

/* Progress bar container */
.progress-container {
    width: 100%;
    height: 8px;
    background-color: #e8ecef;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

/* Progress bar fill */
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2AACFD 0%, #1E88E5 100%);
    border-radius: 4px;
    transition: width 0.4s ease;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Metric comparison cards */
.metric-comparison-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin: 0 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.metric-comparison-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* 6) Metrik başlıklarında "text-transform" CSS'i en başta kaldırıldı; 
      dolayısıyla sadece renk ve font-boyutlarını burada tutuyoruz */
.metric-card-header {
        font-size: 14px;
        font-weight: 600;
        color: #4E5E66;
        margin-bottom: 12px;
        text-align: center;
        /* Title-case metin zaten Python tarafında doğru geçecek, 
           bu yüzden CSS'te uppercase/capitalize ayarıya gerek yok. */
        text-transform: none !important;
        letter-spacing: 0.5px;
}

/* Baseline section */
.baseline-section {
    margin-bottom: 20px;
}

.baseline-badge, .chosen-badge {
    display: inline-block;
    background-color: #2AACFD;
    color: white;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: 0.5px;
  }

.instance-label {
    display: inline-block;
    color: #2C3E50;
    font-size: 14px;
    font-weight: 400;
    padding: 8px 0;
    text-transform: capitalize;
  }


.metric-value {
    text-align: center;
    margin-bottom: 16px;
}

.metric-value-number {
    font-size: 20px;
    font-weight: 700;
    color: #2C3E50;
}

.metric-value-unit {
    font-size: 12px;
    color: #6c757d;
    margin-left: 4px;
}

/* Savings section */
.savings-section {
    border-top: 1px solid #e9ecef;
    padding-top: 16px;
}

.savings-badge {
    background-color: #f8f9fa;
    color: #6c757d;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
    border: 1px solid #dee2e6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.savings-percentage {
    font-size: 16px;
    font-weight: 600;
}

.savings-icon {
    font-size: 14px;
}

/* Tablo konteyneri tüm kart yüksekliğini kaplasın */
.comparison-table {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    border-collapse: collapse;
  }
  
  /* THEAD: 1 birim (1 satır) */
  .comparison-table thead {
    display: flex;
    flex: 1;
  }
  .comparison-table thead tr { display: flex; flex: 1; }
  .comparison-table thead th { flex: 1; display: flex; align-items: center; justify-content: center; }
  
  /* TBODY: 3 birim (3 satır) */
  .comparison-table tbody {
    display: flex;
    flex-direction: column;
    flex: 3;
  }
  .comparison-table tbody tr {
    display: flex;
    flex: 1;  /* her tr TBODY'nin 1/3'ünü kaplasın => toplam 3/4, + THEAD 1/4 = 1 */
  }
  
  /* Hücreler eşit genişlikte ve ortalı */
  .comparison-table th,
  .comparison-table td {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-bottom: 1px solid #DEE2E6;
  }
  
  
  /* ── 6) Etiket hücresi sola hizalı olsun ── */
  .table-label-cell {
    justify-content: flex-start;
  }
  

.table-header-cell {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #4E5E66;
    padding: 12px 0;
    border-bottom: 1px solid #DEE2E6;
  }

.table-label-cell {
    width: 25%;           /* 4 sütun olduğu için %25 olarak ayarlıyoruz */
    text-align: left;
    padding: 16px;
    vertical-align: middle;
    /* Burada bir "badge" ya da yazı olacak:
       içindeki span'leri (baseline-badge, chosen-badge, instance-label) stilledik. */
  }

.table-value-cell {
    width: 25%;          /* Her biri eşit genişlikte (%25) */
    text-align: center;
    padding: 16px;
    vertical-align: middle;
    border-bottom: 1px solid #DEE2E6; /* Her satırın altına ince çizgi */
  }

.comparison-table tbody tr:last-child .table-value-cell {
    border-bottom: none;
  }

/* Responsive design for instance comparison */
@media (max-width: 1200px) {
    .instance-comparison-container {
        flex-direction: column;
        gap: 16px;
    }
    
    .chosen-instance-card,
    .instance-comparison-card {
        flex: none;
    }
    
    .metric-comparison-card {
        margin: 8px 0;
        min-height: 280px;
    }
}

@media (max-width: 768px) {
    .metric-comparison-card {
        margin: 8px 0;
        padding: 16px;
        min-height: 250px;
    }
    
    .metric-value-number {
        font-size: 20px;
    }
    
    .parameter-card {
        padding: 10px;
        margin-bottom: 12px;
    }
    
    .parameter-value {
        font-size: 16px;
    }
}

.figure-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);  /* ← daha ince kolonlar */
    grid-template-rows: auto auto;
    gap: 20px;
    justify-items: center;
    margin-top: 60px;
}

/* Üst sıra */
.figure-grid .figure-card:nth-child(1) {
    grid-column: 1 / span 2;  /* 1-2. kolon */
    grid-row: 1;
}
.figure-grid .figure-card:nth-child(2) {
    grid-column: 3 / span 2;  /* 3-4. kolon */
    grid-row: 1;
}
.figure-grid .figure-card:nth-child(3) {
    grid-column: 5 / span 2;  /* 5-6. kolon */
    grid-row: 1;
}

/* Alt sıra — tam ortalanmış */
.figure-grid .figure-card:nth-child(4) {
    grid-column: 2 / span 2;  /* 3-4. kolon — yani figür 2 ile 3 arası */
    grid-row: 2;
}
.figure-grid .figure-card:nth-child(5) {
    grid-column: 4 / span 2;  /* 4-5. kolon — yani biraz daha sağda */
    grid-row: 2;
}

.figure-card {
    width: 100%;
    max-width: 400px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: center;
}

.figure-img {
    width: 100%;
    border-radius: 4px;
}

.figure-label {
    margin-top: 8px;
    font-size: 13px;
    color: #333;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.modal.show {
    display: flex;
}


.modal-image {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 6px;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    align-self: flex-end;
    margin-bottom: 6px;
    color: #333;
}

.comparison-graph-wrapper {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 60px;
}


/* ─── NAVBAR ÜST SATIR ───────────────────────────────────────────────── */
.navbar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .navbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .navbar-logo {
    height: 40px;
  }
  
  /* Link grubuna sağdan başlayacak şekilde stil */
  .navbar-right {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  
  .nav-link {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 16px;
  }
  
  .nav-link:hover {
    color: #ffffff !important;
  }
  .navbar .nav-link {
    white-space: nowrap;
  }
  
  
  /* ─── NAVBAR ALT SATIR ───────────────────────────────────────────────── */
  .navbar-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 24px;
    background-color: #f5f5f5;
    border-top: 1px solid #e0e0e0;
  }
  
  
  .nav-section-title {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 18px;
    font-weight: 600;
  }
  /* ─── ALT KISIMDA "LUXEMBOURG" GÖRSELİNİ SABİTLE ───────────────────── */
.subnav-container {
    position: relative;
  }
  
  .luxembourg-logo {
    position: absolute !important;
    width: 301px !important;
    height: 56px !important;
    top: 69px;
    left: 80px;
    /* Diğer eski height:36px kuralını kaldırmayı unutma */
  }
  

.nav-link-styled {
    width: 129px;
    height: 53px;
    padding: 16px 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 8px;
    color: rgba(255,255,255,0.75) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-shadow: -1px 4px 4px #346b9b;
    transition: background 0.2s ease, color 0.2s ease;
    position: relative;
    z-index: 1;
  }

.nav-link-styled::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 2px;               
    z-index: -1;             
    font-weight: 900;       
    color: rgba(255,255,255,0.2); 
    pointer-events: none;   
  }
  
  .nav-link-styled:hover {
    color: #FFFFFF !important;
    background-color: transparent !important;
    box-shadow: none !important;

  }
  
  .nav-link-styled.active,
  .nav-link-styled[aria-current="page"] {
    background: #2AACFD !important;
    color: #FFFFFF !important;
  }

    .nav-link-styled.contact-link {
    background-color: #037ECB !important;
    color: #FFFFFF !important;
  }
  
  .nav-link-styled.contact-link:hover {
    background-color: #2A557B !important;
  }
  
  /* Dash content wrapper padding styles */
  .dash-content-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Responsive padding for smaller screens */
  @media (max-width: 1200px) {
    .dash-content-wrapper {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
  }

  @media (max-width: 768px) {
    .dash-content-wrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
  }
  
  /* explorer.py içindeki parallel-card sınıfı için */
.parallel-card {
    width: 760px;
    height: 423px;
    top: 165px;
    left: 80px;
    border-radius: 8px;
    /* Orijinal CARD_STYLE ayarlarını korumak isterseniz örneğin: */
    box-shadow: 0 4px 12px rgba(0, 1, 1, 0.15);
    background-color: #F5F5F5;
    border: none;
    z-index: 1000;
    background-color: rgba(0, 1, 1, 0.15)
  }
  
  /* explorer.py içindeki total-ideal-card sınıfı için */
  .total-ideal-card {
    width: 500px;
    height: 423px;
    top: 165px;
    left: 860px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 1, 1, 0.15);
    background-color: #FFFFFF;
    border: none;
    z-index: 1000;
  }
  
    /* ─── LABEL CELL: Her bir etiket hücresi, sağdaki metrik satırıyla birebir aynı hizada olacak şekilde ortalanacak */
/* 3) Her bir satırın ("label-cell"), metrik satırıyla aynı hizada olması için: */
.label-cell {
    flex: 1;                            /* Ana container içinde eşit payda yer kaplasın */
    display: flex;
    align-items: center;               /* Dikeyde ortala */
    justify-content: center;           /* Yatayda ortala */
    padding: 0;                         /* Varsayılan padding'i temizle */
    margin: 0;                          /* Varsayılan margin'i temizle */
}

/* 2) Sol sütundaki her satırı (Label hücresi) tam hücre boyuna yayacağız */
.column-labels {
    display: flex;
    flex-direction: column;
    height: 100%;
}


/* 1) Grid kapsayıcısı: 4 sütun × auto sayıda satır */
.comparison-grid {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;  /* 4 sütunu eşit genişlikte yaptık */
    grid-auto-rows: auto;                    /* satır yüksekliği içeriğe göre adapte olsun */
    row-gap: 0px;                            /* satırlar arasında dikey boşluk yok (alt çizgiler hücre bazında) */
    column-gap: 0px;                         /* sütunlar arası boşluk yok */
  }

  /* 2) Hücrelerin ortak stili */
  .grid-cell {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center; 
    /* Dilerseniz sağ/sola çizgi eklersiniz, ama ikinci resimde sadece yatay çizgi var */
  }
  
  /* 3) Birinci satır (başlıklar) için ayrı arka plan veya yazı stili */
  .grid-header {
    font-size: 14px;
    font-weight: 600;
    color: #4E5E66;
    border-bottom: 2px solid #DEE2E6; /* Başlık-altı çizgisi daha belirgin olabilir */
  }
  
  /* 4) Etiket hücreleri (1. sütun) */
  .label-cell {
    justify-content: flex-start;  /* Sol hizala (etiketler sola dayalı) */
    text-align: left;
  }
  
  /* 5) Değer hücreleri (2.-3.-4. sütun) */
  .value-cell {
    justify-content: center;      /* Ortalı */
    text-align: center;
  }
  
  /* 6) "Baseline P54" rozet: */
  .baseline-badge,
  .chosen-badge {
    display: inline-flex;
    background-color: #2AACFD;
    color: #FFFFFF;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: 0.5px;
  }
  
  /* 7) "Savings Based On Baseline" için düz metin stili: */
  .instance-label {
    display: inline-flex;
    color: #2C3E50;
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
  }
  
  /* 8) Metrik değer stilleri */
  .metric-value-number {
    font-size: 20px;
    font-weight: 700;
    color: #2C3E50;
  }
  
  .metric-value-unit {
    font-size: 12px;
    color: #6C757D;
    margin-left: 4px;
  }
  
  .savings-percentage {
    font-size: 16px;
    font-weight: 600;
  }
  
  .savings-icon {
    font-size: 14px;
  }
  
  /* 10) Kartın dış görünümü */
  .instance-comparison-card {
    background-color: #F5F5F5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Hafif gölge */
    border: none;
    padding-top: 12px;
  }
  
  /* Sol ve sağ kartın içini %100'e yay */
.chosen-instance-card,
.instance-comparison-card {
  height: 100% !important;
  display: flex;
  flex-direction: column;
}

.comparison-card {
  display: flex;
  background: #fafafa;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 32px;
}

.comparison-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-right: 40px;
}

.baseline-btn, .chosen-btn {
  background: #27aaff;
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 24px 32px;
  font-size: 20px;
  font-weight: 600;
  text-align: left;
}

.comparison-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.comparison-header, .comparison-row, .comparison-savings {
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  font-weight: 500;
}

.comparison-header {
  font-size: 22px;
  font-weight: 700;
  color: #222;
  border-bottom: 1px solid #eee;
  padding-bottom: 12px;
}

.comparison-row {/* Updated comparison grid for more compact layout */
  /* Updated comparison grid for more compact layout */
.comparison-grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-auto-rows: auto;
  row-gap: 0px;
  column-gap: 0px;
  height: 100%;
}
  
  /* More compact grid cells */
.grid-cell {
  padding: 12px 8px; /* Reduced padding for more compact look */
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #DEE2E6;
  font-size: 14px; /* Slightly smaller font */
}
  
  /* Header styling */
.grid-header {
  font-size: 13px; /* Smaller header font */
  font-weight: 600;
  color: #4E5E66;
  border-bottom: 2px solid #DEE2E6;
  padding: 8px; /* Even more compact headers */
}
  
  /* Label cell styling */
.label-cell {
  justify-content: flex-start;
  text-align: left;
  padding-left: 12px;
}
  
  /* Value cell styling */
.value-cell {
  justify-content: center;
  text-align: center;
  font-weight: 500;
}

  
  /* Badge styling for more compact look */
.baseline-badge, .chosen-badge {
  display: inline-flex;
  background-color: #2AACFD;
  color: #FFFFFF;
  border-radius: 6px;
  padding: 6px 10px; /* More compact padding */
  font-size: 13px; /* Slightly smaller */
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}
  
  /* Instance label styling */
.instance-label {
  display: inline-flex;
  color: #2C3E50;
  font-size: 13px; /* Smaller font */
  font-weight: 400;
  text-transform: capitalize;
}

  
  /* Compact card styling */
.instance-comparison-card {
  background-color: #F5F5F5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: none;
  padding: 0; /* Remove extra padding */
  height: 100%;
  display: flex;
  flex-direction: column;
}
  font-size: 36px;
  font-weight: 700;
  color: #181c32;
}

.comparison-savings {
  font-size: 28px;
  font-weight: 700;
  color: #181c32;
  border-top: 1px solid #eee;
  padding-top: 12px;
}

.comparison-savings span {
  font-size: 18px;
  font-weight: 400;
  margin-left: 8px;
}

/* Updated comparison grid styling */
.comparison-grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-auto-rows: auto;
  row-gap: 0px;
  column-gap: 0px;
  height: 100%;
}

/* Header styling with two-line layout */
.grid-header {
  font-weight: 600;
  color: #4E5E66;
  border-bottom: 2px solid #DEE2E6;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-main-text {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

.header-sub-text {
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  color: #6c757d;
  margin-top: 2px;
}

/* Label cell styling with consistent sizing */
.label-cell {
  justify-content: center;
  text-align: center;
  padding: 8px;
  min-height: 60px; /* Same height as other cells */
}

.label-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.label-main-text {
  background-color: #2AACFD;
  color: #FFFFFF;
  border-radius: 6px 6px 0 0; /* Rounded top corners only */
  padding: 6px 12px 4px 12px;
  font-size: 13px;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  width: 100%;
  text-align: center;
  min-width: 120px; /* Ensure consistent width */
}

.label-sub-text {
  background-color: #2AACFD;
  color: #FFFFFF;
  border-radius: 0 0 6px 6px; /* Rounded bottom corners only */
  padding: 4px 12px 6px 12px;
  font-size: 13px;
  font-weight: 600; /* Make identifier slightly bolder */
  text-align: center;
  width: 100%;
  min-width: 120px; /* Same width as main text */
}

/* Value cell styling */
.value-cell {
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 16px; /* Slightly larger for readability */
}

/* Compact card styling */
.instance-comparison-card {
  background-color: #F5F5F5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: none;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Remove old badge styles since we're using the new structure */
.baseline-badge, .chosen-badge, .instance-label {
  display: none !important; /* Hide old styles */
}

/* Updated comparison grid styling */
.comparison-grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto 1fr 1fr 1fr; /* Header auto, then 3 equal data rows */
  row-gap: 0px;
  column-gap: 0px;
  height: 100%;
}

/* Grid cell base styling */
.grid-cell {
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px; /* Increased height for taller rows */
}

/* Header styling with two-line layout */
.grid-header {
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: none; /* Remove border from headers */
}

/* Only add bottom border to value column headers */
.grid-header:not(:first-child) {
  border-bottom: 1px solid #DEE2E6;
}

.header-main-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #4E5E66;
}

.header-sub-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #4E5E66;
  margin-top: 8px; /* Increased spacing between header lines */
}

/* Label cell styling with consistent sizing */
.label-cell {
  justify-content: center;
  text-align: center;
  padding: 8px;
  min-height: 120px;
}

/* Blue label content for Baseline and Chosen Instance */
.blue-label-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 80px; /* Match the increased cell height */
}

.blue-label-content .label-main-text {
  background-color: #2AACFD;
  color: #FFFFFF;
  border-radius: 6px 6px 0 0;
  padding: 8px 12px 6px 12px; /* Increased padding for taller boxes */
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  width: 100%;
  text-align: center;
  min-width: 120px;
}

.blue-label-content .label-sub-text {
  background-color: #2AACFD;
  color: #FFFFFF;
  border-radius: 0 0 6px 6px;
  padding: 6px 12px 8px 12px; /* Increased padding for taller boxes */
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  width: 100%;
  min-width: 120px;
}

/* Plain label content for Savings (no blue background) */
.plain-label-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 80px; /* Match the increased cell height */
}

.savings-main-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #2C3E50;
  padding: 4px 0; /* Increased padding for better spacing */
}

.savings-sub-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #2C3E50;
  padding: 4px 0; /* Increased padding for better spacing */
}

/* Value cell styling */
.value-cell {
  justify-content: center;
  text-align: center;
  vertical-align: middle;
}

/* Baseline and Chosen instance values - larger font */
.baseline-value, .chosen-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #2C3E50;
  min-height: 100px; /* Match increased cell height */
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #DEE2E6;
}

/* Savings values - regular font */
/* Updated savings values styling - make them bigger and more prominent */
/* Updated savings values styling - make main number big, percentage smaller */
.savings-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 30px;   /* Base font size */
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #2C3E50;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* Space between number, percentage, and arrow */
}

/* Make the main number (first span) bigger and bolder */
.savings-value span:first-child {
  font-size: 26px;   /* Bigger font for the main number */
  font-weight: 600;  /* Extra bold for the main number */
}

/* Make the percentage (second span) smaller but keep existing colors */
.savings-value span:nth-child(2) {
  font-size: 16px;   /* Smaller font for percentage */
  font-weight: 500;  /* Semi-bold for percentage */
  /* Color is already set in the Python code, so we don't override it */
}

/* Keep the arrow (third span) same size as percentage */
.savings-value span:nth-child(3) {
  font-size: 16px;   /* Same size as percentage */
  font-weight: 600;  /* Semi-bold for arrow */
  /* Color is already set in the Python code, so we don't override it */
}

/* Compact card styling */
.instance-comparison-card {
  background-color: #F5F5F5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: none;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 400px; /* Ensure minimum height for proper layout */
}

/* Remove old badge styles since we're using the new structure */
.baseline-badge, .chosen-badge, .instance-label {
  display: none !important;
}

/* Blue dropdown styling */
.blue-dropdown .Select-control {
  background-color: #2AACFD !important;
  border: none !important;
  border-radius: 8px !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  padding: 8px 16px !important;
  min-height: 48px !important;
}

.blue-dropdown .Select-placeholder {
  color: white !important;
}

.blue-dropdown .Select-single-value {
  color: white !important;
  font-weight: 600 !important;
}

.blue-dropdown .Select-arrow-zone .Select-arrow {
  border-color: white transparent transparent !important;
}

.blue-dropdown .Select-input > input {
  color: white !important;
}

/* Fix the dropdown background color - it was set to dark blue instead of light blue */
.blue-dropdown .css-1s2u09g-control,
.blue-dropdown .css-1pahdxg-control {
  background-color: #2AACFD !important;  /* Changed from #204f6d to #2AACFD */
  border: none !important;
  border-radius: 8px !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  padding: 4px 12px !important;
  min-height: 48px !important;
  box-shadow: none !important;
}
/* Ensure all dropdown text is white */
.blue-dropdown .Select-control,
.blue-dropdown .Select-single-value,
.blue-dropdown .css-1uccc91-singleValue {
  background-color: #2AACFD !important;
  color: white !important;
  font-weight: 600 !important;
}
/* Ensure single value text is white and centered */
.blue-dropdown .Select-single-value,
.blue-dropdown .css-1uccc91-singleValue {
  color: white !important;
  font-weight: 600 !important;
  /* Center the text vertically */
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.blue-dropdown .Select-placeholder,
.blue-dropdown .css-1wa3eu0-placeholder {
  color: white !important;
}

.blue-dropdown .Select-arrow-zone .Select-arrow,
.blue-dropdown .css-tlfecz-indicatorContainer,
.blue-dropdown .css-1gtu0rj-indicatorContainer {
  color: white !important;
}


.blue-dropdown .css-1wa3eu0-placeholder {
  color: white !important;
}

.blue-dropdown .css-1uccc91-singleValue {
  color: white !important;
  font-weight: 600 !important;
}

.blue-dropdown .css-tlfecz-indicatorContainer {
  color: white !important;
}

.blue-dropdown .css-1gtu0rj-indicatorContainer {
  color: white !important;
}

/* Hover state */
.blue-dropdown .css-1s2u09g-control:hover,
.blue-dropdown .css-1pahdxg-control:hover {
  background-color: #2AACFD !important;
  border: none !important;
  box-shadow: none !important;
}

/* Focus state */
.blue-dropdown .css-1s2u09g-control--is-focused,
.blue-dropdown .css-1pahdxg-control--is-focused {
  background-color: #2AACFD !important;
  border: none !important;
  box-shadow: 0 0 0 2px rgba(42, 172, 253, 0.3) !important;
}

/* Dropdown menu */
.blue-dropdown .css-26l3qy-menu {
  background-color: white !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.blue-dropdown .css-4ljt47-MenuList {
  padding: 0 !important;
}

.blue-dropdown .css-9jq23d-option {
  color: #333 !important;
  padding: 12px 16px !important;
}

.blue-dropdown .css-9jq23d-option:hover {
  background-color: #f0f8ff !important;
  color: #2AACFD !important;
}

.blue-dropdown .css-9jq23d-option--is-selected {
  background-color: #2AACFD !important;
  color: white !important;
}

/* Fix progress bar container to prevent overflow */
.progress-bar-section {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  max-width: 180px !important;  /* Limit max width to prevent overflow */
}

.progress-bar-container {
  flex: 1 !important;
  height: 8px !important;
  background-color: #e8ecef !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 8px !important;  /* Add margins for min/max values */
}

.min-max-value {
  font-size: 10px !important;  /* Made even smaller */
  color: #666 !important;
  min-width: 25px !important;  /* Reduced from 30px */
  text-align: center !important;
}

/* Quick fix for full width navbar - DISABLED to prevent navbar movement */
/* 
.navbar {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}
*/

#instance-dropdown .Select-control {
  min-height: 20px !important;
  padding: 1px 1px !important;
  background-color: #2AACFD !important;  /* mevcut mavi rengiyle uyumlu */
}

#instance-dropdown .Select-placeholder,
#instance-dropdown .Select-value-label {
  color: #fff !important;        /* seçili P24’ü beyaz yapar */
  line-height: 24px !important;  /* dikey ortalama */
}

/* Ok işaretini de beyazlayın */
#instance-dropdown .Select-arrow {
  border-top-color: #fff !important;
}

/* 2) Açılır menü içindeki satırlar arasını sıkıştır */
#instance-dropdown .Select-menu-outer .Select-option,
#instance-dropdown .VirtualizedSelectOption {
  padding: 4px 8px !important;
  line-height: 18px !important;
}

/* Opsiyonlar arasındaki ekstra boşluğu kaldırmak için */
#instance-dropdown .Select-menu-outer {
  margin-top: 2px !important;
}

/* 3) Sol paneldeki parametre kartları (Wall-U, Roof-U, vb.) arasındaki boşluğu azalt */
#instance-parameters .parameter-card {
  margin-bottom: 6px !important;  /* kart altı boşluk */
  padding: 8px !important;         /* iç boşluk */
}

/* Enhanced modal styling */
.modal {
  background-color: rgba(0, 0, 0, 0.8);
  outline: none;
}

.modal-content {
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  max-width: 90vw;
  max-height: 90vh;
  outline: none;
}

.modal-close {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  transition: all 0.2s ease;
  z-index: 1001;
}

.modal-close:hover {
  transform: scale(1.1);
}

/* Add hover effects for figure cards */
.figure-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: #2AACFD;
}

/* Dropdown option styling based on savings */

/* No savings - white background (default) */
.dropdown-option-no-savings {
  background-color: #FFFFFF !important;
  color: #333333 !important;
}

/* One saving - light blue background */
.dropdown-option-one-saving {
  background-color: #87CEEB !important;  /* Light sky blue */
  color: #333333 !important;
}

/* Two savings - dark blue background */
.dropdown-option-two-savings {
  background-color: #2AACFD !important;  /* Dark blue (matching your theme) */
  color: #FFFFFF !important;
}

/* Hover effects for dropdown options */
.dropdown-option-no-savings:hover {
  background-color: #F0F8FF !important;  /* Very light blue on hover */
  color: #333333 !important;
}

.dropdown-option-one-saving:hover {
  background-color: #5CACEE !important;  /* Slightly darker light blue */
  color: #333333 !important;
}

.dropdown-option-two-savings:hover {
  background-color: #1E90FF !important;  /* Slightly lighter dark blue */
  color: #FFFFFF !important;
}

/* Ensure proper styling for React Select components */
.blue-dropdown .css-9jq23d-option.dropdown-option-no-savings {
  background-color: #FFFFFF !important;
  color: #333333 !important;
}

.blue-dropdown .css-9jq23d-option.dropdown-option-one-saving {
  background-color: #87CEEB !important;
  color: #333333 !important;
}

.blue-dropdown .css-9jq23d-option.dropdown-option-two-savings {
  background-color: #2AACFD !important;
  color: #FFFFFF !important;
}

/* Hover states for React Select */
.blue-dropdown .css-9jq23d-option.dropdown-option-no-savings:hover {
  background-color: #F0F8FF !important;
  color: #333333 !important;
}

.blue-dropdown .css-9jq23d-option.dropdown-option-one-saving:hover {
  background-color: #5CACEE !important;
  color: #333333 !important;
}

.blue-dropdown .css-9jq23d-option.dropdown-option-two-savings:hover {
  background-color: #1E90FF !important;
  color: #FFFFFF !important;
}

/* Selected state styling */
.blue-dropdown .css-9jq23d-option--is-selected.dropdown-option-no-savings {
  background-color: #E6F3FF !important;
  color: #333333 !important;
}

.blue-dropdown .css-9jq23d-option--is-selected.dropdown-option-one-saving {
  background-color: #4682B4 !important;
  color: #FFFFFF !important;
}

.blue-dropdown .css-9jq23d-option--is-selected.dropdown-option-two-savings {
  background-color: #191970 !important;
  color: #FFFFFF !important;
}

/* Additional styling for dropdown menu container */
.blue-dropdown .css-26l3qy-menu {
  border: 1px solid #E0E0E0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Ensure options don't have conflicting styles */
.blue-dropdown .css-4ljt47-MenuList {
  padding: 0 !important;
  max-height: 200px !important;
  overflow-y: auto !important;
}

/* Option container styling */
.blue-dropdown .css-9jq23d-option {
  padding: 10px 16px !important;
  cursor: pointer !important;
  border-bottom: 1px solid rgba(224, 224, 224, 0.3) !important;
  transition: all 0.2s ease !important;
}

.blue-dropdown .css-9jq23d-option:last-child {
  border-bottom: none !important;
}

/* custom.css dosyanızda bu bölümü bulun ve güncelleyin */

.modal-content {
  position: relative;
  background-color: white;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  max-width: 80vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center; /* DEĞİŞİKLİK: 'flex-end' yerine 'center' kullanıldı */
  justify-content: center; /* Dikeyde de ortalamak için eklendi */
}

.modal-image {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 6px;
}

.modal-close {
  top: 10px;               /* Üstten 10px boşluk */
  right: 15px;              /* Sağdan 15px boşluk */
  background: transparent;
  border: none;
  font-size: 28px;         /* Boyutu biraz büyütüldü */
  font-weight: bold;
  cursor: pointer;
  color: #333;
  z-index: 1001;           /* Diğer elemanların üzerinde kalması için */
}

/* Basit mavi dropdown için güçlendirilmiş CSS - BOYUT DÜZELTMESİ */
.simple-blue-dropdown .Select-control {
  background-color: #2AACFD !important;
  border: 1px solid #2AACFD !important;
  color: white !important;
  font-size: 16px !important;          /* Explorer ile aynı yükseklik */
  padding: 0px 0px !important;        /* Explorer ile aynı padding */
}

/* CSS class'ları için de aynı boyutları ekle */
.simple-blue-dropdown .css-1s2u09g-control,
.simple-blue-dropdown .css-1pahdxg-control {
  background-color: #2AACFD !important;
  border: none !important;
  border-radius: 8px !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 16px !important;          /* Explorer ile aynı */
  padding: 4px 12px !important;        /* Explorer ile aynı */
  min-height: 48px !important;         /* Explorer ile aynı */
  box-shadow: none !important;
}

/* P9, P10 vs. yazıları için güçlü beyaz renk kuralları */
.simple-blue-dropdown .Select-single-value,
.simple-blue-dropdown .Select-value-label,
.simple-blue-dropdown .css-1uccc91-singleValue,
.simple-blue-dropdown div[class*="singleValue"],
.simple-blue-dropdown [class*="SingleValue"] {
  color: white !important;
  font-weight: 600 !important;
  font-size: 16px !important;          /* Yazı boyutunu da aynı yap */
}

/* Placeholder için */
.simple-blue-dropdown .Select-placeholder,
.simple-blue-dropdown .css-1wa3eu0-placeholder {
  color: white !important;
  font-size: 16px !important;          /* Placeholder da aynı boyutta */
}

/* Ok işareti için güçlü kurallar */
.simple-blue-dropdown .Select-arrow,
.simple-blue-dropdown .css-tlfecz-indicatorContainer,
.simple-blue-dropdown .css-1gtu0rj-indicatorContainer {
  color: white !important;
}

.simple-blue-dropdown .Select-arrow {
  border-top-color: white !important;
}

/* Input yazısı da beyaz olsun */
.simple-blue-dropdown .Select-input > input,
.simple-blue-dropdown input {
  color: white !important;
  font-size: 16px !important;          /* Input da aynı boyutta */
}

/* Hover ve focus durumları */
.simple-blue-dropdown .Select-control:hover,
.simple-blue-dropdown .Select-control.is-focused,
.simple-blue-dropdown .css-1s2u09g-control:hover,
.simple-blue-dropdown .css-1pahdxg-control:hover {
  background-color: #2AACFD !important;
  border-color: #2AACFD !important;
  box-shadow: 0 0 0 1px #2AACFD !important;
}

/* Herhangi bir text için genel kural */
.simple-blue-dropdown * {
  color: white !important;
}

/* Sadece dropdown menü açıldığında içerik siyah olsun */
.simple-blue-dropdown .Select-menu *,
.simple-blue-dropdown .css-26l3qy-menu * {
  color: #333 !important;
}

/* Dropdown menü stilleri (açıldığında) */
.simple-blue-dropdown .Select-menu {
  background-color: white !important;
}

.simple-blue-dropdown .Select-option {
  color: #333 !important;
}

.simple-blue-dropdown .Select-option:hover {
  background-color: #f0f8ff !important;
  color: #2AACFD !important;
}

.simple-blue-dropdown .Select-option.is-selected {
  background-color: #2AACFD !important;
  color: white !important;
}

/* custom.css dosyasının sonuna ekleyin veya mevcut olanla değiştirin */

/* --- YENİ EKLENEN INSTANCE SEÇİM ALANI STİLLERİ --- */

/* Ana instance dropdown için güncellenmiş stil */
.main-instance-dropdown .Select-control,
.main-instance-dropdown .css-1s2u09g-control,
.main-instance-dropdown .css-1pahdxg-control {
  background-color: #2AACFD !important;
  border-radius: 12px !important;              /* 30px'den 12px'e düşürüldü */
  color: white !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  min-height: 52px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;  /* Gölge güçlendirildi */
  transition: all 0.3s ease !important;       /* Geçiş efekti eklendi */
}

/* Hover efekti ekle */
.main-instance-dropdown .Select-control:hover,
.main-instance-dropdown .css-1s2u09g-control:hover,
.main-instance-dropdown .css-1pahdxg-control:hover {
  background-color: #1E88E5 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25) !important;
  transform: translateY(-1px) !important;     /* Hafif yükselme efekti */
}

/* Focus durumu */
.main-instance-dropdown .Select-control--is-focused,
.main-instance-dropdown .css-1s2u09g-control--is-focused,
.main-instance-dropdown .css-1pahdxg-control--is-focused {
  background-color: #2AACFD !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.3) !important;
}

/* Dropdown menüsü açıldığında */
.main-instance-dropdown .Select-menu-outer,
.main-instance-dropdown .css-26l3qy-menu {
  border-radius: 12px !important;           
  box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;
  margin-top: 4px !important;
  overflow: hidden !important;
}

/* Dropdown seçenekleri */
.main-instance-dropdown .Select-option,
.main-instance-dropdown .css-9jq23d-option {
  padding: 12px 16px !important;
  font-size: 16px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  transition: all 0.2s ease !important;
}

.main-instance-dropdown .Select-option:hover,
.main-instance-dropdown .css-9jq23d-option:hover {
  background-color: #f0f8ff !important;
  color: #2AACFD !important;
}

.main-instance-dropdown .Select-option.is-selected,
.main-instance-dropdown .css-9jq23d-option--is-selected {
  background-color: #2AACFD !important;
  color: white !important;
  font-weight: 600 !important;
}

/* Son seçenekte alt border olmasın */
.main-instance-dropdown .Select-option:last-child,
.main-instance-dropdown .css-9jq23d-option:last-child {
  border-bottom: none !important;
}

/* Placeholder ve seçili değer stilini koru */
.main-instance-dropdown .Select-placeholder,
.main-instance-dropdown .Select-single-value,
.main-instance-dropdown .css-1uccc91-singleValue,
.main-instance-dropdown .css-1wa3eu0-placeholder {
  color: white !important;
  font-weight: 600 !important;
}

/* Ok işareti stilini koru */
.main-instance-dropdown .Select-arrow,
.main-instance-dropdown .css-tlfecz-indicatorContainer {
  color: white !important;
}

.main-instance-dropdown .Select-arrow {
  border-top-color: white !important;
}

/* Input stilini koru */
.main-instance-dropdown .Select-input > input,
.main-instance-dropdown input {
  color: white !important;
}

/* Sort by dropdown ve Search butonu için container */
.sort-and-search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 16px;
}
.sort-by-dropdown {
  flex-grow: 1;
}
.sort-by-dropdown .Select-control {
  border: 1px solid #2AACFD !important;
  border-radius: 8px !important;
  background-color: white !important;
  box-shadow: none !important;
}

/* Arama butonu */
.search-button {
  background-color: #F0F0F0 !important;
  border: 1px solid #D0D0D0 !important;
  color: #333 !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 16px;
}
.search-button:hover {
  background-color: #E0E0E0 !important;
}


/* --- YENİ PARAMETRE KARTI VE PROGRESS BAR STİLİ (DÜZELTİLMİŞ HALİ) --- */
.parameter-display-card {
    background-color: #FFFFFF;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid #e8ecef;
}

.parameter-label-value {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400; /* Değeri daha okunabilir yapmak için normal kalınlık */
    color: #333;
    margin-bottom: 8px;
}

.parameter-label-value span {
    font-weight: 700; /* Sadece sayısal değer kalın olsun */
}

.parameter-label-value .unit {
    font-weight: 400;
    font-size: 14px;
    margin-left: 4px;
}

/* EKSİK OLAN KISIM: İlerleme çubuğunun container'ı için stil */
.progress-bar-container {
    height: 6px;
    width: 100%;
    background-color: #e9ecef; /* Gri arka plan */
    border-radius: 3px;
    overflow: hidden;
}

/* Mevcut kısım: İlerleme çubuğunun dolgusu */
.parameter-progress-bar .progress-fill {
  height: 100%;
  background: #2AACFD !important; /* Mavi dolgu */
  border-radius: 3px;
}

/* Sort By Dropdown için beyaz arka plan + mavi ok stili */
.sort-by-blue-dropdown .Select-control,
.sort-by-blue-dropdown .css-1s2u09g-control,
.sort-by-blue-dropdown .css-1pahdxg-control {
  background-color: #FFFFFF !important;        /* Beyaz arka plan */
  border: 2px solid #2AACFD !important;        /* Mavi kenarlık */
  border-radius: 16px !important;              /* Yuvarlak köşeler */
  color: #2AACFD !important;                   /* Mavi yazı */
  font-weight: 400 !important;
  font-size: 14px !important;
  padding: 0px 0px !important;                /* Daha az padding */
  min-height: 24px !important;                 /* Daha kısa yükseklik */
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

/* Placeholder ve seçili değer mavi olsun */
.sort-by-blue-dropdown .Select-placeholder,
.sort-by-blue-dropdown .Select-single-value,
.sort-by-blue-dropdown .css-1uccc91-singleValue,
.sort-by-blue-dropdown .css-1wa3eu0-placeholder {
  color: #2AACFD !important;
  font-weight: 400 !important;
}

/* Ok işareti mavi olsun */
.sort-by-blue-dropdown .Select-arrow,
.sort-by-blue-dropdown .css-tlfecz-indicatorContainer,
.sort-by-blue-dropdown .css-1gtu0rj-indicatorContainer {
  color: #2AACFD !important;
}

.sort-by-blue-dropdown .Select-arrow {
  border-top-color: #2AACFD !important;
}

/* Input yazısı da mavi olsun */
.sort-by-blue-dropdown .Select-input > input,
.sort-by-blue-dropdown input {
  color: #2AACFD !important;
}

/* Hover durumu - hafif mavi arka plan */
.sort-by-blue-dropdown .css-1s2u09g-control:hover,
.sort-by-blue-dropdown .css-1pahdxg-control:hover,
.sort-by-blue-dropdown .Select-control:hover {
  background-color: #F0F8FF !important;        /* Çok açık mavi */
  border-color: #2AACFD !important;
  box-shadow: 0 2px 6px rgba(42, 172, 253, 0.2) !important;
}

/* Focus durumu */
.sort-by-blue-dropdown .css-1s2u09g-control--is-focused,
.sort-by-blue-dropdown .css-1pahdxg-control--is-focused,
.sort-by-blue-dropdown .Select-control.is-focused {
  background-color: #FFFFFF !important;
  border-color: #2AACFD !important;
  box-shadow: 0 0 0 2px rgba(42, 172, 253, 0.3) !important;
}

/* Dropdown menü (açıldığında) */
.sort-by-blue-dropdown .css-26l3qy-menu,
.sort-by-blue-dropdown .Select-menu-outer {
  background-color: white !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  border: 1px solid #E0E0E0 !important;
  margin-top: 4px !important;
}

.sort-by-blue-dropdown .css-4ljt47-MenuList,
.sort-by-blue-dropdown .Select-menu {
  padding: 0 !important;
}

.sort-by-blue-dropdown .css-9jq23d-option,
.sort-by-blue-dropdown .Select-option {
  color: #333 !important;
  padding: 8px 16px !important;                /* Daha kompakt seçenekler */
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-size: 10px !important;
}

.sort-by-blue-dropdown .css-9jq23d-option:hover,
.sort-by-blue-dropdown .Select-option:hover {
  background-color: #f0f8ff !important;
  color: #2AACFD !important;
}

.sort-by-blue-dropdown .css-9jq23d-option--is-selected,
.sort-by-blue-dropdown .Select-option.is-selected {
  background-color: #2AACFD !important;
  color: white !important;
}

/* Ana kontrol alanındaki tüm text'ler mavi olsun */
.sort-by-blue-dropdown .Select-control *,
.sort-by-blue-dropdown .css-1s2u09g-control *,
.sort-by-blue-dropdown .css-1pahdxg-control * {
  color: #2AACFD !important;
}

/* Dropdown menü açıldığında içerik siyah olsun */
.sort-by-blue-dropdown .Select-menu *,
.sort-by-blue-dropdown .css-26l3qy-menu * {
  color: #333 !important;
}

/* custom.css dosyasının sonuna ekleyin veya mevcut olanla değiştirin */

/* --- YENİ EKLENEN INSTANCE SEÇİM ALANI STİLLERİ --- */

/* İyileştirilmiş search input container - daha stabil animasyon */
.search-input-container {
  max-height: 80px;
  opacity: 1;
  overflow: hidden;
  transition: all 0.25s ease-in-out;  /* Timing kısaltıldı */
  margin-bottom: 0px;
  margin-top: 8px;
  transform: translateY(0);
  pointer-events: auto;  /* Etkileşimi açık tut */
}

.search-input-container.hidden {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  transform: translateY(-10px);
  pointer-events: none;  /* Gizliyken etkileşimi kapat */
}

/* Search toggle button - daha güvenilir durumlar */
.search-toggle-button {
  background-color: #F8F9FA !important;
  border: 2px solid #E9ECEF !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;  /* CSS transition'ı kısalt */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  color: #6C757D !important;
  cursor: pointer !important;
  user-select: none !important;  /* Text selection'ı önle */
  margin-left: 80px !important;
}

/* Disabled state - hızlı tıklamaları önlemek için */
.search-toggle-button:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.search-toggle-button:hover:not(:disabled) {
  background-color: #E9ECEF !important;
  border-color: #2AACFD !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
  color: #2AACFD !important;
}

.search-toggle-button:active:not(:disabled) {
  transform: scale(0.95) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
  transition: all 0.1s ease !important;  /* Active state için hızlı transition */
}

/* Search toggle button active state (search açıkken) */
.search-toggle-button.search-open:not(:disabled) {
  background-color: #2AACFD !important;
  border-color: #1E88E5 !important;
  box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.2) !important;
  color: #FFFFFF !important;
}

.search-toggle-button.search-open:hover:not(:disabled) {
  background-color: #1E88E5 !important;
  color: #FFFFFF !important;
}

/* Search input styling - daha responsive */
.search-input-container input {
  border: 2px solid #2AACFD !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  transition: all 0.15s ease !important;  /* Daha hızlı transition */
  background-color: #F8F9FA !important;
  width: 100% !important;
}

.search-input-container input:focus {
  outline: none !important;
  border-color: #1E88E5 !important;
  box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.2) !important;
  background-color: #FFFFFF !important;
}

.search-input-container input::placeholder {
  color: #6C757D !important;
  font-style: italic !important;
}

/* Animasyonları daha stabil hale getir */
@keyframes slideDown {
  from {
    max-height: 0;
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    max-height: 80px;
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    max-height: 80px;
    opacity: 1;
    transform: translateY(0);
  }
  to {
    max-height: 0;
    opacity: 0;
    transform: translateY(-5px);
  }
}

/* Will-change property ile performansı artır */
.search-input-container {
  will-change: max-height, opacity, transform;
}

.search-toggle-button {
  will-change: transform, background-color, box-shadow;
}

/* Mobil cihazlar için touch-action */
@media (max-width: 768px) {
  .search-toggle-button {
    touch-action: manipulation;  /* iOS'ta double-tap zoom'u önle */
    -webkit-tap-highlight-color: transparent;  /* iOS'ta highlight'ı kaldır */
  }
}

/* Sort Order kısmını sola hizala - Wall-U gibi */
.sort-order-section {
  text-align: left !important;
  margin: 16px 10px !important;
}

/* Sort Order label'ını sola hizala */
.sort-order-section label {
  display: block !important;
  text-align: left !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* Radio butonları yan yana zorla */
.sort-order-section .dash-radio-items {
  display: flex !important;
  flex-direction: row !important;  /* Yan yana zorla */
  justify-content: flex-start !important;
  gap: 20px !important;
  align-items: center !important;
}


/* Her bir radio item */
.sort-order-section .dash-radio-items .dash-radio-item {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  margin-right: 20px !important;
}
/* Radio item label'ları */
.sort-order-section .dash-radio-items .dash-radio-item label {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}
/* Radio butonları */
.sort-order-section .dash-radio-items input[type="radio"] {
  margin-right: 5px !important;
  margin-bottom: 0 !important;
}

/* Daha spesifik kurallar */
#sort-order-radio {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px !important;
}

#sort-order-radio .dash-radio-item {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 20px !important;
}

#sort-order-radio label {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

/* Updated comparison grid styling - original for 2 instances + savings */
.comparison-grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto 1fr 1fr 1fr; /* Header auto, then 3 equal data rows */
  row-gap: 0px;
  column-gap: 0px;
  height: 100%;
}

/* New comparison grid styling for 3 instances (no savings) */
.comparison-grid-3rows {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto 1fr 1fr 1fr; /* Header auto, then 3 equal data rows */
  row-gap: 0px;
  column-gap: 0px;
  height: 100%;
}

/* Grid cell base styling */
.grid-cell {
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px; /* Increased height for taller rows */
}

/* Header styling with two-line layout */
.grid-header {
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: none; /* Remove border from headers */
}

/* Only add bottom border to value column headers */
.grid-header:not(:first-child) {
  border-bottom: 1px solid #DEE2E6;
}

.header-main-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #4E5E66;
}

.header-sub-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #4E5E66;
  margin-top: 8px; /* Increased spacing between header lines */
}

/* Label cell styling with consistent sizing */
.label-cell {
  justify-content: center;
  text-align: center;
  padding: 8px;
  min-height: 120px;
}

/* Blue label content for Baseline and Chosen Instance */
.blue-label-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 80px; /* Match the increased cell height */
}

.blue-label-content .label-main-text {
  background-color: #2AACFD;
  color: #FFFFFF;
  border-radius: 6px 6px 0 0;
  padding: 8px 12px 6px 12px; /* Increased padding for taller boxes */
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  width: 100%;
  text-align: center;
  min-width: 120px;
}

.blue-label-content .label-sub-text {
  background-color: #2AACFD;
  color: #FFFFFF;
  border-radius: 0 0 6px 6px;
  padding: 6px 12px 8px 12px; /* Increased padding for taller boxes */
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  width: 100%;
  min-width: 120px;
}

/* Plain label content for Savings (no blue background) */
.plain-label-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 80px; /* Match the increased cell height */
}

.savings-main-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #2C3E50;
  padding: 4px 0; /* Increased padding for better spacing */
}

.savings-sub-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #2C3E50;
  padding: 4px 0; /* Increased padding for better spacing */
}

/* Value cell styling */
.value-cell {
  justify-content: center;
  text-align: center;
  vertical-align: middle;
}

/* Baseline and Chosen instance values - larger font */
.baseline-value, .chosen-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #2C3E50;
  min-height: 100px; /* Match increased cell height */
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #DEE2E6;
}

/* Savings values styling */
.savings-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 30px;   /* Base font size */
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #2C3E50;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* Space between number, percentage, and arrow */
}

/* Make the main number (first span) bigger and bolder */
.savings-value span:first-child {
  font-size: 26px;   /* Bigger font for the main number */
  font-weight: 600;  /* Extra bold for the main number */
}

/* Make the percentage (second span) smaller but keep existing colors */
.savings-value span:nth-child(2) {
  font-size: 16px;   /* Smaller font for percentage */
  font-weight: 500;  /* Semi-bold for percentage */
}

/* Keep the arrow (third span) same size as percentage */
.savings-value span:nth-child(3) {
  font-size: 16px;   /* Same size as percentage */
  font-weight: 600;  /* Semi-bold for arrow */
}

/* Compact card styling */
.instance-comparison-card {
  background-color: #F5F5F5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: none;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 400px; /* Ensure minimum height for proper layout */
}

/* Remove old badge styles since we're using the new structure */
.baseline-badge, .chosen-badge, .instance-label {
  display: none !important;
}

/* Responsive design for instance comparison */
@media (max-width: 1200px) {
    .instance-comparison-container {
        flex-direction: column;
        gap: 16px;
    }
    
    .chosen-instance-card,
    .instance-comparison-card {
        flex: none;
    }
    
    .comparison-grid,
    .comparison-grid-3rows {
        min-height: 350px;
    }
}

@media (max-width: 768px) {
    .comparison-grid,
    .comparison-grid-3rows {
        min-height: 300px;
    }
    
    .grid-cell {
        min-height: 100px;
        padding: 8px 4px;
    }
    
    .header-main-text,
    .header-sub-text {
        font-size: 14px;
    }
    
    .baseline-value, .chosen-value {
        font-size: 20px;
    }
    
    .savings-value {
        font-size: 24px;
    }
    
    .savings-value span:first-child {
        font-size: 22px;
    }
}


/* --- YENİ: İKİNCİ INSTANCE DROPDOWN İÇİN ÖZEL CSS SINIFI --- */

/* İkinci instance dropdown için kompakt stil */
.secondary-instance-dropdown .Select-control,
.secondary-instance-dropdown .css-1s2u09g-control,
.secondary-instance-dropdown .css-1pahdxg-control {
  background-color: #2AACFD !important;
  border-radius: 12px !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  min-height: 38px !important;  /* Ana dropdown'dan daha kısa */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  transition: all 0.3s ease !important;
}

/* Hover efekti */
.secondary-instance-dropdown .Select-control:hover,
.secondary-instance-dropdown .css-1s2u09g-control:hover,
.secondary-instance-dropdown .css-1pahdxg-control:hover {
  background-color: #2AACFD !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  transform: translateY(-1px) !important;
}

/* Focus durumu */
.secondary-instance-dropdown .Select-control--is-focused,
.secondary-instance-dropdown .css-1s2u09g-control--is-focused,
.secondary-instance-dropdown .css-1pahdxg-control--is-focused {
  background-color: #2AACFD !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.3) !important;
}

/* Placeholder ve seçili değer - BEYAZ RENK ZORLA */
.secondary-instance-dropdown .Select-placeholder,
.secondary-instance-dropdown .Select-single-value,
.secondary-instance-dropdown .css-1uccc91-singleValue,
.secondary-instance-dropdown .css-1wa3eu0-placeholder,
.secondary-instance-dropdown .Select-value-label {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

/* Seçili değerin beyaz olması için ekstra kurallar */
.secondary-instance-dropdown .Select-control .Select-value,
.secondary-instance-dropdown .css-1s2u09g-control .css-1uccc91-singleValue,
.secondary-instance-dropdown .css-1pahdxg-control .css-1uccc91-singleValue {
  color: #FFFFFF !important;
}

/* Tüm içerik beyaz olsun */
.secondary-instance-dropdown .Select-control *,
.secondary-instance-dropdown .css-1s2u09g-control *,
.secondary-instance-dropdown .css-1pahdxg-control * {
  color: #FFFFFF !important;
}

/* Ok işareti beyaz olsun */
.secondary-instance-dropdown .Select-arrow,
.secondary-instance-dropdown .css-tlfecz-indicatorContainer,
.secondary-instance-dropdown .css-1gtu0rj-indicatorContainer {
  color: #FFFFFF !important;
}

.secondary-instance-dropdown .Select-arrow {
  border-top-color: #FFFFFF !important;
}

/* Temizle (X) butonu beyaz olsun */
.secondary-instance-dropdown .Select-clear-zone,
.secondary-instance-dropdown .css-1du7aaw-indicatorContainer,
.secondary-instance-dropdown .css-1gtu0rj-indicatorContainer svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* Input yazısı da beyaz olsun */
.secondary-instance-dropdown .Select-input > input,
.secondary-instance-dropdown input {
  color: #FFFFFF !important;
  font-size: 16px !important;
}

/* Dropdown menüsü (açıldığında) */
.secondary-instance-dropdown .Select-menu-outer,
.secondary-instance-dropdown .css-26l3qy-menu {
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
  margin-top: 4px !important;
  overflow: hidden !important;
}

/* Dropdown seçenekleri */
.secondary-instance-dropdown .Select-option,
.secondary-instance-dropdown .css-9jq23d-option {
  padding: 10px 16px !important;
  font-size: 14px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  transition: all 0.2s ease !important;
  color: #333333 !important;  /* Menü açıldığında siyah */
}

.secondary-instance-dropdown .Select-option:hover,
.secondary-instance-dropdown .css-9jq23d-option:hover {
  background-color: #f0f8ff !important;
  color: #2AACFD !important;
}

.secondary-instance-dropdown .Select-option.is-selected,
.secondary-instance-dropdown .css-9jq23d-option--is-selected {
  background-color: #2AACFD !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* Son seçenekte alt border olmasın */
.secondary-instance-dropdown .Select-option:last-child,
.secondary-instance-dropdown .css-9jq23d-option:last-child {
  border-bottom: none !important;
}

/* Dropdown menü içindeki textler siyah olsun */
.secondary-instance-dropdown .Select-menu *,
.secondary-instance-dropdown .css-26l3qy-menu * {
  color: #333333 !important;
}

/* Seçili değer için ekstra güçlü kurallar */
.secondary-instance-dropdown .Select-single-value,
.secondary-instance-dropdown [class*="singleValue"],
.secondary-instance-dropdown div[class*="singleValue"] {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* Kontrol alanındaki her şey beyaz olsun */
.secondary-instance-dropdown .Select-control-wrapper,
.secondary-instance-dropdown .Select-control,
.secondary-instance-dropdown [class*="control"] {
  color: #FFFFFF !important;
}

/* Placeholder için ekstra kural */
.secondary-instance-dropdown .Select-placeholder,
.secondary-instance-dropdown [class*="placeholder"] {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Checkbox styling for comparison option */
.checkbox-container {
  margin: 2px 0;
}

/* Dash Bootstrap checkbox styling */
.form-check {
  display: flex;
  align-items: center;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.form-check-input {
  width: 18px !important;
  height: 18px !important;
  margin-right: 10px !important;
  margin-left: 0 !important;
  border: 2px solid #2AACFD !important;
  border-radius: 4px !important;
  background-color: transparent !important;
  transition: all 0.2s ease !important;
}

.form-check-input:checked {
  background-color: #2AACFD !important;
  border-color: #2AACFD !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.3) !important;
  border-color: #2AACFD !important;
}

.form-check-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #4E5E66 !important;
  cursor: pointer !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
}

/* Clear second instance button styling */
.clear-second-instance-btn {
  background-color: #dc3545 !important;
  border: none !important;
  border-radius: 6px !important;
  color: white !important;
  padding: 6px 10px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  min-width: 32px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.clear-second-instance-btn:hover {
  background-color: #c82333 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3) !important;
}

.clear-second-instance-btn:active {
  transform: scale(0.95) !important;
  box-shadow: 0 1px 3px rgba(220, 53, 69, 0.3) !important;
}

/* Second instance container animation */
#second-instance-container {
  transition: all 0.3s ease-in-out !important;
  overflow: hidden !important;
}

/* When container is hidden */
#second-instance-container[style*="display: none"] {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* When container is visible */
#second-instance-container[style*="display: block"] {
  max-height: 200px !important;
  opacity: 1 !important;
  margin-bottom: 16px !important;
}

/* Secondary dropdown and clear button container */
.secondary-dropdown-container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Make secondary dropdown flex to fill space */
.secondary-dropdown-container .secondary-instance-dropdown {
  flex: 1 !important;
}

/* Enhanced secondary instance dropdown styling */
.secondary-instance-dropdown .Select-control,
.secondary-instance-dropdown .css-1s2u09g-control,
.secondary-instance-dropdown .css-1pahdxg-control {
  background-color: #2AACFD !important;
  border-radius: 12px !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  min-height: 38px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  transition: all 0.3s ease !important;
  border: none !important;
}

/* Hover effect for secondary dropdown */
.secondary-instance-dropdown .Select-control:hover,
.secondary-instance-dropdown .css-1s2u09g-control:hover,
.secondary-instance-dropdown .css-1pahdxg-control:hover {
  background-color: #1E88E5 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  transform: translateY(-1px) !important;
}

/* Focus state for secondary dropdown */
.secondary-instance-dropdown .Select-control--is-focused,
.secondary-instance-dropdown .css-1s2u09g-control--is-focused,
.secondary-instance-dropdown .css-1pahdxg-control--is-focused {
  background-color: #2AACFD !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.3) !important;
}

/* Secondary dropdown text styling - WHITE TEXT ENFORCED */
.secondary-instance-dropdown .Select-placeholder,
.secondary-instance-dropdown .Select-single-value,
.secondary-instance-dropdown .css-1uccc91-singleValue,
.secondary-instance-dropdown .css-1wa3eu0-placeholder,
.secondary-instance-dropdown .Select-value-label {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Arrow and clear icon for secondary dropdown */
.secondary-instance-dropdown .Select-arrow,
.secondary-instance-dropdown .css-tlfecz-indicatorContainer,
.secondary-instance-dropdown .css-1gtu0rj-indicatorContainer {
  color: #FFFFFF !important;
}

.secondary-instance-dropdown .Select-arrow {
  border-top-color: #FFFFFF !important;
}

/* Clear button in secondary dropdown */
.secondary-instance-dropdown .Select-clear-zone,
.secondary-instance-dropdown .css-1du7aaw-indicatorContainer {
  color: #FFFFFF !important;
}

/* Input text for secondary dropdown */
.secondary-instance-dropdown .Select-input > input,
.secondary-instance-dropdown input {
  color: #FFFFFF !important;
  font-size: 14px !important;
}

/* Dropdown menu for secondary dropdown */
.secondary-instance-dropdown .Select-menu-outer,
.secondary-instance-dropdown .css-26l3qy-menu {
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  border: 1px solid #E0E0E0 !important;
}

/* Menu options for secondary dropdown */
.secondary-instance-dropdown .Select-option,
.secondary-instance-dropdown .css-9jq23d-option {
  padding: 10px 16px !important;
  font-size: 14px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  transition: all 0.2s ease !important;
  color: #333333 !important;
}

.secondary-instance-dropdown .Select-option:hover,
.secondary-instance-dropdown .css-9jq23d-option:hover {
  background-color: #f0f8ff !important;
  color: #2AACFD !important;
}

.secondary-instance-dropdown .Select-option.is-selected,
.secondary-instance-dropdown .css-9jq23d-option--is-selected {
  background-color: #2AACFD !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* Remove border from last option */
.secondary-instance-dropdown .Select-option:last-child,
.secondary-instance-dropdown .css-9jq23d-option:last-child {
  border-bottom: none !important;
}

/* Ensure menu text is dark */
.secondary-instance-dropdown .Select-menu *,
.secondary-instance-dropdown .css-26l3qy-menu * {
  color: #333333 !important;
}

/* Additional enforcement for white text in control */
.secondary-instance-dropdown .Select-control *:not(.Select-menu *),
.secondary-instance-dropdown .css-1s2u09g-control *:not(.css-26l3qy-menu *),
.secondary-instance-dropdown .css-1pahdxg-control *:not(.css-26l3qy-menu *) {
  color: #FFFFFF !important;
}

/* Responsive design for checkbox system */
@media (max-width: 768px) {
  .secondary-dropdown-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  
  .clear-second-instance-btn {
    align-self: flex-end !important;
    width: auto !important;
  }
  
  .form-check-label {
    margin: 0 0 0 8px !important;     /* a bit of left‑gap to separate from the box */
    vertical-align: middle !important;
    line-height: 1 !important;        /* tight line‑height keeps it centered */
  }
}

/* Animation keyframes for smooth transitions */
@keyframes slideDownFadeIn {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    max-height: 200px;
    transform: translateY(0);
  }
}

@keyframes slideUpFadeOut {
  from {
    opacity: 1;
    max-height: 200px;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
}

/* Apply animations when container becomes visible/hidden */
#second-instance-container[style*="display: block"] {
  animation: slideDownFadeIn 0.3s ease-out;
}

#second-instance-container[style*="display: none"] {
  animation: slideUpFadeOut 0.3s ease-in;
}

/* Improve spacing for the new layout */
.chosen-instance-card .card-body > div > div {
  margin-bottom: 12px;
}

.chosen-instance-card .card-body > div > div:last-child {
  margin-bottom: 0;
}

/* Better visual hierarchy */
.chosen-instance-card label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #4E5E66;
  margin-bottom: 8px;
  display: block;
}

/* Selected instances display area */
.selected-instances-display {
  background-color: #F8F9FA;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid #E9ECEF;
}

.selected-instances-display .instance-display-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.selected-instances-display .instance-display-row:last-child {
  margin-bottom: 0;
}

.instance-label-text {
  font-weight: 500;
  font-size: 14px;
  color: #4E5E66;
  margin-right: 4px;
}

.instance-value-text {
  font-weight: 600;
  font-size: 14px;
  color: #2AACFD;
}

.instance-value-text.not-selected {
  color: #6C757D;
  font-style: italic;
}

/* Small clear button for instance 2 */
.clear-second-instance-btn-small {
  background-color: #dc3545 !important;
  border: none !important;
  border-radius: 4px !important;
  color: white !important;
  padding: 2px 6px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  min-width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 8px !important;
}

.clear-second-instance-btn-small:hover {
  background-color: #c82333 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3) !important;
}

.clear-second-instance-btn-small:active {
  transform: scale(0.9) !important;
  box-shadow: 0 1px 2px rgba(220, 53, 69, 0.3) !important;
}

/* Dynamic dropdown label styling */
#dropdown-label {
  transition: color 0.2s ease !important;
}

/* When selecting instance 2 */
.compare-mode #dropdown-label {
  color: #28A745 !important; /* Green color for instance 2 selection */
}

/* Enhanced checkbox styling with better visual feedback */
.checkbox-container {
  margin: 16px 0;
}

/* Dash Bootstrap checkbox styling */
.form-check {
  display: flex !important;
  align-items: center !important;  /* centers the box and text on the same baseline */
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

/* Kill any stray top‑margin and force true middle alignment */
.form-check-input {
  margin: 0 !important;             /* remove default margins */
  vertical-align: middle !important; 
}


.form-check-input:checked {
  background-color: #2AACFD !important;
  border-color: #2AACFD !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.3) !important;
  border-color: #2AACFD !important;
}

/* And keep the label at the same middle line */
.form-check-label {
  margin: 0 0 0 8px !important;     /* a bit of left‑gap to separate from the box */
  vertical-align: middle !important;
  line-height: 1 !important;        /* tight line‑height keeps it centered */
}

/* Clear second instance button styling */
.clear-second-instance-btn {
  background-color: #dc3545 !important;
  border: none !important;
  border-radius: 6px !important;
  color: white !important;
  padding: 6px 10px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  min-width: 32px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.clear-second-instance-btn:hover {
  background-color: #c82333 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3) !important;
}

.clear-second-instance-btn:active {
  transform: scale(0.95) !important;
  box-shadow: 0 1px 3px rgba(220, 53, 69, 0.3) !important;
}

/* Second instance container animation */
#second-instance-container {
  transition: all 0.3s ease-in-out !important;
  overflow: hidden !important;
}

/* When container is hidden */
#second-instance-container[style*="display: none"] {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* When container is visible */
#second-instance-container[style*="display: block"] {
  max-height: 200px !important;
  opacity: 1 !important;
  margin-bottom: 16px !important;
}

/* Secondary dropdown and clear button container */
.secondary-dropdown-container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Make secondary dropdown flex to fill space */
.secondary-dropdown-container .secondary-instance-dropdown {
  flex: 1 !important;
}

/* Enhanced secondary instance dropdown styling */
.secondary-instance-dropdown .Select-control,
.secondary-instance-dropdown .css-1s2u09g-control,
.secondary-instance-dropdown .css-1pahdxg-control {
  background-color: #2AACFD !important;
  border-radius: 16px !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  min-height: 38px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  transition: all 0.3s ease !important;
  border: none !important;
}

/* Hover effect for secondary dropdown */
.secondary-instance-dropdown .Select-control:hover,
.secondary-instance-dropdown .css-1s2u09g-control:hover,
.secondary-instance-dropdown .css-1pahdxg-control:hover {
  background-color: #1E88E5 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  transform: translateY(-1px) !important;
}

/* Focus state for secondary dropdown */
.secondary-instance-dropdown .Select-control--is-focused,
.secondary-instance-dropdown .css-1s2u09g-control--is-focused,
.secondary-instance-dropdown .css-1pahdxg-control--is-focused {
  background-color: #2AACFD !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.3) !important;
}

/* Secondary dropdown text styling - WHITE TEXT ENFORCED */
.secondary-instance-dropdown .Select-placeholder,
.secondary-instance-dropdown .Select-single-value,
.secondary-instance-dropdown .css-1uccc91-singleValue,
.secondary-instance-dropdown .css-1wa3eu0-placeholder,
.secondary-instance-dropdown .Select-value-label {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Arrow and clear icon for secondary dropdown */
.secondary-instance-dropdown .Select-arrow,
.secondary-instance-dropdown .css-tlfecz-indicatorContainer,
.secondary-instance-dropdown .css-1gtu0rj-indicatorContainer {
  color: #FFFFFF !important;
}

.secondary-instance-dropdown .Select-arrow {
  border-top-color: #FFFFFF !important;
}

/* Clear button in secondary dropdown */
.secondary-instance-dropdown .Select-clear-zone,
.secondary-instance-dropdown .css-1du7aaw-indicatorContainer {
  color: #FFFFFF !important;
}

/* Input text for secondary dropdown */
.secondary-instance-dropdown .Select-input > input,
.secondary-instance-dropdown input {
  color: #FFFFFF !important;
  font-size: 14px !important;
}

/* Dropdown menu for secondary dropdown */
.secondary-instance-dropdown .Select-menu-outer,
.secondary-instance-dropdown .css-26l3qy-menu {
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  border: 1px solid #E0E0E0 !important;
}

/* Menu options for secondary dropdown */
.secondary-instance-dropdown .Select-option,
.secondary-instance-dropdown .css-9jq23d-option {
  padding: 10px 16px !important;
  font-size: 14px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  transition: all 0.2s ease !important;
  color: #333333 !important;
}

.secondary-instance-dropdown .Select-option:hover,
.secondary-instance-dropdown .css-9jq23d-option:hover {
  background-color: #f0f8ff !important;
  color: #2AACFD !important;
}

.secondary-instance-dropdown .Select-option.is-selected,
.secondary-instance-dropdown .css-9jq23d-option--is-selected {
  background-color: #2AACFD !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* Remove border from last option */
.secondary-instance-dropdown .Select-option:last-child,
.secondary-instance-dropdown .css-9jq23d-option:last-child {
  border-bottom: none !important;
}

/* Ensure menu text is dark */
.secondary-instance-dropdown .Select-menu *,
.secondary-instance-dropdown .css-26l3qy-menu * {
  color: #333333 !important;
}

/* Additional enforcement for white text in control */
.secondary-instance-dropdown .Select-control *:not(.Select-menu *),
.secondary-instance-dropdown .css-1s2u09g-control *:not(.css-26l3qy-menu *),
.secondary-instance-dropdown .css-1pahdxg-control *:not(.css-26l3qy-menu *) {
  color: #FFFFFF !important;
}

/* Responsive design for checkbox system */
@media (max-width: 768px) {
  .secondary-dropdown-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  
  .clear-second-instance-btn {
    align-self: flex-end !important;
    width: auto !important;
  }
  
  .form-check-label {
    font-size: 13px !important;
  }
}

/* Animation keyframes for smooth transitions */
@keyframes slideDownFadeIn {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    max-height: 200px;
    transform: translateY(0);
  }
}

@keyframes slideUpFadeOut {
  from {
    opacity: 1;
    max-height: 200px;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
}

/* Apply animations when container becomes visible/hidden */
#second-instance-container[style*="display: block"] {
  animation: slideDownFadeIn 0.3s ease-out;
}

#second-instance-container[style*="display: none"] {
  animation: slideUpFadeOut 0.3s ease-in;
}

/* Improve spacing for the new layout */
.chosen-instance-card .card-body > div > div {
  margin-bottom: 12px;
}

.chosen-instance-card .card-body > div > div:last-child {
  margin-bottom: 0;
}

/* Better visual hierarchy */
.chosen-instance-card label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #4E5E66;
  margin-bottom: 8px;
  display: block;
}

/* Clear button inside comparison table - Instance 2 row */
#clear-instance-2-btn {
  background: #dc3545 !important;
  border: none !important;
  border-radius: 4px !important;
  color: white !important;
  padding: 2px 6px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  min-width: 20px !important;
  height: 20px !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(220, 53, 69, 0.3) !important;
}

#clear-instance-2-btn:hover {
  background: #c82333 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4) !important;
}

#clear-instance-2-btn:active {
  transform: scale(0.95) !important;
  box-shadow: 0 1px 2px rgba(220, 53, 69, 0.3) !important;
}

/* Ensure the label container in Instance 2 row has proper flex layout */
.blue-label-content .label-main-text {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

/* Override the background color inheritance for the clear button inside blue labels */
.blue-label-content #clear-instance-2-btn {
  background: #dc3545 !important; /* Force red background even inside blue container */
}

.blue-label-content #clear-instance-2-btn:hover {
  background: #c82333 !important; /* Force darker red on hover */
}

/* Clear button overlay in comparison table - positioned in top-right corner */
.clear-button-overlay {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  background: rgba(220, 53, 69, 0.9) !important;
  border: none !important;
  border-radius: 50% !important;
  color: white !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  z-index: 10 !important;
  line-height: 1 !important;
}

.clear-button-overlay:hover {
  background: rgba(200, 35, 51, 0.95) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3) !important;
}

.clear-button-overlay:active {
  transform: scale(0.95) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Ensure the blue label container can contain the absolutely positioned button */
.blue-label-content {
  position: relative !important;
  overflow: visible !important;
}

/* Make sure the button doesn't interfere with the text */
.blue-label-content .label-main-text,
.blue-label-content .label-sub-text {
  padding-right: 28px !important; /* Leave space for the button */
}

/* Blue label content - UPDATED for better centering */
.blue-label-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 80px;
  position: relative; /* X butonu için gerekli */
}

.blue-label-content .label-main-text {
  background-color: #2AACFD;
  color: #FFFFFF;
  border-radius: 6px 6px 0 0;
  padding: 8px 12px 6px 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center !important; /* Yazıyı ortala */
  width: 100%;
  min-width: 120px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* İçeriği ortala */
  position: relative; /* X butonu için */
}

.blue-label-content .label-sub-text {
  background-color: #2AACFD;
  color: #FFFFFF;
  border-radius: 0 0 6px 6px;
  padding: 6px 12px 8px 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center !important; /* Yazıyı ortala */
  width: 100%;
  min-width: 120px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* İçeriği ortala */
}

/* Plain label content - UPDATED for consistency */
.plain-label-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 80px;
}

.savings-main-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center !important; /* Yazıyı ortala */
  color: #2C3E50;
  padding: 4px 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* İçeriği ortala */
}

.savings-sub-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center !important; /* Yazıyı ortala */
  color: #2C3E50;
  padding: 4px 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* İçeriği ortala */
}

/* X Butonu - YENİ POZİSYON (aynı kalacak) */
#clear-instance-2-btn {
  position: absolute !important;
  right: 8px !important; /* Sağdan 8px içeride */
  top: 50% !important; /* Label container'ın tam ortasında */
  transform: translateY(-50%) !important; /* Dikey ortalama için */
  background: #dc3545 !important;
  border: none !important;
  border-radius: 50% !important; /* Yuvarlak yap */
  color: white !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important; /* Üstte görünmesi için */
}

#clear-instance-2-btn:hover {
  background: #c82333 !important;
  transform: translateY(-50%) scale(1.1) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3) !important;
}

#clear-instance-2-btn:active {
  transform: translateY(-50%) scale(0.95) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Bu CSS kurallarını custom.css dosyasına ekleyin veya mevcut olanları güncelleyin */

/* Sort-and-search container için kompakt stil */
.sort-and-search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px !important;          /* DEĞIŞEN: 20px'ten 8px'e */
  margin-bottom: 8px !important;       /* DEĞIŞEN: 16px'ten 8px'e */
}

/* Sort Order section için daha kompakt stil */
.sort-order-section {
  text-align: left !important;
  margin: 8px 10px !important;         /* DEĞIŞEN: 16px'ten 8px'e */
}

.sort-order-section label {
  display: block !important;
  text-align: left !important;
  margin-bottom: 4px !important;       /* DEĞIŞEN: 8px'ten 4px'e */
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* Instance parameters container için kompakt boşluk */
#instance-parameters {
  margin-top: 8px !important;          /* Inline style ile de ayarlanacak ama burada da belirtelim */
}

/* Parametre kartları için daha az boşluk */
#instance-parameters > div {
  margin-bottom: 2px !important;       /* Parametre kartları arası boşluk */
}

/* Checkbox container için daha az boşluk */
.checkbox-container {
  margin: 8px 0 !important;            /* DEĞIŞEN: 16px'ten 8px'e */
}

/* Sol panelin genel padding'ini azalt */
.chosen-instance-card .card-body {
  padding-top: 8px !important;         /* DEĞIŞEN: 16px'ten 8px'e */
  padding-bottom: 8px !important;      /* DEĞIŞEN: 16px'ten 8px'e */
}

/* Custom.css'e eklenecek Checkbox Dropdown stilleri */

/* Dropdown option'ları için checkbox container */
.custom-dropdown-option {
  padding: 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  transition: all 0.2s ease !important;
}

.custom-dropdown-option:hover {
  background-color: #f8f9ff !important;
}

.custom-dropdown-option:last-child {
  border-bottom: none !important;
}

/* Instance checkbox'ları */
.instance-checkbox-1,
.instance-checkbox-2 {
  width: 16px !important;
  height: 16px !important;
  border-radius: 3px !important;
  border: 2px solid #2AACFD !important;
  background-color: transparent !important;
}

.instance-checkbox-1:checked {
  background-color: #2AACFD !important;
  border-color: #2AACFD !important;
}

.instance-checkbox-2:checked {
  background-color: #28A745 !important;
  border-color: #28A745 !important;
}

/* Checkbox label'ları */
.checkbox-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #666 !important;
  margin-right: 8px !important;
}

/* Instance label */
.instance-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #333 !important;
  flex: 1 !important;
}

/* Dropdown option durumlarına göre renklendirme */
.dropdown-option-none-selected {
  background-color: #FFFFFF !important;
  color: #333333 !important;
}

.dropdown-option-one-selected {
  background-color: #E3F2FD !important;  /* Açık mavi */
  color: #1976D2 !important;
}

.dropdown-option-both-selected {
  background-color: #C8E6C9 !important;  /* Açık yeşil */
  color: #388E3C !important;
  font-weight: 600 !important;
}

/* Hover effects */
.dropdown-option-none-selected:hover {
  background-color: #F5F5F5 !important;
}

.dropdown-option-one-selected:hover {
  background-color: #BBDEFB !important;
}

.dropdown-option-both-selected:hover {
  background-color: #A5D6A7 !important;
}

/* Ana dropdown için enhanced styling */
.main-instance-dropdown-enhanced .Select-control,
.main-instance-dropdown-enhanced .css-1s2u09g-control,
.main-instance-dropdown-enhanced .css-1pahdxg-control {
  background-color: #2AACFD !important;
  border-radius: 16px !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  min-height: 48px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  transition: all 0.3s ease !important;
}

/* Multi-select indicator */
.multi-instance-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 6px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
}

.instance-1-badge {
  background-color: #2AACFD;
  color: white;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}

.instance-2-badge {
  background-color: #28A745;
  color: white;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}

/* Alternatif: Simpler button-based approach */
.instance-selector-buttons {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.instance-select-btn {
  width: 24px !important;
  height: 24px !important;
  border: none !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.instance-select-btn-1 {
  background-color: #E3F2FD !important;
  color: #1976D2 !important;
  border: 2px solid #1976D2 !important;
}

.instance-select-btn-1.selected {
  background-color: #2AACFD !important;
  color: white !important;
}

.instance-select-btn-2 {
  background-color: #E8F5E8 !important;
  color: #2E7D32 !important;
  border: 2px solid #2E7D32 !important;
}

.instance-select-btn-2.selected {
  background-color: #28A745 !important;
  color: white !important;
}

.instance-select-btn:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
}

/* Custom dropdown menu container */
.enhanced-dropdown-container {
  position: relative;
  width: 100%;
  z-index: 100;
}

.enhanced-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #E0E0E0;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 4px;
}

.enhanced-dropdown-option {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.enhanced-dropdown-option:hover {
  background-color: #f8f9ff;
}

.enhanced-dropdown-option:last-child {
  border-bottom: none;
}

.option-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  flex: 1;
}

.option-indicators {
  display: flex;
  gap: 4px;
  align-items: center;
}

.instance-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.instance-indicator-1 {
  background-color: #E3F2FD;
  color: #1976D2;
  border: 2px solid #1976D2;
}

.instance-indicator-1.active {
  background-color: #2AACFD;
  color: white;
}

.instance-indicator-2 {
  background-color: #E8F5E8;
  color: #2E7D32;
  border: 2px solid #2E7D32;
}

.instance-indicator-2.active {
  background-color: #28A745;
  color: white;
}

.instance-indicator:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Single Checkbox Per Instance - CSS stilleri custom.css dosyasının sonuna ekleyin */

/* Enhanced dropdown container */
.enhanced-dropdown-container {
  position: relative;
  width: 100%;
}

/* Enhanced dropdown menu */
.enhanced-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #E0E0E0;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 4px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

/* Dropdown menu visible state */
.enhanced-dropdown-menu[style*="display: block"] {
  opacity: 1;
  transform: translateY(0);
}

/* Enhanced dropdown option */
.enhanced-dropdown-option {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.enhanced-dropdown-option:hover {
  background-color: #f8f9ff;
}

.enhanced-dropdown-option:last-child {
  border-bottom: none;
}

/* Option label */
.option-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  flex: 1;
}

/* Option checkbox container */
.option-checkbox {
  display: flex;
  align-items: center;
}

/* Instance checkbox styling */
.instance-checkbox {
  margin: 0 !important;
  padding: 0 !important;
}

.instance-checkbox .form-check {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.instance-checkbox .form-check-input {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  border: 2px solid #2AACFD !important;
  background-color: transparent !important;
  margin: 0 !important;
  position: static !important;
  transition: all 0.2s ease !important;
}

.instance-checkbox .form-check-input:checked {
  background-color: #2AACFD !important;
  border-color: #2AACFD !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

.instance-checkbox .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.3) !important;
  border-color: #2AACFD !important;
}

/* Dropdown option states - seçili/seçili değil */
.dropdown-option-unselected {
  background-color: #FFFFFF !important;
  color: #333333 !important;
}

.dropdown-option-selected {
  background-color: #E3F2FD !important;  /* Açık mavi */
  color: #1976D2 !important;
  font-weight: 500 !important;
}

/* Hover effects */
.dropdown-option-unselected:hover {
  background-color: #F5F5F5 !important;
}

.dropdown-option-selected:hover {
  background-color: #BBDEFB !important;
}

/* Enhanced main dropdown trigger styling */
.main-instance-dropdown-enhanced {
  background-color: #2AACFD !important;
  border-radius: 16px !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  min-height: 48px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  transition: all 0.3s ease !important;
  position: relative;
  border: none !important;
}

/* Dropdown trigger after element for arrow */
.main-instance-dropdown-enhanced::after {
  content: "▼";
  position: absolute;
  right: 16px;
  font-size: 12px;
  transition: transform 0.3s ease;
  color: white;
}

/* Rotate arrow when dropdown is open */
.main-instance-dropdown-enhanced.open::after {
  transform: rotate(180deg);
}

/* Hover effect for main dropdown trigger */
.main-instance-dropdown-enhanced:hover {
  background-color: #1E88E5 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25) !important;
  transform: translateY(-1px) !important;
}

/* Focus state for main dropdown trigger */
.main-instance-dropdown-enhanced:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.3) !important;
}

/* Custom scrollbar for dropdown menu */
.enhanced-dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.enhanced-dropdown-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

.enhanced-dropdown-menu::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 6px;
}

.enhanced-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Hidden element for outside click detection */
#dummy-outside-click {
  display: none !important;
}

/* Instance badge styling in trigger */
.instance-badge-container {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.instance-badge {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 2px 6px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
}

/* Responsive design */
@media (max-width: 768px) {
  .enhanced-dropdown-option {
    padding: 10px 12px;
  }
  
  .option-label {
    font-size: 13px;
  }
  
  .instance-checkbox .form-check-input {
    width: 16px !important;
    height: 16px !important;
  }
  
  .main-instance-dropdown-enhanced {
    font-size: 14px !important;
    min-height: 44px !important;
  }
}

/* Loading state için */
.enhanced-dropdown-menu.loading {
  opacity: 0.7;
  pointer-events: none;
}

.enhanced-dropdown-menu.loading::after {
  content: "Loading...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #666;
  font-size: 12px;
}


/* ==========================================
   PERFORMANCE OPTIMIZATIONS CSS
   ========================================== */

/* 1. GPU Acceleration for smooth animations */
.main-instance-dropdown-enhanced,
.enhanced-dropdown-menu,
.search-toggle-button,
.instance-checkbox .form-check-input {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 2. Optimize dropdown menu rendering */
.enhanced-dropdown-menu {
  contain: layout style paint;
  transform: translate3d(0, 0, 0);
}

/* 3. Reduce reflows with containment */
.enhanced-dropdown-option {
  contain: layout style;
}

.grid-cell {
  contain: layout style;
}

.parameter-card {
  contain: layout style;
}

/* 4. Optimize checkbox animations */
.instance-checkbox .form-check-input {
  transition: all 0.15s ease !important; /* Reduced from 0.2s */
}

.instance-checkbox .form-check-input:checked {
  transform: scale(1) !important; /* Remove scaling for performance */
}

/* 5. Optimize hover effects */
.enhanced-dropdown-option:hover {
  transform: none !important; /* Remove transform for better performance */
}

.search-toggle-button:hover:not(:disabled) {
  transform: scale(1.02) !important; /* Reduced from 1.05 */
}

.search-toggle-button:active:not(:disabled) {
  transform: scale(0.98) !important; /* Reduced from 0.95 */
}

/* 6. Optimize progress bars */
.progress-fill {
  transition: width 0.2s ease !important; /* Reduced from 0.4s */
}

.progress-fill::after {
  animation: none; /* Disable shimmer for better performance */
}

/* 7. Reduce paint complexity */
.comparison-grid,
.comparison-grid-3rows {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* 8. Optimize font rendering */
.option-label,
.parameter-name,
.parameter-value-text {
  text-rendering: optimizeSpeed;
  font-smooth: never;
  -webkit-font-smoothing: subpixel-antialiased;
}

/* 9. Reduce composite layers */
.blue-label-content,
.plain-label-content {
  will-change: auto; /* Only animate when needed */
}

/* 10. Optimize modal for better performance */
.modal {
  contain: layout style paint;
}

.modal.show {
  contain: layout style paint;
}

/* 11. Optimize scrolling */
.enhanced-dropdown-menu {
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
}

/* 12. Disable expensive visual effects on low-end devices */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .progress-fill::after {
    display: none !important;
  }
  
  .search-toggle-button:hover:not(:disabled),
  .search-toggle-button:active:not(:disabled) {
    transform: none !important;
  }
}

/* 13. Optimize dropdown trigger */
.main-instance-dropdown-enhanced {
  transition: background-color 0.15s ease !important; /* Reduced transitions */
}

.main-instance-dropdown-enhanced:hover {
  transform: none !important; /* Remove transform for better performance */
}

/* 14. Performance-first focus states */
.enhanced-dropdown-option:focus,
.instance-checkbox .form-check-input:focus {
  outline: 2px solid #2AACFD;
  outline-offset: 1px;
  box-shadow: none !important; /* Remove expensive box-shadows */
}

/* 15. Optimize grid rendering */
.comparison-grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto 1fr 1fr 1fr;
  contain: layout;
}

.comparison-grid-3rows {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto 1fr 1fr 1fr;
  contain: layout;
}

/* 16. Performance hints for browsers */
.enhanced-dropdown-container {
  contain: layout style;
}

.custom-dropdown-trigger {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 17. Optimize checkbox container */
.option-checkbox {
  contain: layout style;
}

/* 18. Reduce paint on parameter cards */
#instance-parameters > div {
  contain: layout style paint;
}

/* 19. Critical loading optimization */
.search-input-container {
  transition: max-height 0.15s ease-in-out !important; /* Reduced from 0.25s */
}

/* 20. Memory optimization */
.instance-comparison-card {
  contain: layout style;
}

/* Performance monitoring (optional - remove in production) */
/* 
@keyframes performance-hint {
  0% { opacity: 1; }
  100% { opacity: 0.95; }
}

.performance-debug * {
  animation: performance-hint 0.1s ease-in-out;
}
*/

.virtual-dropdown-item {
  transition: background-color 0.2s ease;
  will-change: background-color;
}

.virtual-dropdown-item:hover {
  background-color: #F0F8FF !important;
}

.virtual-dropdown-item.selected {
  background-color: #E3F2FD !important;
  font-weight: 500;
}

.virtual-spacer-top,
.virtual-spacer-bottom {
  pointer-events: none;
  user-select: none;
}

#virtual-scroll-container {
  scrollbar-width: thin;
  scrollbar-color: #C1C1C1 #F1F1F1;
}

#virtual-scroll-container::-webkit-scrollbar {
  width: 8px;
}

#virtual-scroll-container::-webkit-scrollbar-track {
  background: #F1F1F1;
  border-radius: 4px;
}

#virtual-scroll-container::-webkit-scrollbar-thumb {
  background: #C1C1C1;
  border-radius: 4px;
}

#virtual-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #A8A8A8;
}

/* Performance optimizations */
.virtual-dropdown-item {
  contain: layout style;
  transform: translateZ(0);
}

#virtual-content {
  contain: layout style paint;
}

/* Bu CSS stillerini assets/style.css dosyanıza ekleyin */

/* Virtual dropdown container */
.enhanced-dropdown-container {
  position: relative;
  width: 100%;
}

/* Virtual scroll container */
.enhanced-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: white;
  border: 1px solid #E0E0E0;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-height: 400px;
  height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Virtual dropdown items */
.virtual-dropdown-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.virtual-dropdown-item:hover {
  background-color: #f8f9fa !important;
}

.virtual-dropdown-item.selected {
  background-color: #e3f2fd !important;
}

.virtual-dropdown-item:last-child {
  border-bottom: none;
}

/* Option label styling */
.option-label {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 14px;
  color: #333;
  font-family: "Poppins", sans-serif;
}

/* Option checkbox styling */
.option-checkbox {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 40px;
}

.instance-checkbox {
  margin: 0 !important;
}

.instance-checkbox .checkbox-item {
  margin-bottom: 0 !important;
}

/* Virtual spacers */
.virtual-spacer-top,
.virtual-spacer-bottom {
  width: 100%;
  flex-shrink: 0;
  pointer-events: none;
}

/* Main dropdown trigger */
.main-instance-dropdown-enhanced {
  background-color: #2AACFD !important;
  color: white !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 0px 16px !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 40px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  transition: all 0.3s ease !important;
}

.main-instance-dropdown-enhanced:hover {
  background-color: #1e90ff !important;
  transform: translateY(-1px);
}

/* Scrollbar styling */
.enhanced-dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.enhanced-dropdown-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.enhanced-dropdown-menu::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.enhanced-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Checkbox styling improvements */
.instance-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #2AACFD;
}

/* Fix for potential layout issues */
.virtual-dropdown-item * {
  box-sizing: border-box;
}

/* Ensure proper flex behavior */
.enhanced-dropdown-menu {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Updated comparison grid styling - 4 ve 5 instance için yeni sınıflar */

/* 3 instance için mevcut (değişiklik yok) */
.comparison-grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto 1fr 1fr 1fr; /* Header + 3 rows */
  row-gap: 0px;
  column-gap: 0px;
  height: 100%;
}

/* 4 instance için yeni grid */
.comparison-grid-4rows {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto 1fr 1fr 1fr 1fr; /* Header + 4 rows */
  row-gap: 0px;
  column-gap: 0px;
  height: 100%;
}

/* 5 instance için yeni grid */
.comparison-grid-5rows {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr; /* Header + 5 rows */
  row-gap: 0px;
  column-gap: 0px;
  height: 100%;
}

/* 6 instance için yeni grid (baseline + 5 instances) */
.comparison-grid-6rows {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr 1fr; /* Header + 6 rows */
  row-gap: 0px;
  column-gap: 0px;
  height: 100%;
}

/* Grid cell base styling - küçültülmüş padding */
.grid-cell {
  padding: 8px 6px; /* 12px 8px'ten küçültüldü */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px; /* 120px'ten küçültüldü */
}

/* 4 instance için daha küçük grid cells */
.comparison-grid-4rows .grid-cell {
  padding: 6px 4px;
  min-height: 70px;
}

/* 5 instance için en küçük grid cells */
.comparison-grid-5rows .grid-cell {
  padding: 4px 3px;
  min-height: 60px;
}

/* 6 instance için çok küçük grid cells */
.comparison-grid-6rows .grid-cell {
  padding: 3px 2px;
  min-height: 50px;
}

/* HEADER FONT SIZES - Instance sayısına göre */

/* 3 instance için header (varsayılan) */
.comparison-grid .header-main-text,
.comparison-grid .header-sub-text {
  font-size: 16px;
}

/* 4 instance için küçültülmüş header */
.comparison-grid-4rows .header-main-text,
.comparison-grid-4rows .header-sub-text {
  font-size: 14px;
  line-height: 90%;
}

/* 5 instance için en küçük header */
.comparison-grid-5rows .header-main-text,
.comparison-grid-5rows .header-sub-text {
  font-size: 12px;
  line-height: 85%;
}

/* 6 instance için ultra küçük header */
.comparison-grid-6rows .header-main-text,
.comparison-grid-6rows .header-sub-text {
  font-size: 11px;
  line-height: 80%;
}

/* LABEL FONT SIZES - Instance sayısına göre */

/* 3 instance için label (varsayılan) */
.comparison-grid .label-main-text,
.comparison-grid .label-sub-text {
  font-size: 16px;
  padding: 8px 12px 6px 12px;
}

/* 4 instance için küçültülmüş label */
.comparison-grid-4rows .label-main-text,
.comparison-grid-4rows .label-sub-text {
  font-size: 14px;
  padding: 6px 10px 4px 10px;
}

.comparison-grid-4rows .savings-main-text,
.comparison-grid-4rows .savings-sub-text {
  font-size: 14px;
  padding: 3px 0;
}

/* 5 instance için en küçük label */
.comparison-grid-5rows .label-main-text,
.comparison-grid-5rows .label-sub-text {
  font-size: 12px;
  padding: 4px 8px 3px 8px;
}

.comparison-grid-5rows .savings-main-text,
.comparison-grid-5rows .savings-sub-text {
  font-size: 12px;
  padding: 2px 0;
}

/* 6 instance için ultra küçük label */
.comparison-grid-6rows .label-main-text,
.comparison-grid-6rows .label-sub-text {
  font-size: 10px;
  padding: 3px 6px 2px 6px;
}

.comparison-grid-6rows .savings-main-text,
.comparison-grid-6rows .savings-sub-text {
  font-size: 10px;
  padding: 1px 0;
}

/* VALUE FONT SIZES - Instance sayısına göre */

/* 3 instance için value (varsayılan) */
.comparison-grid .baseline-value,
.comparison-grid .chosen-value {
  font-size: 24px;
  min-height: 80px;
}

.comparison-grid .savings-value {
  font-size: 30px;
}

.comparison-grid .savings-value span:first-child {
  font-size: 26px;
}

.comparison-grid .savings-value span:nth-child(2),
.comparison-grid .savings-value span:nth-child(3) {
  font-size: 16px;
}

/* 4 instance için küçültülmüş value */
.comparison-grid-4rows .baseline-value,
.comparison-grid-4rows .chosen-value {
  font-size: 20px;
  min-height: 65px;
}

.comparison-grid-4rows .savings-value {
  font-size: 24px;
}

.comparison-grid-4rows .savings-value span:first-child {
  font-size: 22px;
}

.comparison-grid-4rows .savings-value span:nth-child(2),
.comparison-grid-4rows .savings-value span:nth-child(3) {
  font-size: 14px;
}

/* 5 instance için en küçük value */
.comparison-grid-5rows .baseline-value,
.comparison-grid-5rows .chosen-value {
  font-size: 18px;
  min-height: 55px;
}

.comparison-grid-5rows .savings-value {
  font-size: 20px;
}

.comparison-grid-5rows .savings-value span:first-child {
  font-size: 18px;
}

.comparison-grid-5rows .savings-value span:nth-child(2),
.comparison-grid-5rows .savings-value span:nth-child(3) {
  font-size: 12px;
}

/* 6 instance için ultra küçük value */
.comparison-grid-6rows .baseline-value,
.comparison-grid-6rows .chosen-value {
  font-size: 16px;
  min-height: 45px;
}

.comparison-grid-6rows .savings-value {
  font-size: 18px;
}

.comparison-grid-6rows .savings-value span:first-child {
  font-size: 16px;
}

.comparison-grid-6rows .savings-value span:nth-child(2),
.comparison-grid-6rows .savings-value span:nth-child(3) {
  font-size: 10px;
}

/* BLUE LABEL CONTAINERS - Küçültülmüş min-height */

/* 4 instance için */
.comparison-grid-4rows .blue-label-content {
  min-height: 60px;
}

.comparison-grid-4rows .plain-label-content {
  min-height: 60px;
}

/* 5 instance için */
.comparison-grid-5rows .blue-label-content {
  min-height: 50px;
}

.comparison-grid-5rows .plain-label-content {
  min-height: 50px;
}

/* 6 instance için */
.comparison-grid-6rows .blue-label-content {
  min-height: 40px;
}

.comparison-grid-6rows .plain-label-content {
  min-height: 40px;
}

/* X BUTTON SIZING - Instance sayısına göre */

/* 4 instance için küçük X button */
.comparison-grid-4rows #clear-instance-2-btn,
.comparison-grid-4rows #clear-instance-3-btn,
.comparison-grid-4rows #clear-instance-4-btn {
  width: 18px !important;
  height: 18px !important;
  font-size: 12px !important;
  right: 6px !important;
}

/* 5 instance için çok küçük X button */
.comparison-grid-5rows #clear-instance-2-btn,
.comparison-grid-5rows #clear-instance-3-btn,
.comparison-grid-5rows #clear-instance-4-btn,
.comparison-grid-5rows #clear-instance-5-btn {
  width: 16px !important;
  height: 16px !important;
  font-size: 10px !important;
  right: 4px !important;
}

/* 6 instance için ultra küçük X button */
.comparison-grid-6rows #clear-instance-2-btn,
.comparison-grid-6rows #clear-instance-3-btn,
.comparison-grid-6rows #clear-instance-4-btn,
.comparison-grid-6rows #clear-instance-5-btn,
.comparison-grid-6rows #clear-instance-6-btn {
  width: 14px !important;
  height: 14px !important;
  font-size: 9px !important;
  right: 3px !important;
}

/* COMPACT CARD STYLING - Dinamik yükseklik */
.instance-comparison-card {
  background-color: #F5F5F5;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: none;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 400px; /* 3 instance için */
}

/* 4 instance için biraz daha yüksek */
.comparison-grid-4rows.instance-comparison-card {
  min-height: 420px;
}

/* 5 instance için en yüksek */
.comparison-grid-5rows.instance-comparison-card {
  min-height: 440px;
}

/* 6 instance için ultra yüksek */
.comparison-grid-6rows.instance-comparison-card {
  min-height: 460px;
}

/* Responsive design updates */
@media (max-width: 1200px) {
  .comparison-grid-4rows,
  .comparison-grid-5rows,
  .comparison-grid-6rows {
    min-height: 380px;
  }
}

@media (max-width: 768px) {
  .comparison-grid-4rows .grid-cell {
    min-height: 60px;
    padding: 4px 2px;
  }
  
  .comparison-grid-5rows .grid-cell {
    min-height: 50px;
    padding: 3px 1px;
  }
  
  .comparison-grid-6rows .grid-cell {
    min-height: 45px;
    padding: 2px 1px;
  }
  
  .comparison-grid-4rows .header-main-text,
  .comparison-grid-4rows .header-sub-text {
    font-size: 12px;
  }
  
  .comparison-grid-5rows .header-main-text,
  .comparison-grid-5rows .header-sub-text {
    font-size: 10px;
  }
  
  .comparison-grid-6rows .header-main-text,
  .comparison-grid-6rows .header-sub-text {
    font-size: 9px;
  }
  
  .comparison-grid-4rows .baseline-value,
  .comparison-grid-4rows .chosen-value {
    font-size: 16px;
  }
  
  .comparison-grid-5rows .baseline-value,
  .comparison-grid-5rows .chosen-value {
    font-size: 14px;
  }
  
  .comparison-grid-6rows .baseline-value,
  .comparison-grid-6rows .chosen-value {
    font-size: 12px;
  }
}

/* CSS dosyanıza eklenecek grid sınıfları */

.comparison-grid-6rows {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  grid-template-rows: repeat(6, auto);
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.comparison-grid-5rows {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  grid-template-rows: repeat(5, auto);
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.comparison-grid-4rows {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Checkbox styling improvements */
.instance-checkbox input[type="checkbox"] {
  transform: scale(1.3) !important;
  margin: 0 !important;
  cursor: pointer;
  accent-color: #2AACFD;
}

.virtual-dropdown-item.selected {
  background-color: #E3F2FD !important;
  border-left: 3px solid #2AACFD !important;
  font-weight: 600;
}

.virtual-dropdown-item:hover {
  background-color: #F5F5F5 !important;
}

/* Clear button styling */
.clear-button-overlay:hover {
  background-color: rgba(220, 53, 69, 1) !important;
  transform: scale(1.1);
}

/* INSTANCE COMPARISON GRID - TEMİZ GÖRÜNÜM */

/* 1. Ana grid konteynerleri */
.comparison-grid,
.comparison-grid-3rows,
.comparison-grid-4rows,
.comparison-grid-5rows,
.comparison-grid-6rows {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  row-gap: 0px;
  column-gap: 0px;
  height: 100%;
  background-color: #F5F5F5; /* Sabit arka plan rengi */
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* 2. Grid cell'ler için temiz stil */
.grid-cell {
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: none !important;
  background-color: #F5F5F5 !important; /* Sabit arka plan - zebra striping yok */
  position: relative;
}

/* 3. Sadece VALUE CELL'lerde yatay çizgi (mavi kutulardan sonra) */
.value-cell::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #DEE2E6;
  z-index: 1;
}

/* 4. Header'lar için özel alt çizgi (daha kalın) */
.grid-header.value-cell::after,
.grid-header:not(:first-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #DEE2E6;
  z-index: 2;
}

/* 5. İlk sütun (label cell'ler) için çizgi YOK */
.label-cell::after {
  display: none !important;
}

/* 6. İlk header cell (boş olan) için çizgi yok */
.grid-header:first-child::after {
  display: none !important;
}


.comparison-grid-5rows .value-cell:nth-child(n+21)::after { /* 5 satır için son satır */
  display: none;
}

.comparison-grid-6rows .value-cell:nth-child(n+25)::after { /* 6 satır için son satır */
  display: none;
}


/* 5 instance için: satır 6'da son (21,22,23,24. elementler) */
.comparison-grid-5rows .grid-cell:nth-child(21)::after,
.comparison-grid-5rows .grid-cell:nth-child(22)::after,
.comparison-grid-5rows .grid-cell:nth-child(23)::after,
.comparison-grid-5rows .grid-cell:nth-child(24)::after {
  display: none !important;
}

/* 9. Header satırı için stil */
.grid-header {
  background-color: #F5F5F5 !important; /* Aynı arka plan rengi */
  font-weight: 600;
  color: #4E5E66;
}

/* 10. Label cell'ler için stil */
.label-cell {
  justify-content: center;
  text-align: center;
  padding: 8px;
  min-height: 120px;
  background-color: #F5F5F5 !important;
}

/* 11. Value cell'ler için stil */
.value-cell {
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  background-color: #F5F5F5 !important;
}

/* 12. Baseline ve Chosen instance değerleri */
.baseline-value, .chosen-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #2C3E50;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
}

/* 13. Savings değerleri */
.savings-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #2C3E50;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: inherit;
}

/* 14. Instance comparison card */
.instance-comparison-card {
  background-color: #F5F5F5 !important;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: none;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  overflow: hidden;
}

/* 15. Blue label content (mavi kutular) - arka plan korunuyor */
.blue-label-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 80px;
  position: relative;
  border-radius: 16px;
}

.blue-label-content .label-main-text {
  background-color: #2AACFD;
  color: #FFFFFF;
  border-radius: 16px 16px 0 0;
  padding: 8px 12px 6px 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  width: 100%;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.blue-label-content .label-sub-text {
  background-color: #2AACFD;
  color: #FFFFFF;
  border-radius: 0 0 16px 16px;
  padding: 6px 12px 8px 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  width: 100%;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 16. Plain label content (savings için) */
.plain-label-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 80px;
}

.savings-main-text, .savings-sub-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #2C3E50;
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 17. Header text styling */
.header-main-text, .header-sub-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #4E5E66;
}

.header-sub-text {
  margin-top: 8px;
}

/* 18. Responsive düzeltmeler */
@media (max-width: 1200px) {
  .grid-cell {
    min-height: 100px;
    padding: 10px 6px;
  }
}

@media (max-width: 768px) {
  .grid-cell {
    min-height: 80px;
    padding: 8px 4px;
  }
  
  .header-main-text, .header-sub-text {
    font-size: 14px;
  }
  
  .baseline-value, .chosen-value {
    font-size: 20px;
  }
  
  .savings-value {
    font-size: 24px;
  }
}

/* 19. Çok instance için kompakt boyutlar */
.comparison-grid-4rows .grid-cell {
  min-height: 100px;
  padding: 8px 6px;
}

.comparison-grid-5rows .grid-cell {
  min-height: 83px;
  padding: 8px 6px;
}

.comparison-grid-6rows .grid-cell {
  min-height: 70px;
  padding: 4px 3px;
}

/* 20. Clear button styling (X butonları) korunuyor */
.clear-button-overlay {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  background: rgba(220, 53, 69, 0.9) !important;
  border: none !important;
  border-radius: 50% !important;
  color: white !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  z-index: 10 !important;
  line-height: 1 !important;
}

.clear-button-overlay:hover {
  background: rgba(200, 35, 51, 0.95) !important;
  transform: scale(1.1) !important;
}

/* 21. Tüm dikey çizgileri kaldır - DİKEY ÇİZGİ YOK */
.grid-cell::before {
  display: none !important;
}

/* DROPDOWN CHECKBOX DİKEY ORTALAMA VE BEYAZ TİK İÇİN GÜNCEL STİLLER */

/* 1. Checkbox'ın bulunduğu satırı ve container'ını dikeyde ortala */
.virtual-dropdown-item, .option-checkbox {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 2. Satırın tüm yüksekliğini kullanmasını sağla */
.option-checkbox {
  height: 100% !important;
}

/* 3. Dash'in oluşturduğu iç checklist container'ının margin'lerini sıfırla */
.instance-checkbox .form-check {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 100%;
}

/* 4. Checkbox kutusunun kendisini dikeyde ortala */
.instance-checkbox .form-check-input {
  position: static !important;
  margin-top: 0 !important; /* Dikey hizalamayı bozan margin'i kaldır */
  margin-bottom: 0 !important;
}

/* 5. İşaretlendiğinde BEYAZ TİK görünmesini sağla */
.instance-checkbox .form-check-input:checked {
  background-color: #2AACFD !important;
  border-color: #2AACFD !important;
  /* Beyaz renkli (stroke='%23ffffff') SVG tick */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 70% !important; /* Tik boyutunu ayarla */
}

.instance-checkbox-centered {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    margin: 0 !important;
}

.instance-checkbox-centered .form-check {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    height: 100% !important;
    min-height: 40px !important;
}

.instance-checkbox-centered .form-check-input {
    position: relative !important;
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #2AACFD !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    cursor: pointer !important;
    transform: translateY(0) !important; /* Tam ortaya al */
}

.instance-checkbox-centered .form-check-input:checked {
    background-color: #2AACFD !important;
    border-color: #2AACFD !important;
}

/* Beyaz tik işareti için */
.instance-checkbox-centered .form-check-input:checked::before {
    content: "✓" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 1 !important;
}

/* Hover efekti */
.instance-checkbox-centered .form-check-input:hover {
    border-color: #107ABC !important;
    box-shadow: 0 0 0 2px rgba(42, 172, 253, 0.2) !important;
}

/* Focus efekti */
.instance-checkbox-centered .form-check-input:focus {
    outline: none !important;
    border-color: #107ABC !important;
    box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.3) !important;
}

/* Cross-browser uyumlu checkbox stilleri */

.instance-checkbox-centered {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    margin: 0 !important;
}

.instance-checkbox-centered .form-check {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    height: 100% !important;
    min-height: 40px !important;
}

.instance-checkbox-centered .form-check-input {
    /* Varsayılan checkbox görünümünü kapat */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* Temel boyut ve konum */
    position: relative !important;
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    
    /* Border ve background */
    border: 2px solid #2AACFD !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    cursor: pointer !important;
    
    /* Bootstrap override */
    background-image: none !important;
    background-size: auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* Flexbox center */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Checked state - her iki tarayıcı için */
.instance-checkbox-centered .form-check-input:checked {
    background-color: #2AACFD !important;
    border-color: #2AACFD !important;
    background-image: none !important;
}

/* Chrome için beyaz tik */
.instance-checkbox-centered .form-check-input:checked::after {
    content: "✓" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    display: block !important;
}

/* Safari için beyaz tik (::before kullan) */
.instance-checkbox-centered .form-check-input:checked::before {
    content: "✓" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    display: block !important;
}

/* Bootstrap checkbox override - daha güçlü selector */
.instance-checkbox-centered input[type="checkbox"].form-check-input:checked {
    background-color: #2AACFD !important;
    border-color: #2AACFD !important;
    background-image: none !important;
    background-size: auto !important;
}

/* Hover efekti */
.instance-checkbox-centered .form-check-input:hover {
    border-color: #107ABC !important;
    box-shadow: 0 0 0 2px rgba(42, 172, 253, 0.2) !important;
}

/* Focus efekti */
.instance-checkbox-centered .form-check-input:focus {
    outline: none !important;
    border-color: #107ABC !important;
    box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.3) !important;
}

/* Chrome ve Safari'de farklı davranışlar için */
@supports (-webkit-appearance: none) {
    .instance-checkbox-centered .form-check-input:checked::after {
        content: "✓" !important;
        color: white !important;
    }
}

/* Firefox için özel düzenleme */
@-moz-document url-prefix() {
    .instance-checkbox-centered .form-check-input:checked::before {
        content: "✓" !important;
        color: white !important;
    }
}

/* Alternatif çözüm: Unicode checkmark karakteri kullan */
.instance-checkbox-centered .form-check-input:checked::after,
.instance-checkbox-centered .form-check-input:checked::before {
    content: "✓" !important; /* veya content: "✔" !important; */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 1 !important;
}

/* Alternatif yaklaşım: Eğer yukarıdaki çalışmazsa, class bazlı yaklaşım */
.value-column-header {
  border-bottom: 1px solid #DEE2E6 !important;
}

.label-column-header {
  border-bottom: none !important;
}

/* Value cell çizgilerini koru */
.value-cell::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #DEE2E6;
  z-index: 1;
}

/* Label cell çizgisini kaldır */
.label-cell::after {
  display: none !important;
}

/* INSTANCE COMPARISON HEADER ÇİZGİSİ İÇİN EZİCİ KURAL */

/* Bu kural, eski `.grid-header` kuralındaki istenmeyen
  `border-bottom` özelliğini tüm başlık hücreleri için kaldırır.
  `!important` ifadesi, bu kuralın diğerlerinden daha öncelikli 
  olmasını garanti eder.
*/
.grid-header {
  border-bottom: none !important;
}

/* Bu kural zaten dosyanızda mevcut ve doğru çalışıyor.
  Yukarıdaki düzeltme sayesinde artık bu kural, çizgiyi
  sadece olması gereken yere (ikinci kolondan itibaren) çizecektir.
  Tekrar eklemenize gerek yoktur.
*/
.grid-header:not(:first-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #DEE2E6;
  z-index: 2;
}

/* INSTANCE COMPARISON HEADER ÇİZGİSİ İÇİN EZİCİ KURAL */
.grid-header {
  border-bottom: none !important;
}

/* Uyarı alanı için genel stil */
#selection-warning-area {
  transition: color 0.3s ease, transform 0.2s ease;
  min-height: 22px;
  display: flex;
  align-items: center;
}

/* Uyarı mesajı animasyonu */
@keyframes pulse {
  0% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.02);
  }
  100% { 
    opacity: 1; 
    transform: scale(1);
  }
}

@keyframes fadeInWarning {
  0% { 
    opacity: 0; 
    transform: translateY(-5px);
  }
  100% { 
    opacity: 1; 
    transform: translateY(0);
  }
}

/* Uyarı mesajı için stil */
.warning-message {
  color: #DC3545 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  animation: fadeInWarning 0.3s ease-out, pulse 1.5s ease-in-out !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px;
}

/* Normal "Select Instances:" label için stil */
.normal-label {
  color: #4E5E66 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.3s ease;
}

/* Uyarı ikonu için stil */
.warning-icon {
  font-size: 16px;
  margin-right: 4px;
  color: #DC3545;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Hover efekti - dropdown'a tıklamaya teşvik */
.enhanced-dropdown-container:hover #selection-warning-area .warning-message {
  color: #B02A37 !important;
  transform: scale(1.02);
}

/* Uyarı durumunda dropdown trigger'a hafif kırmızı glow ekle */
.warning-active .main-instance-dropdown-enhanced {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 0 0 2px rgba(220, 53, 69, 0.3) !important;
}

/* Responsive uyarı mesajı */
@media (max-width: 768px) {
  #selection-warning-area {
    font-size: 12px !important;
    min-height: 20px;
  }
  
  .warning-message {
    font-size: 12px !important;
  }
  
  .normal-label {
    font-size: 12px !important;
  }
  
  .warning-icon {
    font-size: 14px;
  }
}

/* Smooth geçiş efektleri */
#selection-warning-area span {
  transition: all 0.3s ease;
}

/* Uyarı mesajı için özel container */
.warning-container {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin: 0;
}

/* Subtle shadow for better readability */
.warning-message {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Sabit uyarı alanı stilleri */
#selection-warning-area {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  overflow: hidden !important;
  transition: none !important; /* Layout kaymasını önle */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}

/* 2 satırlık uyarı mesajı için container */
.warning-message-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 44px !important;
  line-height: 20px !important;
  gap: 2px !important;
}

/* Her satır için stil */
.warning-line {
  color: #DC3545 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Uyarı animasyonu - sadece opacity değişsin, boyut değil */
@keyframes fadeInWarning {
  0% { 
    opacity: 0;
  }
  100% { 
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% { 
    opacity: 1;
  }
  50% { 
    opacity: 0.8;
  }
}

/* Layout sabitliği için önemli kurallar */
.enhanced-dropdown-container {
  position: relative !important;
}

.main-instance-dropdown-enhanced {
  margin-top: 0 !important;
  position: relative !important;
}

/* Uyarı durumunda dropdown glow efekti - boyut değişmez */
.warning-active .main-instance-dropdown-enhanced {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 0 0 2px rgba(220, 53, 69, 0.3) !important;
  transform: none !important; /* Transform'u kaldır, layout bozulmasın */
}

/* Responsive için sabit yükseklikler */
@media (max-width: 768px) {
  #selection-warning-area {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    font-size: 12px !important;
  }
  
  .warning-message-container {
    height: 40px !important;
    line-height: 18px !important;
  }
  
  .warning-line {
    font-size: 12px !important;
    line-height: 18px !important;
  }
}

/* Boş durumda da sabit yükseklik koru */
#selection-warning-area:empty {
  height: 44px !important;
  min-height: 44px !important;
}

#selection-warning-area > div:empty {
  height: 44px !important;
  min-height: 44px !important;
}

/* N/A değerleri için özel stil */
.na-value {
  color: #6C757D !important;
  font-style: italic !important;
  font-weight: 400 !important;
  opacity: 0.8;
}

/* Karşılaştırma tablosunda N/A değerleri */
.comparison-grid .na-value,
.comparison-grid-3rows .na-value,
.comparison-grid-4rows .na-value,
.comparison-grid-5rows .na-value {
  font-size: 18px !important;
  color: #6C757D !important;
  font-style: italic !important;
}

/* Savings N/A değerleri */
.savings-na {
  color: #6C757D !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 20px !important;
}

/* Hover efekti N/A değerler için */
.na-value:hover {
  opacity: 1;
  color: #495057 !important;
}

/* ==========================================
   CUSTOM.CSS DEĞİŞİKLİKLERİ
   ========================================== */

/* GÜNCELLEME 1: Enhanced dropdown menu yüksekliğini 360px'e güncelle */
.enhanced-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #E0E0E0;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  z-index: 1000;
  height: 360px !important;           /* 400px'den 360px'e güncellendi */
  max-height: 360px !important;       /* 400px'den 360px'e güncellendi */
  min-height: 360px !important;       /* 400px'den 360px'e güncellendi */
  overflow-y: auto;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

/* GÜNCELLEME 2: Virtual scroll container da 360px */
#virtual-scroll-container {
  height: 360px !important;           /* 400px'den 360px'e güncellendi */
  max-height: 360px !important;       /* 400px'den 360px'e güncellendi */ 
  min-height: 360px !important;       /* 400px'den 360px'e güncellendi */
  scrollbar-width: thin;
  scrollbar-color: #C1C1C1 #F1F1F1;
}

#virtual-scroll-container::-webkit-scrollbar {
  width: 6px;
}

#virtual-scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

#virtual-scroll-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

#virtual-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* GÜNCELLEME 3: Warning overlay için düzeltilmiş stiller */
.warning-overlay {
  position: absolute !important;
  /* Dropdown kapalıyken: trigger'ın altında */
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1001 !important; /* Dropdown'dan daha üstte */
  
  /* Arkaplan efektleri */
  background-color: rgba(248, 249, 250, 0.98) !important; /* Daha opak */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  
  /* Kenarlık ve gölge */
  border: 2px solid #DC3545 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4) !important;
  
  /* Boyut ve padding */
  padding: 12px 16px !important;
  min-height: 44px !important;
  height: auto !important;
  max-height: 80px !important;
  
  /* Flex layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Overflow kontrolü */
  overflow: hidden !important;
  
  /* Animasyon */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateY(-5px) !important;
  opacity: 0 !important;
}

/* GÜNCELLEME 4: Dropdown açıkken uyarı mesajını menünün altına taşı */
.enhanced-dropdown-container.dropdown-open .warning-overlay {
  top: calc(100% + 360px + 12px) !important; /* trigger (100%) + dropdown height (360px) + margin (12px) */
}

/* Warning overlay - visible state */
.warning-overlay[style*="opacity: 1"] {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* Warning content styling */
.warning-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 100% !important;
}

.warning-icon {
  font-size: 18px !important;
  margin-right: 8px !important;
  color: #DC3545 !important;
  animation: pulse 1.5s ease-in-out infinite !important;
}

.warning-text-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

.warning-text-line {
  color: #DC3545 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Poppins", sans-serif !important;
  white-space: nowrap !important;
}

/* Warning overlay hover effect */
.warning-overlay:hover {
  border-color: #B02A37 !important;
  box-shadow: 0 10px 30px rgba(220, 53, 69, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* GÜNCELLEME 5: Enhanced dropdown container - dropdown açıkken ek margin */
.enhanced-dropdown-container.dropdown-open {
  margin-bottom: 120px !important; /* Dropdown (360px) + uyarı alanı (60px) için ek boşluk */
}

.enhanced-dropdown-container.dropdown-open.warning-active {
  margin-bottom: 140px !important; /* Daha fazla boşluk uyarı varken */
}

/* Animasyonlar */
@keyframes fadeInWarning {
  0% { 
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  100% { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulse {
  0%, 100% { 
    opacity: 1;
    transform: scale(1);
  }
  50% { 
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .enhanced-dropdown-menu {
    height: 360px !important;
    max-height: 360px !important;
    min-height: 360px !important;
  }
  
  #virtual-scroll-container {
    height: 360px !important;
    max-height: 360px !important;
    min-height: 360px !important;
  }
  
  .warning-overlay {
    padding: 10px 12px !important;
    min-height: 40px !important;
    max-height: 70px !important;
  }
  
  .warning-text-line {
    font-size: 12px !important;
    line-height: 16px !important;
  }
  
  .warning-icon {
    font-size: 16px !important;
    margin-right: 6px !important;
  }
  
  /* Mobile'da dropdown açıkken pozisyon */
  .enhanced-dropdown-container.dropdown-open .warning-overlay {
    top: calc(100% + 360px + 8px) !important; /* Biraz daha az margin mobile'da */
  }
  
  .enhanced-dropdown-container.dropdown-open {
    margin-bottom: 100px !important;
  }
  
  .enhanced-dropdown-container.dropdown-open.warning-active {
    margin-bottom: 120px !important;
  }
}

/* Dropdown ve uyarı alanı arasında smooth geçiş */
.enhanced-dropdown-container {
  transition: margin-bottom 0.3s ease !important;
}

/* Performance optimizations */
.warning-overlay {
  will-change: transform, opacity !important;
  contain: layout style paint !important;
}

/* Z-index hierarchy */
.enhanced-dropdown-menu {
  z-index: 1000 !important;
}

.warning-overlay {
  z-index: 1001 !important;
}

/* Özel focus state for accessibility */
.warning-overlay:focus-within {
  outline: 2px solid #DC3545 !important;
  outline-offset: 2px !important;
}

/* Print media için */
@media print {
  .warning-overlay {
    display: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .warning-overlay {
    border-width: 3px !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
  }
  
  .warning-text-line {
    font-weight: 700 !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .warning-overlay {
    transition: none !important;
    animation: none !important;
  }
  
  .warning-icon {
    animation: none !important;
  }
  
  .enhanced-dropdown-menu {
    transition: none !important;
  }
}

/* ESKİ UYARI ALANI STİLLERİNİ KALDIRMA/DEVREDIŞı BIRAKMA */
#selection-warning-area {
  display: none !important; /* Eski uyarı alanını gizle */
}

/* Instance parameters için ek z-index - uyarı bunların üstünde görünsün */
#instance-parameters {
  position: relative;
  z-index: 500; /* Warning overlay'den düşük */
}

/* Enhanced dropdown container */
.enhanced-dropdown-container {
  position: relative;
  width: 100%;
  z-index: 999;
}

/* Virtual dropdown items */
.virtual-dropdown-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.virtual-dropdown-item:hover {
  background-color: #f8f9fa !important;
}

.virtual-dropdown-item.selected {
  background-color: #e3f2fd !important;
}

.virtual-dropdown-item:last-child {
  border-bottom: none;
}

/* Option label styling */
.option-label {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 14px;
  color: #333;
  font-family: "Poppins", sans-serif;
}

/* Option checkbox styling */
.option-checkbox {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 40px;
}

.instance-checkbox {
  margin: 0 !important;
}

.instance-checkbox .checkbox-item {
  margin-bottom: 0 !important;
}

/* Virtual spacers */
.virtual-spacer-top,
.virtual-spacer-bottom {
  width: 100%;
  flex-shrink: 0;
  pointer-events: none;
}

/* Main dropdown trigger */
.main-instance-dropdown-enhanced {
  background-color: #2AACFD !important;
  color: white !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 0px 16px !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 40px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  transition: all 0.3s ease !important;
}

.main-instance-dropdown-enhanced:hover {
  background-color: #1e90ff !important;
  transform: translateY(-1px);
}

/* Checkbox styling improvements */
.instance-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #2AACFD;
}

/* Fix for potential layout issues */
.virtual-dropdown-item * {
  box-sizing: border-box;
}

/* Ensure proper flex behavior */
.enhanced-dropdown-menu {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}
/* ÇÖZÜM 2: Dropdown açıldığında margin eklemeyi tamamen kaldır */
.enhanced-dropdown-container.dropdown-open {
  margin-bottom: 16px !important; /* Değişmeyen margin */
}

.enhanced-dropdown-container.dropdown-open.warning-active {
  margin-bottom: 16px !important; /* Değişmeyen margin */
}

/* EK KURALLAR - Smooth warning transitions için */

/* Warning overlay için özel transition states */
.warning-overlay.show {
  display: flex !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.warning-overlay.hide {
  opacity: 0 !important;
  transform: translateY(-5px) !important;
  pointer-events: none !important;
}

/* Enhanced dropdown container transitions */
.enhanced-dropdown-container {
  transition: margin-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Warning overlay position transitions */
.warning-overlay {
  transition: 
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Dropdown state indicator (opsiyonel - debug için) */
.enhanced-dropdown-container::after {
  content: attr(data-state);
  position: absolute;
  top: -20px;
  right: 0;
  font-size: 10px;
  color: #666;
  background: rgba(0,0,0,0.1);
  padding: 2px 6px;
  border-radius: 3px;
  display: none; /* Production'da gizle */
}

/* DEBUG MODE - Geliştirme sırasında aktif et */
.debug-mode .enhanced-dropdown-container::after {
  display: block;
}

/* Warning için özel z-index yönetimi */
.enhanced-dropdown-container.warning-active {
  isolation: isolate; /* Yeni stacking context oluştur */
}

.enhanced-dropdown-container.warning-active .warning-overlay {
  z-index: 1002 !important; /* Daha yüksek z-index */
}

/* Mobile responsive warning adjustments */
@media (max-width: 768px) {
  .warning-overlay {
    padding: 10px 12px !important;
    min-height: 40px !important;
    max-height: 70px !important;
    font-size: 12px !important;
  }
  
  .warning-text-line {
    font-size: 12px !important;
    line-height: 16px !important;
  }
  
  .warning-icon {
    font-size: 16px !important;
    margin-right: 6px !important;
  }
  
  /* Mobile'da dropdown açıkken pozisyon */
  .enhanced-dropdown-container.dropdown-open .warning-overlay {
    top: calc(100% + 320px + 8px) !important; /* Biraz daha az margin mobile'da */
  }
}

/* custom.css dosyasının sonuna bu stilleri ekleyin */

/* ==========================================
   INSTANCE TABLE STYLES
   ========================================== */

/* Instance table container */
.instance-table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: none;
}

/* Instance table header styles */
.instance-table-header {
  background-color: #F5F5F5;
  border-radius: 8px 8px 0 0;
  padding: 12px 16px;
  border-bottom: none;
}

/* Filter chips styles */
.filter-chip {
  background-color: #2AACFD !important;
  color: white !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  padding: 4px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 4px 4px 0 !important;
}

.filter-chip .remove-filter {
  margin-left: 8px !important;
  cursor: pointer !important;
  font-weight: bold !important;
  transition: color 0.2s ease !important;
}

.filter-chip .remove-filter:hover {
  color: #FF4444 !important;
}

/* Table search input */
.table-search-input {
  border-radius: 20px !important;
  font-size: 12px !important;
  border: 1px solid #E0E0E0 !important;
  padding: 6px 12px !important;
}

/* Table search input */
.opt-table-search-input {
  border-radius: 20px !important;
  font-size: 12px !important;
  border: 1px solid #2AACFD !important;
  padding: 6px 12px !important;
  background-color: #F5F5F5 !important;
}

.table-search-input:focus {
  border-color: #2AACFD !important;
  box-shadow: 0 0 0 2px rgba(42, 172, 253, 0.2) !important;
}

.opt-table-search-input:focus {
  border-color: #2AACFD !important;
  box-shadow: 0 0 0 2px rgba(42, 172, 253, 0.2) !important;
}


/* Add filter button */
.add-filter-btn {
  background-color: transparent !important;
  border: 1px solid #2AACFD !important;
  color: #2AACFD !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
  transition: all 0.2s ease !important;
}

.add-filter-btn:hover {
  background-color: #2AACFD !important;
  color: white !important;
}

/* DataTable customizations */
.dash-table-container {
  font-family: 'Poppins', sans-serif !important;
  border-radius: 0 0 8px 8px !important;
  overflow: hidden !important;
}

/* DataTable header */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--select {
  background-color: #F8F9FA !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: #4E5E66 !important;
  text-align: center !important;
  border: 1px solid #DEE2E6 !important;
  padding: 8px !important;
  white-space: normal !important;
  height: auto !important;
}

/* DataTable cells */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .cell {
  text-align: center !important;
  font-size: 11px !important;
  font-family: 'Poppins', sans-serif !important;
  color: #333 !important;
  padding: 8px !important;
  border: 1px solid #DEE2E6 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Instance name column special styling */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .cell[data-dash-column="instance_name"] {
  font-weight: 600 !important;
  color: #2AACFD !important;
}

/* Selected rows */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .cell.cell--selected {
  background-color: rgba(42, 172, 253, 0.1) !important;
  border-color: #2AACFD !important;
}

/* Table row hover effect */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .row:hover .cell {
  background-color: rgba(42, 172, 253, 0.05) !important;
}

/* Export button */
.export-selected-btn {
  background-color: #2AACFD !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  color: white !important;
  transition: all 0.2s ease !important;
}

.export-selected-btn:hover {
  background-color: #107ABC !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(42, 172, 253, 0.3) !important;
}

/* Table info text */
.table-info {
  font-size: 12px !important;
  color: #6C757D !important;
  font-family: 'Poppins', sans-serif !important;
}

/* Pagination controls */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .navigation {
  background-color: #F8F9FA !important;
  border-top: 1px solid #DEE2E6 !important;
  padding: 8px 16px !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .navigation .page-number {
  background-color: #2AACFD !important;
  border: none !important;
  color: white !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  margin: 0 2px !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .navigation .page-number.current {
  background-color: #083D5E !important;
  font-weight: 600 !important;
}

/* Filter modal styles */
.filter-modal .modal-content {
  border: none !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
  border-radius: 12px !important;
}

.filter-modal .modal-header {
  background-color: #F8F9FA !important;
  border-bottom: 1px solid #DEE2E6 !important;
  border-radius: 12px 12px 0 0 !important;
}

.filter-modal .modal-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  color: #2C3E50 !important;
}

.filter-modal .modal-body {
  padding: 20px !important;
}

.filter-modal .modal-footer {
  border-top: 1px solid #DEE2E6 !important;
  padding: 16px 20px !important;
}

/* Range slider in filter modal */
.filter-modal .rc-slider {
  margin: 16px 0 !important;
}

.filter-modal .rc-slider-track {
  background-color: #2AACFD !important;
}

.filter-modal .rc-slider-handle {
  border-color: #2AACFD !important;
  background-color: white !important;
}

.filter-modal .rc-slider-handle:hover {
  border-color: #107ABC !important;
}

/* Responsive table */
@media (max-width: 1200px) {
  .dash-table-container .dash-spreadsheet-container {
    overflow-x: auto !important;
  }
  
  .instance-table-header .row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .filter-chip {
    font-size: 10px !important;
    padding: 3px 10px !important;
  }
}

@media (max-width: 768px) {
  .instance-table-header {
    padding: 10px 12px !important;
  }
  
  .table-search-input {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
  
  .opt-table-search-input {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
  
  .export-selected-btn {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }
  
  .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .cell {
    font-size: 10px !important;
    padding: 6px !important;
    min-width: 60px !important;
  }
}

/* Hide checkbox column from display but keep functionality */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header[data-dash-column="select"],
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .cell[data-dash-column="select"] {
  display: none !important;
}

/* Scrollbar styling for table */
.dash-table-container .dash-spreadsheet-container::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.dash-table-container .dash-spreadsheet-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.dash-table-container .dash-spreadsheet-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.dash-table-container .dash-spreadsheet-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Loading spinner for table */
.table-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #6C757D;
  font-family: 'Poppins', sans-serif;
}

/* Smooth transitions */
.instance-table-container,
.filter-chip,
.export-selected-btn,
.add-filter-btn {
  transition: all 0.2s ease !important;
}

/* Focus states for accessibility */
.table-search-input:focus,
.add-filter-btn:focus,
.export-selected-btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.3) !important;
}

.opt-table-search-input:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.3) !important;
}

/* Print styles */
@media print {
  .instance-table-container {
    box-shadow: none !important;
    border: 1px solid #DEE2E6 !important;
  }
  
  .add-filter-btn,
  .export-selected-btn {
    display: none !important;
  }
}



/* Remove Instance Button Styling */
.remove-instance-btn {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 22px !important;
  height: 22px !important;
  border: none !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #2AACFD !important;
  font-size: 16px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.remove-instance-btn:hover {
  background-color: rgba(220, 53, 69, 0.1) !important;
  color: #dc3545 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 3px 6px rgba(220, 53, 69, 0.2) !important;
}

.remove-instance-btn:active {
  transform: scale(0.95) !important;
  box-shadow: 0 1px 2px rgba(220, 53, 69, 0.3) !important;
}

.remove-instance-btn:focus {
  outline: 2px solid rgba(220, 53, 69, 0.3) !important;
  outline-offset: 2px !important;
}

/* Instance label container positioning */
.blue-label-content {
  position: relative !important;
  overflow: visible !important;
}

/* Ensure button doesn't interfere with text */
.label-main-text,
.label-sub-text {
  padding-right: 30px !important; /* Remove button için boşluk bırak */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .remove-instance-btn {
      width: 20px !important;
      height: 20px !important;
      font-size: 14px !important;
      top: 4px !important;
      right: 4px !important;
  }
  
  .label-main-text,
  .label-sub-text {
      padding-right: 26px !important;
  }
}

/* Animation keyframes */
@keyframes removeButtonPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.remove-instance-btn.pulse {
  animation: removeButtonPulse 0.3s ease-in-out;
}

/* Disabled state (eğer gelecekte gerekirse) */
.remove-instance-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.remove-instance-btn:disabled:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #2AACFD !important;
  transform: none !important;
}


/* custom.css dosyasının sonuna ekleyin */

/* custom.css dosyasındaki METRIC HEADER stilini bununla değiştirin */

/* custom.css dosyasındaki METRIC HEADER stilini bununla değiştirin */

/* ==========================================
   RENKLİ DAİRE ARKA PLANLI SON STİL
   ========================================== */

/* Header hücresinin içindeki ana kapsayıcı */
.metric-header-content {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; 
  gap: 10px;
  width: 220px;
  height: 61px;
  background-color: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
  padding: 8px 16px !important;
}

/* YENİ: İkonun arkasındaki daire (wrapper div) */
.metric-icon-background {
  width: 40px;
  height: 40px;
  border-radius: 50%; /* Tam bir daire olması için */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* YENİ: Dairenin içindeki ikon (img etiketi) */
.metric-icon-image {
  width: 24px;  /* İkonun daire içinde ortalı ve daha küçük görünmesi için */
  height: 24px;
}

/* YENİ: Her daire için özel renkler */
.heating-icon-bg {
  background-color: #C83D20; /* Belirttiğiniz kırmızı */
}
.cooling-icon-bg {
  background-color: #97CEFA; /* Belirttiğiniz mavi */
}
.co2-icon-bg {
  background-color: #A4C45F; /* Belirttiğiniz yeşil */
}


/* Metinlerin (Başlık ve Birim) kapsayıcısı */
.metric-header-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Ana başlık metni */
.metric-header-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: #34495E;
}

/* Birim metni */
.metric-header-unit {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  color: #7F8C8D;
  margin-top: 4px;
}

/* custom.css DOSYASININ SONUNA EKLEYİN */

/* ==========================================
   DEĞER + TASARRUF GÖSTERİMİ İÇİN YENİ STİLLER
   ========================================== */

/* Değer ve tasarruf metnini içeren ana container */
.value-cell-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px; /* Ana değer ve tasarruf metni arasındaki boşluk */
  height: 100%;
}

/* Ana metrik değeri (örn: 5,158) */
.metric-main-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 400; /* Baseline ile aynı font-weight */
  font-size: 24px;   /* Büyük ve okunaklı */
  line-height: 1;
  color: #2C3E50;
  
  /* Daha fazla instance seçildiğinde küçülmesi için dinamik ayar */
  .comparison-grid-4rows & { font-size: 20px; }
  .comparison-grid-5rows & { font-size: 18px; }
  .comparison-grid-6rows & { font-size: 16px; }
}

/* Tasarruf/fark değeri (örn: -34.56% ↓) */
.metric-savings-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px; /* Ana değere göre daha küçük */
  line-height: 1;
  
  /* Renkler Python'dan dinamik olarak atanır */

  /* Daha fazla instance seçildiğinde küçülmesi için dinamik ayar */
  .comparison-grid-4rows & { font-size: 12px; }
  .comparison-grid-5rows & { font-size: 11px; }
  .comparison-grid-6rows & { font-size: 10px; }
}

/* 'chosen-value' sınıfı artık direkt olarak metni değil, container'ı tutuyor.
   Bu yüzden içindeki dikey hizalamayı ortalamak için bu ayar gerekli. */
.chosen-value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Baseline değerleri için de dikey hizalama */
.baseline-value {
    line-height: 1;
}

/* custom.css DOSYASININ SONUNA EKLEYİN */

/* ==========================================================
   YENİ VE DAHA SAĞLAM DİKEY ORTALAMA STİLLERİ
   ========================================================== */

/* Bu sınıflar sadece 0 ve 1 instance seçiliyken kullanılır */
.comparison-layout-baseline-only,
.comparison-layout-one-instance {
  display: flex !important;
  flex-direction: column !important;
  /* Bu sihirli kural, içindeki content-block'u dikeyde tam ortaya hizalar */
  justify-content: center !important; 
  align-items: center !important;
  height: 100% !important;
}

/* Sadece Baseline varken, içerik bloğu toplam yüksekliğin %50'sini kaplar */
.content-block-50 {
  flex: 0 0 50% !important; /* Büyümesin, küçülmesin, yüksekliği %50 olsun */
  width: 100%;
}

/* Baseline + 1 Instance varken, içerik bloğu toplam yüksekliğin %75'ini kaplar */
.content-block-75 {
  flex: 0 0 75% !important; /* Büyümesin, küçülmesin, yüksekliği %75 olsun */
  width: 100%;
}

/* İçerik bloklarının içindeki grid satırlarının eşit dağılmasını sağla */
.content-block-50.comparison-grid {
    display: grid;
    height: 100%;
    grid-template-rows: 1fr 1fr; /* 2 satır, eşit yükseklik */
}

.content-block-75.comparison-grid {
    display: grid;
    height: 100%;
    grid-template-rows: 1fr 1fr 1fr; /* 3 satır, eşit yükseklik */
}

/* custom.css DOSYASININ SONUNA EKLEYİN */

/* ==========================================================
   1 INSTANCE SEÇİLİYKEN HAFİF AŞAĞI KAYDIRMA AYARI
   ========================================================== */

/* 1 instance varkenki layout'un içindeki content bloğunu seçer */
.comparison-layout-one-instance > .content-block-75 {
  /* İçerik bloğunu yukarıdan %5'lik bir boşlukla aşağıya iter.
     Bu sayede tam ortalanmak yerine biraz daha aşağıda durur.
     Dilerseniz bu %5 değerini %3 veya %7 gibi değiştirerek
     gözünüze en hoş gelen ayarı bulabilirsiniz.
  */
  margin-top: 5% !important;
}

/* SADECE BASELINE varkenki content bloğunu aşağı iter */
.comparison-layout-baseline-only > .content-block-50 {
  margin-top: 5% !important;
}

/* Parallel Coordinates Plot selection brush color override */
.js-plotly-plot .parcoords .brush rect {
  fill: #083D5E !important;
  fill-opacity: 0.3 !important;
}

/* Alternative selector for parallel coordinates brush */
line.highlight {
  stroke: #083D5E !important;
}

/* Additional selector for parallel coordinates selection areas */
.js-plotly-plot .parcoords .background path {
  stroke: #083D5E !important;
}

/* Selection brush for parallel coordinates */
.js-plotly-plot svg g.parcoords g.brush rect {
  fill: #083D5E !important;
  fill-opacity: 0.3 !important;
}

.figure-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: #2AACFD;
}

.figure-card:hover .figure-img {
  opacity: 0.9;
}

.col-custom-2-4 {
  flex: 0 0 20% !important;
  max-width: 20% !important;
}

/* custom.css dosyasının sonuna bu stilleri ekleyin */

/* ==========================================
   ENHANCED MODAL STYLES
   ========================================== */

/* Modal overlay - güncellenmiş arkaplan */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(245, 245, 245, 0.95); /* #F5F5F5 transparan */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  justify-content: center;
  align-items: center;
  animation: modalFadeIn 0.3s ease-out;
}

.modal.show {
  display: flex !important;
}

/* Modal içerik container */
.modal-content-enhanced {
  position: relative;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  outline: none;
}

/* Close button - üst sağ köşe */
.modal-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: rgba(44, 62, 80, 0.8);
  border: none;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 2001;
}

.modal-close:hover {
  background: rgba(44, 62, 80, 1);
  transform: scale(1.1);
}

/* Navigation container */
.modal-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
}

/* Image container */
.modal-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Modal image */
.modal-image {
  max-width: 80vw;
  max-height: 70vh;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  object-fit: contain;
  transition: all 0.3s ease;
}

/* Modal title */
.modal-title-text {
  text-align: center;
  margin-top: 20px;
  font-size: 20px;
  font-weight: 600;
  color: #2C3E50;
  font-family: 'Poppins', sans-serif;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
}

/* Navigation buttons */
.modal-nav-btn {
  background: #2AACFD;
  border: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(42, 172, 253, 0.4);
  z-index: 2001;
}

.modal-nav-btn:hover {
  background: #107ABC;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(42, 172, 253, 0.6);
}

.modal-nav-btn:active {
  transform: scale(0.95);
}

/* Previous button positioning */
.modal-prev {
  align-self: center;
}

/* Next button positioning */
.modal-next {
  align-self: center;
}

/* Animation keyframes */
@keyframes modalFadeIn {
  from {
      opacity: 0;
      transform: scale(0.9);
  }
  to {
      opacity: 1;
      transform: scale(1);
  }
}

/* Image fade transition */
.modal-image {
  animation: imageFadeIn 0.4s ease-out;
}

@keyframes imageFadeIn {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .modal-navigation {
      gap: 20px;
  }
  
  .modal-nav-btn {
      width: 45px;
      height: 45px;
  }
  
  .modal-nav-btn div {
      font-size: 18px !important;
  }
  
  .modal-close {
      width: 35px;
      height: 35px;
      font-size: 24px;
      top: -40px;
  }
  
  .modal-image {
      max-width: 90vw;
      max-height: 60vh;
  }
  
  .modal-title-text {
      font-size: 16px;
      margin-top: 15px;
  }
}

/* Tablet responsive */
@media (max-width: 1024px) {
  .modal-navigation {
      gap: 30px;
  }
  
  .modal-nav-btn {
      width: 50px;
      height: 50px;
  }
  
  .modal-nav-btn div {
      font-size: 20px !important;
  }
  
  .modal-image {
      max-width: 85vw;
      max-height: 65vh;
  }
  
  .modal-title-text {
      font-size: 18px;
  }
}

/* Focus states for accessibility */
.modal-close:focus,
.modal-nav-btn:focus {
  outline: 3px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .modal {
      background-color: rgba(0, 0, 0, 0.9);
  }
  
  .modal-title-text {
      color: #000;
      text-shadow: 0 0 5px #fff;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 5px 15px;
      border-radius: 5px;
  }
  
  .modal-nav-btn {
      border: 2px solid #fff;
  }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal-image,
  .modal-nav-btn,
  .modal-close {
      animation: none;
      transition: none;
  }
  
  .modal-nav-btn:hover,
  .modal-close:hover {
      transform: none;
  }
}

/* Print media - hide modal */
@media print {
  .modal {
      display: none !important;
  }
}

/* custom.css dosyasındaki modal close button stilini bu kodla güncelleyin: */

/* Close button - pozisyon düzenlemesi */
.modal-close {
  position: absolute;
  top: 20px;              /* -50px'ten 20px'e değiştirildi - artık içeride */
  right: 20px;            /* 0'dan 20px'e değiştirildi - biraz içeride */
  background: rgba(44, 62, 80, 0.8);
  border: none;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 2001;
}

.modal-close:hover {
  background: rgba(44, 62, 80, 1);
  transform: scale(1.1);
}

/* Modal content container - üst margin ekleyelim */
.modal-content-enhanced {
  position: relative;
  background-color: transparent;
  padding: 60px 0 0 0;    /* Üstten 60px padding ekledik */
  border-radius: 0;
  box-shadow: none;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  outline: none;
}

/* Navigation container - biraz daha yukarı */
.modal-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
  margin-top: -20px;      /* Biraz yukarı çekelim */
}

/* Modal title - üst margin azaltalım */
.modal-title-text {
  text-align: center;
  margin-bottom: 20px;    /* 15px'ten 20px'e çıkardık */
  margin-top: 0px;        /* Üst margin'i sıfırladık */
  font-size: 20px;        /* 18px'ten 20px'e çıkardık */
  font-weight: 600;
  color: #2C3E50;
  font-family: 'Poppins', sans-serif;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
}

/* Responsive için mobile düzenlemesi */
@media (max-width: 768px) {
  .modal-close {
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    font-size: 24px;
  }
  
  .modal-content-enhanced {
    padding: 50px 0 0 0;  /* Mobile'da biraz daha az padding */
  }
  
  .modal-navigation {
    margin-top: -15px;
  }
  
  .modal-title-text {
    font-size: 16px;
    margin-bottom: 15px;
  }
}


/* ==========================================
   INSTANCE TABLE BORDER FIX - SEAMLESS DESIGN
   ========================================== */

/* DataTable header cells - Remove ALL borders */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--select {
  background-color: #F5F5F5 !important; /* Match container background */
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #666666 !important;
  text-align: center !important;
  
  /* REMOVE ALL BORDERS */
  border: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  
  /* REMOVE BOX SHADOW */
  box-shadow: none !important;
  
  padding: 12px 8px !important;
  white-space: normal !important;
  height: auto !important;
  outline: none !important;
}

/* Data cells - Remove borders, keep only subtle bottom line where needed */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .cell {
  background-color: #F5F5F5 !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #333333 !important;
  padding: 0px 8px !important;
  
  /* REMOVE ALL BORDERS */
  border: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Remove any remaining borders from table structure */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner thead,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tbody {
  border: none !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner thead tr,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tbody tr {
  border: none !important;
}

/* Table container - seamless integration */
.dash-table-container {
  font-family: 'Poppins', sans-serif !important;
  background-color: #F5F5F5 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.dash-table-container .dash-spreadsheet-container {
  background-color: #F5F5F5 !important;
  border: none !important;
  border-radius: 0 !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner {
  background-color: #F5F5F5 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Instance table header area - seamless with table */
.instance-table-header {
  background-color: #F5F5F5 !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 12px 16px !important;
  border-bottom: none !important; /* Remove separator line */
  margin: 0 !important;
}

/* Instance table container - clean background */
.instance-table-container {
  background: #F5F5F5 !important;
  border-radius: 8px !important;
  border: none !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; /* Keep card shadow */
}

/* Card body padding adjustment */
.instance-table-container .card-body {
  padding: 0 !important;
}

/* Remove hover effects on headers */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:hover {
  background-color: #F5F5F5 !important;
  cursor: default !important;
}

/* Keep row hover effect subtle */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
  background-color: #EEEEEE !important;
  transition: background-color 0.2s ease !important;
}

/* Instance name column styling */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td[data-dash-column="instance_name"] {
  font-weight: 600 !important;
  color: #2AACFD !important;
}

/* Selected rows */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr.selected td {
  background-color: #E3F2FD !important;
  border: 1px solid #2AACFD !important;
}

/* Filter chips and other header elements - keep existing styles */
.filter-chip {
  background-color: #2AACFD !important;
  color: white !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  padding: 4px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 4px 4px 0 !important;
}

/* Override any inline styles that might add borders */
.dash-table-container th[style] {
  background-color: #F5F5F5 !important;
  border: none !important;
  box-shadow: none !important;
}

.dash-table-container td[style] {
  background-color: #F5F5F5 !important;
  border: none !important;
}

/* Pagination controls styling */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .page-number {
  background-color: #2AACFD !important;
  border: none !important;
  color: white !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  margin: 0 2px !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .page-number.current {
  background-color: #083D5E !important;
  font-weight: 600 !important;
}

/* ==========================================
   TABLE HEADER FINAL DÜZELTMESİ
   ========================================== */

/* Header hücreleri - Tüm olası selectors */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner thead th,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--select,
.dash-table-container thead th,
.dash-table-container th {
  background-color: #E3E3E3 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #666666 !important;
  text-align: center !important;
  
  /* TÜM BORDER'LARI KALDIR */
  border: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  
  /* BOX-SHADOW KALDIR */
  box-shadow: none !important;
  
  padding: 8px 8px !important;
  white-space: normal !important;
  height: auto !important;
  outline: none !important;
}

/* İlk header hücresi - sol üst köşe radius */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:first-child,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner thead th:first-child,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header:first-child,
.dash-table-container thead th:first-child,
.dash-table-container th:first-child {
  border-top-left-radius: 8px !important;
  background-color: #E3E3E3 !important;
  border: none !important;
}

/* Son header hücresi - sağ üst köşe radius */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:last-child,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner thead th:last-child,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header:last-child,
.dash-table-container thead th:last-child,
.dash-table-container th:last-child {
  border-top-right-radius: 8px !important;
  background-color: #E3E3E3 !important;
  border: none !important;
}

/* HOVER EFEKTİNİ TAMAMEN KALDIR */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:hover,
.dash-table-container th:hover {
  background-color: #E3E3E3 !important; /* Hover'da aynı renk kalsın */
  cursor: default !important; /* Normal cursor */
}

/* Header row'un kendisi */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner thead tr,
.dash-table-container thead tr {
  background-color: #E3E3E3 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Header container */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner thead,
.dash-table-container thead {
  background-color: #E3E3E3 !important;
  border: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* Dash'in kendi class'larını override et */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--select,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header {
  background-color: #E3E3E3 !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* Header ve body arasındaki çizgiyi kaldır */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner thead,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tbody {
  border: none !important;
}

/* Header altındaki herhangi bir border'ı kaldır */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner thead tr,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner thead tr th {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Tüm table için genel border kaldırma */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: none !important;
}

/* Her ihtimale karşı inline style override */
.dash-table-container th[style] {
  background-color: #E3E3E3 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Sorting arrows için */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th .column-header-name,
.dash-table-container th .column-header-name {
  color: #666666 !important;
}

/* Sorting ok işaretleri */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th .sort,
.dash-table-container th .sort {
  color: #666666 !important;
}

/* Instance table container'dan gelen padding/margin temizliği */
.instance-table-container .dash-table-container {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Data hücreleri - Sadece alt çizgi kalsın, diğer border'lar kalksın */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #E6E6E6 !important; /* Sadece satır altı çizgisi */
  padding: 12px 8px !important;
}

/* ==========================================================
   INSTANCE TABLE PAGINATION - FİNAL & TEMİZ KURAL
   ========================================================== */

/* Card Header'ı referans noktası olarak belirliyoruz */
#instance-table-card .card-header {
  position: relative !important;
}

/* Pagination container - ID ile hedeflenmiş en güçlü kural */
#instance-table .previous-next-container {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0px !important;
}

/* Tüm sayfa butonları için temel stil */
#instance-table .page-number,
#instance-table .first-page,
#instance-table .last-page,
#instance-table .previous-page,
#instance-table .next-page {
  background: transparent !important;
  border: none !important;
  color: #2AACFD !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 36px !important;
  min-width: 30px !important;
  padding: 8px !important;
  margin: 0 1px !important; /* Oklar arası dar boşluk */
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  position: relative !important;
  top: 0 !important;
  transition: top 0.2s ease !important;
}

/* Aktif sayfa butonu */
#instance-table .previous-next-container .page-number.current {
  color: #2AACFD !important;
  border: 1.5px solid #2AACFD !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  top: 0 !important;
}

/* Hover efekti (aktif olmayanlar için) */
#instance-table .page-number:hover:not(.current),
#instance-table .first-page:hover,
#instance-table .last-page:hover,
#instance-table .previous-page:hover,
#instance-table .next-page:hover {
  top: -2px !important;
}

/* Pasif (disabled) butonlar */
#instance-table .first-page:disabled,
#instance-table .last-page:disabled,
#instance-table .previous-page:disabled,
#instance-table .next-page:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  top: 0 !important;
}

/* ==========================================================
   INSTANCE TABLE PAGINATION - UPDATED & FIXED
   ========================================================== */

/* Card Header'ı referans noktası olarak belirliyoruz */
#instance-table-card .card-header {
  position: relative !important;
}

/* Pagination container - DOĞRU SELECTOR İLE */
#instance-table .dash-spreadsheet-container .dash-spreadsheet-inner .navigation {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Tüm sayfa butonları için temel stil */
#instance-table .navigation .page-number,
#instance-table .navigation .first-page,
#instance-table .navigation .last-page,
#instance-table .navigation .previous-page,
#instance-table .navigation .next-page {
  background: transparent !important;
  border: none !important;
  color: #2AACFD !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 36px !important;
  min-width: 30px !important;
  padding: 8px !important;
  margin: 0 1px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  position: relative !important;
  top: 0 !important;
  transition: top 0.2s ease !important;
}

/* Aktif sayfa butonu */
#instance-table .navigation .page-number.current {
  color: #2AACFD !important;
  border: 1.5px solid #2AACFD !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  top: 0 !important;
}

/* Hover efekti (aktif olmayanlar için) */
#instance-table .navigation .page-number:hover:not(.current),
#instance-table .navigation .first-page:hover,
#instance-table .navigation .last-page:hover,
#instance-table .navigation .previous-page:hover,
#instance-table .navigation .next-page:hover {
  top: -2px !important;
}

/* Pasif (disabled) butonlar */
#instance-table .navigation .first-page:disabled,
#instance-table .navigation .last-page:disabled,
#instance-table .navigation .previous-page:disabled,
#instance-table .navigation .next-page:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  top: 0 !important;
}

/* DataTable'ın default navigation stilini override et */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .navigation {
  background-color: transparent !important;
  border-top: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Eğer pagination hala görünmüyorsa, bu alternatif selector'ları da deneyin */
#instance-table-card .dash-table-container .navigation,
#instance-table-card .navigation {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: transparent !important;
}

/* Market Scenarios Button Styling */
.market-scenarios-btn {
  background-color: transparent !important;
  border: 2px solid #2AACFD !important;
  border-radius: 8px !important;
  color: #2AACFD !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.market-scenarios-btn:hover {
  background-color: #2AACFD !important;
  color: white !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(42, 172, 253, 0.3) !important;
  border-color: #2AACFD !important;
}

.market-scenarios-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(42, 172, 253, 0.2) !important;
}

.market-scenarios-btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.3) !important;
}

/* Responsive design for the button */
@media (max-width: 768px) {
  .market-scenarios-btn {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
}

/* Card header adjustments for better spacing */
.card-header .row {
  margin: 0 !important;
}

.card-header .col {
  padding: 0 !important;
}

/* Instance table card header'ını referans noktası yap */
#instance-table-card .card-header {
  position: relative !important;
}

/* Move the Dash DataTable pagination to header position */
#instance-table-card .dash-table-container .navigation {
  position: absolute !important;
  top: -62px !important;  /* Move up to header level */
  right: 12px !important; /* Align with right edge */
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Header pagination container alignment */
#header-pagination-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  min-height: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Search input alignment with pagination */
#table-search-input {
  height: 30px !important;
  line-height: 1.5 !important;
  padding: 6px 12px !important;
  /* make the input field #2AACFD */
  border: 1px solid #2AACFD !important;
  background-color: transparent !important;
}

.opt-table-search-input {
  height: 30px !important;
  line-height: 1.5 !important;
  padding: 6px 12px !important;
  border: 1px solid #2AACFD !important;
  background-color: #F5F5F5 !important;
}

/* Ensure proper alignment of the entire header row */
#instance-table-card .card-header .row {
  align-items: center !important;
  margin: 0 !important;
}

#instance-table-card .card-header .col {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Ensure the right column with buttons and search aligns properly */
#instance-table-card .card-header .col .row {
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Fix add filter button alignment */
#add-filter-btn {
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Force the pagination column to align properly */
#instance-table-card .card-header .row .col:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Force the pagination container's parent column to align */
div[style*="min-width: 250px"] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  height: 36px !important;
  min-height: 36px !important;
}

/* Debug and force alignment for all row elements in header */
#instance-table-card .card-header .row {
  display: flex !important;
  align-items: center !important;
  min-height: 36px !important;
}

#instance-table-card .card-header .row > .col {
  display: flex !important;
  align-items: center !important;
  min-height: 36px !important;
}

/* Specifically target the pagination row */
#instance-table-card .card-header .col .row.g-2 {
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
  margin: 0 !important;
}

/* Target each column in the pagination row */
#instance-table-card .card-header .col .row.g-2 > .col {
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
  padding: 0 !important;
}

/* More aggressive targeting for the pagination container */
#header-pagination-container {
  position: relative !important;
  top: 0 !important;
  transform: none !important;
  vertical-align: top !important;
  line-height: 36px !important;
}

/* Force the entire header card to use proper flexbox */
#instance-table-card .card-header {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: auto !important;
  height: auto !important;
}

/* Force the main row in header to be properly aligned */
#instance-table-card .card-header > .row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
}

/* Override any Bootstrap margin/padding on columns */
#instance-table-card .card-header .col,
#instance-table-card .card-header .col-auto {
  margin: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
}

/* Specifically target the left column with title and filter chips */
#instance-table-card .card-header .row .col:first-child {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  height: 36px !important;
  overflow: hidden !important;
}

/* Make sure the Instance Table title doesn't add extra height */
#instance-table-card .card-header h5 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
}

/* Hide or minimize filter chips container if it's empty */
#filter-chips-container {
  display: none !important; /* Temporarily hide to test */
}

/* Make sure the right column (buttons + search + pagination) aligns to top */
#instance-table-card .card-header .row .col:last-child {
  align-items: flex-start !important;
  justify-content: flex-end !important;
  height: 36px !important;
  align-self: flex-start !important;
}

/* ==========================================================
   MANUEL PAGINATION BUTTON STİLLERİ
   ========================================================== */

/* Pagination butonları için hover efekti */
.pagination-btn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  transition: all 0.2s ease !important;
}

/* Active (basılı) durum */
.pagination-btn:active:not(:disabled) {
  transform: translateY(0) !important;
}

/* Disabled butonlar */
.pagination-btn:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  color: #6C757D !important;
}

.pagination-btn:disabled:hover {
  transform: none !important;
  background-color: transparent !important;
}

/* Sayfa bilgisi hover efekti */
#table-page-info:hover {
  transition: background-color 0.2s ease !important;
}

/* Focus states accessibility için */
.pagination-btn:focus {
  outline-offset: 2px !important;
}

#table-page-info:focus {
  outline-offset: 2px !important;
}

/* Mobile responsive düzeltmeler */
@media (max-width: 768px) {
  .pagination-btn {
    height: 32px !important;
    min-width: 26px !important;
    font-size: 12px !important;
    padding: 6px !important;
  }
  
  #table-page-info {
    font-size: 12px !important;
    padding: 6px 10px !important;
    height: 32px !important;
  }
}

/* Boş DataTable satırlarını gizle */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dt-table-container__row:empty,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dt-table-container__row .cell:empty {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Boş hücreleri tamamen kaldır */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .cell:empty {
  display: none !important;
}

/* Margin düzeltmeleri */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .cell {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Önceki radius kurallarını temizle */
#instance-table-card .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
  border-radius: 0 !important; /* Tüm header hücrelerinin radiusunu sıfırla */
}

/* Sadece ilk header hücresinin sol köşeleri */
#instance-table-card .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:first-child {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Sadece son header hücresinin sağ köşeleri */
#instance-table-card .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:last-child {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Ortadaki header hücrelerinin radiusu sıfır */
#instance-table-card .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}

/* Header row container'ının radiusu */
#instance-table-card .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner thead tr {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Placeholder color for Instance Table search input */
#table-search-input::placeholder {
  color: #2AACFD !important;
  opacity: 1; /* Ensure color is not faded */
}

#opt-table-search-input::placeholder {
  color: #2AACFD !important;
  opacity: 1; /* Ensure color is not faded */
}


/* Vendor-specific fallbacks */
#table-search-input::-webkit-input-placeholder {
  color: #2AACFD !important;
}

#opt-table-search-input::-webkit-input-placeholder {
  color: #2AACFD !important;
}

#table-search-input:-ms-input-placeholder {
  color: #2AACFD !important;
}

#table-search-input::-ms-input-placeholder {
  color: #2AACFD !important;
}

#opt-table-search-input:-ms-input-placeholder {
  color: #2AACFD !important;
}

#opt-table-search-input::-ms-input-placeholder {
  color: #2AACFD !important;
}

/* --- Search input focus style override --- */
/* Keep focus styling consistent for the instance search input */
#search-input,
#search-input.form-control {
  border-color: #2AACFD !important;
}

#search-input:focus,
#search-input:focus-visible,
#search-input.form-control:focus {
  outline: none !important;
  border-color: #2AACFD !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2) !important; /* subtle themed glow */
}

/* Prevent container highlight changes on focus */
#search-input-container:focus-within {
  box-shadow: none !important;
}


#add-filter-btn:hover {
  background-color: #AAD4FB !important;
  color: #FFFFFF !important;
  border-color: #AAD4FB !important;
}

/* ==========================================================
   INSTANCE TABLE SEARCH INPUT - FOCUS COLOR OVERRIDE
   ========================================================== */

/* "Search for instance..." input alanına tıklandığında (focus) stilini değiştirir */
#table-search-input:focus,
#table-search-input:focus-visible {
  border-color: #AAD4FB !important; /* Kenarlık rengini istediğiniz renge ayarlar */
  box-shadow: 0 0 0 3px rgba(170, 212, 251, 0.6) !important; /* Dışındaki parlamayı ayarlar */
  outline: none !important; /* Tarayıcının varsayılan dış çizgisini kaldırır */
}

#opt-table-search-input {
  background-color: #F5F5F5 !important; /* Match explorer page background */
}

#opt-table-search-input:focus,
#opt-table-search-input:focus-visible {
  border-color: #AAD4FB !important; /* Kenarlık rengini istediğiniz renge ayarlar */
  box-shadow: 0 0 0 3px rgba(170, 212, 251, 0.6) !important; /* Dışındaki parlamayı ayarlar */
  outline: none !important; /* Tarayıcının varsayılan dış çizgisini kaldırır */
  background-color: #F5F5F5 !important; /* Keep background color on focus */
}

/* ==========================================================
   INSTANCE TABLE SORT ARROW - CORRECTED HOVER COLOR
   ========================================================== */

/* Dash DataTable sıralama okları için en güçlü selector'lar */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:hover .sort-icon,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:hover .sort::before,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:hover .sort::after,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:hover .sort {
  color: #2AACFD !important;
  fill: #2AACFD !important;
}

/* SVG sıralama okları için özel kural */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:hover svg,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:hover path {
  fill: #2AACFD !important;
  stroke: #2AACFD !important;
}

/* Farklı Dash versiyonları için alternatif selector'lar */
.dash-table-container th:hover .dash-cell-sort,
.dash-table-container th:hover .sort-action,
.dash-table-container th:hover .sort-asc,
.dash-table-container th:hover .sort-desc {
  color: #2AACFD !important;
}

/* En güçlü override - tüm sıralama elementleri */
#instance-table-card .dash-table-container th:hover * {
  color: #2AACFD !important;
}

/* Header text de mavi kalacak şekilde */
#instance-table-card .dash-table-container th:hover .column-header-name {
  color: #2AACFD !important;
}


/* custom.css dosyasına bu stilleri ekleyin/güncelleyin */

/* Filter chips container - başlığın sağında inline */
#filter-chips-container {
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  transition: all 0.3s ease !important;
}

/* Header single row layout */
#instance-table-card .card-header {
  background-color: #F5F5F5 !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 12px 16px !important;
  border-bottom: none !important;
  position: relative !important;
  min-height: 50px !important;
}

/* Sol taraftaki container - başlık ve filter chips */
#instance-table-card .card-header .row .col:first-child > div {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  width: 100% !important;
}

/* Instance Table başlığı */
#instance-table-card .card-header h5 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  height: auto !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Filter chip stilleri - kompakt inline görünüm */
.filter-chip-custom {
  background-color: #2AACFD !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 20px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 0px !important;
  margin-bottom: 0px !important;
  box-shadow: 0 2px 4px rgba(42, 172, 253, 0.3) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  cursor: default !important;
  height: 24px !important;
  flex-shrink: 0 !important;
}

/* Filter chip hover effect */
.filter-chip-custom:hover {
  background-color: #107ABC !important;
  box-shadow: 0 4px 8px rgba(42, 172, 253, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Remove filter X button styling - daha kompakt */
.filter-chip-custom span[id*="remove-filter"] {
  color: #FFFFFF !important;
  font-weight: bold !important;
  font-size: 12px !important;
  margin-left: 6px !important;
  cursor: pointer !important;
  padding: 0 !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 1 !important;
}

/* X button hover effect */
.filter-chip-custom span[id*="remove-filter"]:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #FF4444 !important;
  transform: scale(1.1) !important;
}

/* Filter chip giriş animasyonu */
@keyframes filterChipSlideIn {
  0% {
      opacity: 0;
      transform: translateX(-10px) scale(0.8);
  }
  100% {
      opacity: 1;
      transform: translateX(0) scale(1);
  }
}

.filter-chip-custom {
  animation: filterChipSlideIn 0.3s ease-out !important;
}

/* Filter chip çıkış animasyonu */
@keyframes filterChipSlideOut {
  0% {
      opacity: 1;
      transform: translateX(0) scale(1);
  }
  100% {
      opacity: 0;
      transform: translateX(-10px) scale(0.8);
  }
}

.filter-chip-custom.removing {
  animation: filterChipSlideOut 0.2s ease-in !important;
}

/* Sağ taraftaki butonlar container'ı */
#instance-table-card .card-header .row .col:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
}

/* Row alignment - tüm elementler aynı hizada */
#instance-table-card .card-header .row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Sol ve sağ kolonlar arasında doğru space distribution */
#instance-table-card .card-header .row .col:first-child {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important; /* Flexbox overflow kontrolü */
}

#instance-table-card .card-header .row .col:last-child {
  flex: 0 0 auto !important;
  margin-left: 16px !important;
}

/* Responsive design - mobilde alt satıra geçir */
@media (max-width: 1200px) {
  #instance-table-card .card-header .row {
      flex-wrap: wrap !important;
      gap: 8px !important;
  }
  
  #instance-table-card .card-header .row .col:first-child {
      width: 100% !important;
      margin-bottom: 8px !important;
  }
  
  #instance-table-card .card-header .row .col:last-child {
      width: 100% !important;
      margin-left: 0 !important;
      justify-content: flex-start !important;
  }
  
  #instance-table-card .card-header {
      min-height: 80px !important;
  }
}

@media (max-width: 768px) {
  .filter-chip-custom {
      font-size: 10px !important;
      padding: 3px 10px !important;
      height: 22px !important;
  }
  
  .filter-chip-custom span[id*="remove-filter"] {
      font-size: 11px !important;
      width: 12px !important;
      height: 12px !important;
      margin-left: 5px !important;
  }
  
  #filter-chips-container {
      gap: 6px !important;
  }
  
  #instance-table-card .card-header .row .col:first-child > div {
      gap: 12px !important;
  }
}

/* Filter chips boşken gizle */
#filter-chips-container:empty {
  display: none !important;
}

/* Layout stability - filter eklenip çıkarılırken layout bozulmasın */
#instance-table-card .card-header .row .col:first-child > div {
  min-height: 24px !important;
}

/* Add Filter butonunun sol tarafında yeterli margin */
#add-filter-btn {
  margin-left: 16px !important;
}

/* ==========================================
   ENHanced FILTER DROPDOWN STYLES
   ========================================== */

/* Main filter trigger button */
.add-filter-trigger {
  position: relative;
  z-index: 1000;
  background-color: transparent !important;
  border: 1px solid #2AACFD !important;
  color: #2AACFD !important;
}

.add-filter-trigger:hover {
  background-color: #AAD4FB !important;
  color: #FFFFFF !important;
  border-color: #AAD4FB !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(170, 212, 251, 0.4) !important;
}

.add-filter-trigger:active {
  background-color: #2AACFD !important;
  color: #FFFFFF !important;
  border-color: #2AACFD !important;
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(42, 172, 253, 0.3) !important;
}

/* Dropdown açıkken buton stili */
.add-filter-trigger.dropdown-open {
  background-color: #2AACFD !important;
  color: #FFFFFF !important;
  border-color: #2AACFD !important;
  box-shadow: 0 2px 8px rgba(42, 172, 253, 0.3) !important;
}

.add-filter-trigger.dropdown-open:hover {
  background-color: #2AACFD !important;
  color: #FFFFFF !important;
  border-color: #2AACFD !important;
}

/* Filter dropdown menu */
.filter-dropdown-menu {
  animation: filterDropdownSlideIn 0.3s ease-out;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

@keyframes filterDropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Parameter items hover effect */
.filter-param-item:hover {
  background-color: #107ABC !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.filter-param-item.selected {
  background-color: #E0E0E0 !important;
  color: #999 !important;
  cursor: not-allowed !important;
}

.filter-param-item.selected:hover {
  background-color: #E0E0E0 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Input styling in filter dropdown */
.filter-dropdown-menu input[type="number"] {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #2AACFD !important;
  font-weight: 500 !important;
}

.filter-dropdown-menu input[type="number"]:focus {
  outline: none !important;
  border-color: white !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) !important;
  background-color: white !important;
}

.filter-dropdown-menu input[type="number"]::placeholder {
  color: rgba(42, 172, 253, 0.6) !important;
}

/* Button hover effects */
#filter-back-btn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
}

#filter-apply-btn:hover {
  background-color: #F0F0F0 !important;
  color: #107ABC !important;
  transform: translateY(-1px);
}

/* Close dropdown when clicking outside */
.filter-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: transparent;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .filter-dropdown-menu {
    min-width: 260px !important;
    max-width: 300px !important;
    left: auto !important;
    right: 0 !important;
  }
  
  .filter-param-item {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
}

/* Help Button Styling - custom.css dosyasının sonuna ekleyin */
#help-button {
  background-color: transparent !important;
  color: #2AACFD !important;
  border: 2px solid #2AACFD !important;
  border-radius: 25px !important;
  padding: 4px 12px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: 'Poppins', sans-serif !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
  min-width: 100px !important;
  outline: none !important;
}

#help-button:hover {
  background-color: #2AACFD !important;
  color: white !important;
  border-color: #2AACFD !important;
  box-shadow: 0 4px 8px rgba(42, 172, 253, 0.3) !important;
}

#help-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(42, 172, 253, 0.2) !important;
}

#help-button:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(42, 172, 253, 0.3) !important;
}

/* Responsive design for help button */
@media (max-width: 768px) {
  #help-button {
      font-size: 14px !important;
      padding: 6px 20px !important;
      min-width: 80px !important;
  }
}

@media (max-width: 480px) {
  #help-button {
      font-size: 12px !important;
      padding: 5px 16px !important;
      min-width: 70px !important;
  }
}

/* ==========================================
   TRUE SPOTLIGHT EFFECT - TAMAMEN YENİ YAKLAŞIM
   ========================================== */

/* Tour overlay - arkaplan */
.tour-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  display: none;
  pointer-events: auto;
}

/* Normal mod - tam gri arkaplan */
.tour-overlay.normal-mode {
  background-color: rgba(217, 217, 217, 0.75);
}

/* Spotlight mod - clip-path ile gerçek kesim */
.tour-overlay.spotlight-mode {
  background-color: rgba(217, 217, 217, 0.75);
  /* CSS clip-path ile hedef alanı kes */
  clip-path: polygon(
    /* Sol üst köşeden spotlight sol üstüne */
    0% 0%, 
    var(--spotlight-left, 0px) 0%, 
    var(--spotlight-left, 0px) var(--spotlight-top, 0px),
    /* Spotlight üst kenarı */
    var(--spotlight-right, 0px) var(--spotlight-top, 0px),
    var(--spotlight-right, 0px) 0%,
    /* Sağ üst köşeden spotlight sağ altına */
    100% 0%,
    100% var(--spotlight-top, 0px),
    var(--spotlight-right, 0px) var(--spotlight-top, 0px),
    /* Spotlight sağ kenarı */
    var(--spotlight-right, 0px) var(--spotlight-bottom, 0px),
    100% var(--spotlight-bottom, 0px),
    /* Sağ alt köşeden spotlight sol altına */
    100% 100%,
    var(--spotlight-right, 0px) 100%,
    var(--spotlight-right, 0px) var(--spotlight-bottom, 0px),
    /* Spotlight alt kenarı */
    var(--spotlight-left, 0px) var(--spotlight-bottom, 0px),
    var(--spotlight-left, 0px) 100%,
    /* Sol alt köşeden spotlight sol üstüne */
    0% 100%,
    0% var(--spotlight-bottom, 0px),
    var(--spotlight-left, 0px) var(--spotlight-bottom, 0px),
    /* Spotlight sol kenarı */
    var(--spotlight-left, 0px) var(--spotlight-top, 0px),
    0% var(--spotlight-top, 0px)
  );
}

/* Alternatif yaklaşım: Mask kullanarak */
.tour-overlay.spotlight-mode-alt {
  background-color: rgba(217, 217, 217, 0.75);
  -webkit-mask: 
    radial-gradient(circle at var(--spotlight-center-x, 50%) var(--spotlight-center-y, 50%), 
                    transparent var(--spotlight-radius, 100px), 
                    black calc(var(--spotlight-radius, 100px) + 1px));
  mask: 
    radial-gradient(circle at var(--spotlight-center-x, 50%) var(--spotlight-center-y, 50%), 
                    transparent var(--spotlight-radius, 100px), 
                    black calc(var(--spotlight-radius, 100px) + 1px));
}

/* EN BASIT VE EN ETKİLİ ÇÖZÜM: Box-shadow ile */
.tour-overlay.spotlight-mode-simple::before {
  content: '';
  position: absolute;
  left: var(--spotlight-left, 0px);
  top: var(--spotlight-top, 0px);
  width: var(--spotlight-width, 100px);
  height: var(--spotlight-height, 100px);
  box-shadow: 0 0 0 9999px rgba(217, 217, 217, 0.75);
  background: transparent;
  border-radius: 8px; /* Hedef elementin border-radius'una uygun */
  pointer-events: none;
  z-index: -1;
}

/* Tour tooltip */
.tour-tooltip {
  position: absolute;
  background-color: #2AACFD;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  max-width: 380px;
  min-width: 320px;
  z-index: 10001;
  animation: tourTooltipSlideIn 0.4s ease-out;
  pointer-events: auto;
}

/* Special wider tooltip for instance table step */
.tour-tooltip.wide-tooltip {
  max-width: 900px !important;
  min-width: 400px !important;
}

@keyframes tourTooltipSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Hedeflenen elemanlar için z-index artışı */
.tour-highlight {
  position: relative !important;
  z-index: 10002 !important; /* Overlay'den daha yüksek */
  transition: all 0.3s ease !important;
}

/* Spotlight modunda hedef eleman */
.tour-highlight.spotlight {
  /* Hiçbir gri efekt olmasın */
  background: inherit !important;
  filter: none !important;
  box-shadow: 0 0 0 4px #2AACFD !important; /* Sadece mavi border */
  border-radius: 8px !important;
}

/* Normal highlight (spotlight olmayan) */
.tour-highlight:not(.spotlight) {
  box-shadow: 0 0 0 4px #2AACFD, 0 0 0 8px rgba(42, 172, 253, 0.3) !important;
  border-radius: 8px !important;
}

/* Tooltip metinleri */
.tour-tooltip h3 {
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  margin-top: 0;
  line-height: 1.3;
}

.tour-tooltip p {
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
  margin-top: 0;
  opacity: 0.95;
}

/* Kontrol butonları */
.tour-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.tour-navigation {
  display: flex;
  gap: 12px;
}

.tour-btn {
  padding: 10px 20px;
  border-radius: 10px;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.tour-btn-prev, .tour-btn-next {
  background-color: rgba(255, 255, 255, 0.9);
  color: #2AACFD;
  border: 2px solid transparent;
}

.tour-btn-prev:hover, .tour-btn-next:hover {
  background-color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.tour-btn-prev:disabled, .tour-btn-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.tour-btn-close {
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 18px;
  font-weight: bold;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.tour-btn-close:hover {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.tour-step-indicator {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
  .tour-tooltip {
    max-width: 300px;
    min-width: 280px;
    padding: 20px;
    margin: 20px;
  }
  
  /* Wide tooltip responsive design */
  .tour-tooltip.wide-tooltip {
    max-width: calc(100vw - 40px) !important;
    min-width: 280px !important;
    padding: 16px;
    margin: 20px;
  }
  
  .tour-tooltip h3 {
    font-size: 18px;
  }
  
  .tour-tooltip p {
    font-size: 14px;
  }
  
  .tour-controls {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .tour-navigation {
    justify-content: center;
  }
}

/* Tour tooltip center position */
.tour-tooltip.center-position {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10001 !important;
}

/* Tour tooltip temel stil */
.tour-tooltip {
  position: absolute;
  background-color: #2AACFD;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  max-width: 380px;
  min-width: 320px;
  z-index: 10001;
  transition: none !important; /* Tüm transition'ları kapat */
  pointer-events: auto;
}

/* Ensure wide tooltip styling is consistently applied */
.tour-tooltip.wide-tooltip {
  max-width: 900px !important;
  min-width: 400px !important;
}

/* Center position için özel stil */
.tour-tooltip.center-position {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  opacity: 1 !important;
}

/* Tour overlay temizleme için gelişmiş kurallar */
.tour-overlay {
  transition: all 0.3s ease !important;
}

.tour-overlay.spotlight-mode-simple::before {
  content: '';
  position: absolute;
  left: var(--spotlight-left, 0px);
  top: var(--spotlight-top, 0px);
  width: var(--spotlight-width, 100px);
  height: var(--spotlight-height, 100px);
  box-shadow: 0 0 0 9999px rgba(217, 217, 217, 0.75);
  background: transparent;
  border-radius: 8px;
  pointer-events: none;
  z-index: -1;
  transition: all 0.3s ease;
}

/* Tour kapatıldığında tüm spotlight efektlerini temizle */
.tour-overlay:not(.spotlight-mode-simple)::before {
  display: none !important;
}

/* Spotlight değişkenlerinin sıfırlanması için */
.tour-overlay.reset-spotlight {
  --spotlight-left: -9999px !important;
  --spotlight-top: -9999px !important;
  --spotlight-width: 0px !important;
  --spotlight-height: 0px !important;
}

/* ======================================================================= */
/* MARKET PAGE SPECIFIC STYLES - NEW ADDITIONS BELOW THIS BORDER */
/* ======================================================================= */

/* Market Page Slider Styling */
.market-slider .rc-slider {
  margin-top: 15px !important;
  margin-bottom: 25px !important;
  height: 8px !important;
}

.market-slider .rc-slider-track {
  background: linear-gradient(90deg, #2AACFD 0%, #1E90FF 100%) !important;
  height: 8px !important;
  border-radius: 4px !important;
}

.market-slider .rc-slider-rail {
  background-color: #E8F4FD !important;
  height: 8px !important;
  border-radius: 4px !important;
}

.market-slider .rc-slider-handle {
  border: none !important;
  background-color: white !important;
  width: 24px !important;
  height: 24px !important;
  margin-top: -8px !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(42, 172, 253, 0.4), 0 0 0 1px rgba(42, 172, 253, 0.2) !important;
  cursor: pointer !important;
}

.market-slider .rc-slider-handle:hover {
  background-color: white !important;
  box-shadow: 0 4px 12px rgba(42, 172, 253, 0.6), 0 0 0 2px rgba(42, 172, 253, 0.3) !important;
  transform: scale(1.1) !important;
  transition: all 0.2s ease !important;
}

.market-slider .rc-slider-handle:active {
  background-color: white !important;
  box-shadow: 0 2px 8px rgba(42, 172, 253, 0.8), 0 0 0 3px rgba(42, 172, 253, 0.4) !important;
  transform: scale(1.05) !important;
}

.market-slider .rc-slider-mark-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  color: #2C3E50 !important;
  font-weight: 500 !important;
}

.market-slider .rc-slider-mark-text-active {
  color: #2AACFD !important;
  font-weight: 600 !important;
}

/* Market Page Tooltip */
.market-slider .rc-tooltip {
  font-family: 'Poppins', sans-serif !important;
  z-index: 1000 !important;
}

.market-slider .rc-tooltip-inner {
  background: linear-gradient(135deg, #2AACFD 0%, #1E90FF 100%) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(42, 172, 253, 0.3) !important;
  min-width: 32px !important;
  text-align: center !important;
}

.market-slider .rc-tooltip-arrow {
  border-top-color: #2AACFD !important;
}

.market-slider .rc-tooltip-arrow:after {
  border-top-color: #2AACFD !important;
}

/* Market Spider Chart Container */
#market-spider-chart {
  background-color: #FFFFFF !important;
}

/* Force spider chart trace colors to override any browser defaults */
#market-spider-chart .js-plotly-plot .scatterpolar path {
  stroke: white !important;  /* Ensure white strokes for better visibility */
  stroke-width: 1.5px !important;  /* Consistent stroke width */
  fill: inherit !important;
  fill-opacity: inherit !important;  /* Respect opacity settings from Plotly */
}

/* Special styling for the selected instance (first trace) */
#market-spider-chart .js-plotly-plot .trace:first-child .scatterpolar path {
  stroke-width: 2px !important;  /* Thicker stroke for selected instance */
}

#market-spider-chart .js-plotly-plot .legendtext {
  fill: #2C3E50 !important;
}

/* Market Scatter Plot Container */
#market-scatter-plot {
  background-color: #FFFFFF !important;
}

/* Market Table Specific Styling */
#market-instance-table {
  font-family: 'Poppins', sans-serif !important;
}

#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table th {
  background-color: #2AACFD !important;
  color: white !important;
  font-weight: 600 !important;
  padding: 10px 8px !important;
  border: none !important;
  text-align: center !important;
  font-size: 11px !important;
}

#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table td {
  padding: 8px !important;
  border-bottom: 1px solid #E0E0E0 !important;
  border-right: 1px solid #E0E0E0 !important;
  text-align: center !important;
  font-size: 12px !important;
  vertical-align: middle !important;
}

/* Market Table Row Styling */
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tr:nth-child(even) td {
  background-color: #F8F9FA !important;
}

#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tr:hover td {
  background-color: #E3F2FD !important;
}

/* Market Table Selected Rows */
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tr.row-selected td {
  background-color: #C8E9FE !important;
  border-color: #2AACFD !important;
}

/* Market Export Button */
#export-market-button {
  background-color: #2AACFD !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  color: white !important;
  transition: all 0.3s ease !important;
}

#export-market-button:hover {
  background-color: #083D5E !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(8, 61, 94, 0.3) !important;
}

#export-market-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(8, 61, 94, 0.2) !important;
}

/* Market Page Responsive Design */
@media (max-width: 768px) {
  .market-slider .rc-slider-mark-text {
    font-size: 10px !important;
  }
  
  #market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table th,
  #market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table td {
    font-size: 10px !important;
    padding: 6px 4px !important;
  }
  
  #export-market-button {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
}

/* Market Page Card Headers - UPDATED: Remove border bottom */
.market-card-header {
  background-color: #F5F5F5 !important;
  color: #7B7B7B !important;
  border-radius: 8px 8px 0 0 !important;
  border-bottom: none !important;
  padding: 8px 16px !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  margin: 0px !important;
}

/* ADDED: Remove border from card header specifically for table card */
#market-instance-table-card .card-header {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Market Page Number Selector Container */
.market-number-selector {
  background-color: #F8F9FA !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin: 0 auto !important;
  max-width: 500px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Market Table - Selected Instance Row Styling */
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tbody tr:first-child td {
  color: #2AACFD !important;
  font-weight: 600 !important;
}

/* Market Table Row Selection Checkbox Styling */
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table .row-selectable {
  cursor: pointer !important;
}



/* ADDED: Hide the three dots (action menu) - SIMPLIFIED AGGRESSIVE APPROACH */
/* Hide any element that might be the 3 dots menu */
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td:not(.dash-select-cell) > *:not(.dash-cell-value) {
  display: none !important;
}

/* Hide all button-like elements in table */
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner button,
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .btn,
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dropdown-toggle {
  display: none !important;
}

/* Hide elements with specific content patterns */
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner *[title*="more"],
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner *[title*="menu"],
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner *[title*="action"] {
  display: none !important;
}

/* Hide any clickable icons or symbols that might be the dots */
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .fa,
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .icon,
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .glyphicon {
  display: none !important;
}

/* Hide elements with specific aria labels */
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner *[aria-label*="more"],
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner *[aria-label*="menu"],
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner *[role="button"]:not(input) {
  display: none !important;
}

/* Brute force: hide common dot characters */
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner *:before,
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner *:after {
  display: none !important;
}

/* Reduce spacing above table */
#market-instance-table .dash-table-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Market Table Bottom Section */
.market-table-bottom {
  margin-top: 15px !important;
  padding-top: 10px !important;
  border-top: 1px solid #E0E0E0 !important;
}

/* Market Table Container - Reduce spacing */
#market-instance-table {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Product columns specific styling for longer text */
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table td[data-dash-column="window_product"],
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table td[data-dash-column="roof_product"],
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table td[data-dash-column="wall_product"] {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow: visible !important;
  text-overflow: unset !important;
  min-width: 180px !important;
  max-width: 250px !important;
  line-height: 1.4 !important;
  padding: 12px 8px !important;
}

/* Product column headers */
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table th[data-dash-column="window_product"],
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table th[data-dash-column="roof_product"],
#market-instance-table .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table th[data-dash-column="wall_product"] {
  min-width: 180px !important;
  max-width: 250px !important;
}

/* ======================================================================= */
/* END OF MARKET PAGE SPECIFIC STYLES */
/* ======================================================================= */


/* Specifically target the left column with title and filter chips */
#instance-table-card .card-header .row .col:first-child {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  height: 36px !important;
  overflow: hidden !important;
}

/* Make sure the Instance Table title doesn't add extra height */
#instance-table-card .card-header h5 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
}

/* Make sure the right column (buttons + search + pagination) aligns to top */
#instance-table-card .card-header .row .col:last-child {
  align-items: flex-start !important;
  justify-content: flex-end !important;
  height: 36px !important;
  align-self: flex-start !important;
}

/* Search Toggle Button - SVG Icon Design */
.search-toggle-button {
  background-color: #D9D9D9 !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
}

.search-toggle-button:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-image: url('/assets/icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(1); /* SVG ikonunu biraz koyulaştırır */
}

/* Hover effect */
.search-toggle-button:hover {
  background-color: #C0C0C0 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.search-toggle-button:hover:before {
  filter: brightness(1); /* Hover'da ikon daha koyu olur */
}

/* Active/clicked state */
.search-toggle-button:active {
  transform: scale(0.95) !important;
}

/* When search is open - different color */
.search-toggle-button.search-open {
  background-color: #2AACFD !important;
}

.search-toggle-button.search-open:before {
  filter: brightness(0) invert(1); /* Açık durumda beyaz ikon */
}

.search-toggle-button.search-open:hover {
  background-color: #1A8CD8 !important;
}

.search-toggle-button.search-open:hover:before {
  filter: brightness(0) invert(1); /* Hover'da da beyaz kalır */
}

/* Optimized page için de aynı stiller */
#opt-search-toggle-button {
  background-color: #D9D9D9 !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
}

#opt-search-toggle-button:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-image: url('/assets/icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(1);
}

#opt-search-toggle-button:hover {
  background-color: #C0C0C0 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

#opt-search-toggle-button:hover:before {
  filter: brightness(1);
}

#opt-search-toggle-button:active {
  transform: scale(0.95) !important;
}

#opt-search-toggle-button.search-open {
  background-color: #2AACFD !important;
}

#opt-search-toggle-button.search-open:before {
  filter: brightness(0) invert(1);
}

#opt-search-toggle-button.search-open:hover {
  background-color: #1A8CD8 !important;
}

#opt-search-toggle-button.search-open:hover:before {
  filter: brightness(0) invert(1);
}

/* Sort dropdown için daha düşük z-index - normal aşağı açılım */
.sort-and-search-container .dash-dropdown {
  position: relative !important;
  z-index: 1500 !important;  /* 5000'den düşürdük */
}

.sort-and-search-container .dash-dropdown .Select-menu-outer {
  position: absolute !important;
  top: 100% !important;  /* Normal aşağı açılım */
  left: 0 !important;
  right: 0 !important;
  z-index: 1501 !important;  /* 5001'den düşürdük */
  background: white !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  max-height: 150px !important;
  overflow-y: auto !important;
  margin-top: 2px !important;
}

/* Main instance dropdown'ını en üstte tut */
.enhanced-dropdown-container {
  z-index: 2000 !important;
}

.enhanced-dropdown-menu {
  z-index: 2001 !important;
}

/* Warning overlay'i en altta tut */
.warning-overlay {
  z-index: 999 !important;
  top: calc(100% + 100px) !important;
}

/* =================================================
   RESPONSIVE INSTANCE SELECTION CARD
   ================================================= */

/* Ana kart için responsive breakpoint'ler */
@media (max-width: 1200px) {
  .chosen-instance-card {
      margin-bottom: 1rem;
  }
  
  /* Dropdown container genişlik ayarı */
  .enhanced-dropdown-container {
      min-width: 100% !important;
      max-width: 100% !important;
  }
  
  /* Virtual dropdown trigger responsive */
  .main-instance-dropdown-enhanced {
      min-height: 44px !important;
      font-size: 14px !important;
      padding: 10px 14px !important;
  }
  
  /* Virtual scroll container boyut ayarı */
  #virtual-scroll-container,
  #opt-virtual-scroll-container {
      height: 280px !important;
      max-height: 280px !important;
      min-height: 280px !important;
  }
}

@media (max-width: 992px) {
  /* Tablet ve küçük ekranlar için */
  .main-instance-dropdown-enhanced {
      font-size: 13px !important;
      min-height: 40px !important;
      padding: 8px 12px !important;
  }
  
  /* Sort ve search container'ı dikey yerleşim */
  .sort-and-search-container {
      flex-direction: column !important;
      gap: 8px !important;
      align-items: stretch !important;
  }
  
  .sort-and-search-container .col-7 {
      width: 100% !important;
      flex: none !important;
  }
  
  .sort-and-search-container .col-auto {
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
  }
  
  /* Search toggle button ortalama */
  #search-toggle-button,
  #opt-search-toggle-button {
      width: 36px !important;
      height: 36px !important;
      font-size: 14px !important;
  }
  
  /* Sort order section */
  .sort-order-section {
      margin: 6px 8px !important;
  }
  
  .sort-order-section label {
      font-size: 12px !important;
  }
  
  .sort-order-section .form-check {
      font-size: 12px !important;
  }
}

@media (max-width: 768px) {
  /* Mobil cihazlar için */
  .main-instance-dropdown-enhanced {
      font-size: 12px !important;
      min-height: 38px !important;
      padding: 6px 10px !important;
  }
  
  /* Virtual scroll container daha küçük */
  #virtual-scroll-container,
  #opt-virtual-scroll-container {
      height: 240px !important;
      max-height: 240px !important;
      min-height: 240px !important;
  }
  
  /* Dropdown item'lar daha küçük */
  .virtual-dropdown-item {
      height: 32px !important;
      min-height: 32px !important;
      max-height: 32px !important;
  }
  
  .option-label {
      font-size: 12px !important;
      padding: 6px 10px !important;
  }
  
  .option-checkbox {
      padding: 0 8px !important;
  }
  
  /* Search input */
  .search-input-container input {
      font-size: 12px !important;
      padding: 6px 10px !important;
  }
  
  /* Parameters section */
  .parameter-name {
      font-size: 11px !important;
  }
  
  .parameter-value-text {
      font-size: 11px !important;
  }
  
  .min-max-value {
      font-size: 9px !important;
  }
}

@media (max-width: 576px) {
  /* Çok küçük ekranlar için */
  .chosen-instance-card .card-body {
      padding: 8px 12px !important;
  }
  
  .main-instance-dropdown-enhanced {
      font-size: 11px !important;
      min-height: 36px !important;
      padding: 5px 8px !important;
      border-radius: 8px !important;
  }
  
  /* Sort dropdown daha küçük */
  .sort-by-blue-dropdown .Select__control {
      min-height: 32px !important;
      font-size: 11px !important;
  }
  
  /* Virtual scroll daha kompakt */
  #virtual-scroll-container,
  #opt-virtual-scroll-container {
      height: 200px !important;
      max-height: 200px !important;
      min-height: 200px !important;
  }
  
  .virtual-dropdown-item {
      height: 28px !important;
      min-height: 28px !important;
      max-height: 28px !important;
  }
  
  /* Search toggle button küçült */
  #search-toggle-button,
  #opt-search-toggle-button {
      width: 32px !important;
      height: 32px !important;
      font-size: 12px !important;
  }
  
  /* Parameters daha kompakt */
  .parameter-name {
      font-size: 10px !important;
      margin-bottom: 1px !important;
  }
  
  .parameter-value-text {
      font-size: 10px !important;
  }
  
  .progress-bar-container {
      height: 6px !important;
      max-width: 80px !important;
  }
  
  .min-max-value {
      font-size: 8px !important;
      min-width: 20px !important;
  }
}

/* =================================================
 GRID SYSTEM RESPONSIVE AYARLARI
 ================================================= */

/* Ana row responsive breakpoint'leri */
@media (max-width: 1400px) {
  .mb-4.align-items-stretch .col-3 {
      min-width: 280px;
  }
}

@media (max-width: 1200px) {
  .mb-4.align-items-stretch .col-3 {
      flex: 0 0 25%;
      max-width: 25%;
      min-width: 250px;
  }
}

@media (max-width: 992px) {
  .mb-4.align-items-stretch .col-3 {
      flex: 0 0 100%;
      max-width: 100%;
      min-width: auto;
      margin-bottom: 1rem;
  }
  
  .mb-4.align-items-stretch .col-9 {
      flex: 0 0 100%;
      max-width: 100%;
  }
}

/* =================================================
 WARNING OVERLAY RESPONSIVE
 ================================================= */

@media (max-width: 768px) {
  .warning-overlay {
      font-size: 12px !important;
      padding: 8px 12px !important;
      min-height: 36px !important;
  }
  
  .warning-icon {
      font-size: 14px !important;
      margin-right: 6px !important;
  }
  
  .warning-text-line {
      font-size: 12px !important;
      line-height: 14px !important;
  }
}

@media (max-width: 576px) {
  .warning-overlay {
      font-size: 11px !important;
      padding: 6px 10px !important;
      min-height: 32px !important;
  }
  
  .warning-text-line {
      font-size: 11px !important;
      line-height: 12px !important;
      white-space: normal !important;
  }
}

/* =================================================
 UTILITY CLASSES
 ================================================= */

/* Flex container'lar için responsive yardımcı class'lar */
.flex-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .flex-responsive {
      flex-direction: column;
      gap: 0.25rem;
  }
}

/* Text responsive classes */
.text-responsive-sm {
  font-size: 14px;
}

@media (max-width: 768px) {
  .text-responsive-sm {
      font-size: 12px;
  }
}

@media (max-width: 576px) {
  .text-responsive-sm {
      font-size: 11px;
  }
}

/* =================================================
 CUSTOM SCROLLBAR RESPONSIVE
 ================================================= */

@media (max-width: 768px) {
  #virtual-scroll-container::-webkit-scrollbar,
  #opt-virtual-scroll-container::-webkit-scrollbar {
      width: 4px;
  }
  
  #virtual-scroll-container::-webkit-scrollbar-thumb,
  #opt-virtual-scroll-container::-webkit-scrollbar-thumb {
      background-color: #2AACFD;
      border-radius: 2px;
  }
}