.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1500px;}.e-con{--container-max-width:1500px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//*****************************************************************
 SIDEBAR + DASHBOARD  (FULL  CSS)  •  “Box” toggle button
*****************************************************************/

/* optional font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/*──────────────────────── 1 ▸ VARIABLES ───────────────────────*/
:root{
  --sb-open : 280px;
  --sb-mini :  90px;
  --speed   : .35s cubic-bezier(.4,0,.2,1);

  /* colours (unchanged) */
  --sidebar-bg : #1e1e1e;
  --btn-bg     : #181818;
  --hover-bg   : #161616;
  --active-bg  : #1b1b1b;
  --accent1    : #4facfe;
  --accent2    : #38f9d7;
  --divider    : #2a2a2a; /* separators between items   */
}

/*──────────────────────── 2 ▸ RESET ───────────────────────────*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  overflow-x:hidden;
  font-family:'Inter',sans-serif;
  background:#0d1117;
  color:#e6e6e6;
}
body :is(.elementor-section,.elementor-container,.elementor-column,
         .elementor-widget,.elementor-widget-container){
  padding:0!important;margin:0!important;gap:0!important;
  max-width:100%!important;width:100%!important;
}

/*──────────────────────── 3 ▸ SIDEBAR ─────────────────────────*/

#sidebar{
  position:fixed;
  top:0;                      /* CHANGED: no top gap */
  bottom:0;                   /* CHANGED: no bottom gap */
  left:0;
  width:var(--sb-open);
  background:linear-gradient(#1e1e1e 0%,#222 100%);
  box-shadow:inset 0 8px 12px rgb(0 0 0 /.28);
  border-right:1px solid #111;
  padding:0 0 0;              /* CHANGED: remove bottom padding so profile sits flush */
  display:flex;flex-direction:column;
  overflow:hidden;            /* container handles scroll via .sb-links */
  z-index:10000;
  transition:transform var(--speed),width var(--speed);
}
body.sb-mini #sidebar{width:var(--sb-mini)}
@media(max-width:767px){
  #sidebar{transform:translateX(-105%)}
  body.sb-open #sidebar{transform:none}
}


/*──────────────────────── 4 ▸ TOGGLE  BUTTONS  (BOX STYLE) ────*/
#sbToggle,
#sbMobile{
  position:relative;
  border:1px solid #2c2c2c;
  border-radius:12px;
  background:var(--btn-bg);
  color:#fff;
  font-size:32px;
  line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgb(0 0 0 /.45);
}

/* sizes / placement */
#sbToggle{
  width:46px;height:46px;
  position:absolute;top:12px;right:14px;
}
#sbMobile{
  width:54px;height:54px;
  position:fixed;right:18px;bottom:18px;
  display:none;z-index:10050;
}
@media(max-width:767px){#sbMobile{display:flex}}

#sbToggle:hover,#sbMobile:hover{background:#262626}
#sbToggle::after,#sbMobile::after{content:none!important}

/*──────────────────────── 5 ▸ “MENU →”  BUBBLE  (unchanged) ───*/
@media(max-width:767px){
  #sbMobile::before{
    content:"MENU →";
    position:absolute;right:100%;margin-right:8px;
    padding:5px 16px;font-size:14px;font-weight:600;
    letter-spacing:.5px;text-transform:uppercase;
    background:var(--btn-bg);color:#fff;
    border:1px solid #2c2c2c;border-radius:18px;
    box-shadow:0 4px 10px rgb(0 0 0 /.45);
    white-space:nowrap;transform-origin:right center;
    transform:translateX(60%) scale(0);
    animation:bubbleLoop 10s ease-in-out infinite;
  }
  @keyframes bubbleLoop{
    0%,20%   {transform:translateX(60%) scale(0)}
    22%      {transform:translateX(-4%) scale(1.12)}
    25%      {transform:translateX(0)   scale(1)}
    30%      {transform:translateX(-3%) rotate(-3deg)}
    35%      {transform:translateX( 0)  rotate( 3deg)}
    41%      {transform:translateX( 0)  rotate( 0)}
    46%      {transform:translateX(-3%) rotate(-3deg)}
    51%      {transform:translateX( 0)  rotate( 3deg)}
    57%      {transform:translateX( 0)  rotate( 0)}
    62%,100% {transform:translateX(60%) scale(0)}
  }
}

/*──────────────────────── 6 ▸ SIDEBAR  LINKS ──────────────────*/
.sb-links{
  margin-top:68px;            /* CHANGED: slightly reduced top breathing-room */
  padding:0;
  display:flex;flex-direction:column;
  flex:1;                     /* NEW: fill available height */
  overflow-y:auto;            /* NEW: scroll when there are many items */
  -webkit-overflow-scrolling:touch; /* NEW: smooth mobile scroll */
  scrollbar-gutter:stable both-edges; /* nice layout on desktop */
}
.sb-link{
  position:relative;
  display:flex;align-items:center;
  gap:14px;                   /* CHANGED: reduced gap between icon & label */
  padding:12px 22px;          /* CHANGED: slightly tighter vertical & horizontal */
  font-size:18px;font-weight:500;
  color:#fff;text-decoration:none!important;cursor:pointer;
  transition:background .25s;
}
.sb-link>.icon{font-size:24px;line-height:1}

/* glowing gradient overlay on hover / active */
.sb-link::before{
  content:"";position:absolute;inset:0;border-radius:0;
  background:linear-gradient(120deg,var(--accent1),var(--accent2));
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.sb-link:hover{background:var(--hover-bg)}
.sb-link:hover::before{opacity:.17}
.sb-link.active{background:var(--active-bg)}
.sb-link.active::before{opacity:.25}

/* divider line below every item */
.sb-link:not(:last-child)::after{
  content:"";
  position:absolute;left:22px;right:22px;bottom:0; /* CHANGED: match new padding */
  height:1px;background:var(--divider);
  opacity:.65;
}

/* collapsed state – icons only */
body.sb-mini .sb-link{
  justify-content:center;padding:12px 0;gap:0;   /* CHANGED: tighter */
}
body.sb-mini .sb-link>.icon{font-size:28px}
body.sb-mini .sb-link>.lbl{display:none}

/*──────────────────────── 6.1 ▸ BOTTOM USER PROFILE (UM) ──────*/
/* Place your Ultimate Member avatar/name inside #sbProfile at end of #sidebar.
   Example markup (reference):
   <div id="sbProfile">
     <a class="um-profile-link" href="...">
       <span class="um-profile-photo"><img src="..." alt=""></span>
       <span class="um-name">John Doe</span>
     </a>
   </div>
*/
#sbProfile{
  padding:14px 16px;                /* NEW */
  border-top:1px solid var(--divider);
  background:#171717;
}
#sbProfile .um-profile-link{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:#fff;
}
#sbProfile .um-profile-photo img{
  width:36px;height:36px;object-fit:cover;border-radius:50%;
  display:block;border:1px solid #2b2b2b;
}
#sbProfile .um-name{font-weight:600;font-size:14px;opacity:.95}
#sbProfile .um-name a{color:#fff;text-decoration:none}
#sbProfile .um-name a:hover{text-decoration:underline}

/* collapsed mini mode: show only avatar, hide name */
body.sb-mini #sbProfile{padding:10px 0;display:flex;justify-content:center}
body.sb-mini #sbProfile .um-name{display:none}

/* keep profile visible on mobile while menu scrolls */
@media(max-width:767px){
  #sbProfile{position:sticky;bottom:0} /* NEW: sticks to bottom of viewport */
}

/*──────────────────────── 7 ▸ DASHBOARD  AREA ─────────────────*/
#dashboard{
  position:relative;margin-left:var(--sb-open);
  width:calc(100% - var(--sb-open));
  min-height:90vh;display:flex;flex-direction:column;
  transition:margin-left var(--speed),width var(--speed);
}
body.sb-mini #dashboard{
  margin-left:var(--sb-mini);
  width:calc(100% - var(--sb-mini));
}
@media(max-width:767px){
  #dashboard{margin:0;width:100%;height:100vh;min-height:100vh}
  #dashFrame{height:100vh}
}

/* iframe (optional) */
#dashFrame{flex:1;width:100%;height:100%;border:0;display:block}

/*────────────  DESKTOP / TABLET  (≥ 768 px)  ───────────*/
@media (min-width:768px){
  :root{
    --sb-open-d : 280px;
    --sb-mini-d :  90px;
  }

  #sidebar{
    position:fixed;
    top:0;                    /* CHANGED: remove gap */
    bottom:0;                 /* CHANGED: remove gap */
    left:0;
    width:var(--sb-open-d);
  }

  body.sb-mini #sidebar{width:var(--sb-mini-d)}
}

/*────────────  MOBILE  (≤ 767 px)  ─────────────────────*/
@media (max-width:767px){
  :root{ --sb-open-m:240px }

  #sidebar{
    position:fixed;
    top:0;                    /* no gap on mobile */
    bottom:0;
    left:0;
    width:var(--sb-open-m);
  }
}/* End custom CSS */