.elementor-kit-9{--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-9 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing: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
──────────────────────────────────────────────────────────────────
 • Dark fixed sidebar – now with subtle vertical-gradient, inner
   glow and 1-px separators below every item for a cleaner,
   “dashboard-app” feel (colour remains #1e1e1e).

 • Desktop & mobile toggle buttons are back to a rectangular /
   “box” shape (12-px corner radius).  We restore the white ☰
   character; the circular bar-icon pseudo-element is removed.

 • MOBILE “MENU →” bubble:
      ▸ pops out on the LEFT of the toggle, shakes twice, hides
        inside (scale 0) and repeats.  Behaviour was not changed.
*****************************************************************/

/* 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;bottom:10%;left:0;
  width:var(--sb-open);
  /* subtle vertical gradient + inner glow */
  background:linear-gradient(#1e1e1e 0%,#222 100%);
  box-shadow:inset 0 8px 12px rgb(0 0 0 /.28);
  border-right:1px solid #111;
  padding:0px 0 32px;
  display:flex;flex-direction:column;overflow:hidden;
  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;                /* box corners */
  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}

/* remove circular pseudo-bars from previous version */
#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);       /* hidden */
    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:76px;                    /* gives breathing-room   */
  padding:0 0;                        /* flush – borders provide spacing */
  display:flex;flex-direction:column;
}
.sb-link{
  position:relative;
  display:flex;align-items:center;
  gap:18px;
  padding:14px 26px;
  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:26px;right:26px;bottom:0;
  height:1px;background:var(--divider);
  opacity:.65;
}

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

/*──────────────────────── 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;   /* desktop width (expanded)   */
    --sb-mini-d   :  90px;   /* desktop width (collapsed)  */
    --sb-top-gap  : 80px;    /* ← gap from very top        */
  }

  #sidebar{
    position:fixed;
    top:var(--sb-top-gap);   /* TOP GAP here */
    bottom:10%;              /* keep the 10 % bottom gap   */
    left:0;
    width:var(--sb-open-d);

    /* …your existing desktop-sidebar styling… */
  }

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

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

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

    /* …your existing mobile-sidebar styling… */
  }
}/* End custom CSS */