/* ---------- GENERAL LAYOUT ---------- */
  .main-sidebar,
  .left-side {
      width: 235px !important;
      background: #1f2d3d;
      border-right: none;
      box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
  }

  .content-wrapper,
  .main-footer,
  .right-side {
      margin-left: 235px !important;
  }

  .main-sidebar .sidebar {
      padding-top: 1px;
  }

  .logo-version {
      font-size: 50% !important;
      font-weight: 700;
      opacity: .8;
  }

  /* ---------- USER PANEL ---------- */
  .main-sidebar .sidebar .user-panel {
      margin: 5px 0 8px;
      /*Top-left-bottom */
      padding: 8px 10px 6px;
      background: rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(2px);
      border-radius: 6px;
  }

  .main-sidebar .sidebar .user-panel:after {
      content: "";
      display: block;
      clear: both;
  }

  .main-sidebar .sidebar .user-panel .image img {
      max-width: 48px;
      border-radius: 10px;
  }

  .main-sidebar .sidebar .user-panel .info p {
      font-size: 14px;
      font-weight: 600;
      color: #fff;
  }

  .main-sidebar .sidebar .user-panel .info .user-status {
      display: block;
      margin-top: 4px;
      font-weight: 600;
      font-size: 12px;
      line-height: 1;
      color: #c8e6c9;
  }

  .main-sidebar .sidebar .user-panel .info .user-status .fa {
      font-size: 9px;
      margin-right: 4px;
      color: #4cd964;
  }

  /* ---------- SIDEBAR MENU ---------- */
  .sidebar-menu>li>a {
      border-radius: 6px;
      margin: 2px 8px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 600;
      transition: all .2s ease;
  }

  .sidebar-menu>li>a:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
  }

  .sidebar-menu>li.active>a {
      background: #00a65a !important;
      color: #fff !important;
      border-radius: 4px;
  }

  /* ---------- TREEVIEW ---------- */
  .sidebar-menu li.treeview>a .fa-angle-left {
      transition: transform .3s;
  }

  .sidebar-menu li.treeview.menu-open>a .fa-angle-left {
      transform: rotate(-90deg);
  }

  .sidebar-menu .treeview.menu-open>a {
      background: rgba(247, 247, 247, 0.15) !important;
      color: #00a65a !important;
      border-left: 4px solid #00a65a;
      font-weight: 600;
  }

  /* Submenu */
  .sidebar-menu .treeview-menu>li>a {
      padding: 8px 20px;
      font-size: 13px;
      border-radius: 4px;
      color: #0e0f0fff;
  }

  .sidebar-menu .treeview-menu>li>a:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #00a65a !important;
  }

  /* Active submenu */
  .sidebar-menu .treeview-menu>li.active>a {
      background: rgba(247, 247, 247, 0.15) !important;
      color: #00a65a !important;
      font-weight: 700;
      border-left: 1px solid #00a65a;
  }

  .sidebar-menu .treeview-menu>li>a i {
      font-size: 12px;
      margin-right: 8px;
      opacity: .9;
  }

  /* Sub-sub menu */
  .sidebar-menu .treeview-menu .treeview-menu>li>a {
      padding-left: 35px;
      font-size: 12.5px;
  }

  /* ---------- CLOCK WIDGET ---------- */
  .sidebar-clock {
      clear: both;
      background: #243447;
      border-radius: 6px;
      margin: 10px;
      padding: 10px 12px;
      text-align: center;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
      color: #fff;
  }

  .sidebar-clock .clock-date {
      font-size: 12px;
      color: #b0bec5;
  }

  .sidebar-clock .clock-time {
      font-size: 16px;
      font-weight: 700;
      color: #4cd964;
  }

  /* ---------- COLLAPSE DESKTOP ---------- */
  .sidebar-collapse .main-sidebar,
  .sidebar-collapse .left-side {
      width: 60px !important;
  }

  .sidebar-collapse .content-wrapper,
  .sidebar-collapse .main-footer,
  .sidebar-collapse .right-side {
      margin-left: 60px !important;
  }

  /* ---------- MOBILE OPTIMIZATION ---------- */
  @media (max-width: 767px) {

      /* Header tetap satu baris */
      .main-header {
          height: 56px !important;
          min-height: 56px !important;
          display: flex;
          align-items: center;
          position: fixed;
          width: 100%;
          top: 0;
          left: 0;
          z-index: 10000;
      }

      /* Logo kiri */
      .main-header .logo {
          flex: 1;
          top: 0;
          left: 0;
          /* padding-left: 16px;
          padding-right: 16px; */
          width: 56px;
          height: 56px;
          /* z-index: 10002; */
          line-height: 56px;
          text-align: left;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 !important;
      }

      /* Navbar tidak ikut mendorong */
      .main-header .navbar {
          flex: 0;
          margin: 0;
          height: 56px;
          background: transparent;
      }

      /* logo di sebelah kiri,jika ingin kanan ganti left->center */
      .main-header .logo {
          height: 56px !important;
          line-height: 56px !important;
          display: flex !important;
          align-items: left;
          justify-content: left;
          padding-left: 15px;
          background: #00a65a;
          flex: 1;
      }

      .main-header .logo img {
          max-height: 56px;
          width: auto;
      }

      /* Sembunyikan elemen berat */
      .manual-search,
      .navbar-custom-menu {
          display: none !important;
      }

      .main-sidebar,
      .left-side {
          width: 235px !important;
          position: fixed !important;
          height: 100%;
          top: 0 !important;
          z-index: 9999;
      }

      .content-wrapper,
      .right-side,
      .main-footer {
          margin-left: 0 !important;
          width: 100% !important;
          padding-top: 1px !important;
      }

      .sidebar-open .content-wrapper {
          margin-left: 0 !important;
      }

      .main-sidebar .sidebar .user-panel {
          margin-top: 0 !important;
          padding-top: 12px !important;
      }


      /* TOGGLE MENU NEMPEL KANAN LAYAR */
      .sidebar-toggle {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          height: 56px;
          line-height: 56px;
          padding: 0 16px;
          width: 56px;
          z-index: 10001;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
      }

  }