:root {
    --bg: #ffffff;
    --bg-secondary: #f5f5f4;
    --bg-hover: #f0efed;
    --text-primary: #1c1c1b;
    --text-secondary: #6b6b68;
    --text-tertiary: #9d9d99;
    --border: rgba(0,0,0,0.10);
    --border-hover: rgba(0,0,0,0.18);
    /* --accent: #534AB7; */
    --accent-bg: #EEEDFE;
    --accent-dot: #fe6407;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --sidebar-width: 272px;
    --font: 'DM Sans', sans-serif;
  }

  .position-relative {
    position: relative !important;
}
.nav-pills {
    --bs-nav-pills-border-radius: 0.25rem;
    --bs-nav-pills-link-active-color: #ffffff;
    --bs-nav-pills-link-active-bg: var(--theme-primary);
}
.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: #7081b9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
  .custom-tabs {
            padding: 4px;
           
            position: relative;
            background: #f5f5f5;
            border-radius: 3.40282e+38px;
        }
        .waves-effect{
          display: flex;
          align-items: center;
        }
        /* Tabs */
        .custom-tabs .nav-link {
            position: relative;
            z-index: 2;
            transition: color 0.3s ease;
                padding: 0px 12px;
              
        }

        /* ACTIVE TAB TEXT */
        .custom-tabs .nav-link.active {
            color: #fff !important;
        }

        /* INDICATOR (Sliding Background) */
        .tab-indicator {
            position: absolute;
            top: 4px;
            bottom: 4px;
            left: 0;
            width: 0;
            background: #020202 !important;
            /* Bootstrap primary */
            border-radius: 3.40282e+38px;
            transition: all 0.3s ease;
            z-index: 1;
        }

        /* Default hidden state */
        .tab-pane {
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.35s ease;
        }

        /* Active tab animation */
        .tab-pane.active.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* Slide from right */
        .slide-right {
            animation: slideRight 0.35s ease;
        }

        /* Slide from left */
        .slide-left {
            animation: slideLeft 0.35s ease;
        }

        @keyframes slideRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }


/* Main container */
.select2-container--default .select2-selection--single {
    height: 40px;
       border-radius: calc(var(--radius) - -4px);
    /* border: 1px solid #ccc; */
    padding: 6px 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
}

/* Text */
.select2-selection__rendered {
    line-height: normal !important;
}

/* Arrow */
.select2-selection__arrow {
    height: 100% !important;
    right: 8px;
}

/* Dropdown */
.select2-dropdown {
    border-radius: 8px;
    border: 1px solid #ddd;
    overflow: hidden;
}

/* Search box */
.select2-search__field {
    padding: 6px;
    border-radius: 6px;
    border: 1px solid #ddd;
}

/* Options */
.select2-results__option {
    padding: 8px 12px;
    font-size: 14px;
}

/* Hover */
.select2-results__option--highlighted {
    background-color: #000;
    color: #fff;
}

/* Selected */
.select2-results__option--selected {
    background-color: #f1f1f1;
}






.sidebar {
    padding: 0px;
    overflow-y: auto;
  }

  /* ── L1 ── */
  ul.l1-list { list-style: none; }
  ul.l1-list > li.l1-item {}

  .l1-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 11px;
    cursor: pointer;
    /* color: #c9cdd8;v */
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    user-select: none;
    transition: background 0.15s;
  }
  .l1-toggle:hover { 
    background: #e7e5e5;
    color: #1c1919;
    border-radius: calc(var(--radius) - 2px);
}
  .l1-toggle .icon { display: flex; align-items: center; opacity: 0.75; }
  .l1-toggle .label { flex: 1; }
  .l1-toggle .chev { transition: transform 0.2s; opacity: 0.5; }
  .l1-item.open > .l1-toggle .chev { transform: rotate(90deg); }

  .l1-body { display: none; padding: 4px 0; }
  .l1-item.open > .l1-body { display: block; }

  /* ── L2 ── */
  ul.l2-list { list-style: none; }

  .l2-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px 7px 28px;
    cursor: pointer;
    /* color: #9ba3b8; */
    font-size: 12.5px;
    font-weight: 500;
    user-select: none;
    transition: background 0.15s, color 0.15s;
  }
  .l2-toggle:hover { 
    background: #e7e5e5;
    color: #1c1919;
    border-radius: calc(var(--radius) - 2px);
}
  .l2-toggle .icon { display: flex; align-items: center; opacity: 0.65; }
  .l2-toggle .label { flex: 1; }
  .l2-toggle .chev { transition: transform 0.2s; opacity: 0.4; }
  .l2-item.open > .l2-toggle .chev { transform: rotate(90deg); }

  .l2-body { display: none; padding: 2px 0; }
  .l2-item.open > .l2-body { display: block; }

  /* ── L3 ── */
  ul.l3-list { list-style: none; }

  .l3-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 6px 44px;
    /* color: #7b85a0; */
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
  }
  .l3-link:hover { 
    background: #e7e5e5;
    color: #1c1919;
    border-radius: calc(var(--radius) - 2px);
}
  .l3-link.active {  background: #e7e5e5;
    color: #1c1919;
    border-radius: calc(var(--radius) - 2px);}
  .l3-link .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
    flex-shrink: 0;
  }
  
  svg.chev   { width: 12px; height: 12px; }
  svg.icon-sm { width: 13px; height: 13px; }
  svg.icon-md { width: 15px; height: 15px; }