:root{
      --primary-blue:#1578be;
      --secondary-blue:#04407c;
      --accent-red:#d40000;
      --dark-black:#0b1220;
      --card:#ffffff;
      --muted: rgba(11,18,32,.70);
      --border: rgba(15,23,42,.10);
      --shadow: 0 14px 40px rgba(15,23,42,.12);
      --shadow2: 0 20px 60px rgba(15,23,42,.16);
      --radius: 18px;

      --sticky-tabs-top: 110px; /* will be overwritten by JS based on details header height */
    }

    .kesco-wrap{
      position: relative;
      background:
        radial-gradient(1100px 600px at 10% 10%, rgba(21,120,190,.10), transparent 60%),
        radial-gradient(900px 520px at 90% 20%, rgba(212,0,0,.08), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
      padding: 26px 0 90px;
    }

    .kesco-header{
      border-radius: 22px;
      padding: 18px 18px;
      background: linear-gradient(135deg, rgba(21,120,190,.10), rgba(212,0,0,.06), #ffffff);
      border: 1px solid rgba(0,0,0,.08);
      box-shadow: 0 12px 30px rgba(0,0,0,.06);
      position: relative;
      overflow: hidden;
    }
    .kesco-header::after{
      content:"";
      position:absolute; top:0; left:0; right:0;
      height:4px;
      background: linear-gradient(90deg, var(--primary-blue), var(--accent-red), #000);
      opacity:.95;
    }
    .kesco-title{ font-weight: 900; letter-spacing: -.02em; margin: 0; color: #0b1f3a; }
    .kesco-sub{ margin: 6px 0 0; color: rgba(0,0,0,.65); max-width: 92ch; }

    .howto{
      margin-top: 12px;
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,.08);
      background: rgba(255,255,255,.92);
      box-shadow: 0 10px 26px rgba(0,0,0,.06);
      padding: 12px 14px;
    }
    .howto .k{ font-weight: 900; color: var(--secondary-blue); }
    .howto li{ margin: 4px 0; color: rgba(0,0,0,.70); }

    .kesco-card{
      background: #fff;
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 20px;
      box-shadow: 0 12px 30px rgba(0,0,0,.06);
      overflow: hidden;
    }
    .kesco-card-head{
      padding: 14px 16px;
      border-bottom: 1px solid rgba(0,0,0,.08);
      background:
        radial-gradient(800px 240px at 12% 0%, rgba(21,120,190,.14), transparent 55%),
        radial-gradient(800px 240px at 88% 0%, rgba(212,0,0,.10), transparent 55%),
        linear-gradient(135deg, rgba(21,120,190,.08), rgba(212,0,0,.06), #ffffff);
    }
    .kesco-card-head .h6{ margin: 0; font-weight: 900; color: var(--secondary-blue); }

    .kesco-search{ display:flex; gap: 10px; flex-wrap: wrap; align-items: center; }
    .kesco-search .form-control, .kesco-search .form-select{
      border-radius: 14px; border: 1px solid rgba(0,0,0,.12);
      padding: .7rem .85rem; box-shadow: none !important;
    }
    .kesco-search .btn{ border-radius: 14px; font-weight: 900; }
    .btn-brand{
      border: none; color: #fff;
      background: linear-gradient(135deg, var(--primary-blue), var(--accent-red));
      box-shadow: 0 10px 24px rgba(21,120,190,.18);
    }
    .btn-brand:hover{ filter: brightness(1.06); }
    .btn-soft{
      border-radius: 14px;
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(0,0,0,.02);
      font-weight: 900;
      color: rgba(0,0,0,.85);
    }
    .btn-soft:hover{ background: rgba(0,0,0,.04); }

    .tree-shell{
      height: 100vh;
      min-height: 520px;
      overflow: auto;
      padding: 10px;
      background:
        radial-gradient(900px 360px at 8% 14%, rgba(21,120,190,.07), transparent 58%),
        radial-gradient(900px 360px at 92% 80%, rgba(212,0,0,.06), transparent 60%),
        #fff;
    }
    .details-shell{
      height: 100vh;
      min-height: 520px;
      overflow: auto;
      background:
        radial-gradient(900px 360px at 6% 14%, rgba(21,120,190,.07), transparent 58%),
        radial-gradient(900px 360px at 92% 80%, rgba(212,0,0,.06), transparent 60%),
        #fff;
      position: relative;
    }

    @media (max-width: 991.98px){
      .tree-shell{ height: 54vh; min-height: 380px; }
      .details-shell{ height: auto; min-height: unset; }
    }

    .tree-node{ margin: 2px 0; }
    .node-row{
      display:flex; align-items:center; gap: 8px;
      padding: 10px 10px; border-radius: 14px; border: 1px solid transparent;
      cursor: pointer; user-select: none;
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    .node-row:hover{
      background: rgba(21,120,190,.06);
      border-color: rgba(21,120,190,.18);
      box-shadow: 0 12px 24px rgba(0,0,0,.06);
      transform: translateY(-1px);
    }
    .node-row.active{
      background: linear-gradient(135deg, rgba(21,120,190,.12), rgba(212,0,0,.06));
      border-color: rgba(21,120,190,.28);
      box-shadow: 0 14px 30px rgba(21,120,190,.10);
    }

    .node-toggle{
      width: 30px; height: 30px;
      border-radius: 10px;
      border: 1px solid rgba(0,0,0,.10);
      display:grid; place-items:center;
      background: #fff;
      color: var(--secondary-blue);
      flex: 0 0 auto;
    }
    .node-toggle.loading{ position: relative; color: transparent; }
    .node-toggle.loading::after{
      content:""; width: 14px; height: 14px; border-radius: 50%;
      border: 2px solid rgba(0,0,0,.18);
      border-top-color: var(--primary-blue);
      animation: spin .8s linear infinite;
      position: absolute;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .node-code{ font-weight: 900; color: #000; min-width: 70px; font-size: .92rem; }
    .node-name{ font-weight: 800; color: rgba(0,0,0,.88); line-height: 1.25; flex: 1; }
    .node-pill{
      font-size: .75rem; font-weight: 900; padding: .25rem .55rem;
      border-radius: 999px; border: 1px solid rgba(0,0,0,.10);
      background: rgba(0,0,0,.02); color: rgba(0,0,0,.70);
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .node-pill.count{
      background: rgba(21,120,190,.10);
      border-color: rgba(21,120,190,.18);
    }

    .node-children{ margin-left: 18px; padding-left: 10px; border-left: 2px dashed rgba(0,0,0,.10); display:none; }

    .node-compare{
      flex: 0 0 auto;
      display:flex;
      align-items:center;
      gap:6px;
      padding-left: 6px;
    }
    .node-compare label{
      font-size:.78rem;
      font-weight: 900;
      color: rgba(0,0,0,.70);
      cursor: pointer;
      user-select: none;
    }

    .details-top{
      padding: 16px 16px 12px;
      border-bottom: 1px solid rgba(0,0,0,.08);
      background: linear-gradient(135deg, rgba(21,120,190,.08), rgba(212,0,0,.05), #ffffff);
      position: sticky;
      top: 0;
      z-index: 50;
    }
    .crumbs{
      font-size: .85rem; color: rgba(0,0,0,.62);
      display:flex; flex-wrap: wrap; gap: 6px; align-items:center;
    }
    .crumbs .c{
      display:inline-flex; gap: 6px; align-items:center;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(0,0,0,.02);
      padding: 4px 8px;
      border-radius: 999px;
      font-weight: 800;
    }
    .crumbs .sep{ opacity:.5; }

    .detail-title{ margin-top: 10px; font-weight: 900; letter-spacing: -.02em; color: #0b1f3a; }

    .insights{
      display:flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .tab-wrap{ padding: 12px 16px 16px; position: relative; z-index: 1; }
    .nav-pills{
      position: sticky;
      top: var(--sticky-tabs-top);
      z-index: 30;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(8px);
      padding: 8px 0;
      margin-bottom: 10px !important;
      border-bottom: 1px solid rgba(0,0,0,.06);
    }
    @media (max-width: 991.98px){
      .nav-pills{ top: 0; }
    }

    .nav-pills .nav-link{
      border-radius: 999px;
      font-weight: 900;
      border: 1px solid rgba(0,0,0,.10);
      color: rgba(0,0,0,.75);
      background: rgba(0,0,0,.02);
      margin-right: 6px;
      white-space: nowrap;
    }
    .nav-pills .nav-link.active{
      background: linear-gradient(135deg, rgba(21,120,190,.18), rgba(212,0,0,.10));
      border-color: rgba(21,120,190,.26);
      color: #0b1f3a;
      box-shadow: 0 10px 22px rgba(21,120,190,.10);
    }

    .field-label{ font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: rgba(0,0,0,.55); margin-bottom: 6px; }
    .field-box{
      border-radius: 16px; border: 1px solid rgba(0,0,0,.10); background: #fff;
      padding: 12px 12px; box-shadow: 0 10px 24px rgba(0,0,0,.05);
      white-space: pre-wrap; color: rgba(0,0,0,.80); line-height: 1.55;
    }
    .muted{ color: rgba(0,0,0,.62); }

    .mini-item{
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 16px;
      padding: 10px 12px;
      background: #fff;
      box-shadow: 0 10px 22px rgba(0,0,0,.05);
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .mini-item:hover{
      transform: translateY(-1px);
      border-color: rgba(21,120,190,.22);
      box-shadow: 0 16px 34px rgba(0,0,0,.08);
    }
    .compare-badge{
      display:inline-flex; align-items:center; gap:8px;
      border-radius:999px;
      padding:.28rem .65rem;
      font-weight:900;
      font-size:.78rem;
      border:1px solid rgba(0,0,0,.12);
      background: rgba(21,120,190,.08);
      color: rgba(0,0,0,.75);
      margin-top: 6px;
    }

    .compare-bar{
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 1050;
      padding: 10px 12px;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(10px);
      border-top: 1px solid rgba(0,0,0,.10);
      box-shadow: 0 -14px 30px rgba(0,0,0,.10);
      display: none;
    }
    .compare-bar-inner{
      max-width: 1200px;
      margin: 0 auto;
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .compare-chips{
      display:flex; gap: 8px; flex-wrap: wrap; align-items:center;
      min-width: 260px; flex: 1;
    }
    .cchip{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      border-radius: 999px;
      padding: .35rem .65rem;
      border: 1px solid rgba(0,0,0,.12);
      background: rgba(0,0,0,.02);
      font-weight: 900;
      font-size: .80rem;
    }
    .cchip .x{ cursor:pointer; opacity:.75; }
    .cchip .x:hover{ opacity:1; }

    .search-panel{
      position:absolute;
      z-index:50;
      width:min(720px, 92vw);
      margin-top:8px;
      border-radius:16px;
      border:1px solid rgba(0,0,0,.10);
      background:#fff;
      box-shadow:0 24px 60px rgba(0,0,0,.18);
      overflow:hidden;
      display:none;
    }
    .search-item{ padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.06); cursor:pointer; }
    .search-item:hover{ background: rgba(21,120,190,.06); }

    .saved-panel{
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 16px;
      background: rgba(255,255,255,.92);
      box-shadow: 0 10px 22px rgba(0,0,0,.05);
      padding: 10px 12px;
      margin-top: 12px;
    }
    .saved-item{
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.08);
      background: #fff;
      cursor: pointer;
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 8px;
    }
    .saved-item:hover{ border-color: rgba(21,120,190,.22); }
    .saved-item small{ color: rgba(0,0,0,.60); }
    /* Ensure the right panel is a proper stacking/scroll context */
.details-shell{
  position: relative;
}

/* Keep the top section visible and above tab content */
.details-top{
  position: sticky;   /* <-- key */
  top: 0;
  z-index: 50;        /* <-- key */
  background: #fff;   /* or use your card background var */
  padding-bottom: .75rem;
  margin-bottom: .75rem;

  /* optional: visual separation */
  border-bottom: 1px solid rgba(15,23,42,.10);
}

/* Prevent any tab pane content from sliding behind sticky header */
.tab-wrap{
  position: relative;
  z-index: 1;
}

/* If you have any overflow scrolling inside, keep it sane */
.kesco-card{
  overflow: hidden;
}
.details-shell{
  max-height: calc(100vh - 140px); /* adjust based on your header/navbar */
  overflow: auto;
  padding-right: 2px; /* avoids scrollbar overlay on some browsers */
}

/* =========================
   Premium tabs header
   (single rail, not "badges")
   ========================= */

.tabs-rail{
  position: sticky; /* stays nice when scrolling inside details */
  top: var(--sticky-tabs-top, 140px);
  z-index: 5;

  margin-top: 10px;
  padding: 10px;

  border-radius: 18px;
  background: linear-gradient(135deg,
    rgba(255,255,255,.72),
    rgba(255,255,255,.52)
  );
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 34px rgba(2,10,28,.10);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* subtle fade edges for horizontal scroll */
.tabs-rail::before,
.tabs-rail::after{
  content:"";
  position:absolute;
  top: 10px;
  bottom: 10px;
  width: 26px;
  pointer-events:none;
  border-radius: 14px;
}
.tabs-rail::before{
  left: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,0));
}
.tabs-rail::after{
  right: 10px;
  background: linear-gradient(270deg, rgba(255,255,255,.92), rgba(255,255,255,0));
}

.tabs-pro{
  flex-wrap: nowrap !important;
  gap: 6px !important;

  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px;

  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.tabs-pro::-webkit-scrollbar{ height: 8px; }
.tabs-pro::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.14);
  border-radius: 999px;
}

/* make Bootstrap pills look like a segmented control */
.tabs-pro .nav-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  border-radius: 14px !important;
  border: 1px solid transparent;

  padding: 10px 12px;
  line-height: 1;
  font-weight: 900;
  font-size: .92rem;

  color: rgba(11,18,32,.78);
  background: transparent;

  transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
  white-space: nowrap;
}

.tabs-pro .nav-link i{
  opacity: .85;
  font-size: .95rem;
}

.tabs-pro .nav-link:hover{
  background: rgba(21,120,190,.08);
  border-color: rgba(21,120,190,.18);
  transform: translateY(-1px);
}

.tabs-pro .nav-link:focus-visible{
  outline: none;
  box-shadow: var(--ring, 0 0 0 4px rgba(21,120,190,.18));
}

/* Active: premium selected state */
.tabs-pro .nav-link.active{
  color: var(--blue2, #04407c);
  background: linear-gradient(135deg,
    rgba(21,120,190,.16),
    rgba(212,0,0,.08),
    rgba(255,255,255,.86)
  );
  border-color: rgba(21,120,190,.22);
  box-shadow:
    0 10px 22px rgba(2,10,28,.10),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* optional small pill inside a tab (not a separate badge/card look) */
.tabs-pro .tab-pill{
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;

  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .2px;

  color: rgba(11,18,32,.72);
  background: rgba(15,23,42,.08);
  border: 1px solid rgba(15,23,42,.10);
}

/* make the pill nicer on active tab */
.tabs-pro .nav-link.active .tab-pill{
  background: rgba(21,120,190,.16);
  border-color: rgba(21,120,190,.20);
  color: rgba(4,64,124,.95);
}

/* mobile tuning */
@media (max-width: 576px){
  .tabs-rail{ padding: 8px; border-radius: 16px; }
  .tabs-pro .nav-link{ padding: 9px 10px; font-size: .9rem; }
  .tabs-pro .nav-link i{ display:none; } /* optional: cleaner on very small screens */
}

/* =====================================================
   Equal heights: left tree-shell == right details-shell
   ===================================================== */

/* Make the two columns stretch to same height */
.kesco-wrap .row.g-4{
  align-items: stretch;
}

/* Make both cards fill the column height */
.kesco-wrap .col-lg-6 > .kesco-card{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0; /* important for nested scroll areas */
}

/* LEFT: card head stays natural height, tree-shell fills remaining */
.kesco-wrap .kesco-card .kesco-card-head{
  flex: 0 0 auto;
}

.kesco-wrap .kesco-card .tree-shell{
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important; /* in case you had a fixed height somewhere */
}

/* RIGHT: details-shell fills remaining and becomes a flex column */
.kesco-wrap .kesco-card .details-shell{
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  display: flex;
  flex-direction: column;
}

/* Make the tab area take remaining height, and the content scroll */
.kesco-wrap .kesco-card .tab-wrap{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* If your tabs header is sticky, it remains visible while content scrolls */
.kesco-wrap .kesco-card .tab-content{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-top: 8px; /* small breathing room under tabs */
}

/* Optional: keep the top detail header fixed (you already compute sticky offsets) */
.kesco-wrap .kesco-card .details-top{
  flex: 0 0 auto;
}
.kesco-wrap .row.g-4 { align-items: stretch; }

/* Make BOTH cards equal height and flex columns */
.kesco-wrap .col-lg-6 > .kesco-card{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Right side: details-shell must fill the card */
.kesco-wrap #detailsShell{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Keep header natural height */
.kesco-wrap #detailsTop{
  flex: 0 0 auto;
}

/* tab-wrap must take ALL remaining space */
.kesco-wrap #detailsShell .tab-wrap{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* tabs rail stays natural height */
.kesco-wrap #detailsShell .tab-wrap .tabs-rail{
  flex: 0 0 auto;
}

/* ✅ THIS makes tab-content big: it fills remaining height and scrolls */
.kesco-wrap #detailsShell .tab-wrap .tab-content{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;

  /* make it feel roomy */
  padding: 12px 6px 10px;
}

/* If any parent was forcing overflow/height, neutralize it */
.kesco-wrap #detailsShell,
.kesco-wrap .kesco-card{
  overflow: visible;   /* important: don't let parent steal scroll */
}

/* optional: make each pane stretch nicely */
.kesco-wrap #detailsShell .tab-pane{
  height: 100%;
}
/* =========================================================
   FINAL RIGHT PANEL LAYOUT (make tab-content BIG)
   Scroll ONLY inside .tab-content
   ========================================================= */

.kesco-wrap .row.g-4{ align-items: stretch; }

.kesco-wrap .col-lg-6 > .kesco-card{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible; /* don't clip sticky areas */
}

/* Keep LEFT tree as you already have it (scrolls fine) */
.kesco-wrap .tree-shell{
  flex: 1 1 auto;
  min-height: 0;
}

/* RIGHT card internal layout */
.kesco-wrap #detailsShell{
  /*  no fixed height and no scrolling here */
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;

  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* top section stays sticky within the card context */
.kesco-wrap #detailsTop{
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* tab-wrap takes remaining space */
.kesco-wrap #detailsShell .tab-wrap{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* tabs header stays natural height */
.kesco-wrap #detailsShell .tab-wrap .tabs-rail{
  flex: 0 0 auto;
  position: sticky;
  top: var(--sticky-tabs-top);
  z-index: 40;
}

/*  tab-content becomes the BIG scroll region */
.kesco-wrap #detailsShell .tab-wrap .tab-content{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;

  padding: 12px 6px 12px;
}

/* Mobile: allow natural stacking (no weird constraints) */
@media (max-width: 991.98px){
  .kesco-wrap #detailsShell{
    overflow: visible !important;
  }
  .kesco-wrap #detailsShell .tab-wrap .tab-content{
    max-height: none;
  }
}